erick/erick.is
1
0
Fork 0
Code Issues Pull requests Activity

Small style adjustments

Browse source 
The content on small screens was unreadable on small screens when the post had code snippets because it was centered. It was scrollable to the right, but not to the left. With this change I am only centering the page content when there is enough room on the window for it to be centered.
This commit is contained in:
Erick Ruiz de Chavez 2025-01-03 08:56:16 -05:00
parent 87d7b84dc3
commit 345094f521
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
_sass/main.scss
View file

@ -10,6 +10,12 @@ html {
box-sizing: inherit;
}
@media screen and (min-width: 801px) {
body {
align-items: center;
}
}
html, body {
width: 100%;
height: 100%;
@ -21,7 +27,6 @@ body {
max-width: 800px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
@ -41,7 +46,7 @@ h4,h5,h6 {
}
main {
margin: 20px;
padding: 20px;
opacity: .8;
line-height: 1.5rem;
}
@ -51,7 +56,7 @@ a {
}
.site_header {
margin-top: 40px;
padding-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
@ -68,24 +73,23 @@ a {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 40px 0;
padding: 40px 0;
&__link {
display: block;
margin: 0 20px;
padding: 0 20px;
opacity: .8;
}
}
.site_footer {
margin-top: 40px;
padding-bottom: 20px;
padding: 40px 20px;
opacity: .3;
}
.articles {
opacity: .8;
margin-top: 60px;
padding-top: 40px;
}
.article {