Personal no-bs blogging platform.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169@font-face { font-family: "Garamond"; src: local("Garamond"), url("/static/fonts/Garamond-Variable.ttf") format("truetype"), url("/static/fonts/Garamond-Italic-Variable.ttf") format("truetype"), ;}
:root { --body-bg: #1e1f29; --body-lighter: #2a2c3b; --link-col: #7aa2f7; --hover-col: #2d467c; --success: lightblue; --warning: #F0EE7F; --error: #f65f5f; --form-border: 1px dotted var(--link-col); --solid-border: 1px solid var(--link-col); --text-col: #e5e9f0; --font-size: "14px"; --gap: 1vh;}
* { box-sizing: border-box; font-kerning: normal;}
html,body { background: var(--body-bg); color: var(--text-col); font-size: var(--font-size); margin-inline: auto; max-width: 90%; padding: var(--gap);}
a { color: var(--link-col);}
hr { display: block; height: 2px; border: 0; border-top: 1px solid var(--text-col); border-bottom: 3px solid var(--body-lighter); margin: var(--gap) 0 0 0; padding: 0;}
form { border: var(--form-border); width: fit-content; padding: var(--gap); display: flex; flex-direction: column; align-items: baseline; flex-wrap: wrap; gap: var(--gap);}
input,textarea,button,select { border: 1px solid var(--link-col); background-color: var(--body-lighter); color: var(--text-col); padding: 2px; border-radius: 0; padding: var(--gap); font: var(--font);
button:hover, input[type="submit"]:hover { transform: scale(101%); background-color: var(--hover-col); color: var(--text-col); }
&:active:not(select, textarea, input), input[type="submit"] { border: 1px outset var(--link-col); background-color: var(--text-col); color: var(--body-bg); box-sizing: border-box; }
&:focus, &:active { outline: none; }}
button,input[type="submit"] { text-align: center;}
.error,*[error],.warning,*[warning],.success,*[success] { font-size: 1.1rem; padding: var(--gap); border: var(--body-lighter);}
.error,*[error] { color: white; background-color: var(--error);}
.warning,*[warning] { color: black; background-color: var(--warning);}
.success,*[success] { color: black; background-color: lightgreen;}
fieldset { border: 1px solid var(--link-col); width: fit-content; border-radius: 5px;
legend { padding: 3px 6px; border: 1px solid var(--link-col); width: fit-content; left: 0; }}
h1,h2,h3,h4,h5,h6 { font-family: "Garamond"; letter-spacing: 0.04em;}
.flex-row { display: flex; flex-direction: row; gap: var(--gap);}
.flex-column { display: column; flex-direction: row; gap: var(--gap);}
@media screen and (max-width: 700px) {
html, body { max-width: 98%; }}