mathias/blog
1
0
Fork 0
mirror of https://github.com/MathiasDPX/blog.git synced 2025-05-10 07:33:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix display on small screen

Browse source
This commit is contained in:
Mathias DUPEUX 2025-03-06 18:29:15 +01:00
parent 1e7fb2d749
commit 962c695736
2 changed files with 30 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

39
static/base.css
View file

@ -1,5 +1,6 @@
@import url("typography.css"); @import url("typography.css");
/* Reset */ /* Reset */
* { * {
margin: 0; margin: 0;
@ -21,11 +22,13 @@ body {
/* Main Container */ /* Main Container */
#wrap { #wrap {
width: 70%;
max-width: 45em;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
flex: 1; flex: 1;
display: flex;
flex-direction: column;
width: 70%;
max-width: 45em;
} }
/* Header Styles */ /* Header Styles */
@ -45,27 +48,45 @@ header h1 {
/* Navigation Bar */ /* Navigation Bar */
#navbar { #navbar {
min-width: 100%; width: 100%;
background-color: #03396C; background-color: #03396C;
padding: 5px 3em 5px 0; padding: 5px 3em 5px 0;
text-align: right; text-align: right;
width: 70%;
max-width: 45em;
margin: 0 auto;
} }
/* Main Content */ /* Main Content */
#main { #main {
padding: 35px; padding: 35px;
flex: 1;
} }
/* Footer */ /* Footer */
#footer { #footer {
padding-bottom: 0.5em; margin-top: auto;
} }
#footer-title { #footer-title {
min-width: 100%; width: 100%;
background-color: #03396C; background-color: #03396C;
text-align: center; text-align: center;
padding: 0.5em 0;
}
@media (max-width: 768px) {
html, body {
min-height: 100vh;
}
#wrap {
width: 100%;
max-width: none;
}
footer p{
margin-bottom: 0.25em;
}
header h1 {
font-size: clamp(2rem, 20vw, 100px);
text-align: center;
max-width: 90%;
word-wrap: break-word;
margin: 20px auto;
}
} }

1
static/typography.css
View file

@ -72,7 +72,6 @@ a {
/* Footer */ /* Footer */
#footer-title { #footer-title {
padding: 5px 0; padding: 5px 0;
margin-bottom: 0.5em;
min-width: 100%; min-width: 100%;
color: #ffffff; color: #ffffff;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;