Vize, jak by měly vypadat CSSka konkrétních stránek (a možná CSSka obecně)

mamweb/static/css/layout.css

@@ -460,44 +460,81 @@ body.suprodweb { &:before, &:after { background: red; } }
 /**** ZBYTEK ****/
 /* (konkrétní stránky) */
 
-/* titulni stranka */
+/* Titulní stránka */
 .titulnistrana {
 	display: flex;
 	text-align: justify;
 
+	@media(max-width: 800px){
+		display: block;
+	}
+
 	h1 { text-align: center; }
-}
 
-.zjistit_vic{
+	.TS_zjistit_vic{
 		text-align: center;
 		margin-bottom: 30px;
 
-	hr { display: none; }
-}
+		hr {
+			display: none;
 
-.graf-svg {
+			@media(max-width: 800px){
 				display: flex;
-}
+			}
+		}
+	}
 
-#svg-graf {
+	.TS_graf {
+		@media(max-width: 800px) {
+			padding-top: 40px;
+		}
+
+		.TS_graf-svg {
+			display: flex;
+
+			#svg-graf {
 				width: 100%;
 				height: auto;
 				margin: 30px;
-}
 
-.titulnistrana_obsah {
+				@media(max-width: 800px){
+					max-width: 500px;
+					padding: 10px;
+					margin: auto;
+				}
+			}
+		}
+	}
+
+	.TS_obsah {
 		width: 66%;
-}
 
-.vitej_titulka, .temata_titulka {
+		@media(max-width: 800px){
+			width: 100%;
+		}
+	}
+
+	.TS_vitej_titulka, .TS_temata_titulka {
 		width: 49%;
 		padding: 10px;
 		display: table-cell;
-}
 
-.titulnistrana_novinky {
+		@media (max-width: 650px) {
+			width: 100%;
+			display: block;
+		}
+	}
+
+	.TS_novinky {
 		width: 33%;
 		padding: 10px;
+
+		@media(max-width: 800px){
+			width: 100%;
+			max-width: 500px;
+			margin: auto;
+		}
+	}
 }
 
 .novinka {
@@ -525,96 +562,28 @@ 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;
-	}
-}
-
-/* aktuální zadání */
+/* Stránky Aktuální ročník */
 .stranka_aktualni_zadani {
 	text-align: center;
-}
 
-#azad_obrazek {
+	#AZAD_obrazek {
 		margin-top: 15px;
-}
+	}
 
-div.zadani_termin {
+	div.AZAD_termin {
 		text-align: center;
 		font-size: large;
 		font-weight: bold;
-}
 
-@media (max-width: 420px) {
-	div.zadani_termin {
+		@media (max-width: 420px) {
 			font-size: small;
 		}
-}
 
-div.zadani_termin .datum {
+		.AZAD_datum {
 			color: var(--hlavni-oranzova);
 			margin: 0;
+		}
+	}
 }
 
 #obrazek_cisla_archiv {
@@ -623,20 +592,16 @@ div.zadani_termin .datum {
 }
 
 
-/* Jak řešit */
-
+/* Stránka Jak řešit */
 .jakresit svg {
 	width: 33%;
 	padding: 10px;
 	filter: none;
-}
 
-@media(max-width: 860px) {
-	.jakresit svg {
+	@media(max-width: 860px) {
 		margin: auto;
 		display: grid;
 		width: 100%;
 		max-width: 360px;
 	}
 }
-/****************/

seminar/templates/seminar/titulnistrana/titulnistrana.html

@@ -36,9 +36,9 @@ function sousdeadline() {
 
 <div class=titulnistrana>
 
-<div class="titulnistrana_obsah">
+<div class="TS_obsah">
 
-<div class="vitej_titulka">
+<div class="TS_vitej_titulka">
 
   <h1>
     {% block nadpis1a %}
@@ -54,7 +54,7 @@ function sousdeadline() {
   
 </div>
 
-<div class="temata_titulka">
+<div class="TS_temata_titulka">
 
   <h1>
       Vyřeš to!
@@ -76,13 +76,13 @@ function sousdeadline() {
   
 </div>
 
-<div class="graf">
+<div class="TS_graf">
 
-<div class="graf-svg">
+<div class="TS_graf-svg">
   {% include 'seminar/titulnistrana/graph.svg' %} <!-- TODO: aby to nemuselo být v templates -->
 </div>
 
-  <span class="zjistit_vic">
+  <span class="TS_zjistit_vic">
     <h2><a href="/o-nas/uvod/">Zjisti víc!</a></h2>
     <hr>
   </span>
@@ -91,7 +91,7 @@ function sousdeadline() {
 
 </div>
 
-<div class="titulnistrana_novinky">
+<div class="TS_novinky">
 
   {# Novinky #}
   <h1>Co je nového?</h1>

seminar/templates/seminar/zadani/AktualniZadani.html

@@ -14,20 +14,20 @@
 	{% if user.je_org and not verejne %}<div class="mam-org-only">{% endif %}
 
 	<hr>
-	<div class="zadani_termin">
+	<div class="AZAD_termin">
 	Termíny pro odeslání řešení {{ac.poradi}}. série:<br>
 
     {% for deadline in ac.deadline_v_cisle.all %}
         {% if deadline.typ == deadline.TYP_SOUS or deadline.typ == deadline.TYP_PRVNI_A_SOUS %}
-                <span class="datum">{{deadline.deadline.date}}</span> pro účast na soustředění<br>
+                <span class="AZAD_datum">{{deadline.deadline.date}}</span> pro účast na soustředění<br>
         {% endif %}
 
         {% if deadline.typ == deadline.TYP_PRVNI or deadline.typ == deadline.TYP_PRVNI_A_SOUS %}
-                <span class="datum">{{deadline.deadline.date}}</span> pro otištění v dalším čísle<br>
+                <span class="AZAD_datum">{{deadline.deadline.date}}</span> pro otištění v dalším čísle<br>
         {% endif %}
 
         {% if deadline.typ == deadline.TYP_CISLA %}
-                <span class="datum">{{deadline.deadline.date}}</span> definitivní deadline<br>
+                <span class="AZAD_datum">{{deadline.deadline.date}}</span> definitivní deadline<br>
         {% endif %}
     {% endfor %}
 
@@ -35,7 +35,7 @@
 	<hr>
 
 	{% if ac.titulka_nahled and ac.pdf %}
-		<a href="{{ac.pdf.url}}"><img id="azad_obrazek" src="{{ac.titulka_nahled.url}}" alt="Titulní strana {{ac.poradi}}. čísla" title="Klikni pro stažení!"></a>
+		<a href="{{ac.pdf.url}}"><img id="AZAD_obrazek" src="{{ac.titulka_nahled.url}}" alt="Titulní strana {{ac.poradi}}. čísla" title="Klikni pro stažení!"></a>
 	{% endif %}
 
 	{% if ac.pdf %}