diff options
Diffstat (limited to 'served/styles')
| -rwxr-xr-x | served/styles/common.css | 107 | ||||
| -rw-r--r--[-rwxr-xr-x] | served/styles/home.css | 197 | ||||
| -rwxr-xr-x | served/styles/post.css | 8 |
3 files changed, 106 insertions, 206 deletions
diff --git a/served/styles/common.css b/served/styles/common.css index 64067cb..f798e3a 100755 --- a/served/styles/common.css +++ b/served/styles/common.css @@ -2,55 +2,104 @@ box-sizing: border-box; } +@font-face { + font-family: Recursive; + font-style: oblique 0deg 15deg; + font-weight: 300 1000; + font-display: swap; + src: url(Recursive.woff2); +} + +@font-face { + font-family: 'Atkinson Hyperlegible'; + src: url(Atkinson-Hyperlegible-Regular-102a.woff2); + font-weight: normal; +} + :root { + /* "-dim" to mean: secondary; alternate; deemphasized */ --text: #222; - --text-dim: #444; - --text-link: #037; - --text-link-visited: #730; + --text-dim: #456; --background: #FFF; - --background-dim: #F8F0F0; - --color-a: rgb(11, 113, 126); - --color-a-dim: rgb(7, 80, 90); -} + --background-dim: #F8F0FF; -@media (prefers-color-scheme: dark) { - :root { - --text: #eee; - --text-dim: #bbb; - --text-link: #ddf; - --text-link-visited: #fed; - --background: #112; - --background-dim: #333; - --color-a: #3a8; - --color-a-dim: rgb(158, 228, 208); - } + --link: #a41; + --visited: #439; + + --pwidth: 35rem; + --left-pad: 5rem; + /* ^ lmao */ } html, body { - padding: 0; margin: 0; + padding: 0; + width: 100%; + height: 100%; } body { - font-size: 1.1rem; - line-height: 1.4; - font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - padding: 2rem 5vw; + padding: 2rem 1rem 2rem var(--left-pad); + font-family: 'Atkinson Hyperlegible', sans-serif; color: var(--text); + font-size: 1.15rem; + background-color: var(--background); } -a { - color: var(--color-a); +@media (max-width: 35rem) { + body { + padding-left: 2vw; + padding-right: 4vw; + } } h1, -h2, -h3 { - margin: 0; - font-family: serif; +h2 { + margin: 1rem 0; + padding: 0; + + font-family: Recursive, sans-serif; + font-variation-settings: + "MONO" 0, + "CASL" 0, + "wght" 500, + "slnt" 0, + "CRSV" 0; +} + +h1 { + font-size: 2rem; +} + +h2 { + font-size: 1.5rem; +} + +p { + line-height: 1.3; + max-width: var(--pwidth); + margin: 1rem 0; +} + +ul { + padding: 0; + list-style-position: inside; + list-style-type: decimal; +} + +a { + color: var(--link); +} + +a:visited { + color: var(--visited); +} + +a.dead { + text-decoration: line-through; } #nav-access { diff --git a/served/styles/home.css b/served/styles/home.css index d48471a..bd23605 100755..100644 --- a/served/styles/home.css +++ b/served/styles/home.css @@ -1,194 +1,51 @@ -body { - padding-top: 4rem; - padding-bottom: 4rem; +#hello { + margin: 1rem 0; } -main, -header { - max-width: 35rem; - margin: 0 auto; -} - -header { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - row-gap: 1rem; -} - -header img { - width: 96px; - height: 96px; - margin-top: 1.5em; -} - -#contact a { - text-decoration: none; - color: var(--color-a); - border-bottom: none; -} - -#contact ul { - line-height: normal; - list-style: none; - padding: 0; - margin: 0; -} - -#contact h2 { - margin: 0; -} +#contact { + border: 1px solid black; + box-shadow: 5px -5px 0px #999, 10px -10px 0px #666, 15px -15px 0px #333; + padding: 1rem 2rem 1rem 1rem; -#greeting { - flex: 1 0 15rem; + max-width: var(--pwidth); + height: min-content; } -#greeting h1 { +#contact>h2 { margin-top: 0; } -#notice { - font-style: italic; - text-align: center; -} - -.thing-list { - padding: 0.5rem 0; - margin: 0; - list-style-position: inside; -} - -ul.thing-list { - padding: 0; - list-style: none; -} - -section h2 { +#contact>ul { margin: 0; -} - -ol, -ul.thing-list { - line-height: 1.5; -} - -#scrap { - max-width: 25rem; -} - -#changelog { - margin: 0.5rem 1rem; - padding: 1rem 0; - border-top: 1px solid var(--text); -} - -#changelog h2 { - font-size: 1.5rem; - margin-bottom: 0.25rem; - display: inline-block; -} - -#changelog h3 { - font-size: 1rem; - font-weight: normal; - align-self: baseline; - display: inline-block; -} - -#changelog ul { list-style: none; padding: 0; - margin: 0; } -#changelog time { - color: var(--text-dim); - font-style: italic; - margin-right: 0.5rem; +@media (max-width: 50rem) { + #contact { + margin-top: 1.5rem; + margin-right: 1rem; + } } -@media (min-width: 40rem) { - main { - padding: 1rem 0; +@media (min-width: 50rem) { + #hello { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 30rem 1fr; + row-gap: 1rem; column-gap: 1rem; - row-gap: 0.5rem; - } - - #greeting { - grid-column: 1 / 3; - } - - #greeting p { - max-width: 26rem; } - p#notice { - /* there's too much space without this. only on desktop. i think it's - to do with the grid gap */ - margin-bottom: 0rem; - max-width: 100%; + #hello>p, + #hello>h1 { + grid-column: 1 / 2; + margin: 0; } - #scrap { - width: 100%; - /* a padding on desktop so it falls below the multimedia heading and - looks like it's kind of part of that section even if maybe it's not */ - padding-top: 2.25rem; - position: relative; - padding-right: 1rem; - } - - #scrap h2 { - display: inline; - margin: 0 0.5rem 0 0; - } - - /* tried https://stackoverflow.com/a/68283780 but it didn't seem to want - to work for right and bottom at the same time */ - #scrap-halfborder { - position: absolute; - right: 0; - bottom: 0; - - z-index: -1; - width: 50%; - height: 50%; - border: 1px solid var(--text); - border-width: 0px 1px 1px 0px; - } - - #writing-halfborder, - #feed-halfborder { - position: absolute; - left: 0; - top: 0; - - z-index: -1; - width: 25%; - height: min(50%, 2rem); - border: 1px solid var(--text); - border-width: 1px 0 0 1px; - } - - #writing { - padding-left: 1rem; - padding-top: 1rem; - position: relative; - - grid-column: 1 / 3; - } - - #feed { - position: relative; - margin: 1rem 0 0 1rem; - padding: 1rem 0 0 1rem; - width: 15rem; - float: right; - } + #hello>#contact { + grid-column: 2 / 3; + grid-row: 2 / 5; - #changelog { - grid-column: 1 / 3; + width: fit-content; } } \ No newline at end of file diff --git a/served/styles/post.css b/served/styles/post.css index f7111dd..b0a4d5e 100755 --- a/served/styles/post.css +++ b/served/styles/post.css @@ -1,7 +1,5 @@ .sized { - --page-width: 35rem; - max-width: var(--page-width); - margin: 0 auto; + max-width: var(--pwidth); } #navtree { @@ -14,10 +12,6 @@ gap: 1rem; } -body { - line-height: 1.5; -} - p { margin: 1.25rem 0; } \ No newline at end of file |