diff --git a/docs/css.rst b/docs/css.rst
new file mode 100644
index 00000000..3efe266f
--- /dev/null
+++ b/docs/css.rst
@@ -0,0 +1,28 @@
+CSS (a další styly na webu)
+===========================
+
+Inspirován `css-trick článkem `_ jsem se rozhodl rozdělit
+CSSka do
+
+- Konstant (``constants.css``), které jsou využívány na mnoha místech CSSek
+- Nastylování html tagů (``base.css``)
+- Layoutu (``layout.css``), což je to, co určuje celkové rozložení stránky
+- Jednotlivých prvků (``modules.css``)
+
+Dále jsem separoval CSSka pro **galerii** (potřebuje hodně specifických stylů). Stejně tak **korekturovátko** má styly separátně.
+
+Dále web (asi) používá dva externí frameworky (v separátních složkách – mají k sobě i JS a podobné věci):
+
+- bootstrap: dělá nějaké basic stylování, *web je na něm hodně závislý* (například jsem zjistil, že bootstrap přidává ``font-size:14px``, bez čehož se web úplně rozpadne)
+- pretty photo: ??? (něco s obrázky)
+
+Pak jsou tu ``mamweb-dev.css`` a ``printtable.css``, co jsem si ještě nerozmyslel, co s tím.
+
+Pár myšlenek
+------------
+
+- Až na pár výjimek (galerii a korekturovátko) bych styly držel v jedné složce a málo souborech,
+protože CSS šíleně dědí všechno možné
+- Chce to dobře pojmenovávat třídy (speciálně aby bylo vidět, co ta třída dělá nebo kde se používá)
+- Chce to hodně komentovat kód (speciálně tam, kde není splněn předchozí bod)
+
diff --git a/mamweb/static/css/base.css b/mamweb/static/css/base.css
new file mode 100644
index 00000000..912e09a6
--- /dev/null
+++ b/mamweb/static/css/base.css
@@ -0,0 +1,87 @@
+@charset "utf-8"; /* vynuť utf-8 */
+
+/* Obecné styly pro html tagy */
+
+@font-face {
+ font-family: 'OpenSans';
+ src: url("../fonts/OpenSans/OpenSans-Regular.ttf");
+ font-weight: normal;
+}
+
+body {
+ font-family: 'OpenSans';
+ background-color: var(--barva-pozadi);
+ min-height: 100%;
+}
+
+p {
+ /* zarovnání odstavců do bloku */
+ text-align: justify;
+}
+
+
+/**** NADPISY ****/
+h1, h2, h3, h4 { color: var(--tmava-oranzova); }
+h5, h6 { color: black; }
+
+h1, h2, h3, h4, h5, h6 {
+ font-variant: small-caps;
+ font-weight: bold;
+}
+
+/* TODO: odlišit 1 a 2 */
+h1 { font-size: 200%; }
+h2 { font-size: 200%; }
+h3 { font-size: 160%; }
+h4 { font-size: 140%; }
+h5 { font-size: 140%; }
+h6 { font-size: 120%; }
+
+h1 {
+ margin-top: 0px;
+}
+/*****************/
+
+
+/**** TLAČÍTKA ****/
+a {
+ color: var(--tmava-oranzova);
+}
+
+a:focus, a:hover, a:active {
+ color: var(--hlavni-oranzova);
+ text-decoration: none;
+}
+
+.button {
+ margin: 10px 0px 10px 0px;
+ padding: 4px 0; /*vertikální centování textu*/
+ text-align: center;
+ background-color: var(--hlavni-oranzova);
+ color: var(--barva-pozadi);
+ font-size: 150%;
+ font-weight: bold;
+ font-variant: small-caps;
+ filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
+}
+
+.button:hover {
+ position: relative;
+ top: 2px;
+ left:2px;
+ background-color: #df490e;
+}
+/******************/
+
+
+/**** Divné (aneb nevím, co bylo cílem) ****/
+h1 a:hover {
+ text-decoration: none;
+}
+
+img {
+ filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
+ max-width: 100%;
+ height: auto;
+}
+/*******************************************/
diff --git a/mamweb/static/css/constants.css b/mamweb/static/css/constants.css
new file mode 100644
index 00000000..959897b4
--- /dev/null
+++ b/mamweb/static/css/constants.css
@@ -0,0 +1,16 @@
+@charset "utf-8"; /* vynuť utf-8 */
+
+/* Konstanty (převážně barvy) pro užití v dalších css */
+
+:root {
+ --hlavni-oranzova: #e84e10;
+ --tmava-oranzova: #6f2509;
+ --svetla-oranzova: #f9d59e;
+ --svetlounka-oranzova: rgb(253, 237, 213);
+
+ --orgovska-fialova: #6a0043;
+ --orgovska-svetla-fialova: #eee4ec;
+
+ --barva-pozadi: #fffbf6;
+}
+
diff --git a/mamweb/static/css/galerie.css b/mamweb/static/css/galerie.css
new file mode 100644
index 00000000..6ee1a676
--- /dev/null
+++ b/mamweb/static/css/galerie.css
@@ -0,0 +1,167 @@
+@charset "utf-8"; /* vynuť utf-8 */
+
+/* Galerie */
+
+
+/* velká fotka */
+/* zmenšování spolu s oknem prohlížeče */
+.galerie .obrazek, .titulni_obrazek {
+ max-width: 100%;
+ height: auto;
+ width: auto\9; /* ie8 */
+}
+
+.predchozi_obrazek{
+ position: absolute;
+ z-index: 1;
+ width: 33%;
+ height: 100%;
+ left: 0;
+ top: 0;
+}
+.predchozi_obrazek:hover{
+ background-image: url("/static/galerie/prvky/predchozi.svg");
+ filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
+ background-position: left center;
+ background-repeat: no-repeat;
+}
+.dalsi_obrazek{
+ position: absolute;
+ z-index: 1;
+ width: 33%;
+ height: 100%;
+ left: 67%;
+ top: 0;
+}
+.dalsi_obrazek:hover{
+ background-image: url("/static/galerie/prvky/dalsi.svg");
+ filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
+ background-position: right center;
+ background-repeat: no-repeat;
+}
+
+.galerie {
+ position: relative;
+ text-align: center;
+ margin: 20px auto 0 auto;
+}
+
+.galerie h1 {
+ text-align: center;
+}
+
+.galerie_hlavicka {
+ margin: 30px auto 30px auto;
+}
+
+.popis {
+ margin: 10px 10px 30px 0px;
+ text-align: center;
+}
+
+#nahoru {
+ text-align: center;
+}
+
+/* titulní obrázek hlavní galerie soustředění */
+
+.galerie_nahledy{
+ /*margin: 1em 0;*/
+ margin: auto;
+ padding: 10px;
+ text-align: center;
+ overflow: auto;
+}
+
+.galerie_nahledy img {
+ margin: 10px;
+}
+
+.galerie_nahledy div.navigace {
+ display: inline-block;
+}
+
+.galerie_nahled, .podgalerie_nahled { /* frame */
+ display: block;
+ position: relative;
+ float: left;
+ width: 200px;
+ height: 200px;
+ text-align: center;
+ border: solid;
+ border-width: 1px;
+ border-radius: 4px;
+ border-color: var(--svetla-oranzova);
+ background-color: var(--barva-pozadi);
+ white-space: nowrap;
+ margin: 10px;
+ font-weight: bold;
+}
+
+.galerie_nahled:hover, .podgalerie_nahled:hover {
+ background-color: var(--svetla-oranzova);
+ filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
+ color: var(--tmava-oranzova);
+}
+
+.vystredeno{ /* helper */
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
+}
+
+.galerie_nahled img {
+ vertical-align: middle;
+ max-height: 180px;
+ max-width: 180px;
+}
+
+.galerie_nahled div {
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ text-align: center;
+}
+
+.podgalerie_nahled img {
+ margin-top: 20px;
+ margin-bottom: 15px;
+ max-height: 125px;
+ max-width: 167px;
+}
+
+.podgalerie_nahled .nazev_galerie {
+ position: absolute;
+ width: 100%;
+ top: 160px;
+}
+
+
+/* Odkazy na předchozí a následující podgalerii */
+.galerie_predchozi_nasledujici {
+ overflow: auto;
+ margin: 10px auto 10px auto;
+}
+
+.galerie_predchozi_nasledujici .predchozi {
+ float: left;
+}
+
+.galerie_predchozi_nasledujici .nasledujici {
+ float: right;
+}
+
+/* posune kotvu obrázku v galerii o oranžový pruh dolu, aby se pod ním obrázek neschovával */
+/* https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header */
+.kotva_obrazku {
+ position: absolute;
+ width: 0;
+ height: 55px; /* viz #title */
+ margin-top: -55px; /* viz #title */
+}
+@media(max-width: 860px) {
+ .kotva_obrazku {
+ height: 3em; /* #FIXME nemám páru, jak zjistit výšku toho elementu */
+ margin-top: -3em; /* #FIXME */
+ }
+}
diff --git a/mamweb/static/css/layout.css b/mamweb/static/css/layout.css
new file mode 100644
index 00000000..7bd8f6e1
--- /dev/null
+++ b/mamweb/static/css/layout.css
@@ -0,0 +1,766 @@
+@charset "utf-8"; /* vynuť utf-8 */
+
+/* Rozložení webu a jeho prvky (hlavička, menu, footer) */
+
+:root {
+ --footer-height: 200px;
+ --login-bar-height: 20px;
+}
+
+/**** KONTEJNER ****/
+div.container {
+ width: 970px;
+ margin: auto;
+ min-height: 100vh;
+ position: relative;
+ padding: 0px;
+}
+
+
+.org-logged-in div.container {
+ margin-top: var(--login-bar-height);
+}
+
+div.content-wrapper {
+ padding-bottom: var(--footer-height);
+}
+
+
+div.content {
+ padding: 15px 30px;
+}
+
+/* Roztáhne obsah z containeru na celou šířku obrazovky: */
+.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;
+ }
+}
+/*******************/
+
+
+/**** HLAVIČKA ****/
+#title { /*dělá blbosti šířka, je to kvůli fixed pozici, zatím natvrdo, vyřešit*/
+ height: 55px;
+ width: 970px;
+ position: fixed;
+ z-index: 2048;
+ background-color: var(--hlavni-oranzova);
+ filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
+
+ font-size: 28px;
+ color: var(--barva-pozadi);
+ font-weight: 400;
+ font-variant: small-caps;
+ text-align: center;
+ text-decoration: none;
+ padding-top: 8px;
+ text-shadow: none;
+}
+
+#title-mobile {
+ display: none;
+}
+
+
+#header {
+ position: relative;
+ 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 {
+ position: absolute center;
+ width: 100%;
+ filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
+}
+
+#header img.logo-mobile {
+ display: none;
+}
+
+.no-mobile {
+ background-size: contain;
+}
+/******************/
+
+
+/**** MENU ****/
+ul.menu_mobile {
+ display: none;
+}
+
+nav.nav-button {
+ display: none;
+}
+
+div.dropdown-backdrop { /* tohle způsobuje, že funguje mobilní menu */
+ z-index: -1;
+}
+
+/* nové menu */
+
+ul.menu {
+ width: 100%;
+ padding: 0px;
+ 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 {
+ text-decoration: none;
+ font-weight: bold;
+ font-size: 105%;
+}
+
+ul.menu li {
+ margin: 0px;
+ display: inline-block;
+ width: 16.666667%;
+ text-align: center;
+
+ font-size: 140%;
+ font-weight: 400;
+}
+
+ul.menu li>a:hover {
+ color: black;
+}
+
+ul.menu li>a:active { /* TODO: nefunfuje */
+ color: black;
+}
+
+ul.submenu {
+
+ background-color: var(--hlavni-oranzova);
+ margin-top: 10px; /* mezera mezi hlavním menu a submenu */
+ margin-bottom: 10px;
+ 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 {
+ width: auto;
+ padding: 0px 20px 0px 20px;
+ display: inline-block;
+}
+ul.submenu li>a {
+ color: var(--svetla-oranzova);
+ text-decoration: none;
+ text-shadow: none;
+}
+
+ul.submenu li>a:hover {
+ color: black;
+}
+
+ul.menu li.active>a {
+ color: var(--svetla-oranzova);
+}
+
+ul.submenu li.active>a, .parentactive ul li:first-child>a {
+ color: black;
+}
+/**************/
+
+
+/**** Footer ****/
+#footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ background: url("../images/mozaika-footer.svg") no-repeat top center;
+ height: var(--footer-height);
+ background-position: relative;
+ 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 ****/
+body.localweb:before, body.localweb:after,
+body.testweb:before, body.testweb:after,
+body.suprodweb:before, body.suprodweb:after {
+ content: "";
+ position: fixed;
+ width: 20px;
+ height: 100%;
+ top: 0;
+}
+
+body.localweb:before, body.testweb:before, body.suprodweb:before {
+ left: 0;
+}
+body.localweb:after, body.testweb:after, body.suprodweb:after {
+ right: 0;
+}
+
+body.localweb:before, body.localweb:after { background: greenyellow; }
+body.testweb:before, body.testweb:after { background: darkorange; }
+body.suprodweb:before, body.suprodweb:after { background: red; }
+/****************************************************************/
+
+
+/**** ZBYTEK ****/
+/* (konkrétní stránky) */
+
+/* titulni stranka */
+.titulnistrana {
+ display: flex;
+ text-align: justify;
+}
+
+.titulnistrana h1 {
+ text-align: center;
+}
+
+.zjistit_vic{
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.zjistit_vic hr {
+ display: none;
+}
+
+.graf-svg {
+ display: flex;
+}
+
+#svg-graf {
+ width: 100%;
+ height: auto;
+ margin: 30px;
+}
+
+.titulnistrana_obsah {
+ width: 66%;
+}
+
+.vitej_titulka, .temata_titulka {
+ width: 49%;
+ padding: 10px;
+ display: table-cell;
+}
+
+.titulnistrana_novinky {
+ width: 33%;
+ padding: 10px;
+}
+
+.novinka_obrazek {
+ margin: 10px 0px 10px 0px;
+ width: 100%;
+}
+
+.novinka_datum {
+ font-weight: bold;
+}
+
+.novinka_autor {
+ text-align: right;
+ font-style: italic;
+}
+
+div.org-text {
+ font-style: italic;
+}
+
+div.odpocet {
+ margin: 20px;
+ text-align: center;
+}
+
+.odevzdanareseni_mid, .odevzdanareseni_small, .odevzdanareseni_mini {
+ display: none;
+}
+
+/*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: 0px;
+}
+
+div.org_email {
+ margin-bottom: 10px;
+ font-weight: bold;
+}
+
+/* aktuální zadání */
+.stranka_aktualni_zadani {
+ text-align: center;
+}
+
+#azad_obrazek {
+ margin-top: 15px;
+}
+
+div.zadani_termin {
+ text-align: center;
+ font-size: large;
+ font-weight: bold;
+}
+
+@media (max-width: 420px) {
+ div.zadani_termin {
+ font-size: small;
+ }
+}
+
+div.zadani_termin .datum {
+ color:var(--hlavni-oranzova);
+ margin:0px;
+}
+
+#obrazek_cisla_archiv {
+ text-align: center;
+ margin: 10px;
+}
+
+
+/* Jak řešit */
+
+.jakresit svg {
+ width: 33%;
+ padding: 10px;
+ filter: none;
+}
+
+@media(max-width: 860px) {
+ .jakresit svg {
+ margin: auto;
+ display: grid;
+ width: 100%;
+ max-width: 360px;
+ }
+}
+/****************/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**********************
+ * 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 */
+ }
+
+ .odevzdanareseni_big {
+ display: none;
+ }
+
+ .odevzdanareseni_mid {
+ display: table-cell;
+ }
+
+}
+
+/* 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;
+ }
+
+ .odevzdanareseni_mid {
+ display: none;
+ }
+
+ .odevzdanareseni_small {
+ display: table-cell;
+ }
+}
+
+/* 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.cojemam,
+ #header.soustredeni,
+ #header.zadani,
+ #header.clanky,
+ #header.archiv,
+ #header.NOC,
+ #header.NOCcojemam,
+ #header.NOCsoustredeni,
+ #header.NOCzaani,
+ #header.NOCclanky,
+ #header.NOCarchiv {
+ 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;
+ }
+
+ li.dropdown.open div.submenu_mobile{
+ 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;
+ }
+
+ .odevzdanareseni_small {
+ display: none;
+ }
+
+ .odevzdanareseni_mini {
+ display: table-cell;
+ }
+
+}
+
diff --git a/mamweb/static/css/mamweb.css b/mamweb/static/css/mamweb.css
deleted file mode 100644
index 0d699d5c..00000000
--- a/mamweb/static/css/mamweb.css
+++ /dev/null
@@ -1,1323 +0,0 @@
-@charset "utf-8"; /* vynuť utf-8 */
-@import url("rozliseni.css");
-
-@font-face {
-font-family: 'OpenSans';
-src: url("../fonts/OpenSans/OpenSans-Regular.ttf");
-font-weight: normal;
-}
-
-p {
- text-align: justify;
-}
-
-body {
- font-family: 'OpenSans';
- background-color: #fffbf6;
- min-height: 100%;
-}
-div.content-wrapper {
- padding-bottom: 200px; /* Footer height */
-}
-
-div.container {
- width: 970px;
- margin: auto;
- min-height: 100vh;
- position: relative;
-}
-
-.org-logged-in div.container {
- margin-top: 20px;
-}
-
-div.login-bar {
- background: #6a0043;
- color: #f9d59e;
- width: 100%;
-
- position: fixed;
- margin-top: -20px;
- min-height: 20px;
- z-index: 4086;
-
- padding-left: 5px;
- padding-right: 5px;
-}
-
-div.login-bar div {
- display: inline;
-}
-
-a.login-ref-admin {
- display: inline;
- color: #fffbf6;
-}
-
-.napis-webarum {
- display: inline;
- color: #fffbf6;
- float: right;
-}
-
-.napis-webarum a {
- color: #f9d59e;
- text-decoration: underline;
-}
-
-/* odkazy a nadpisy */
-
-a {
- color: #6f2509;
-}
-
-a:focus, a:hover, a:active {
- color: #e84e10;
- text-decoration: none;
-}
-
-img {
- filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
- max-width: 100%;
- height: auto;
-}
-
-h1 { /*todo: odlišit 1 a 2 */
- font-size: 200%;
- font-variant: small-caps;
- font-weight: bold;
- color: #6f2509;
-}
-
-h2 {
- font-size: 200%;
- font-variant: small-caps;
- font-weight: bold;
- color: #6f2509;
-}
-
-h3 {
- font-size: 160%;
- font-variant: small-caps;
- font-weight: bold;
- color: #6f2509;
-}
-
-h4 {
- font-size: 140%;
- font-variant: small-caps;
- font-weight: bold;
- color: #6f2509;
-}
-
-h5 {
- font-size: 140%;
- font-variant: small-caps;
- font-weight: bold;
- color: black;
-}
-
-h6 {
- font-size: 120%;
- font-variant: small-caps;
- font-weight: bold;
- color: black;
-}
-
-.button {
- margin: 10px 0px 10px 0px;
- padding: 4px 0; /*vertikální centování textu*/
- text-align: center;
- background-color: #e84e10;
- color: #fffbf6;
- font-size: 150%;
- font-weight: bold;
- font-variant: small-caps;
- filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
-}
-
-.button:hover {
- position: relative;
- top: 2px;
- left:2px;
- background-color: #df490e;
-;
-}
-
-
-.org-logged-in .mam-text-plugin {
- border: dashed 1px #6a0043;
- padding: 5px;
- margin: -5px;
-}
-
-.mam-org-only {
- background: #eee4ec;
- padding: 10px;
- margin: 10px -10px;
- border: #6a0043 2px dashed;
-}
-
-.mam-org-only .mam-org-only {
- border: 0px;
-}
-
-li.mam-org-only {
- padding: 3px 0px;
- margin: -2px 0px;
-}
-
-table .border-r {
- border-right: solid 1px;
-}
-
-table .border-b {
- border-bottom: solid 1px;
-}
-
-.vysledkovka td, .vysledkovka th {
- padding: 0.1em 0.3em;
-}
-
-.vysledkovka {
- border: solid 2px;
-}
-
-.podproblem {
- color: gray;
-}
-
-div.container {
- padding: 0px;
-}
-
-div.content {
- padding: 15px 30px;
-}
-
-h1 {
- margin-top: 0px;
-}
-
-/* Headline & Header */
-
-#title { /*dělá blbosti šířka, je to kvůli fixed pozici, zatím natvrdo, vyřešit*/
- height: 55px;
- width: 970px;
- position: fixed;
- z-index: 2048;
- background-color: #e84e10;
- filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
-
- font-size: 28px;
- color: #fffbf6;
- font-weight: 400;
- font-variant: small-caps;
- text-align: center;
- text-decoration: none;
- padding-top: 8px;
- text-shadow: none;
-}
-
-#title-mobile {
- display: none;
-}
-
-
-#header {
- position: relative;
- 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 {
- position: absolute center;
- width: 100%;
- filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
-}
-
-#header img.logo-mobile {
- display: none;
-}
-
-.no-mobile {
- background-size: contain;
-}
-
-/* Menu */
-
-ul.menu_mobile {
- display: none;
-}
-
-nav.nav-button {
- display: none;
-}
-
-div.dropdown-backdrop { /* tohle způsobuje, že funguje mobilní menu */
- z-index: -1;
-}
-
-h1 a:hover {
- text-decoration: none;
-}
-
-/* nové menu */
-
-ul.menu {
- width: 100%;
- padding: 0px;
- 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 {
- text-decoration: none;
- font-weight: bold;
- font-size: 105%;
-}
-
-ul.menu li {
- margin: 0px;
- display: inline-block;
- width: 16.666667%;
- text-align: center;
-
- font-size: 140%;
- font-weight: 400;
-}
-
-ul.menu li>a:hover {
- color: black;
-}
-
-ul.menu li>a:active { /* TODO: nefunfuje */
- color: black;
-}
-
-ul.submenu {
-
- background-color: #e84e10;
- margin-top: 10px; /* mezera mezi hlavním menu a submenu */
- margin-bottom: 10px;
- padding-top: 10px;
- padding-bottom: 5px;
- filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
-}
-
-ul.submenu {
- background-color: #e84e10;
- z-index: 50;
- font-weight: 400;
-}
-
-ul.submenu li {
- width: auto;
- padding: 0px 20px 0px 20px;
- display: inline-block;
-}
-ul.submenu li>a {
- color: #f9d59e;
- text-decoration: none;
- text-shadow: none;
-}
-
-ul.submenu li>a:hover {
- color: black;
-}
-
-ul.menu li.active>a {
- color: #f9d59e;
-}
-
-ul.submenu li.active>a, .parentactive ul li:first-child>a {
- color: black;
-}
-
-/* konec nového menu */
-
-div.novinky_name {
- text-align: right;
- font-style: italic;
-}
-
-
-
-/**********
- * Footer
-**********/
-
-
-#footer {
- position: absolute;
- bottom: 0;
- width: 100%;
- background: url("../images/mozaika-footer.svg") no-repeat top center;
- height: 200px;
- background-position: relative;
- 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;
-}
-
-/*********************/
-
-/* přihláška a další formuláře */
-
-table.form td, table.form tr {
- table-layout: fixed;
- word-wrap: break-word;
- padding: 5px;
-}
-
-table#reseni.form td, table#reseni.form tr {
- display: inline-table;
-}
-
-input[type="file"] {
- max-width: 250px;
- text-overflow: ellipsis;
-}
-
-.field-with-comment{
- position:relative;
-}
-
-.field-comment{
- display:none;
- text-shadow: 0 1px 0 #fff;
- background-color: #f0f0f0 ;
- border-color: #dbdbdb;
- position:absolute;
- z-index:100;
- border:1px;
- border-style:solid;
- border-width:1px;
- border-radius: 5px;
- padding:3px;
- top:50px;
- left:10px;
-}
-
-.field-with-comment:hover span.field-comment{
- display: block;
-}
-
-input {
- margin: 5px;
-}
-
-textarea.feedback {
- margin: 5px;
-}
-
-/* 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) */
-.has_smazat_hodnoceni {
- min-width: 20px;
- padding: 3px;
-}
-
-
-/* titulni stranka */
-
-.titulnistrana {
- display: flex;
- text-align: justify;
-}
-
-.titulnistrana h1 {
- text-align: center;
-}
-
-.zjistit_vic{
- text-align: center;
- margin-bottom: 30px;
-}
-
-.zjistit_vic hr {
- display: none;
-}
-
-.graf-svg {
- display: flex;
-}
-
-#svg-graf {
- width: 100%;
- height: auto;
- margin: 30px;
-}
-
-.titulnistrana_obsah {
- width: 66%;
-}
-
-.vitej_titulka, .temata_titulka {
- width: 49%;
- padding: 10px;
- display: table-cell;
-}
-
-.titulnistrana_novinky {
- width: 33%;
- padding: 10px;
-}
-
-.novinka_obrazek {
- margin: 10px 0px 10px 0px;
- width: 100%;
-}
-
-.novinka_datum {
- font-weight: bold;
-}
-
-.novinka_autor {
- text-align: right;
- font-style: italic;
-}
-
-div.org-text {
- font-style: italic;
-}
-
-div.odpocet {
- margin: 20px;
- text-align: center;
-}
-
-.odevzdanareseni_mid, .odevzdanareseni_small, .odevzdanareseni_mini {
- display: none;
-}
-
-/**********************
- * 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 */
- }
-
- .odevzdanareseni_big {
- display: none;
- }
-
- .odevzdanareseni_mid {
- display: table-cell;
- }
-
-}
-
-/* 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;
- }
-
- .odevzdanareseni_mid {
- display: none;
- }
-
- .odevzdanareseni_small {
- display: table-cell;
- }
-}
-
-/* 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.cojemam,
- #header.soustredeni,
- #header.zadani,
- #header.clanky,
- #header.archiv,
- #header.NOC,
- #header.NOCcojemam,
- #header.NOCsoustredeni,
- #header.NOCzaani,
- #header.NOCclanky,
- #header.NOCarchiv {
- 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: #e84e10;
- }
-
- button.navbar-button {
- color: #f9d59e;
- background-color: #e84e10;
- 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;
- }
-
- li.dropdown.open div.submenu_mobile{
- display: block;
- }
-
-
- /*patička mobil*/
-
- #footer {
- display: none;
- }
-
- p.license-mobile {
- position: relative;
- display: block;
- font-size: 90%;
- background-color: #e84e10;
- 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;
- }
-
- .odevzdanareseni_small {
- display: none;
- }
-
- .odevzdanareseni_mini {
- display: table-cell;
- }
-
-}
-
-/*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: 0px;
-}
-
-div.org_email {
- margin-bottom: 10px;
- font-weight: bold;
-}
-
-/*otáčecí karty (orgové, archiv) */
-
-.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;
- width: 100%;
- height: 100%;
- transition: transform 0.8s;
- transform-style: preserve-3d;
-}
-
-/* Do an horizontal flip when you move the mouse over the flip box container */
-.flip-card:hover .flip-card-inner {
- transform: rotateY(180deg);
-}
-
-/* Position the front and back side */
-.flip-card-front, .flip-card-back {
- position: absolute;
- width: 100%;
- height: 100%;
- -webkit-backface-visibility: hidden; /* Safari */
- backface-visibility: hidden;
-}
-
-
-div.flip-card-foto, div.flip-card-foto img {
- width: 100%;
- height: 100%;
-
-}
-
-/* Style the back side */
-.flip-card-back {
- background-color: #f9d59e;
- color: black;
- transform: rotateY(180deg);
- padding: 10px;
- padding-top: 20px;
-}
-
-#archiv.flip-card-back {
- background-color: white;
-}
-
-/* karty archiv */
-
-div.popis_rocniku {
- text-align: left;
- font-weight: bold;
- margin: 20px;
-}
-
-
-div.popis_rocniku a, div.cislo_odkazy a {
- font-weight: bold;
- color: black;
-}
-
-div.popis_rocniku a:hover,
-div.cislo_odkazy a:hover {
- color: #6f2509;
-}
-
-div.cislo_odkazy ul {
- margin: 0px;
- padding: 0px;
-}
-
-/* aktuální zadání */
-.stranka_aktualni_zadani {
- text-align: center;
-}
-
-#azad_obrazek {
- margin-top: 15px;
-}
-
-div.zadani_termin {
- text-align: center;
- font-size: large;
- font-weight: bold;
-}
-
-@media (max-width: 420px) {
- div.zadani_termin {
- font-size: small;
- }
-
-}
-
-div.zadani_termin .datum {
- color:#e84e10;
- margin:0px;
-}
-
-#obrazek_cisla_archiv {
- text-align: center;
- margin: 10px;
-}
-
-
-/* galerie */
-
-/* velká fotka */
-/* zmenšování spolu s oknem prohlížeče */
-.galerie .obrazek, .titulni_obrazek {
- max-width: 100%;
- height: auto;
- width: auto\9; /* ie8 */
-}
-
-.predchozi_obrazek{
- position: absolute;
- z-index: 1;
- width: 33%;
- height: 100%;
- left: 0;
- top: 0;
-}
-.predchozi_obrazek:hover{
- background-image: url("/static/galerie/prvky/predchozi.svg");
- filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
- background-position: left center;
- background-repeat: no-repeat;
-}
-.dalsi_obrazek{
- position: absolute;
- z-index: 1;
- width: 33%;
- height: 100%;
- left: 67%;
- top: 0;
-}
-.dalsi_obrazek:hover{
- background-image: url("/static/galerie/prvky/dalsi.svg");
- filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
- background-position: right center;
- background-repeat: no-repeat;
-}
-
-.galerie {
- position: relative;
- text-align: center;
- margin: 20px auto 0 auto;
-}
-
-.galerie h1 {
- text-align: center;
-}
-
-.galerie_hlavicka {
- margin: 30px auto 30px auto;
-}
-
-.popis {
- margin: 10px 10px 30px 0px;
- text-align: center;
-}
-
-#nahoru {
- text-align: center;
-}
-
-/* titulní obrázek hlavní galerie soustředění */
-
-.galerie_nahledy{
- /*margin: 1em 0;*/
- margin: auto;
- padding: 10px;
- text-align: center;
- overflow: auto;
-}
-
-.galerie_nahledy img {
- margin: 10px;
-}
-
-.galerie_nahledy div.navigace {
- display: inline-block;
-}
-
-.galerie_nahled, .podgalerie_nahled { /* frame */
- display: block;
- position: relative;
- float: left;
- width: 200px;
- height: 200px;
- text-align: center;
- border: solid;
- border-width: 1px;
- border-radius: 4px;
- border-color: #f9d59e;
- background-color: #fffbf6;
- white-space: nowrap;
- margin: 10px;
- font-weight: bold;
-}
-
-.galerie_nahled:hover, .podgalerie_nahled:hover {
- background-color: #f9d59e;
- filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
- color: #6f2509;
-}
-
-.vystredeno{ /* helper */
- display: inline-block;
- height: 100%;
- vertical-align: middle;
-}
-
-.galerie_nahled img {
- vertical-align: middle;
- max-height: 180px;
- max-width: 180px;
-}
-
-.galerie_nahled div {
- position: absolute;
- bottom: 0px;
- width: 100%;
- text-align: center;
-}
-
-.podgalerie_nahled img {
- margin-top: 20px;
- margin-bottom: 15px;
- max-height: 125px;
- max-width: 167px;
-}
-
-.podgalerie_nahled .nazev_galerie {
- position: absolute;
- width: 100%;
- top: 160px;
-}
-
-/* plus a minus tlacitka */
-.mam-org-only-galerie {
- background: #eee4ec;
- padding: 10px;
- margin: 10px 10px 10px -20px;
- border: #333 2px dashed;
- float: left;
-}
-
-.mam-org-only-galerie a{
- padding: 3px 5px;
- margin: 5px;
- border-radius: 20px;
- background-color: #6f2509;;
- color: #fffbf6;
- float: left;
-}
-
-
-/* Odkazy na předchozí a následující podgalerii */
-.galerie_predchozi_nasledujici {
- overflow: auto;
- margin: 10px auto 10px auto;
-}
-
-.galerie_predchozi_nasledujici .predchozi {
- float: left;
-}
-
-.galerie_predchozi_nasledujici .nasledujici {
- float: right;
-}
-
-/* posune kotvu obrázku v galerii o oranžový pruh dolu, aby se pod ním obrázek neschovával */
-/* https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header */
-.kotva_obrazku {
- position: absolute;
- width: 0;
- height: 55px; /* viz #title */
- margin-top: -55px; /* viz #title */
-}
-@media(max-width: 860px) {
- .kotva_obrazku {
- height: 3em; /* #FIXME nemám páru, jak zjistit výšku toho elementu */
- margin-top: -3em; /* #FIXME */
- }
-}
-
-/**/
-
-ul.form {
- list-style-type: none;
- padding-left: 0px;
-}
-label.field-label {
- font-weight: normal;
-}
-label.field-required {
- font-weight: bold;
-}
-.field-error {
- font-size: 14px;
- color: red;
-}
-ul.form li{
- margin-bottom: 3px;
-}
-p.gdpr {
- font-size: 6pt;
- margin-bottom: .66em;
-}
-div.gdpr {
- font-size: 6pt;
-}
-
-/* Jak řešit */
-
-.jakresit svg {
- width: 33%;
- padding: 10px;
- filter: none;
-}
-
-@media(max-width: 860px) {
- .jakresit svg {
- margin: auto;
- display: grid;
- width: 100%;
- max-width: 360px;
- }
-}
-
-/* tabulka odevzdaných a došlých řešení */
-
-/* Roztáhne obsah z containeru na celou šířku obrazovky: */
-.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;
- }
-}
-
-.dosla_reseni tr th, .dosla_reseni tr td {
- padding: 1px 10px 1px 10px;
- border-collapse: collapse;
- min-width: 8em; /*Nastřeleno, aby se řádky s řešeními nezalamovaly. Teoreticky není potřeba pro th, ale whatever.*/
-}
-
-.dosla_reseni tr:nth-child(even) {
- background: rgb(253, 237, 213);
-}
-
-/*Přichycování prvního sloupce a řádku*/
-.dosla_reseni {
- display: block;
- max-height: 90vh;
- max-width: 90vw;
- overflow: auto;
- margin-left: 5vw;
-}
-
-.dosla_reseni thead tr {
- position: sticky;
- top: 0;
- z-index: 1;
-}
-
-.dosla_reseni tr:nth-child(even) td:first-child, .dosla_reseni thead tr, .dosla_reseni thead tr:first-child td:first-child {
- background: rgb(253, 237, 213);
-}
-
-.dosla_reseni tr:nth-child(odd) td:first-child {
- background: #fffbf6;
-}
-
-.dosla_reseni tr td:first-child {
- position: sticky;
- left: 0;
-}
-/* */
-
-
-.odevzdana_reseni tr th, .odevzdana_reseni tr td {
- border: 1px solid black;
- padding: 1px 10px 1px 10px;
- border-collapse: collapse;
- text-align: center;
-}
-
-.odevzdana_reseni.problem tr td {
- text-align: left;
-}
-
-/* registrace */
-label[for=id_skola] {
- font-weight: bold;
-}
-
-/* detail řešení */
-.bodovani>input {
- width: 4em;
-}
-
-.bodovani>input::placeholder {
- color: lightgray;
- opacity: 1;
-}
-
-.bodovani>input::-webkit-input-placeholder { /* Edge */
- color: lightgray;
-}
-
-
-/* Select2 používaný hlavně multiple selectem. Přidání checkboxů a změna barvy. */
-/* Podle https://stackoverflow.com/a/48290544 */
-/* U autocomplete.ModelSelect2Multiple vyžaduje 'data-dropdown-css-class': 's2m-se-zaskrtavatky' */
-.s2m-se-zaskrtavatky .select2-results__option[aria-selected=true]:before {
- content: '☑ ';
- padding: 0 0 0 8px;
-}
-
-.s2m-se-zaskrtavatky .select2-results__option[aria-selected=false]:before {
- content: '◻ ';
- padding: 0 0 0 8px;
-}
-
-/* Oranžové zvýraznění v Select2 */
-.select2-results__option--highlighted {
- background-color: #e84e10 !important;
-}
diff --git a/mamweb/static/css/modules.css b/mamweb/static/css/modules.css
new file mode 100644
index 00000000..15fb9a5e
--- /dev/null
+++ b/mamweb/static/css/modules.css
@@ -0,0 +1,347 @@
+@charset "utf-8"; /* vynuť utf-8 */
+
+/* Bloky použité na webu */
+
+
+/**** OZNAČENÍ NE-PUBLIC ČÁSTÍ ****/
+.mam-org-only {
+ background: var(--orgovska-svetla-fialova);
+ padding: 10px;
+ margin: 10px -10px;
+ border: var(--orgovska-fialova) 2px dashed;
+}
+
+.mam-org-only .mam-org-only {
+ border: 0px;
+}
+
+li.mam-org-only {
+ padding: 3px 0px;
+ margin: -2px 0px;
+}
+
+/* plus a minus tlacitka */
+.mam-org-only-galerie {
+ background: var(--orgovska-svetla-fialova);
+ padding: 10px;
+ margin: 10px 10px 10px -20px;
+ border: #333 2px dashed;
+ float: left;
+}
+
+.mam-org-only-galerie a{
+ padding: 3px 5px;
+ margin: 5px;
+ border-radius: 20px;
+ background-color: var(--tmava-oranzova);;
+ color: var(--barva-pozadi);
+ float: left;
+}
+/**********************************/
+
+
+/**** ZAŠKRTÁVÁTKO ****/
+/* Select2 používaný hlavně multiple selectem. Přidání checkboxů a změna barvy. */
+/* Podle https://stackoverflow.com/a/48290544 */
+/* U autocomplete.ModelSelect2Multiple vyžaduje 'data-dropdown-css-class': 's2m-se-zaskrtavatky' */
+.s2m-se-zaskrtavatky .select2-results__option[aria-selected=true]:before {
+ content: '☑ ';
+ padding: 0 0 0 8px;
+}
+
+.s2m-se-zaskrtavatky .select2-results__option[aria-selected=false]:before {
+ content: '◻ ';
+ padding: 0 0 0 8px;
+}
+
+/* Oranžové zvýraznění v Select2 */
+.select2-results__option--highlighted {
+ background-color: var(--hlavni-oranzova) !important;
+}
+/**********************/
+
+
+/**** OTÁČECÍ KARTY ****/
+/* (orgové, archiv) */
+.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;
+ width: 100%;
+ height: 100%;
+ transition: transform 0.8s;
+ transform-style: preserve-3d;
+}
+
+/* Do an horizontal flip when you move the mouse over the flip box container */
+.flip-card:hover .flip-card-inner {
+ transform: rotateY(180deg);
+}
+
+/* Position the front and back side */
+.flip-card-front, .flip-card-back {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -webkit-backface-visibility: hidden; /* Safari */
+ backface-visibility: hidden;
+}
+
+
+div.flip-card-foto, div.flip-card-foto img {
+ width: 100%;
+ height: 100%;
+
+}
+
+/* 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;
+}
+
+/* karty archiv */
+
+div.popis_rocniku {
+ text-align: left;
+ font-weight: bold;
+ margin: 20px;
+}
+
+
+div.popis_rocniku a, div.cislo_odkazy a {
+ font-weight: bold;
+ color: black;
+}
+
+div.popis_rocniku a:hover,
+div.cislo_odkazy a:hover {
+ color: var(--tmava-oranzova);
+}
+
+div.cislo_odkazy ul {
+ margin: 0px;
+ padding: 0px;
+}
+/***********************/
+
+
+/**** TABULKY ****/
+/** Výsledkovky **/
+table .border-r {
+ border-right: solid 1px;
+}
+
+table .border-b {
+ border-bottom: solid 1px;
+}
+
+.vysledkovka td, .vysledkovka th {
+ padding: 0.1em 0.3em;
+}
+
+.vysledkovka {
+ border: solid 2px;
+}
+
+.podproblem {
+ color: gray;
+}
+/*****************/
+
+
+/** Tabulka odevzdaných a došlých řešení **/
+.dosla_reseni tr th, .dosla_reseni tr td {
+ padding: 1px 10px 1px 10px;
+ border-collapse: collapse;
+ min-width: 8em; /*Nastřeleno, aby se řádky s řešeními nezalamovaly. Teoreticky není potřeba pro th, ale whatever.*/
+}
+
+.dosla_reseni tr:nth-child(even) {
+ background: var(--svetlounka-oranzova);
+}
+
+/*Přichycování prvního sloupce a řádku*/
+.dosla_reseni {
+ display: block;
+ max-height: 90vh;
+ max-width: 90vw;
+ overflow: auto;
+ margin-left: 5vw;
+}
+
+.dosla_reseni thead tr {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+}
+
+.dosla_reseni tr:nth-child(even) td:first-child, .dosla_reseni thead tr, .dosla_reseni thead tr:first-child td:first-child {
+ background: var(--svetlounka-oranzova);
+}
+
+.dosla_reseni tr:nth-child(odd) td:first-child {
+ background: var(--barva-pozadi);
+}
+
+.dosla_reseni tr td:first-child {
+ position: sticky;
+ left: 0;
+}
+/******************************************/
+
+
+/** Tabulka mých (řešitelových) řešení **/
+.odevzdana_reseni tr th, .odevzdana_reseni tr td {
+ border: 1px solid black;
+ padding: 1px 10px 1px 10px;
+ border-collapse: collapse;
+ text-align: center;
+}
+
+.odevzdana_reseni.problem tr td {
+ text-align: left;
+}
+/****************************************/
+
+
+/** Detail řešení **/
+.bodovani>input {
+ width: 4em;
+}
+
+.bodovani>input::placeholder {
+ color: lightgray;
+ opacity: 1;
+}
+
+.bodovani>input::-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) */
+.has_smazat_hodnoceni {
+ min-width: 20px;
+ padding: 3px;
+}
+/*******************/
+/*****************/
+
+
+/**** FORMULÁŘE ****/
+/* přihláška a další formuláře */
+
+table.form td, table.form tr {
+ table-layout: fixed;
+ word-wrap: break-word;
+ padding: 5px;
+}
+
+table#reseni.form td, table#reseni.form tr {
+ display: inline-table;
+}
+
+input[type="file"] {
+ max-width: 250px;
+ text-overflow: ellipsis;
+}
+
+.field-with-comment{
+ position:relative;
+}
+
+.field-comment{
+ display:none;
+ text-shadow: 0 1px 0 #fff;
+ background-color: #f0f0f0 ;
+ border-color: #dbdbdb;
+ position:absolute;
+ z-index:100;
+ border:1px;
+ border-style:solid;
+ border-width:1px;
+ border-radius: 5px;
+ padding:3px;
+ top:50px;
+ left:10px;
+}
+
+.field-with-comment:hover span.field-comment{
+ display: block;
+}
+
+input {
+ margin: 5px;
+}
+
+textarea.feedback {
+ margin: 5px;
+}
+
+
+
+ul.form {
+ list-style-type: none;
+ padding-left: 0px;
+}
+label.field-label {
+ font-weight: normal;
+}
+label.field-required {
+ font-weight: bold;
+}
+.field-error {
+ font-size: 14px;
+ color: red;
+}
+ul.form li{
+ margin-bottom: 3px;
+}
+p.gdpr {
+ font-size: 6pt;
+ margin-bottom: .66em;
+}
+div.gdpr {
+ font-size: 6pt;
+}
+
+/* registrace */
+label[for=id_skola] {
+ font-weight: bold;
+}
+
+/*******************/
+
diff --git a/mamweb/static/css/rozliseni.css b/mamweb/static/css/rozliseni.css
deleted file mode 100644
index 35f52f88..00000000
--- a/mamweb/static/css/rozliseni.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/* Rozlišení mezi lokálním, test a produkčním webem */
-
-body.localweb:before, body.localweb:after,
-body.testweb:before, body.testweb:after,
-body.suprodweb:before, body.suprodweb:after {
- content: "";
- position: fixed;
- width: 20px;
- height: 100%;
- top: 0;
-}
-
-body.localweb:before,
-body.testweb:before,
-body.suprodweb:before {
- left: 0;
-}
-
-body.localweb:after,
-body.testweb:after,
-body.suprodweb:after {
- right: 0;
-}
-
-body.localweb:before, body.localweb:after {
- background: greenyellow;
-}
-
-body.testweb:before, body.testweb:after {
- background: darkorange;
-}
-
-body.suprodweb:before, body.suprodweb:after {
- background: red;
-}
diff --git a/mamweb/templates/base.html b/mamweb/templates/base.html
index da6f67e1..5a0b55c6 100644
--- a/mamweb/templates/base.html
+++ b/mamweb/templates/base.html
@@ -10,7 +10,11 @@
{% block custom_css %}{% endblock %}
-
+
+
+
+
+
diff --git a/vue_frontend/src/components/TreeNodeRoot.vue b/vue_frontend/src/components/TreeNodeRoot.vue
index 674d0fda..408efce5 100644
--- a/vue_frontend/src/components/TreeNodeRoot.vue
+++ b/vue_frontend/src/components/TreeNodeRoot.vue
@@ -73,5 +73,9 @@ export default {