diff options
Diffstat (limited to 'served/styles/home.css')
-rw-r--r--[-rwxr-xr-x] | served/styles/home.css | 197 |
1 files changed, 27 insertions, 170 deletions
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 |