mam
/
mamweb
11
0
Fork 0
Code Issues Pull Requests 9 Projects Releases Wiki Activity
Browse Source

Rozhození layoutovací @media (styly na menších displejích)

pull/44/head
Jonas Havelka 9 months ago
parent
ee7771bdb3
commit
7b1e3ab58b
1 changed files with 243 additions and 262 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 505
      mamweb/static/css/layout.css

505
mamweb/static/css/layout.css
View File

@ -167,6 +167,63 @@ a.login-ref-admin {
/*******************/ /*******************/
/* stránka přes celý displej */
@media (max-width: 970px) {
div.container {
width: 100%;
}
#title {
width: 100%;
text-align: center;
}
#header {
background-size: 100%;
}
#header img.logo {
width: 100%;
}
#footer {
width: 100%;
}
}
/* malý tablet, mobil */
@media (max-width: 650px) {
.no-mobile{
display: none;
}
#hide-if-small.login-bar-flatpage {
display: none;
}
#title {
display: none;
}
#header {
width: 100%;
top: 0px;
background-image: none;
}
#header img.logo {
display: none;
}
#header img.logo-mobile {
display: block;
top: 0px;
left: 0px;
width: 100%;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
margin-bottom: 3px;
}
}
@ -257,6 +314,126 @@ ul.menu li.active>a {
ul.submenu li.active>a, .parentactive ul li:first-child>a { ul.submenu li.active>a, .parentactive ul li:first-child>a {
color: black; color: black;
} }
@media (max-width: 970px) {
ul.menu {
font-size: 90%;
margin-top: -7px;
}
ul.menu li {
margin-top: 10px; /* posunutí textu hlavního menu níže */
}
ul.submenu li {
margin-top: 0px; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
}
ul.submenu {
margin-top: 8px; /* mezera mezi hlavním menu a submenu */
}
}
@media(max-width: 800px) {
ul.menu {
font-size: 80%;
margin-top: -2px;
}
ul.menu li {
margin-top: 10px; /* posunutí textu hlavního menu níže */
}
ul.submenu li {
margin-top: 0px; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
}
ul.submenu {
margin-top: 8px; /* mezera mezi hlavním menu a submenu */
}
}
@media (max-width: 650px) {
ul.menu {
display: none;
}
ul.menu_mobile {
display: block;
z-index: 10;
position: sticky;
font-variant: small-caps;
font-size: 150%;
font-weight: bold;
list-style-type: none;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 12px;
}
ul.menu_mobile a:active,
ul.menu_mobile a:hover,
ul.menu_mobile a:focus {
text-decoration: none;
color: black;
}
ul.menu_mobile ul {
list-style-type: none;
font-size: 90%;
color: black; /*černé šipky submenu*/
}
ul.menu_mobile ul li > a {
color: black;
}
ul.menu_mobile ul li::before {
content: ' \276D '; /*https://www.w3schools.com/cssref/css_entities.asp*/
}
ul.menu_mobile br {
display: none;
}
nav.nav-button {
display: block;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 10;
}
#navbar-content {
background-color: var(--hlavni-oranzova);
}
button.navbar-button {
color: #f9d59e;
background-color: var(--hlavni-oranzova);
font-variant: small-caps;
font-size: 160%;
border-radius: 0px;
border-width: 0px;
width: 100%;
text-align: right;
}
button.navbar-button span::after {
content: ' \2261 ';
font-size: 120%;
}
li.dropdown div.submenu_mobile {
display: none;
--bs-dropdown-bg: var(--hlavni-oranzova);
}
li.dropdown div.submenu_mobile.show {
display: block;
}
} /* konec @media */
/**************/ /**************/
@ -359,6 +536,72 @@ div.odpocet {
text-align: center; text-align: center;
} }
@media(max-width: 800px){
/* titulni stranka */
.titulnistrana {
display: block;
}
.graf {
padding-top: 40px;
}
.titulnistrana_obsah {
width: 100%;
}
.vitej_titulka, .temata_titulka {
width: 49%;
padding: 10px;
display: table-cell;
}
.titulnistrana_novinky {
width: 100%;
max-width: 500px;
padding: 10px;
margin: auto;
}
#svg-graf {
width: 100%;
max-width: 500px;
padding: 10px;
margin: auto;
}
.zjistit_vic hr {
display: flex;
}
}
@media (max-width: 650px) {
.titulnistrana {
display: block;
}
.graf {
padding-top: 40px;
}
.titulnistrana_obsah {
width: 100%;
}
.vitej_titulka, .temata_titulka {
width: 100%;
padding: 10px;
display: block;
}
.titulnistrana_novinky {
width: 100%;
padding: 10px;
}
}
/*stránka organizátorů*/ /*stránka organizátorů*/
div.seznam_orgu, div.rozcestnik_temat, div.seznam_archiv { div.seznam_orgu, div.rozcestnik_temat, div.seznam_archiv {
@ -449,265 +692,3 @@ div.zadani_termin .datum {
} }
} }
/****************/ /****************/
/**********************
* Zmenšování displeje
***********************/
/* stránka přes celý displej */
@media (max-width: 970px) {
div.container {
width: 100%;
}
#title {
width: 100%;
text-align: center;
}
#header {
background-size: 100%;
}
#header img.logo {
width: 100%;
}
#footer {
width: 100%;
}
ul.menu {
font-size: 90%;
margin-top: -7px;
}
ul.menu li {
margin-top: 10px; /* posunutí textu hlavního menu níže */
}
ul.submenu li {
margin-top: 0px; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
}
ul.submenu {
margin-top: 8px; /* mezera mezi hlavním menu a submenu */
}
}
/* stránka přes celý menší displej, větší mobil, tablet */
@media(max-width: 800px){
ul.menu {
font-size: 80%;
margin-top: -2px;
}
ul.menu li {
margin-top: 10px; /* posunutí textu hlavního menu níže */
}
ul.submenu li {
margin-top: 0px; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
}
ul.submenu {
margin-top: 8px; /* mezera mezi hlavním menu a submenu */
}
/* titulni stranka */
.titulnistrana {
display: block;
}
.graf {
padding-top: 40px;
}
.titulnistrana_obsah {
width: 100%;
}
.vitej_titulka, .temata_titulka {
width: 49%;
padding: 10px;
display: table-cell;
}
.titulnistrana_novinky {
width: 100%;
max-width: 500px;
padding: 10px;
margin: auto;
}
#svg-graf {
width: 100%;
max-width: 500px;
padding: 10px;
margin: auto;
}
.zjistit_vic hr {
display: flex;
}
}
/* malý tablet, mobil */
@media (max-width: 650px) {
.no-mobile{
display: none;
}
#hide-if-small.login-bar-flatpage {
display: none;
}
#title {
display: none;
}
#header {
width: 100%;
top: 0px;
background-image: none;
}
#header img.logo {
display: none;
}
#header img.logo-mobile {
display: block;
top: 0px;
left: 0px;
width: 100%;
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
margin-bottom: 3px;
}
/* mobilní menu */
ul.menu {
display: none;
}
ul.menu_mobile {
display: block;
z-index: 10;
position: sticky;
font-variant: small-caps;
font-size: 150%;
font-weight: bold;
list-style-type: none;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 12px;
}
ul.menu_mobile a:active,
ul.menu_mobile a:hover,
ul.menu_mobile a:focus {
text-decoration: none;
color: black;
}
ul.menu_mobile ul {
list-style-type: none;
font-size: 90%;
color: black; /*černé šipky submenu*/
}
ul.menu_mobile ul li>a {
color: black;
}
ul.menu_mobile ul li::before {
content: ' \276D '; /*https://www.w3schools.com/cssref/css_entities.asp*/
}
ul.menu_mobile br {
display: none;
}
nav.nav-button {
display: block;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 10;
}
#navbar-content {
background-color: var(--hlavni-oranzova);
}
button.navbar-button {
color: #f9d59e;
background-color: var(--hlavni-oranzova);
font-variant: small-caps;
font-size: 160%;
border-radius: 0px;
border-width: 0px;
width: 100%;
text-align: right;
}
button.navbar-button span::after{
content: ' \2261 ';
font-size: 120%;
}
li.dropdown div.submenu_mobile{
display: none;
--bs-dropdown-bg: var(--hlavni-oranzova);
}
li.dropdown div.submenu_mobile.show{
display: block;
}
/* titulni stranka */
.titulnistrana {
display: block;
}
.graf {
padding-top: 40px;
}
.titulnistrana_obsah {
width: 100%;
}
.vitej_titulka, .temata_titulka {
width: 100%;
padding: 10px;
display: block;
}
.titulnistrana_novinky {
width: 100%;
padding: 10px;
}
}

Write Preview
Loading…
Cancel
Save