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

mamweb/static/css/layout.css

@@ -86,6 +86,149 @@ div.content {
 /******************/
 
 
+/**** Footer ****/
+#footer {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	background: url("../images/mozaika-footer.svg") no-repeat top center;
+	height: var(--footer-height);
+	background-size: 100%;
+	filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.4));
+	padding-top: 3.5%;
+}
+
+#footer p.license {
+	text-align: center;
+	font-weight: 400;
+	bottom: 0px;
+}
+
+#footer p.license a {
+	color: #333;
+}
+
+p.license-mobile {
+	display: none;
+	margin-bottom: 0px;
+}
+
+@media (max-width: 650px) {
+	#footer {
+		display: none;
+	}
+
+	p.license-mobile {
+		position: relative;
+		display: block;
+		font-size: 90%;
+		background-color: var(--hlavni-oranzova);
+		padding: 5%;
+		text-align: justify;
+	}
+}
+/****************/
+
+
+/**** LOGIN BAR ****/
+div.login-bar {
+	background: var(--orgovska-fialova);
+	color: var(--svetla-oranzova);
+	width: 100%;
+
+	position: fixed;
+	margin-top: calc(-1 * var(--login-bar-height));
+	min-height: var(--login-bar-height);
+	z-index: 4086;
+
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+div.login-bar div {
+	display: inline;
+}
+
+a.login-ref-admin {
+	display: inline;
+	color: var(--barva-pozadi);
+}
+
+.napis-webarum {
+	display: inline;
+	color: var(--barva-pozadi);
+	float: right;
+}
+
+.napis-webarum a {
+	color: var(--svetla-oranzova);
+	text-decoration: underline;
+}
+/*******************/
+
+
+/* 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;
+	}
+}
+
+
+
+
+
 /**** MENU ****/
 ul.menu_mobile  {
 	display: none;
@@ -171,74 +314,131 @@ 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 */
 /**************/
 
 
-/**** Footer ****/
-#footer {
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-	background: url("../images/mozaika-footer.svg") no-repeat top center;
-	height: var(--footer-height);
-	background-size: 100%;
-	filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.4));
-	padding-top: 3.5%;
-}
-
-#footer p.license {
-	text-align: center;
-	font-weight: 400;
-	bottom: 0px;
-}
-
-#footer p.license a {
-	color: #333;
-}
-
-p.license-mobile {
-	display: none;
-	margin-bottom: 0px;
-}
-/****************/
 
 
-/**** LOGIN BAR ****/
-
-div.login-bar {
-	background: var(--orgovska-fialova);
-	color: var(--svetla-oranzova);
-	width: 100%;
-
-	position: fixed;
-	margin-top: calc(-1 * var(--login-bar-height));
-	min-height: var(--login-bar-height);
-	z-index: 4086;
-
-	padding-left: 5px;
-	padding-right: 5px;
-}
-
-div.login-bar div {
-	display: inline;
-}
-
-a.login-ref-admin {
-	display: inline;
-	color: var(--barva-pozadi);
-}
-
-.napis-webarum {
-	display: inline;
-	color: var(--barva-pozadi);
-	float: right;
-}
-
-.napis-webarum a {
-	color: var(--svetla-oranzova);
-	text-decoration: underline;
-}
-/*******************/
 
 
 /**** ROZLIŠENÍ MEZI LOKÁLNÍM, TESTOVACÍM A PRODUKČNÍM WEBEM ****/
@@ -336,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 {
@@ -426,294 +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 */
-	}
-
-	a.ref-org-foto {
-		pointer-events: none;
-	}
-
-	table#reseni.form td, table#reseni.form tr {
-		display: inline-grid;
-		max-width: 300px;
-	}
-
-	/* 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;
-	}
-
-
-	/*patička mobil*/
-
-	#footer {
-		display: none;
-	}
-
-	p.license-mobile {
-		position: relative;
-		display: block;
-		font-size: 90%;
-		background-color: var(--hlavni-oranzova);
-		padding: 5%;
-		text-align: justify;
-	}
-
-	table.form td, table.form tr {
-		display: inherit;
-	}
-
-	/* 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;
-	}
-
-}
-

mamweb/static/css/modules.css

@@ -120,6 +120,10 @@ div.flip-card-foto, div.flip-card-foto img {
 	background-color: white;
 }
 
+@media(max-width: 800px) {
+	a.ref-org-foto { pointer-events: none; }
+}
+
 /* karty archiv */
 
 div.popis_rocniku {
@@ -331,6 +335,20 @@ table#reseni.form td,  table#reseni.form tr {
 	display: inline-table;
 }
 
+@media (max-width: 650px) {
+	table.form td, table.form tr {
+		display: inherit;
+	}
+}
+
+@media(max-width: 800px) {
+
+	table#reseni.form td, table#reseni.form tr {
+		display: inline-grid;
+		max-width: 300px;
+	}
+}
+
 .field-with-comment{
 	position:relative;
 }