From b5dd5207e4855af42a1e09eaa8dbd0082ee67dab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Hozda?= Date: Thu, 8 Oct 2020 07:30:13 +0200 Subject: [PATCH] fix inner html, and other stuff, mob part 1 --- src/routes/akcelerator.svelte | 138 ++++ src/routes/oborovky.svelte | 8 +- src/routes/prebiram.svelte | 8 +- src/routes/predseda.svelte | 8 +- src/routes/zalozit-spolek.svelte | 11 +- src/routes/zapojit-se.svelte | 8 +- src/template.html | 4 +- static/css/chota.css | 1001 ++++++++++++++++++++++++++++++ 8 files changed, 1163 insertions(+), 23 deletions(-) create mode 100644 src/routes/akcelerator.svelte create mode 100644 static/css/chota.css diff --git a/src/routes/akcelerator.svelte b/src/routes/akcelerator.svelte new file mode 100644 index 0000000..802c076 --- /dev/null +++ b/src/routes/akcelerator.svelte @@ -0,0 +1,138 @@ + + + + + + + +
+
+ +
+
+
+
+

Spolkový akcelerátor

+
+
+ Spolkový akcelerátor je program, který vám pomůže se založením spolku a s prvními kroky jeho fungování. + Jeho úkolem je poskytnout Vám metodikou a finanční pomoc do začátku, abyste mohli rychleji dosahovat + vytyčených cílů.

+ Na začátku si společně projdeme váš výchozí stav, cíle, priority a vize. Domluvíme se, kde by měl být + váš spolek za 6 měsíců. Po ukončení programu si spolupráci vyhodnotíme a nasměrujeme další kroky. +
+ +
+
+
+
+
+
+
+
+
+
Pro koho to je?
+
+

+ Přihlásit se může jakýkoliv student nebo skupina studentů Pedagogické fakulty Univerzity Karlovy, + kteří mají zájem založit studentský spolek působící na fakultě. +

+
+
Jak se přihlásit?
+
+

+ Je to jednoduché. Pošlete na e-mail tomas.bederka@pedf.cuni.cz tvůj záměr studentského spolku, + který bude obsahovat následující informace: +

+
    +
  • Jména studentů, kteří chtějí studentský spolek založit.
    • +
  • Cíle spolku – co chcete spolkem říct, jaká má být jeho činnost
    • +
  • Motivace založení
    • +
+

+ Rozsah: maximálně 1x A4 +

+
+
+
+
+
+
Fáze akcelerátoru
+
+
    +
  1. Přípravná fáze - + Dva měsíce budeme připravovat založení. Říká se, že štěstí přeje připraveným. + Proto přípravě budeme věnovat celé dva měsíce. Nastavíme si specifické cíle, + kde chcete na konci akcelerátoru být, připravíme stanovy a počátek fungování spolku + (celé stanovy, orgány, bankovní účet atd.). Vysvětlíme ti pravidla spolků na fakultě + Zároveň se sejdeš s našimi předsedy už stávajících spolků, aby ti mohli poradit na základě vlastních zkušeností + z fungování fakultních spolků. +
    2. +
  2. Založení a první kroky - + Další dva měsíce budeme pracovat na náboru nových členů, nastavení propagace, + a hlavně vnitřních procesů, aby vše fungovalo, jak má. Budete si zkoušet, kterými + cestami chcete vydat, a objevíte i nějaké i ty slepé. Budete chodit na valné hromady + jiných spolků dívat se a scházet se s jedním ze spolkových předsedů. Na konci této fáze + by měl být váš spolek nastaven tak, že procesy se budou dít automaticky a budete mít + čas se pustit do svého prvního projektu. +
    3. +
  3. První projekt - + Po nastavení fungování je čas na první projekt. Jaký je základ projektového řízení, kde na tebe čekají nástrahy? + Všechno s tebou projdeme a budeme ti průvodcem. Připravíme to s tebou od A do Z a potom provedeme reflexirealizovaného projektu +
    4. +
  4. Reflexe - + Po šesti měsících spolupráce je třeba vás vyslat do spolkového světa. Ještě předtím si ale s vámi sedneme + a vyhodnotíme vaši cestu. Co se vám dařilo, co méně a jaký je náš pohled naváš další vývoj. +
    5. +
+
+
+
+
+
diff --git a/src/routes/oborovky.svelte b/src/routes/oborovky.svelte index 4a531bf..a26c438 100644 --- a/src/routes/oborovky.svelte +++ b/src/routes/oborovky.svelte @@ -21,13 +21,13 @@ onMount(() => { const setup = () => { - const pList = document.querySelectorAll('p, li, a, span'); + const pList = document.querySelectorAll('main p, main li, main span'); pList.forEach(p => noMoreLonelyWords(p)); }; - const clearWordBreaks = (target) => target.textContent = target.textContent.replace(/\u00a0/g, ' '); + const clearWordBreaks = (target) => target.innerHTML = target.innerHTML.replace(/\u00a0/g, ' '); const noMoreLonelyWords = (target) => { - let textArray = target.textContent.split(' '); + let textArray = target.innerHTML.split(' '); let newTextArray = []; textArray.forEach((word, i, list) => { let textEntry = ''; @@ -37,7 +37,7 @@ textEntry = word + ' '; newTextArray.push(textEntry); }); - target.textContent = newTextArray.join(''); + target.innerHTML = newTextArray.join(''); }; const updateWordBreaks = (target) => { clearWordBreaks(target); diff --git a/src/routes/prebiram.svelte b/src/routes/prebiram.svelte index c2a8272..950f5fa 100644 --- a/src/routes/prebiram.svelte +++ b/src/routes/prebiram.svelte @@ -14,13 +14,13 @@ onMount(() => { const setup = () => { - const pList = document.querySelectorAll('p, li, a, span'); + const pList = document.querySelectorAll('main p, main li, main span'); pList.forEach(p => noMoreLonelyWords(p)); }; - const clearWordBreaks = (target) => target.textContent = target.textContent.replace(/\u00a0/g, ' '); + const clearWordBreaks = (target) => target.innerHTML = target.innerHTML.replace(/\u00a0/g, ' '); const noMoreLonelyWords = (target) => { - let textArray = target.textContent.split(' '); + let textArray = target.innerHTML.split(' '); let newTextArray = []; textArray.forEach((word, i, list) => { let textEntry = ''; @@ -30,7 +30,7 @@ textEntry = word + ' '; newTextArray.push(textEntry); }); - target.textContent = newTextArray.join(''); + target.innerHTML = newTextArray.join(''); }; const updateWordBreaks = (target) => { clearWordBreaks(target); diff --git a/src/routes/predseda.svelte b/src/routes/predseda.svelte index 6bb27f5..c5e8b51 100644 --- a/src/routes/predseda.svelte +++ b/src/routes/predseda.svelte @@ -15,13 +15,13 @@ onMount(async () => { window.currentSlide(1); const setup = () => { - const pList = document.querySelectorAll('p, li, a, span'); + const pList = document.querySelectorAll('main p, main li, main span'); pList.forEach(p => noMoreLonelyWords(p)); }; - const clearWordBreaks = (target) => target.textContent = target.textContent.replace(/\u00a0/g, ' '); + const clearWordBreaks = (target) => target.innerHTML = target.innerHTML.replace(/\u00a0/g, ' '); const noMoreLonelyWords = (target) => { - let textArray = target.textContent.split(' '); + let textArray = target.innerHTML.split(' '); let newTextArray = []; textArray.forEach((word, i, list) => { let textEntry = ''; @@ -31,7 +31,7 @@ textEntry = word + ' '; newTextArray.push(textEntry); }); - target.textContent = newTextArray.join(''); + target.innerHTML = newTextArray.join(''); }; const updateWordBreaks = (target) => { clearWordBreaks(target); diff --git a/src/routes/zalozit-spolek.svelte b/src/routes/zalozit-spolek.svelte index 6259bcc..6f1834f 100644 --- a/src/routes/zalozit-spolek.svelte +++ b/src/routes/zalozit-spolek.svelte @@ -14,13 +14,13 @@ onMount(() => { const setup = () => { - const pList = document.querySelectorAll('p, li, a, span'); + const pList = document.querySelectorAll('main p, main li, main span'); pList.forEach(p => noMoreLonelyWords(p)); }; - const clearWordBreaks = (target) => target.textContent = target.textContent.replace(/\u00a0/g, ' '); + const clearWordBreaks = (target) => target.innerHTML = target.innerHTML.replace(/\u00a0/g, ' '); const noMoreLonelyWords = (target) => { - let textArray = target.textContent.split(' '); + let textArray = target.innerHTML.split(' '); let newTextArray = []; textArray.forEach((word, i, list) => { let textEntry = ''; @@ -30,7 +30,7 @@ textEntry = word + ' '; newTextArray.push(textEntry); }); - target.textContent = newTextArray.join(''); + target.innerHTML = newTextArray.join(''); }; const updateWordBreaks = (target) => { clearWordBreaks(target); @@ -70,7 +70,8 @@ co bys chtěl dělat ty? Tak si pro začátek přečti jaké jsou rozdíly mezi formálním a neformálním spolkem a pak vzhůru na to!

- Do budoucnosti připravujeme spolkový akcelerátor, v rámci kterého tě současní a bývalí členové spolků osobně provedou vším, + Do budoucnosti připravujeme spolkový akcelerátor, + v rámci kterého tě současní a bývalí členové spolků osobně provedou vším, co bys k založení spolku potřeboval. diff --git a/src/routes/zapojit-se.svelte b/src/routes/zapojit-se.svelte index 5196d68..6673d81 100644 --- a/src/routes/zapojit-se.svelte +++ b/src/routes/zapojit-se.svelte @@ -20,13 +20,13 @@ window.showSlides(1, "mySlides2", "slideIndex2", 'dot2'); window.showSlides(1, "mySlides3", "slideIndex3", 'dot3'); const setup = () => { - const pList = document.querySelectorAll('p, li, a, span'); + const pList = document.querySelectorAll('main p, main li, main span'); pList.forEach(p => noMoreLonelyWords(p)); }; - const clearWordBreaks = (target) => target.textContent = target.textContent.replace(/\u00a0/g, ' '); + const clearWordBreaks = (target) => target.innerHTML = target.innerHTML.replace(/\u00a0/g, ' '); const noMoreLonelyWords = (target) => { - let textArray = target.textContent.split(' '); + let textArray = target.innerHTML.split(' '); let newTextArray = []; textArray.forEach((word, i, list) => { let textEntry = ''; @@ -36,7 +36,7 @@ textEntry = word + ' '; newTextArray.push(textEntry); }); - target.textContent = newTextArray.join(''); + target.innerHTML = newTextArray.join(''); }; const updateWordBreaks = (target) => { clearWordBreaks(target); diff --git a/src/template.html b/src/template.html index 4c4ba13..936a50d 100644 --- a/src/template.html +++ b/src/template.html @@ -1,5 +1,5 @@ - + @@ -11,7 +11,7 @@ %sapper.base% - + diff --git a/static/css/chota.css b/static/css/chota.css new file mode 100644 index 0000000..de04e9d --- /dev/null +++ b/static/css/chota.css @@ -0,0 +1,1001 @@ +/*! chota.css v0.8.0 | MIT License | github.com/jenil/chota */ +:root { + --bg-color: #ffffff; + --bg-secondary-color: #f3f3f6; + --color-primary: #14854F; + --color-lightGrey: #d2d6dd; + --color-grey: #747681; + --color-darkGrey: #3f4144; + --color-error: #d43939; + --color-success: #28bd14; + --grid-maxWidth: 120rem; + --grid-gutter: 2rem; + --font-size: 1.6rem; + --font-color: #333333; + --font-family-sans: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; + --font-family-mono: monaco, "Consolas", "Lucida Console", monospace; +} +html { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 62.5%; + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +*, *:before, *:after { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} +body { + background-color: var(--bg-color); + line-height: 1.6; + font-size: var(--font-size); + color: var(--font-color); + font-family: "Segoe UI", "Helvetica Neue", sans-serif; /*fallback*/ + font-family: var(--font-family-sans); + margin: 0; + padding: 0; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 500; + margin: 0.35em 0 0.7em 0; +} +h1 { + font-size: 2em; +} +h2 { + font-size: 1.75em; +} +h3 { + font-size: 1.5em; +} +h4 { + font-size: 1.25em; +} +h5 { + font-size: 1em; +} +h6 { + font-size: 0.85em; +} +a { + color: var(--color-primary); + text-decoration: none; +} +a:hover:not(.button) { + opacity: 0.75; +} +button { + font-family: inherit; +} +p { + margin-top: 0; +} +blockquote { + background-color: var(--bg-secondary-color); + padding: 1.5rem 2rem; + border-left: 3px solid var(--color-lightGrey); +} +dl dt { + font-weight: bold; +} +hr { + border: none; + background-color: var(--color-lightGrey); + height: 1px; + margin: 1rem 0; +} +table { + width: 100%; + border: none; + border-collapse: collapse; + border-spacing: 0; + text-align: left; +} +table.striped tr:nth-of-type(2n) { + background-color: var(--bg-secondary-color); +} +td, +th { + vertical-align: middle; + padding: 1.2rem 0.4rem; +} +thead { + border-bottom: 2px solid var(--color-lightGrey); +} +tfoot { + border-top: 2px solid var(--color-lightGrey); +} +code, +kbd, +pre, +samp, +tt { + font-family: var(--font-family-mono); +} +code, +kbd { + padding: 0 0.4rem; + font-size: 90%; + white-space: pre-wrap; + border-radius: 4px; + padding: 0.2em 0.4em; + background-color: var(--bg-secondary-color); + color: var(--color-error); +} +pre { + background-color: var(--bg-secondary-color); + font-size: 1em; + padding: 1rem; + overflow-x: auto; +} +pre code { + background: none; + padding: 0; +} +abbr[title] { + border-bottom: none; + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} +img { + max-width: 100%; +} +fieldset { + border: 1px solid var(--color-lightGrey); +} +iframe { + border: 0; +} +.container { + max-width: var(--grid-maxWidth); + margin: 0 auto; + width: 96%; + padding: 0 calc(var(--grid-gutter) / 2); +} +.row { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + margin-left: calc(var(--grid-gutter) / -2); + margin-right: calc(var(--grid-gutter) / -2); +} +.row.reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} +.col { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.col, +[class*=" col-"], +[class^='col-'] { + margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2); +} +.col-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + max-width: calc((100% / (12/1)) - var(--grid-gutter)); +} +.col-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + max-width: calc((100% / (12/2)) - var(--grid-gutter)); +} +.col-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + max-width: calc((100% / (12/3)) - var(--grid-gutter)); +} +.col-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + max-width: calc((100% / (12/4)) - var(--grid-gutter)); +} +.col-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + max-width: calc((100% / (12/5)) - var(--grid-gutter)); +} +.col-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + max-width: calc((100% / (12/6)) - var(--grid-gutter)); +} +.col-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + max-width: calc((100% / (12/7)) - var(--grid-gutter)); +} +.col-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + max-width: calc((100% / (12/8)) - var(--grid-gutter)); +} +.col-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + max-width: calc((100% / (12/9)) - var(--grid-gutter)); +} +.col-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + max-width: calc((100% / (12/10)) - var(--grid-gutter)); +} +.col-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + max-width: calc((100% / (12/11)) - var(--grid-gutter)); +} +.col-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + max-width: calc((100% / (12/12)) - var(--grid-gutter)); +} +@media screen and (max-width: 800px) { + .container { + width: 100%; + } + + .col, + [class*="col-"], + [class^='col-'] { + -webkit-box-flex: 0; + -ms-flex: 0 1 100%; + flex: 0 1 100%; + max-width: 100%; + } + :root { + --font-size: 2em !important; + } +} +@media screen and (min-width: 900px) { + .col-1-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + max-width: calc((100% / (12/1)) - var(--grid-gutter)); + } + + .col-2-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + max-width: calc((100% / (12/2)) - var(--grid-gutter)); + } + + .col-3-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + max-width: calc((100% / (12/3)) - var(--grid-gutter)); + } + + .col-4-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + max-width: calc((100% / (12/4)) - var(--grid-gutter)); + } + + .col-5-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + max-width: calc((100% / (12/5)) - var(--grid-gutter)); + } + + .col-6-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + max-width: calc((100% / (12/6)) - var(--grid-gutter)); + } + + .col-7-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + max-width: calc((100% / (12/7)) - var(--grid-gutter)); + } + + .col-8-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + max-width: calc((100% / (12/8)) - var(--grid-gutter)); + } + + .col-9-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + max-width: calc((100% / (12/9)) - var(--grid-gutter)); + } + + .col-10-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + max-width: calc((100% / (12/10)) - var(--grid-gutter)); + } + + .col-11-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + max-width: calc((100% / (12/11)) - var(--grid-gutter)); + } + + .col-12-md { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + max-width: calc((100% / (12/12)) - var(--grid-gutter)); + } +} +@media screen and (min-width: 1200px) { + .col-1-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter)); + max-width: calc((100% / (12/1)) - var(--grid-gutter)); + } + + .col-2-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter)); + max-width: calc((100% / (12/2)) - var(--grid-gutter)); + } + + .col-3-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter)); + max-width: calc((100% / (12/3)) - var(--grid-gutter)); + } + + .col-4-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter)); + max-width: calc((100% / (12/4)) - var(--grid-gutter)); + } + + .col-5-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter)); + max-width: calc((100% / (12/5)) - var(--grid-gutter)); + } + + .col-6-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter)); + max-width: calc((100% / (12/6)) - var(--grid-gutter)); + } + + .col-7-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter)); + max-width: calc((100% / (12/7)) - var(--grid-gutter)); + } + + .col-8-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter)); + max-width: calc((100% / (12/8)) - var(--grid-gutter)); + } + + .col-9-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter)); + max-width: calc((100% / (12/9)) - var(--grid-gutter)); + } + + .col-10-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter)); + max-width: calc((100% / (12/10)) - var(--grid-gutter)); + } + + .col-11-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter)); + max-width: calc((100% / (12/11)) - var(--grid-gutter)); + } + + .col-12-lg { + -webkit-box-flex: 0; + -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter)); + max-width: calc((100% / (12/12)) - var(--grid-gutter)); + } +} +fieldset { + padding: 0.5rem 2rem; +} +legend { + text-transform: uppercase; + font-size: 0.8em; + letter-spacing: 0.1rem; +} +input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), +select, +textarea, +textarea[type="text"] { + font-family: inherit; + padding: 0.8rem 1rem; + border-radius: 4px; + border: 1px solid var(--color-lightGrey); + font-size: 1em; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; + display: block; + width: 100%; +} +input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):not(:disabled):hover, +select:hover, +textarea:hover, +textarea[type="text"]:hover { + border-color: var(--color-grey); +} +input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus, +select:focus, +textarea:focus, +textarea[type="text"]:focus { + outline: none; + border-color: var(--color-primary); + -webkit-box-shadow: 0 0 1px var(--color-primary); + box-shadow: 0 0 1px var(--color-primary); +} +input.error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), +textarea.error { + border-color: var(--color-error); +} +input.success:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]), +textarea.success { + border-color: var(--color-success); +} +select { + -webkit-appearance: none; + background: #f3f3f6 no-repeat 100%; + background-size: 1ex; + background-origin: content-box; + background-image: url("data:image/svg+xml;utf8,"); +} +[type="checkbox"], +[type="radio"] { + width: 1.6rem; + height: 1.6rem; +} +/* BUTTONS */ +.button, +[type="button"], +[type="reset"], +[type="submit"], +button { + padding: 1rem 2.5rem; + color: var(--color-darkGrey); + background: var(--color-lightGrey); + border-radius: 4px; + border: 1px solid transparent; + font-size: var(--font-size); + line-height: 1; + text-align: center; + -webkit-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; + text-decoration: none; + -webkit-transform: scale(1); + transform: scale(1); + display: inline-block; + cursor: pointer; +} +.grouped { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.grouped > *:not(:last-child) { + margin-right: 16px; +} +.grouped.gapless > * { + margin: 0 0 0 -1px !important; + border-radius:0 !important; +} +.grouped.gapless > *:first-child { + margin: 0 !important; + border-radius:4px 0 0 4px !important; +} +.grouped.gapless > *:last-child { + border-radius:0 4px 4px 0 !important; +} +.button + .button { + margin-left: 1rem; +} +.button:hover, +[type="button"]:hover, +[type="reset"]:hover, +[type="submit"]:hover, +button:hover { + opacity: 0.8; +} +.button:active, +[type="button"]:active, +[type="reset"]:active, +[type="submit"]:active, +button:active { + -webkit-transform: scale(0.98); + transform: scale(0.98); +} +input:disabled, +button:disabled, +input:disabled:hover, +button:disabled:hover { + opacity: 0.4; + cursor: not-allowed; +} +.button.primary, +.button.secondary, +.button.dark, +.button.error, +.button.success, +[type="submit"] { + color: #fff; + z-index: 1; /* hightlight from other button's border when grouped */ + background-color: #000; + background-color: var(--color-primary); +} +.button.secondary { + background-color: var(--color-grey); +} +.button.dark { + background-color: var(--color-darkGrey); +} +.button.error { + background-color: var(--color-error); +} +.button.success { + background-color: var(--color-success); +} +.button.outline { + background-color: transparent; + border-color: var(--color-lightGrey); +} +.button.outline.primary { + border-color: var(--color-primary); + color: var(--color-primary); +} +.button.outline.secondary { + border-color: var(--color-grey); + color: var(--color-grey); +} +.button.outline.dark { + border-color: var(--color-darkGrey); + color: var(--color-darkGrey); +} +.button.clear { + background-color: transparent; + border-color: transparent; + color: var(--color-primary); +} +.button.icon { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.button.icon > img { + margin-left: 2px; +} +.button.icon-only { + padding: 1rem; +} +::-webkit-input-placeholder { + color: #bdbfc4; +} +::-moz-placeholder { + color: #bdbfc4; +} +:-ms-input-placeholder { + color: #bdbfc4; +} +::-ms-input-placeholder { + color: #bdbfc4; +} +::placeholder { + color: #bdbfc4; +} +.nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 5rem; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} +.nav img { + max-height: 3rem; +} +.nav>.container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.nav-center, +.nav-left, +.nav-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.nav-left { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.nav-right { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.nav-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +@media screen and (max-width: 480px) { + .nav, + .nav>.container { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .nav-center, + .nav-left, + .nav-right { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } +} +.nav a, +.nav .brand { + text-decoration: none; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 1rem 2rem; + color: var(--color-darkGrey); +} +.nav .active:not(.button) { + color: #000; /* fallback */ + color: var(--color-primary); +} +.nav .brand { + font-size: 1.75em; + padding-top: 0; + padding-bottom: 0; +} +.nav .brand img { + padding-right: 1rem; +} +.nav .button { + margin: auto 1rem; +} +.card { + padding: 1rem 2rem; + border-radius: 4px; + background: var(--bg-color); + -webkit-box-shadow: 0 1px 3px var(--color-grey); + box-shadow: 0 1px 3px var(--color-grey); +} +.card p:last-child { + margin: 0; +} +.card header > * { + margin-top: 0; + margin-bottom: 1rem; +} +.tabs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.tabs a { + text-decoration: none; +} +.tabs > .dropdown > summary, +.tabs > a { + padding: 1rem 2rem; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + color: var(--color-darkGrey); + border-bottom: 2px solid var(--color-lightGrey); + text-align: center; +} +.tabs > a.active, +.tabs > a:hover { + opacity: 1; + border-bottom: 2px solid var(--color-darkGrey); +} +.tabs > a.active { + border-color: var(--color-primary); +} +.tabs.is-full a { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} +.tag { + display: inline-block; + border: 1px solid var(--color-lightGrey); + text-transform: uppercase; + color: var(--color-grey); + padding: 0.5rem; + line-height: 1; + letter-spacing: 0.5px; +} +.tag.is-small { + padding: 0.4rem; + font-size: 0.75em; +} +.tag.is-large { + padding: 0.7rem; + font-size: 1.125em; +} +.tag+.tag { + margin-left: 1rem; +} +details.dropdown { + position: relative; + display: inline-block; +} +details.dropdown > :last-child { + position: absolute; + left: 0; + white-space: nowrap; +} +/* Colors */ +.bg-primary { + background-color: var(--color-primary) !important; +} +.bg-light { + background-color: var(--color-lightGrey) !important; +} +.bg-dark { + background-color: var(--color-darkGrey) !important; +} +.bg-grey { + background-color: var(--color-grey) !important; +} +.bg-error { + background-color: var(--color-error) !important; +} +.bg-success { + background-color: var(--color-success) !important; +} +.bd-primary { + border: 1px solid var(--color-primary) !important; +} +.bd-light { + border: 1px solid var(--color-lightGrey) !important; +} +.bd-dark { + border: 1px solid var(--color-darkGrey) !important; +} +.bd-grey { + border: 1px solid var(--color-grey) !important; +} +.bd-error { + border: 1px solid var(--color-error) !important; +} +.bd-success { + border: 1px solid var(--color-success) !important; +} +.text-primary { + color: var(--color-primary) !important; +} +.text-light { + color: var(--color-lightGrey) !important; +} +.text-dark { + color: var(--color-darkGrey) !important; +} +.text-grey { + color: var(--color-grey) !important; +} +.text-error { + color: var(--color-error) !important; +} +.text-success { + color: var(--color-success) !important; +} +.text-white { + color: #fff !important; +} +/* Position & alignment */ +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} +.text-center { + text-align: center; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-justify { + text-align: justify; +} +.text-uppercase { + text-transform: uppercase; +} +.text-lowercase { + text-transform: lowercase; +} +.text-capitalize { + text-transform: capitalize; +} +.is-full-screen { + width: 100%; + min-height: 100vh; +} +.is-full-width { + width: 100% !important; +} +.is-vertical-align { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.is-horizontal-align { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.is-center { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.is-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.is-left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} +.is-fixed { + position: fixed; + width: 100%; +} +.is-paddingless { + padding: 0 !important; +} +.is-marginless { + margin: 0 !important; +} +.is-pointer { + cursor: pointer !important; +} +.is-rounded { + border-radius: 100%; +} +.clearfix { + content: ""; + display: table; + clear: both; +} +.is-hidden { + display: none !important; +} +@media screen and (max-width: 599px) { + .hide-xs { + display: none !important; + } +} +@media screen and (min-width: 600px) and (max-width: 899px) { + .hide-sm { + display: none !important; + } +} +@media screen and (min-width: 900px) and (max-width: 1199px) { + .hide-md { + display: none !important; + } +} +@media screen and (min-width: 1200px) { + .hide-lg { + display: none !important; + } +} +@media print { + .hide-pr { + display: none !important; + } +}