Nějaký základ nové verze CSSek

mamweb/static/css/layout.css

@@ -14,12 +14,11 @@ div.kontejner {
 	min-height: 100vh;
 	position: relative;
 	padding: 0;
-}
 
-
+	.org-logged-in & {
-.org-logged-in div.kontejner {
 		margin-top: var(--login-bar-height);
 	}
+}
 
 div.kontent-wrapper {
 	padding-bottom: var(--footer-height);
@@ -34,10 +33,9 @@ div.kontent {
 .full_width {
 	width: 100vw;
 	margin-left: calc(-50vw + 485px);
-}
+
 	/* Na úzkém displeji nechceme nic dělat. */
 	@media(max-width: 860px) {
-	.full_width{
 		margin-left: 0;
 		width: unset;
 	}
@@ -69,16 +67,16 @@ div.kontent {
 	background: url("../images/header/vikendovka.jpg") no-repeat center top; /* poměr 350:970, TODO: aby to nemuselo být přesně na pixely */
 	background-size: 100%;
 	top: 58px;
-}
 
-#header img.logo {
+	img.logo {
 		width: 100%;
 		filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
 	}
 
-#header img.logo-mobile {
+	img.logo-mobile {
 		display: none;
 	}
+}
 
 .no-mobile {
 	background-size: contain;
@@ -96,29 +94,27 @@ div.kontent {
 	background-size: 100%;
 	filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, 0.4));
 	padding-top: 3.5%;
-}
 
-#footer p.license {
+	p.license {
 		text-align: center;
 		font-weight: 400;
 		bottom: 0;
+
+		a {
+			color: #333;
+		}
 	}
 
-#footer p.license a {
+	@media (max-width: 650px) {
-	color: #333;
+		display: none;
+	}
 }
 
 p.license-mobile {
 	display: none;
 	margin-bottom: 0;
-}
 
 	@media (max-width: 650px) {
-	#footer {
-		display: none;
-	}
-
-	p.license-mobile {
 		position: relative;
 		display: block;
 		font-size: 90%;
@@ -143,11 +139,11 @@ div.login-bar {
 
 	padding-left: 5px;
 	padding-right: 5px;
-}
 
-div.login-bar div {
+	div {
 		display: inline;
 	}
+}
 
 a.login-ref-admin {
 	display: inline;
@@ -158,12 +154,12 @@ a.login-ref-admin {
 	display: inline;
 	color: var(--barva-pozadi);
 	float: right;
-}
 
-.napis-webarum a {
+	a {
 		color: var(--svetla-oranzova);
 		text-decoration: underline;
 	}
+}
 /*******************/
 
 
@@ -250,15 +246,14 @@ ul.menu {
 	margin-top: -5px; /* posune celé menu nahoru (pak potřeba zvětšit mezeru mezi menu a submenu) */
 
 	font-variant: small-caps;
-}
 
-ul.menu a {
+	a {
 		text-decoration: none;
 		font-weight: bold;
 		font-size: 105%;
 	}
 
-ul.menu li {
+	li {
 		margin: 0;
 		display: inline-block;
 		width: 16.666667%;
@@ -266,16 +261,21 @@ ul.menu li {
 
 		font-size: 140%;
 		font-weight: 400;
-}
 
-ul.menu li>a:hover {
+		>a:hover {
 			color: black;
 		}
 
-ul.menu li>a:active { /* TODO:  nefunfuje */
+		>a:active { /* TODO:  nefunfuje */
 			color: black;
 		}
 
+		&.active>a {
+			color: var(--svetla-oranzova);
+		}
+	}
+}
+
 ul.submenu {
 
 	background-color: var(--hlavni-oranzova);
@@ -284,31 +284,25 @@ ul.submenu {
 	padding-top: 10px;
 	padding-bottom: 5px;
 	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
-}
 
-ul.submenu {
-	background-color: var(--hlavni-oranzova);
 	z-index: 50;
 	font-weight: 400;
-}
 
-ul.submenu li {
+	li {
 		width: auto;
 		padding: 0 20px 0 20px;
 		display: inline-block;
-}
+
-ul.submenu li>a {
+		>a {
 			color: var(--svetla-oranzova);
 			text-decoration: none;
 			text-shadow: none;
-}
 
-ul.submenu li>a:hover {
+			:hover {
 				color: black;
 			}
-
+		}
-ul.menu li.active>a {
+	}
-	color: var(--svetla-oranzova);
 }
 
 ul.submenu li.active>a, .parentactive ul li:first-child>a {
@@ -316,22 +310,21 @@ ul.submenu li.active>a, .parentactive ul li:first-child>a {
 }
 
 @media (max-width: 970px) {
-
 	ul.menu {
 		font-size: 90%;
 		margin-top: -7px;
-	}
 
-	ul.menu li {
+		li {
 			margin-top: 10px; /* posunutí textu hlavního menu níže */
 		}
-
-	ul.submenu li {
-		margin-top: 0; /* 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 */
+
+		li {
+			margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
+		}
 	}
 }
 
@@ -339,18 +332,18 @@ ul.submenu li.active>a, .parentactive ul li:first-child>a {
 	ul.menu {
 		font-size: 80%;
 		margin-top: -2px;
-	}
 
-	ul.menu li {
+		li {
 			margin-top: 10px; /* posunutí textu hlavního menu níže */
 		}
-
-	ul.submenu li {
-		margin-top: 0; /* 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 */
+
+		li {
+			margin-top: 0; /* aby se spolu s textem hlavního menu neposunoval níže i text submenu */
+		}
 	}
 }
 
@@ -370,32 +363,34 @@ ul.submenu li.active>a, .parentactive ul li:first-child>a {
 		padding-top: 3px;
 		padding-bottom: 3px;
 		padding-left: 12px;
-	}
 
-	ul.menu_mobile a:active,
+		a {
-	ul.menu_mobile a:hover,
+			&:active, &:hover, &:focus {
-	ul.menu_mobile a:focus {
 				text-decoration: none;
 				color: black;
 			}
+		}
 
-	ul.menu_mobile ul {
+		ul {
 			list-style-type: none;
 			font-size: 90%;
 			color: black; /*černé šipky submenu*/
-	}
 
-	ul.menu_mobile ul li > a {
+			li {
+				> a {
 					color: black;
 				}
 
-	ul.menu_mobile ul li::before {
+				&::before {
 					content: ' \276D  '; /*https://www.w3schools.com/cssref/css_entities.asp*/
 				}
+			}
+		}
 
-	ul.menu_mobile br {
+		br {
 			display: none;
 		}
+	}
 
 	nav.nav-button {
 		display: block;
@@ -442,9 +437,8 @@ ul.submenu li.active>a, .parentactive ul li:first-child>a {
 
 
 /**** ROZLIŠENÍ MEZI LOKÁLNÍM, TESTOVACÍM A PRODUKČNÍM WEBEM ****/
-body.localweb:before, body.localweb:after,
+body.localweb, body.testweb, body.suprodweb {
-body.testweb:before, body.testweb:after,
+	&:before, &:after {
-body.suprodweb:before, body.suprodweb:after {
 		content: "";
 		position: fixed;
 		width: 20px;
@@ -453,16 +447,13 @@ body.suprodweb:before, body.suprodweb:after {
 		z-index: -1000;
 	}
 
-body.localweb:before, body.testweb:before, body.suprodweb:before {
+	&:before { left: 0; }
-	left: 0;
+	&:after { right: 0; }
-}
-body.localweb:after, body.testweb:after, body.suprodweb:after {
-	right: 0;
 }
 
-body.localweb:before, body.localweb:after { background: greenyellow; }
+body.localweb { &:before, &:after { background: greenyellow; } }
-body.testweb:before, body.testweb:after { background: darkorange; }
+body.testweb { &:before, &:after { background: darkorange; } }
-body.suprodweb:before, body.suprodweb:after { background: red; }
+body.suprodweb { &:before, &:after { background: red; } }
 /****************************************************************/
 
 
@@ -473,19 +464,15 @@ body.suprodweb:before, body.suprodweb:after { background: red; }
 .titulnistrana {
 	display: flex;
 	text-align: justify;
-}
 
-.titulnistrana h1 {
+	h1 { text-align: center; }
-	text-align: center;
 }
 
 .zjistit_vic{
 	text-align: center;
 	margin-bottom: 30px;
-}
 
-.zjistit_vic hr {
+	hr { display: none; }
-	display: none;
 }
 
 .graf-svg {
@@ -513,6 +500,7 @@ body.suprodweb:before, body.suprodweb:after { background: red; }
 	padding: 10px;
 }
 
+.novinka {
 	.novinka_obrazek {
 		margin: 10px 0 10px 0;
 		width: 100%;
@@ -526,6 +514,7 @@ body.suprodweb:before, body.suprodweb:after { background: red; }
 		text-align: right;
 		font-style: italic;
 	}
+}
 
 div.org-text {
 	font-style: italic;

mamweb/static/css/modules.css

@@ -15,16 +15,16 @@
 	padding: 10px;
 	margin: 10px -10px;
 	border: var(--orgovska-fialova) 2px dashed;
-}
 
-.mam-org-only .mam-org-only {
+	& .mam-org-only {
 		border: 0;
 	}
 
-li.mam-org-only {
+	&li {
 		padding: 3px 0;
 		margin: -2px 0;
 	}
+}
 /**********************************/
 
 
@@ -208,24 +208,24 @@ div.org_email {
 
 .tabulka_oramovane_sloupce {
 	border: solid 2px;
-}
 
-.tabulka_oramovane_sloupce td:first-child, .tabulka_oramovane_sloupce th:first-child {
+	td, th {
+		&:first-child, &:first-child {
 			border-left: none;
 			border-right: solid 1px;
 		}
 
-.tabulka_oramovane_sloupce td:nth-child(2), .tabulka_oramovane_sloupce th:nth-child(2) {
+		&:nth-child(2), &:nth-child(2) {
 			border-left: none;
 		}
 
-.tabulka_oramovane_sloupce td, .tabulka_oramovane_sloupce th {
 		padding: 0.1em 0.3em;
 		border-left: solid 1px;
 	}
 
-.tabulka_oramovane_sloupce thead th, .tabulka_oramovane_sloupce thead td {
+	thead { th, td {
 			border-bottom: solid 1px;
+	} }
 }
 /***********************************/
 
@@ -233,25 +233,26 @@ div.org_email {
 /** Tabulka se střídajícími se barvami řádků **/
 /* Skoro jakákoliv tabulka kromě výsledkovek */
 
-.barevna_tabulka td th {
+.barevna_tabulka {
+	td th {
 		padding: 1px 10px 1px 10px;
 	}
 
-.barevna_tabulka tbody tr:nth-child(even), .barevna_tabulka thead tr {
+	tbody tr:nth-child(even), thead tr {
 		background: var(--svetlounka-oranzova);
 	}
 
-.barevna_tabulka tbody tr:nth-child(odd) {
+	tbody tr:nth-child(odd) {
 		background: var(--barva-pozadi);
 	}
+}
 /**********************************************/
 
 
 /** Tabulka, kde první řádek a sloupec je pořád vidět **/
 /* Např. tabulka odevzdaných řešení, nebo výsledkovky */
-
-/* Omezí výšku a šířku, aby bylo příjemné na scrollování a zapne scrollování */
 .tabulka_s_uchycenym_radkem_a_sloupcem {
+	/* Omezí výšku a šířku, aby bylo příjemné na scrollování a zapne scrollování */
 	display: block;
 	width: fit-content; /* display: block; roztahuje na celou šířku */
 	max-height: 80vh;
@@ -261,21 +262,21 @@ div.org_email {
 
 	border-collapse: separate; /* Pokud má tabulka orámování, je potřeba ho separovat, aby dodrželo position: sticky; */
 	border-spacing: 0;
-}
 
 	/* Uchytí první řádek */
-.tabulka_s_uchycenym_radkem_a_sloupcem thead tr {
+	thead tr {
 		position: sticky;
 		top: 0;
 		z-index: 2;
 	}
 
 	/* Uchytí první sloupec */
-.tabulka_s_uchycenym_radkem_a_sloupcem td:first-child, .tabulka_s_uchycenym_radkem_a_sloupcem th:first-child {
+	td, th { &:first-child {
 		position: sticky;
 		left: 0;
 		background: inherit; /* (Snad) zneprůhlední první sloupec */
 		z-index: 1;
+	} }
 }
 
 /* (Snad) zneprůhlednění prvního řádku (a sloupce) FIXME: tohle je trochu hack a potenciálně může něco rozbít */
@@ -294,11 +295,11 @@ div.org_email {
 /** Tabulka mající všechna ohraničení **/
 .plne_ohranicena_tabulka {
 	border-collapse: collapse;
-}
 
-.plne_ohranicena_tabulka tr th, .plne_ohranicena_tabulka tr td {
+	tr { th, td {
 		border: 1px solid black;
 		padding: 1px 10px 1px 10px;
+	} }
 }
 /***************************************/
 
@@ -329,8 +330,13 @@ div.org_email {
 
 
 /** Tabulka mých (řešitelových) řešení **/
-.moje_reseni tr th, .moje_reseni tr td { text-align: center; }
+.moje_reseni tr {
-.moje_reseni tr td.problem { text-align: left; }
+	th, td {
+		text-align: center;
+	}
+
+	td.problem { text-align: left; }
+}
 
 /* Různá šířka problému */
 .odevzdanareseni_mid, .odevzdanareseni_small, .odevzdanareseni_mini { display: none; }
@@ -355,20 +361,19 @@ div.org_email {
 /** Detail řešení **/
 .bodovani>input {
 	width: 4em;
-}
 
-.bodovani>input::placeholder {
+	&::placeholder {
 		color: lightgray;
 		opacity: 1;
 	}
 
-.bodovani>input::-webkit-input-placeholder { /* Edge */
+	&::-webkit-input-placeholder { /* Edge */
 		color: lightgray;
 	}
+}
 
 /* td obsahující křížek v detailu řešení se nesmí smrštit na 0 */
-/* FIXME až bude firefox příčetný, nahradit td:has(.smazat_hodnoceni) */
+.td:has(.smazat_hodnoceni) {
-.has_smazat_hodnoceni {
 	min-width: 20px;
 	padding: 3px;
 }
@@ -453,12 +458,13 @@ label.field-required {
 ul.form li{
 	margin-bottom: 3px;
 }
-p.gdpr {
+div.gdpr {
+	font-size: 6pt;
+
+	p {
 		font-size: 6pt;
 		margin-bottom: .66em;
 	}
-div.gdpr {
-	font-size: 6pt;
 }
 
 /* registrace */

odevzdavatko/templates/odevzdavatko/detail.html

@@ -119,7 +119,7 @@
 		<td class="bodovani teamovaCast">{{ subform.body_neprepocitane_celkem }}</td>
 		<td>{{ subform.deadline_body }}</td>
 		<td>{{ subform.feedback }}</td>
-		<td class="has_smazat_hodnoceni"><a href="#" class="smazat_hodnoceni" id="id_{{subform.prefix}}-jsremove" title="Smazat hodnocení"><img src="{% static "odevzdavatko/cross.png" %}" alt="Smazat"></a></td>
+		<td><a href="#" class="smazat_hodnoceni" id="id_{{subform.prefix}}-jsremove" title="Smazat hodnocení"><img src="{% static "odevzdavatko/cross.png" %}" alt="Smazat"></a></td>
 	</tr>
     </tbody>
 {% endfor %}
@@ -138,7 +138,7 @@
 		<td class="bodovani teamovaCast">{{ form.empty_form.body_neprepocitane_celkem }}</td>
 		<td>{{ form.empty_form.deadline_body }}</td>
 		<td>{{ form.empty_form.feedback }}</td>
-		<td class="has_smazat_hodnoceni"><a href="#" class="smazat_hodnoceni" id="id_{{form.empty_form.prefix}}-jsremove" title="Smazat hodnocení"><img src="{% static "odevzdavatko/cross.png" %}" alt="Smazat"></a></td>
+		<td><a href="#" class="smazat_hodnoceni" id="id_{{form.empty_form.prefix}}-jsremove" title="Smazat hodnocení"><img src="{% static "odevzdavatko/cross.png" %}" alt="Smazat"></a></td>
 	</tr>
 </table>
 

personalni/templates/personalni/udaje/gdpr.html

@@ -4,37 +4,37 @@ K tomu, abychom mohli zpracovávat Tvá data (uložit si tvou adresu, zobrazit T
 Pokud se zpracováváním souhlasíš dle níže uvedených podmínek, zaškrtni políčko níže.
 </p>
 <div class="gdpr">
-<p class="gdpr">
+<p>
 Získáváme od Tebe údaje vyplněné v přihlášce do semináře (jméno, příjmení, poštovní a e-mailovou adresu, školu, kterou navštěvuješ a rok maturity), případně v přihlášce na soustředění (navíc datum narození, telefonní číslo). Také uchováváme všechna řešení, která nám pošleš, a jejich hodnocení.
 </p>
-<p class="gdpr">
+<p>
 Slibujeme Ti, že Tvá osobní data nezneužijeme k ničemu, co by nesouviselo s M&amp;M nebo s dalšími aktivitami Matfyzu, a nikdy je nepředáme nikomu cizímu. Údaje využíváme k zajištění chodu semináře a také je sdílíme s ostatními propagačními akcemi Matfyzu, abychom mohli vyhodnocovat úspěšnost akcí. Pokud budeš mít zájem, budeme Ti také posílat zajímavé zprávy a novinky týkajíci se Matfyzu.
 </p>
-<p class="gdpr">
+<p>
 Veřejně vystavujeme pouze seznam přezdívek (pro výběr spoluřešitelů k řešení) a výsledkové listiny, které také uchováváme pro archivní účely. Pokud ale z nějakého důvodu nebudeš chtít mít své jméno či školu uvedené ve výsledkové listině, není problém to zařídit, napiš nám. Z tištěných materiálů samozřejmě údaje už odstranit nemůžeme.
 </p>
-<p class="gdpr">
+<p>
 Na soustředěních a dalších akcích semináře navíc pořizujeme fotografie a videozáznamy a používáme je ke zpravodajským a propagačním účelům. Pro propagační účely si od Tebe vyžádáme samostatný souhlas na začátku akce.
 </p>
-<p class="gdpr">
+<p>
 <i>Souhlas se zpracováním osobních údajů pro potřeby chodu semináře</i>
 </p>
-<p class="gdpr">
+<p>
 Tímto uděluji souhlas Univerzitě Karlově, se sídlem Ovocný trh 560/5, 116 36 Praha 1, IČO 00216208 (dále jen UK), která je správcem osobních údajů všech fakult a součástí UK, ke zpracování osobních údajů pro potřeby Korespondenčního semináře M&amp;M a Matematicko-fyzikální fakulty UK (dále jen M&amp;M a MFF UK).
 </p>
-<p class="gdpr">
+<p>
 Tento souhlas uděluji pro všechny výše uvedené osobní údaje, a to po dobu účasti v semináři a 10 let poté, a dále souhlasím s uchováváním potřebných dat pro archivní účely i po této lhůtě (vystavené výsledkové listiny aj.).
 </p>
-<p class="gdpr">
+<p>
 MFF UK tyto údaje zpracovává za účelem evidence řešitelů a účastníků M&amp;M, k zajištění celoročního fungování semináře, analýze účinnosti jednotlivých propagačních akcí MFF UK a zpravodajským účelům. Osobám, které o to projeví zájem v nastavení svého účtu, bude MFF UK také zasílat propagační materiály.
 </p>
-<p class="gdpr">
+<p>
 Údaje nebudou předány třetí osobě ani využívány k jiným účelům, než ke kterým byly poskytnuty.
 </p>
-<p class="gdpr">
+<p>
 Tento souhlas uděluji ze své vlastní a svobodné vůle a beru na vědomí, že jej mohu kdykoliv odvolat zasláním e-mailu na adresu mam@matfyz.cz. Stejně tak může být požadováno vymazání i z archivních údajů M&M, pokud to bude technicky možné. Beru na vědomí, že údaje z tištěných publikací není možné zpětně odstranit.
 </p>
-<p class="gdpr">
+<p>
 Dále máte právo:
 </p>
 <ul>
@@ -44,7 +44,7 @@ Dále máte právo:
 <li>požadovat, aby byly vaše osobní údaje předány jinému správci,
 <li>podat stížnost u dozorového úřadu.
 </ul>
-<p class="gdpr">
+<p>
 V případě jakéhokoliv dotazu nebo uplatnění svých práv můžete kontaktovat pověřence pro ochranu osobních údajů na e-mailové adrese gdpr@cuni.cz.
 </p>
 </div>

seminar/templates/seminar/novinky.html

@@ -1,6 +1,6 @@
 {% for novinka in object_list %}
 {# pripravene div-y na stylovani#}
-<div>
+<div class="novinka">
   {% if not novinka.zverejneno and user.je_org %}
   <div class="mam-org-only">
     <ul>