Make it responsive

This commit is contained in:
Evrard Van Espen
2025-10-30 11:09:38 +00:00
parent 098627f2dd
commit 7b851dfb0b
2 changed files with 25 additions and 1 deletions

View File

@@ -1,3 +1,5 @@
$small: 600px;
$accent-dark: #66BB6A;
$accent-light: #33691E;
@@ -97,6 +99,12 @@ header {
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
object-fit: cover;
@media screen and (max-width: $small) {
height: 15vh;
width: 90vw;
margin-left: 5vw;
}
}
// --------------------------------------------------
@@ -108,8 +116,18 @@ header {
display: flex;
justify-content: space-between;
@media screen and (max-width: $small) {
width: 90vw;
margin-left: 5vw;
flex-direction: column;
}
#content {
width: calc(80% - 20px);
@media screen and (max-width: $small) {
width: 100%;
}
}
#sidebar {
@@ -117,6 +135,11 @@ header {
border-left: 1px solid #bbb;
padding-left: 10px;
@media screen and (max-width: $small) {
width: 90vw;
border: none;
}
#tags {
display: flex;
flex-wrap: wrap;
@@ -139,6 +162,7 @@ header {
.highlight {
pre {
padding: 10px;
overflow-x: scroll;
}
}
}