Zkrocení stylů okolo otáčecích karet

mamweb/static/css/layout.css

@@ -602,42 +602,6 @@ div.odpocet {
 	}
 }
 
-/*stránka organizátorů*/
-
-div.seznam_orgu, div.rozcestnik_temat, div.seznam_archiv {
-	text-align: center;
-	padding-bottom: 10px;
-}
-
-div.org_pole, div.rocnik_pole, div.tema_pole {
-	display: inline-block;
-	width: 30%;
-	min-width: 300px;
-	text-align: center;
-}
-
-div.tema_pole {
-	display: inline-block;
-	width: 40%;
-	min-width: 350px;
-	padding-bottom: 20px;
-	text-align: center;
-}
-
-div.cislo_pole {
-	display: inline-block;
-	width: 15%;
-	min-width: 165px;
-	text-align: center;
-	padding: 10px;
-}
-
-div.seznam_orgu h3 {
-	text-align: center;
-	margin-top: 10px;
-	margin-bottom: 0;
-}
-
 /* aktuální zadání */
 .stranka_aktualni_zadani {
 	text-align: center;

mamweb/static/css/modules.css

@@ -51,32 +51,14 @@ li.mam-org-only {
 
 /**** OTÁČECÍ KARTY ****/
 /* (orgové, archiv) */
+
+/** Samotné karty **/
 .flip-card {
 	perspective: 1000px; /* Remove this if you don't want the 3D effect */
 	margin-left: auto;
 	margin-right: auto;
 }
 
-#organizatori.flip-card {
-	width: 200px;
-	height: 250px;
-}
-
-#archiv.flip-card {
-	width: 210px;
-	height: 298px;
-}
-
-#archiv-rocnik.flip-card {
-	width: 144px;
-	height: 205px;
-}
-
-#tema-rozcestnik.flip-card {
-	width: 300px;
-	height: 300px;
-}
-
 /* This container is needed to position the front and back side */
 .flip-card-inner {
 	position: relative;
@@ -109,21 +91,79 @@ div.flip-card-foto, div.flip-card-foto img {
 
 /* Style the back side */
 .flip-card-back {
-	background-color: var(--svetla-oranzova);
-	color: black;
 	transform: rotateY(180deg);
 	padding: 10px;
 	padding-top: 20px;
 }
 
-#archiv.flip-card-back {
-	background-color: white;
-}
-
 /* Pokud je na přední straně něco proklikávacího (třeba celá fotka), tak na dotykových zařízeních nemůže proklikávat, aby se dalo otáčet */
 @media(hover: none) {
 	.flip-card-foto a { pointer-events: none; }
 }
+/*******************/
+
+
+.flip-card-back {
+	background-color: var(--svetla-oranzova);
+	color: black;
+}
+
+.otaceci_cisla .flip-card-back {
+	background-color: white;
+	color: unset;
+}
+
+/* Otáčecí karta musí mít kolem sebe nějaké místo a mívá nějaký nadpis */
+.flip_card_container {
+	display: inline-block;
+	width: 30%;
+	min-width: 300px;
+	text-align: center;
+}
+
+
+/** Jednotlivá použití **/
+.seznam_orgu .flip-card {
+	width: 200px;
+	height: 250px;
+}
+
+.seznam_orgu .flip_card_container h3 {
+	margin-bottom: 0;
+}
+
+
+.seznam_archiv .flip-card {
+	width: 210px;
+	height: 298px;
+}
+
+
+.cisla-v-rocniku .flip-card {
+	width: 144px;
+	height: 205px;
+}
+
+.cisla-v-rocniku .flip_card_container {
+	width: 15%;
+	min-width: 165px;
+	padding: 10px;
+}
+
+
+.rozcestnik_temat .flip-card {
+	width: 300px;
+	height: 300px;
+}
+
+.rozcestnik_temat .flip_card_container {
+	width: 40%;
+	min-width: 350px;
+	padding-bottom: 20px;
+}
+/************************/
+
+
 
 /* karty archiv */
 
@@ -136,7 +176,7 @@ div.popis_rocniku {
 
 div.popis_rocniku a, div.cislo_odkazy a {
 	font-weight: bold;
-	color: black;
+	color: unset;
 }
 
 div.popis_rocniku a:hover,

seminar/templates/seminar/archiv/cisla.html

@@ -7,11 +7,11 @@
       Archiv čísel
     {% endblock %}
   </h2>
-  <div class="seznam_archiv">
+  <div class="seznam_archiv otaceci_cisla">
 
     {% for rocnik, url_png in object_list.items %}
 
-    <div class="rocnik_pole">
+    <div class="flip_card_container">
 
       <h3>
       <a href='{{ rocnik.verejne_url }}'>Ročník {{ rocnik }}</a>
@@ -20,7 +20,7 @@
 
       {# karta ročníku - zepředu obrázek prvního čísla, zezadu odkaz na jednotlivá čísla a výsledkovku #}
 
-      <div class="flip-card" id="archiv">
+      <div class="flip-card">
 
       <div class="flip-card-inner">
         <div class="flip-card-front">
@@ -30,7 +30,7 @@
       </div>
 
       </div>
-       <div class="flip-card-back" id="archiv">
+       <div class="flip-card-back">
       <div class="popis_rocniku">
         Jednotlivá čísla:
         <ul>

seminar/templates/seminar/archiv/rocnik.html

@@ -19,13 +19,13 @@
 
 <h2>Čísla</h2>
 
-<div class="cisla-v-rocniku">
+<div class="cisla-v-rocniku otaceci_cisla">
   {% for c in rocnik.verejna_cisla %}
-    <div class="cislo_pole">
+    <div class="flip_card_container">
 
       <h6> Číslo {{ c.kod }}</h6>
 
-      <div class="flip-card" id="archiv-rocnik">
+      <div class="flip-card">
 
       <div class="flip-card-inner">
         <div class="flip-card-front">
@@ -65,13 +65,13 @@
 
 {% if user.je_org and rocnik.neverejna_cisla %}
 <div class="mam-org-only">
-    <div class="cisla-v-rocniku">
+    <div class="cisla-v-rocniku otaceci_cisla">
         {% for c in rocnik.neverejna_cisla %}
-            <div class="cislo_pole">
+            <div class="flip_card_container">
 
                 <h6> Číslo {{ c.kod }}</h6>
 
-                <div class="flip-card" id="archiv-rocnik">
+                <div class="flip-card">
 
                     <div class="flip-card-inner">
                         <div class="flip-card-front">

seminar/templates/seminar/cojemam/organizatori.html

@@ -18,7 +18,7 @@
 
 <div class="seznam_orgu">
   {% for org in object_list %}
-  <div class="org_pole">
+  <div class="flip_card_container">
 
     <h3>
     {{org.osoba.jmeno}}
@@ -37,7 +37,7 @@
 
     {# karta organizátora - zepředu fotka, zezadu popis, u neaktivních data kdy organizovali #}
 
-    <div class="flip-card" id="organizatori">
+    <div class="flip-card">
 
     <div class="flip-card-inner">
       <div class="flip-card-front">

seminar/templates/seminar/tematka/rozcestnik.html

@@ -19,15 +19,14 @@
 <div class="rozcestnik_temat">
 
 {% for tematko in tematka %}
-
 {# karta témátka - zepředu ilustrační, zezadu abstrakt #}
-<div class="tema_pole">
+<div class="flip_card_container">
 
   <h3>
     <a href='{{ tematko.verejne_url }}'>Téma {{ tematko.nazev }}</a>
   </h3>
 
-  <div class="flip-card" id="tema-rozcestnik">
+  <div class="flip-card">
 
     <div class="flip-card-inner">
       <div class="flip-card-front">