new_blog/static/css/layout.css

81 lines
1.7 KiB
CSS

body {
padding: 0px;
margin: 0px;
font-family: Georgia, serif;
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#header {
display: flex;
flex-flow: row nowrap;
gap: 0.5em;
align-items: center;
width: 100%;
font-size: 24px;
padding: 0.5em 1em;
}
#content {
display: block flex;
margin: 1em;
padding: 1em;
/* needed due to flex parent*/
width: 100%;
/*https://ux.stackexchange.com/a/34125*/
/*https://ux.stackexchange.com/a/34148*/
/*https://pearsonified.com/golden-ratio-typography-intro/*/
/*https://grtcalculator.com/*/
max-width: 55em;
border: 0.5em solid white;
border-radius: 0.5em;
/* needed due to being flex itself*/
flex-direction:column;
/* put things in center*/
/* not sure if I want everything centered or just code blocks but I like everything centered atm*/
justify-content: center;
align-items: center;
}
blockquote {
/*font-style: italic;*/
padding: 0.5em 1em;
border-radius: 0.5em;
p{
/*margin is annoying in this case*/
margin: 0;
}
}
#content-outer {
display: flex;
justify-content: center;
align-items: center;
}
pre {
min-height: 2em;
max-width: calc(100% - 2em);
width: fit-content;
overflow:scroll;
/*background: #444;*/
border-radius: 0.5em;
/*border: 0.2em solid red;*/
padding: 0.5em;
}
hr {
width: 100%;
}
p {
/*https://pearsonified.com/golden-ratio-typography-intro/ is where this came from and tbh having a bigger line height does make things more readable although I tune it down a bit*/
line-height: 1.5;
}