Rozhození layoutovací @media (styly na menších displejích)
This commit is contained in:
parent
ee7771bdb3
commit
7b1e3ab58b
1 changed files with 243 additions and 262 deletions
|
|
@ -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 {
|
||||
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;
|
||||
}
|
||||
|
||||
@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ů*/
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue