Jonas_Jones/wiki.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/wiki.jonasjones.dev.git synced 2025-10-22 22:09:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

Added extra small screen layout

Browse source
This commit is contained in:
Jonas_Jones 2023-10-02 19:09:46 +02:00
parent 45e2657cd1
commit 1799f16ac5
4 changed files with 22 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/lib/components/Footer.svelte
View file

@ -27,7 +27,7 @@
footer { footer {
padding: 1rem; padding: 1rem;
margin: 2rem; margin: 2rem;
margin-bottom: 0; margin-bottom: 2rem;
margin-top: 0; margin-top: 0;
background: var(--container-background-color); background: var(--container-background-color);
display: flex; display: flex;
@ -54,4 +54,11 @@
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
} }
@media (max-width: 550px) {
footer {
margin: 0;
border-radius: 0;
}
}
</style> </style>

7
src/lib/components/Header.svelte
View file

@ -19,7 +19,7 @@
header { header {
padding: 1rem; padding: 1rem;
margin: 2rem; margin: 2rem;
margin-top: 0; margin-top: 2rem;
margin-bottom: 0; margin-bottom: 0;
background: rgb(0, 255, 0); background: rgb(0, 255, 0);
display: flex; display: flex;
@ -67,5 +67,10 @@
header h1 { header h1 {
font-size: 20px; font-size: 20px;
} }
header {
margin: 0;
border-radius: 0;
}
} }
</style> </style>

8
src/lib/styles/style.css
View file

@ -142,3 +142,11 @@ details a {
margin-top: 0; margin-top: 0;
} }
} }
@media screen and (max-width: 550px) {
.column {
margin: 0;
margin-bottom: 1rem;
border-radius: 0;
}
}

2
src/routes/+layout.svelte
View file

@ -5,7 +5,6 @@
</script> </script>
<div style="height:2rem" />
<Header /> <Header />
<div class="container"> <div class="container">
<div class="column"><Navbar /></div> <div class="column"><Navbar /></div>
@ -17,4 +16,3 @@
</div> </div>
<Footer /> <Footer />
<div style="height:2rem" />