Erick Ruiz de Chavez
345094f521
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.
105 lines
1.2 KiB
SCSS
105 lines
1.2 KiB
SCSS
@use "pygments_default";
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
@media screen and (min-width: 801px) {
|
|
body {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
max-width: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
h4,h5,h6 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
main {
|
|
padding: 20px;
|
|
opacity: .8;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site_header {
|
|
padding-top: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.panda {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.site_links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 40px 0;
|
|
|
|
&__link {
|
|
display: block;
|
|
padding: 0 20px;
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
.site_footer {
|
|
padding: 40px 20px;
|
|
opacity: .3;
|
|
}
|
|
|
|
.articles {
|
|
opacity: .8;
|
|
padding-top: 40px;
|
|
}
|
|
|
|
.article {
|
|
&__back {
|
|
font-size: .9rem;
|
|
}
|
|
|
|
&__published {
|
|
font-style: italic;
|
|
font-size: .9rem;
|
|
opacity: .6;
|
|
}
|
|
}
|