diff --git a/sass/global.scss b/sass/global.scss index 1262958..a274fc4 100644 --- a/sass/global.scss +++ b/sass/global.scss @@ -5,13 +5,23 @@ } body { - font-family: 'coolvetica', sans-serif; + font-family: 'Kanit', sans-serif; font-weight: 500; font-style: normal; color: var(--clr-Murrey); background-color: var(--clr-Lavender); } -main { - margin: 0 var(--container-size); +footer { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin: .5rem; + text-align: center; + font-size: 1rem; + font-weight: 300; + a, p { + color: var(--clr-Murrey); + } } diff --git a/sass/header.scss b/sass/header.scss index a6910ae..f536b01 100644 --- a/sass/header.scss +++ b/sass/header.scss @@ -1,62 +1,38 @@ nav { + display: flex; + justify-content: space-between; + background-color: var(--clr-Melon); + padding: 1rem var(--container-size); + font-family: 'coolvetica'; + + .nav-right, .nav-left { display: flex; - justify-content: space-between; - background-color: var(--clr-Melon); - padding: 1rem var(--container-size); + align-items: center; + gap: 2rem; + } - .nav-right, .nav-left { - display: flex; - align-items: center; - gap: 2rem; - } + .nav-right > a { + display: flex; + } - .nav-right > a { - display: flex; - } + .nav-btn { + display: none; + } - .nav-btn { - display: none; - } + a { + text-decoration: none; + font-size: 1.5rem; + font-weight: 700; + font-size: normal; + color: var(--clr-Murrey); + } - a { - text-decoration: none; - font-size: 1.5rem; - font-weight: 700; - font-size: normal; - color: var(--clr-Murrey); - } + img { + height: 2rem; + } - img { - height: 2rem; - } - - .nav-left img { - height: 4rem; - } + .nav-left img { + height: 4rem; + } } -@media only screen and (max-width: 768px) { - nav { - flex-wrap: wrap; - } - .nav-right { - display: none !important; - } - .mobile-visible { - display: flex !important; - flex-direction: column; - justify-content: center; - width: 100%; - margin-top: 2rem; - } - - .nav-btn { - display: flex !important; - align-items: center; - - img { - height: 3rem; - cursor: pointer; - } - } -} diff --git a/sass/main.scss b/sass/main.scss index 93961ba..163ddca 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -3,17 +3,12 @@ main { gap: 2rem; margin-top: 2rem; margin-bottom: 2rem; - margin-left: 20vw; - margin-right: 20vw; + padding: 0 var(--container-size); - .news-wrapper { - max-width: 80vw; + .aside-wrapper { + min-width: 20vw; } -.aside-wrapper { - min-width: 20vw; - - } aside{ display: flex; flex-direction: column; @@ -29,6 +24,7 @@ main { width: 100%; margin-bottom: 2rem; } + a.vstupenky { width: 80%; background-color: var(--clr-Melon); @@ -42,8 +38,16 @@ main { border-radius: 15px; border-style: solid; border-width: 3px; + display: flex; + justify-content: center; + align-items: center; + } + .vstupenky:hover span{ + transform: translateX(0.5rem); + } + .vstupenky span { + transition: 300ms ease; } - .infotable { display: flex; flex-direction: column; @@ -54,7 +58,7 @@ main { display: flex; align-items: center; justify-content: center; - gap: 4rem; + gap: 2rem; color: var(--clr-Murrey); text-align: left; @@ -62,6 +66,7 @@ main { h3 { font-weight: 900; } + p { font-weight: 500; } @@ -77,81 +82,5 @@ main { 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 { - } - .vstupenky { - font-size: 1.5rem !important; - } - -} - /* Extra small devices (phones, 600px and down) */ -@media only screen and (max-width: 600px) { - -} - -/* Small devices (portrait tablets and large phones, 600px and up) */ -@media only screen and (min-width: 600px) and (max-width: 768px) { - -} - - -/* Medium devices (landscape tablets, 768px and up) */ -@media only screen and (min-width: 768px) and (max-width: 992px) { -} - -/* Large devices (laptops/desktops, 992px and up) */ -@media only screen and (max-width: 992px) { - main { - flex-direction: column; - align-items: center; - margin-left: 2vw !important; - margin-right: 2vw !important; - } - .aside-wrapper { - order: -1; - } - .info-wrapper { - gap: 1rem !important; - } -} - -/* Extra large devices (large laptops and desktops, 1200px and up) */ -@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/responsivity.scss b/sass/responsivity.scss new file mode 100644 index 0000000..ce72405 --- /dev/null +++ b/sass/responsivity.scss @@ -0,0 +1,122 @@ +@media only screen and (min-width: 0px) and (max-width: 954px) { + nav { + flex-wrap: wrap; + position: absolute; + top: 0; + width: 100vw; + } + .nav-right { + display: none !important; + } + .mobile-visible { + display: flex !important; + flex-direction: column; + justify-content: center; + width: 100%; + gap: 0rem !important; + } + .mobile-visible > *:first-child{ + border-top: 1px solid var(--clr-Murrey); + + } + .mobile-visible > * { + display: grid; + place-content: center; + width: 100%; + padding: 1rem 0; + border-bottom: 1px solid var(--clr-Murrey); + } + + .nav-btn { + display: flex !important; + align-items: center; + + img { + height: 3rem; + cursor: pointer; + } + } + + .vstupenky { + font-size: 1.5rem !important; + width: 70vw !important; + } + main { + flex-direction: column; + align-items: center; + margin-top: 8rem !important; + } + main aside .info-wrapper img { + width: 50px; + } + .aside-wrapper { + order: -1; + } + .info-wrapper { + gap: 1rem !important; + } + + footer:not(.footer-mobile) { + display: none !important; + } +} + +@media only screen and (min-width: 955px) and (max-width: 1090px) { +.vstupenky { + font-size: 1.5rem !important; + } + main { + flex-direction: column; + align-items: center; + } + .aside-wrapper { + order: -1; + } + .info-wrapper { + gap: 1rem !important; + } + :root { + --container-size: 20vw; + } + footer:not(.footer-mobile) { + display: none !important; + } +} + +@media only screen and (min-width: 1091px) and (max-width: 1499px) { + :root { + --container-size: 10vw; + } + .aside-wrapper { + min-width: 40vw !important; + } + .news-wrapper { + max-width: 50vw !important; + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1500px) and (max-width: 1999px) { + :root { + --container-size: 15vw; + } + .aside-wrapper { + min-width: 35vw !important; + } + .news-wrapper { + max-width: 50vw !important; + } +} + +@media only screen and (min-width: 2000px) { + :root { + --container-size: 25vw; + } + .aside-wrapper { + min-width: 25vw !important; + } + .news-wrapper { + max-width: 50vw !important; + } +} + diff --git a/sass/vars.scss b/sass/vars.scss index 3398ecd..7eaa725 100644 --- a/sass/vars.scss +++ b/sass/vars.scss @@ -7,7 +7,7 @@ --clr-Blush: #cf6379; --clr-Melon: #ffadad; --clr-cards: #e4e3ff; - --container-size: 10vw; + --container-size: 5vw; } diff --git a/static/svg/menu.svg b/static/svg/menu.svg index 2f427e9..5a85357 100644 --- a/static/svg/menu.svg +++ b/static/svg/menu.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/templates/base.html b/templates/base.html index f208be6..975d0bc 100644 --- a/templates/base.html +++ b/templates/base.html @@ -9,6 +9,10 @@ + + + + @@ -20,11 +24,11 @@
menu icon
-
+
facebook logo instagram logo youtube logo - galerie +
@@ -32,9 +36,14 @@ {% block main %} {% endblock main %} + + diff --git a/templates/index.html b/templates/index.html index dbbfe1a..71c9efb 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,7 +6,7 @@
@@ -50,9 +49,9 @@
ikonka
-

Beer pong

+

Unikátní program

- Zahraj si o super ceny v týhle obdobě americkýho fenoménu. + V tomhle se musí najít úplně každej. Brikulí jsme si pro Tebe s kámošema připravili tolik, že by to měl i tvůj matikář problém spočítat.