diff options
| -rw-r--r-- | style.css | 184 |
1 files changed, 99 insertions, 85 deletions
@@ -1,165 +1,179 @@ * { - margin: 0; - padding: 0; +margin: 0; +padding: 0; } body { - max-width: 40em; - margin: 5% auto; - font-family: 'Helvetica', sans-serif; - line-height: 1.5; - font-size: 0.9em; +max-width: 40em; +margin: 5% auto; +font-family: 'Helvetica', sans-serif; +line-height: 1.5; +font-size: 0.9em; } main { - margin-top: 2.5em; +margin-top: 2.5em; } a { - color: red; - text-decoration: none; +color: red; +text-decoration: none; } h1 { - font-family: 'Baskerville', serif; - font-weight: normal; - text-align: center; - line-height: 1; +font-family: 'Baskerville', serif; +font-weight: normal; +text-align: center; +line-height: 1; } h1 + blockquote { - display: block; - font-family: 'Baskerville', serif; - font-size: 1.1em; - font-style: italic; - text-align: center; - quotes: none; +display: block; +font-family: 'Baskerville', serif; +font-size: 1.1em; +font-style: italic; +text-align: center; +quotes: none; } main blockquote { - border-left: 2px solid #ccc; /* Adds a vertical line */ - color: #555; /* Optional: changes the text color */ - font-size: 12px; -font-style: italic; /* Optional: italicizes the text */ +border-left: 2px solid #ccc; +color: #555; +font-size: 12px; +font-style: italic; padding-left: 1.5em; } h2:first-of-type { - margin-top: 0em; +margin-top: 0em; } h2 { - display: inline-block; - text-transform: uppercase; - font-size: 1.1em; - margin-top: 0.5em; +display: inline-block; +text-transform: uppercase; +font-size: 1.1em; +margin-top: 0.5em; } h3 { - font-size: 1em; - font-weight: bold; +font-size: 1em; +font-weight: bold; } li { - list-style-position: inside; +list-style-position: inside; } q { - font-style: italic; +font-style: italic; } #ornament { - display: block; - width: 75%; - margin: 0.5em auto; +display: block; +width: 75%; +margin: 0.5em auto; } .avatar { - width: 9em; - margin: 0 1em 1em 0; - float: left; +width: 9em; +margin: 0 1em 1em 0; +float: left; } .person { - margin-bottom: 2em; - clear: both; - padding-bottom: 1em; - min-height: 10em; +margin-bottom: 2em; +clear: both; +padding-bottom: 1em; +min-height: 10em; } .person > ul { - float: right; - list-style-type: none; - margin-left: 0; - padding-left: 0; +float: right; +list-style-type: none; +margin-left: 0; +padding-left: 0; } .person ul > li { - display: inline-block; - font-style: italic; +display: inline-block; +font-style: italic; } .person ul > li::after { - content: " ~ "; +content: " ~ "; } .person ul > li:last-child::after { - content: ""; +content: ""; } .person li { - list-style: none; +list-style: none; } #projects { - margin-top: 1em; +margin-top: 1em; } .uses-container { - margin-bottom: 3em; +margin-bottom: 3em; } footer { - margin-top: 2em; - text-align: center; +margin-top: 2em; +text-align: center; } @media screen and (max-width: 750px) { - body { - margin: 7% 10%; - } - - .person { - margin-bottom: 1em; - } - - .person h2, .person > ul, .person > p { - display: block; - float: none; - } - - #ornament, .avatar { - display: none; - } +body { +margin: 7% 10%; +} + +.person { +margin-bottom: 1em; +} + +.person h2, .person > ul, .person > p { +display: block; +float: none; +} + +#ornament, .avatar { +display: none; +} } summary { - list-style-position: outside; - margin-left: 30px; - padding: 10px 10px 10px 20px; - border-radius: 5px; - font-weight: bold; - text-transform: uppercase; - font-size: 1.1em; - margin-top: 0.5em; +list-style-position: outside; +margin-left: 30px; +padding: 10px 10px 10px 20px; +border-radius: 5px; +font-weight: bold; +font-size: 1.1em; +margin-top: 0.5em; } + summary::marker { - color: red; - font-size: 1.2em; +color: red; +font-size: 1.2em; } time { - font-family: monospace ; - color: #888 ; - font-size: 10pt ; +font-family: monospace ; +color: #888 ; +font-size: 10pt ; +} + +@media (prefers-color-scheme: dark) { +body { +background-color: #131213; +color: #bdbdbd +} +blockquote, pre, code { +background-color: #111; +border-color: #222 +} +#main img[src$=svg] { +filter: invert(1) +} } |