fr/web-semprace
1
0
Fork 0
Code Pull Requests Activity

Prerelase changes 2.0

Browse Source
This commit is contained in:
Filip Rojek 2023-12-01 03:23:59 +01:00
parent 0ef26dddfd
commit cefac20276
8 changed files with 197 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
sass/global.scss
View File

@ -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);
}
}

26
sass/header.scss
View File

@ -3,6 +3,7 @@ nav {
justify-content: space-between;
background-color: var(--clr-Melon);
padding: 1rem var(--container-size);
font-family: 'coolvetica';
.nav-right, .nav-left {
display: flex;
@ -35,28 +36,3 @@ nav {
}
}
@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;
}
}
}

101
sass/main.scss
View File

@ -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 {
.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;
}
}

122
sass/responsivity.scss Normal file
View File

@ -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;
}
}

2
sass/vars.scss
View File

@ -7,7 +7,7 @@
--clr-Blush: #cf6379;
--clr-Melon: #ffadad;
--clr-cards: #e4e3ff;
--container-size: 10vw;
--container-size: 5vw;
}

2
static/svg/menu.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="#792a4c" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 174 B

After

Width:  |  Height:  |  Size: 190 B

28
templates/base.html
View File

@ -9,6 +9,10 @@
<link rel="stylesheet" href="/header.css">
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="/news.css">
<link rel="stylesheet" href="/responsivity.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;800&amp;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.typekit.net/yqq2dbq.css">
</head>
@ -20,11 +24,11 @@
<div class="nav-btn">
<img src="/svg/menu.svg" alt="menu icon">
</div>
<div class="nav-right mobile-visible">
<div class="nav-right NOmobile-visible">
<a href="https://www.facebook.com/events/823114292589147/?active_tab=discussion" target="_blank"><img src="/svg/facebook.svg" alt="facebook logo"></a>
<a href="https://www.instagram.com/pkm.hub" target="_blank"><img src="/svg/instagram.svg" alt="instagram logo"></a>
<a href="https://www.youtube.com/@pkmhub" target="_blank"><img src="/svg/youtube.svg" alt="youtube logo"></a>
<a href="/galerie">galerie</a>
<!--<a href="/galerie">galerie</a>-->
</div>
</nav>
@ -32,9 +36,14 @@
{% block main %} {% endblock main %}
</main>
<footer class="footer-mobile">
<p>Nadační fond maléDivy • <a href="https://www.kulturaturnov.cz" target="_blank">Kulturní centrum Turnov</a> • <a href="https://www.facebook.com/bigbandturnov" target="_blank">Big Band ZUŠ Turnov</a></p>
<p>&copy; <a href="https://fofrweb.com/" target="_blank">Fofrweb</a> + PKM</p>
</footer>
<script>
const navBtn = document.querySelector(".nav-btn img")
let navVisible = false
let navVisible = true
navBtn.addEventListener("click", () => {
if(navVisible) {
document.querySelector(".nav-right").classList.add("mobile-visible")
@ -44,19 +53,6 @@
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")))
}
})
</script>
</body>

9
templates/index.html
View File

@ -6,7 +6,7 @@
<section class="aside-wrapper">
<aside>
<section id="vstupenky-wrapper">
<a href="#" class="vstupenky">VSTUPENKY &gt;&gt;</a>
<a href="#" class="vstupenky">VSTUPENKY<span>&nbsp;&gt;&gt;</span></a>
</section>
<section class="infotable">
@ -24,8 +24,7 @@
<div class="text">
<h3>Kvalitní muzika</h3>
<p>
“Proč nehrají, preceptore?” na našem plese rozhodně neuslyšíš. Zahraje nám <b>BigBand ZUŠ
Turnov</b>, kterej do toho umí hrábnout.
“Proč nehrají, preceptore?” na našem plese rozhodně neuslyšíš. Zahraje nám <b>BigBand ZUŠ Turnov</b>, kterej do toho umí hrábnout.
</p>
</div>
</div>
@ -50,9 +49,9 @@
<div class="info-wrapper">
<img src="/svg/dancing.svg" alt="ikonka" />
<div class="text">
<h3>Beer pong</h3>
<h3>Unikátní program</h3>
<p>
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.
</p>
</div>
</div>