responsive design
This commit is contained in:
parent
6e3992f756
commit
bf050186fa
@ -9,9 +9,15 @@ nav {
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-right > a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1.5rem;
|
||||
@ -27,3 +33,29 @@ nav {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
@ -16,6 +16,8 @@ main {
|
||||
padding: 2rem;
|
||||
background-color: var(--clr-cards);
|
||||
border-radius: 15px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
section#vstupenky-wrapper {
|
||||
display: flex;
|
||||
@ -75,3 +77,54 @@ main {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
#vstupenky-wrapper {
|
||||
width: 100vw !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.aside-wrapper {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Extra large devices (large laptops and desktops, 1200px and up) */
|
||||
@media only screen and (max-width: 1200px) {
|
||||
|
||||
}
|
||||
|
1
static/svg/menu.svg
Normal file
1
static/svg/menu.svg
Normal file
@ -0,0 +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>
|
After Width: | Height: | Size: 174 B |
@ -19,10 +19,13 @@
|
||||
<div class="nav-left">
|
||||
<a href="/"><img src="/img/pkmples_logo.png" alt="pkmples logo"></a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="https://www.facebook.com/events/823114292589147" target="_blank"><img src="/svg/facebook.svg" alt="facebook logo"></img></a>
|
||||
<a href="https://www.instagram.com/pkm.hub" target="_blank"><img src="/svg/instagram.svg" alt="instagram logo"></img></a>
|
||||
<a href="https://www.youtube.com/@pkmhub" target="_blank"><img src="/svg/youtube.svg" alt="youtube logo"></img></a>
|
||||
<div class="nav-btn">
|
||||
<img src="/svg/menu.svg" alt="menu icon">
|
||||
</div>
|
||||
<div class="nav-right mobile-visible">
|
||||
<a href="https://www.facebook.com/events/823114292589147" 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="/archiv">archiv</a>
|
||||
</div>
|
||||
@ -31,6 +34,20 @@
|
||||
<main>
|
||||
{% block main %} {% endblock main %}
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const navBtn = document.querySelector(".nav-btn img")
|
||||
let navVisible = false
|
||||
navBtn.addEventListener("click", () => {
|
||||
if(navVisible) {
|
||||
document.querySelector(".nav-right").classList.add("mobile-visible")
|
||||
} else {
|
||||
document.querySelector(".nav-right").classList.remove("mobile-visible")
|
||||
}
|
||||
|
||||
navVisible = !navVisible
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user