diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..427a575 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,15 @@ +{ + "tabWidth": 2, + "useTabs": false, + "singleQuote": false, + "semi": true, + "trailingComma": "none", + "jsxSingleQuote": false, + "jsxBracketSameLine": true, + "printWidth": 200, + "bracketSpacing": true, + "vueIndentScriptAndStyle": true, + "arrowParens": "always", + "bracketSameLine": false, + "endOfLine": "lf" +} diff --git a/content/vesele_vanoce_2023.md b/content/vesele_vanoce_2023.md index 6d82a84..558ac2d 100644 --- a/content/vesele_vanoce_2023.md +++ b/content/vesele_vanoce_2023.md @@ -9,10 +9,9 @@ pinned = true \ No newline at end of file +> diff --git a/sass/global.scss b/sass/global.scss index 66a4050..1262958 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -1,14 +1,17 @@ * { - padding: 0; - margin: 0; - box-sizing: border-box; + padding: 0; + margin: 0; + box-sizing: border-box; } body { - font-family: 'Kanit', sans-serif; - background-color: var(--clr-lavender); + font-family: 'coolvetica', sans-serif; + font-weight: 500; + font-style: normal; + color: var(--clr-Murrey); + background-color: var(--clr-Lavender); } main { - margin: 0 var(--container-size); -} \ No newline at end of file + margin: 0 var(--container-size); +} diff --git a/sass/header.scss b/sass/header.scss index df40e25..a6910ae 100644 --- a/sass/header.scss +++ b/sass/header.scss @@ -1,7 +1,7 @@ nav { display: flex; justify-content: space-between; - background-color: var(--clr-melon); + background-color: var(--clr-Melon); padding: 1rem var(--container-size); .nav-right, .nav-left { @@ -21,8 +21,9 @@ nav { a { text-decoration: none; font-size: 1.5rem; - font-weight: bold; - color: var(--clr-murrey); + font-weight: 700; + font-size: normal; + color: var(--clr-Murrey); } img { @@ -58,4 +59,4 @@ nav { cursor: pointer; } } -} \ No newline at end of file +} diff --git a/sass/main.scss b/sass/main.scss index 9e9845c..93961ba 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -1,130 +1,157 @@ main { + display: flex; + gap: 2rem; + margin-top: 2rem; + margin-bottom: 2rem; + margin-left: 20vw; + margin-right: 20vw; + + .news-wrapper { + max-width: 80vw; + } + +.aside-wrapper { + min-width: 20vw; + + } + aside{ display: flex; - gap: 2rem; - margin-top: 2rem; - margin-bottom: 2rem; + flex-direction: column; + align-items: center; + padding: 2rem; + background-color: var(--clr-LavenderLight); + border-radius: 15px; + top: 0; - section#news { - width: 60vw; + section#vstupenky-wrapper { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 2rem; + } + a.vstupenky { + width: 80%; + background-color: var(--clr-Melon); + padding: 1rem 2rem; + color: var(--clr-Murrey); + text-decoration: none; + font-weight: bold; + font-size: 2rem; + text-align: center; + border-color: var(--clr-Murrey); + border-radius: 15px; + border-style: solid; + border-width: 3px; } - aside{ - width: 40vw; - display: flex; - flex-direction: column; - align-items: center; - padding: 2rem; - background-color: var(--clr-cards); - border-radius: 15px; - position: sticky; - top: 0; - - section#vstupenky-wrapper { - display: flex; - justify-content: center; - width: 100%; - margin-bottom: 2rem; - } - a.vstupenky { - width: 80%; - background-color: orange; - padding: 1rem 2rem; - color: var(--clr-murrey); - text-decoration: none; - font-weight: bold; - font-size: 2rem; - text-align: center; - border-color: var(--clr-murrey); - border-radius: 15px; - border-style: solid; - border-width: 3px; - } - - .infotable { - display: flex; - flex-direction: column; - gap: 2rem; - } - - .info-wrapper { - display: flex; - align-items: center; - justify-content: center; - gap: 4rem; - color: var(--clr-murrey); - text-align: left; - - img { - width: 100px; - } - } - - .info-wrapper:nth-child(even) { - flex-direction: row-reverse; - text-align: right; - } + .infotable { + display: flex; + flex-direction: column; + gap: 2rem; } - footer { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - margin: .5rem; - font-size: 0.7rem; - a, p { - color: var(--clr-murrey); + .info-wrapper { + display: flex; + align-items: center; + justify-content: center; + gap: 4rem; + color: var(--clr-Murrey); + text-align: left; + + .text { + h3 { + font-weight: 900; } + p { + font-weight: 500; + } + } + + img { + width: 100px; + } } + + .info-wrapper:nth-child(even) { + flex-direction: row-reverse; + text-align: right; + } + } + + footer { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin: .5rem; + font-size: 1rem; + font-weight: 300; + a, p { + color: var(--clr-Murrey); + } + } } @media only screen and (max-width: 500px) { - #vstupenky-wrapper { - width: 100vw !important; - } - .vstupenky { - font-size: 1.5rem !important; - } + #vstupenky-wrapper { + } + .vstupenky { + font-size: 1.5rem !important; + } + } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { - aside, main section#news { - width: 95vw !important; - } - body { - background-color: red; - } + } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) and (max-width: 768px) { - aside, main section#news { - width: 90vw !important; - } + } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) and (max-width: 992px) { - - aside, main section#news { - width: 60vw !important; - } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (max-width: 992px) { -main { - flex-direction: column; - align-items: center; + main { + flex-direction: column; + align-items: center; + margin-left: 2vw !important; + margin-right: 2vw !important; } .aside-wrapper { - order: -1; + order: -1; } - + .info-wrapper { + gap: 1rem !important; + } } /* Extra large devices (large laptops and desktops, 1200px and up) */ -@media only screen and (max-width: 1200px) { +@media only screen and (max-width: 1500px) { + main { + margin-left: 10vw; + margin-right: 10vw; + } + .aside-wrapper { + min-width: 40vw !important; + } + .news-wrapper { + max-width: 70vw !important; + } } + +@media only screen and (min-width: 1500px) and (max-width: 2000px) { + main { + margin-left: 15vw; + margin-right: 15vw; + } + .aside-wrapper { + min-width: 35vw !important; + } +} diff --git a/sass/news.scss b/sass/news.scss index 4ce4a08..f9d9d18 100644 --- a/sass/news.scss +++ b/sass/news.scss @@ -1,30 +1,42 @@ .news-wrapper { - display: flex; - flex-direction: column; - gap: 1rem; - color: var(--clr-murrey); + display: flex; + flex-direction: column; + gap: 1rem; + color: var(--clr-Murrey); - .news-card { - position: relative; - background-color: var(--clr-cards); - border-radius: 1rem; - padding: 1rem; - .pin-img { - width: 1rem; - position: absolute; - right: 1rem; - display: none; - } + .news-card { + position: relative; + background-color: var(--clr-LavenderLight); + border-radius: 1rem; + padding: 1rem; + .pin-img { + width: 1rem; + position: absolute; + right: 1rem; + display: none; + } + h3 { + font-family: "coolveltica", sans-serif; + font-weight: 900; + font-style: normal; } - .pinned { - order: -1; - } - .pinned .pin-img { - display: block; - } - iframe.video { - border-radius: 15px; - aspect-ratio: 16/9; - width: min(560px, 100%); + .date { + margin-bottom: 1rem; } + } + .pinned { + order: -1; + } + .pinned .pin-img { + display: block; + } + iframe.video { + aspect-ratio: 16/9; + } + .instagram-media, img:not(.pin-img), iframe.video { + border-radius: 15px !important; + width: 100% !important; + max-width: none !important; + min-width: 0 !important; + } } diff --git a/sass/vars.scss b/sass/vars.scss index 1e8e880..3398ecd 100644 --- a/sass/vars.scss +++ b/sass/vars.scss @@ -1,9 +1,50 @@ :root { - --clr-blue: #576ca8; - --clr-lavender: #d3d2ef; - --clr-murrey: #79214c; - --clr-blush: #cf6379; - --clr-melon: #ffadad; + --clr-TrueBlue: #576ca8; /* TrueBlue */ + --clr-TrueBlueDark: #444B64; + --clr-Lavender: #d3d2ef; + --clr-LavenderLight: #E3E2F7; + --clr-Murrey: #792a4c; + --clr-Blush: #cf6379; + --clr-Melon: #ffadad; --clr-cards: #e4e3ff; --container-size: 10vw; } + + +/* + +TrueBlue - 576CA8H +TrueBlueDarker - 444B64 +Lavender - D3D2EF +LavenderLighter - E3E2F7 +Murrey - 792A4C +Blush - CF6379 +Melon - FFADAD + +Coolvetica Light +font-family: "coolvetica", sans-serif; +font-weight: 300; +font-style: normal; + +Coolvetica Book +font-family: "coolvetica", sans-serif; +font-weight: 400; +font-style: normal; + +Coolvetica Regular +font-family: "coolvetica", sans-serif; +font-weight: 500; +font-style: normal; + +Coolvetica Bold +font-family: "coolvetica", sans-serif; +font-weight: 700; +font-style: normal; + +Coolvetica Heavy +font-family: "coolvetica", sans-serif; +font-weight: 900; +font-style: normal; +use.typekit.net + +*/ diff --git a/static/svg/dancing.svg b/static/svg/dancing.svg new file mode 100644 index 0000000..bae16d8 --- /dev/null +++ b/static/svg/dancing.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + diff --git a/static/svg/facebook.svg b/static/svg/facebook.svg index 591d6f3..8d511dd 100644 --- a/static/svg/facebook.svg +++ b/static/svg/facebook.svg @@ -1,12 +1,10 @@ - - - - - - - \ No newline at end of file + + + + + + diff --git a/static/svg/fotokoutek.svg b/static/svg/fotokoutek.svg new file mode 100644 index 0000000..ca291ba --- /dev/null +++ b/static/svg/fotokoutek.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/static/svg/instagram.svg b/static/svg/instagram.svg index be4a940..9ca8482 100644 --- a/static/svg/instagram.svg +++ b/static/svg/instagram.svg @@ -1 +1,15 @@ - \ No newline at end of file + + + + + + + + diff --git a/static/svg/muzika.svg b/static/svg/muzika.svg new file mode 100644 index 0000000..6c929af --- /dev/null +++ b/static/svg/muzika.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/static/svg/party_ples.svg b/static/svg/party_ples.svg new file mode 100644 index 0000000..38a4f06 --- /dev/null +++ b/static/svg/party_ples.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + diff --git a/static/svg/pin.svg b/static/svg/pin.svg index 2c15bf3..8f002fc 100644 --- a/static/svg/pin.svg +++ b/static/svg/pin.svg @@ -1,5 +1,14 @@ - - - - - \ No newline at end of file + + + + + + + diff --git a/static/svg/prekvapeni.svg b/static/svg/prekvapeni.svg new file mode 100644 index 0000000..070d446 --- /dev/null +++ b/static/svg/prekvapeni.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/static/svg/tombola.svg b/static/svg/tombola.svg new file mode 100644 index 0000000..e30aaa5 --- /dev/null +++ b/static/svg/tombola.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + diff --git a/static/svg/uvod.svg b/static/svg/uvod.svg new file mode 100644 index 0000000..67033c6 --- /dev/null +++ b/static/svg/uvod.svg @@ -0,0 +1,24 @@ + + + + + + diff --git a/static/svg/youtube.svg b/static/svg/youtube.svg index 8fc2648..f2115b6 100644 --- a/static/svg/youtube.svg +++ b/static/svg/youtube.svg @@ -1 +1,11 @@ - youtube [#168] Created with Sketch. \ No newline at end of file + + + + + + diff --git a/templates/base.html b/templates/base.html index 92ffe89..f208be6 100644 --- a/templates/base.html +++ b/templates/base.html @@ -2,52 +2,62 @@ - - - - - - - - - - + + + + + + + + - + -
- {% block main %} {% endblock main %} -
+
+ {% block main %} {% endblock main %} +
- + navVisible = !navVisible + }) + + window.addEventListener("resize", () => { + const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; + console.log(width) + + if(width <= "992") { + document.querySelector("main").appendChild(document.querySelector("footer")) + } else { + document.querySelector("aside".appendChild(document.querySelector("footer"))) + } + }) + + + - \ No newline at end of file + diff --git a/templates/index.html b/templates/index.html index 7258e23..dbbfe1a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,75 +1,75 @@ {% extends "base.html" %} {% block main %}
- {% block news %} {% endblock news %} + {% block news %} {% endblock news %}
- +
-{% endblock main %} \ No newline at end of file +{% endblock main %} diff --git a/templates/news.html b/templates/news.html index d2119b8..9c73bce 100644 --- a/templates/news.html +++ b/templates/news.html @@ -10,9 +10,8 @@
pin icon

{{ page.title }}

-

{{ page.date | date(format="%d. %m. %Y")}}

-

Autor: {{ page.extra["author"] }}

- {{ page.content | safe }} +

{{ page.date | date(format="%d. %m. %Y")}}

+

{{ page.content | safe }}

{% endfor %} {% endblock news %}