From 8fb940771e027ebf417982c97b93a467b7e54852 Mon Sep 17 00:00:00 2001 From: a Date: Sat, 15 Jan 2022 22:49:54 -0600 Subject: [PATCH] extend range before max-width --- index.html | 214 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 124 insertions(+), 90 deletions(-) diff --git a/index.html b/index.html index 2c3b3c4..dbd14b6 100644 --- a/index.html +++ b/index.html @@ -20,40 +20,38 @@ html {font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Segoe UI", sans-serif} /* typography */ -header h1 {font-size: clamp(1.5em, 10vw, 3em); line-height: 1.333} -header p {font-size: clamp(1em, 5vw, 1.5em); line-height: 1.5; max-width: 32ch} -h2 {font-size: 1.5em; line-height: 1.333} -p {font-size: 1em; line-height: 1.5} +header h1 {font-size: clamp(1.5rem, 10vw, 3rem); line-height: 1.333} +header p {font-size: clamp(1em, 5vw, 1.5rem); line-height: 1.5; max-width: 32ch} +h2 {font-size: 1.5rem; line-height: 1.333; margin-bottom: 1rem; max-width: 35ch} +p {font-size: 1rem; line-height: 1.5} /* layout */ body {margin: auto; min-height: 100vh} +section, footer {margin-top: 2.5rem} +footer {padding-bottom: 1rem; display: flex; justify-content: center} +.container {padding: 0 1rem; height: 100%;} header { background: url(./images/sunset-bg-blue.jpg); - background-size: contain; + background-size: cover; background-repeat: no-repeat; - width: 100vw; height: 100vw; - padding: 1em; - display: grid; grid-template-rows: 1fr auto auto + width: 100%; height: 100vw; + max-height: 600px; background-position: bottom } -@media (min-width: 40em) { - body {margin: 0; width: 20em} - header {width: 20em; height: 20em;} - header h1 {font-size: 1.5em} - header p {font-size: 1em} +header .container { + display: grid; grid-template-rows: 1fr auto auto } header h1 {grid-row: 2} header p {grid-row: 3} -section {padding: 1rem} -dl {display: grid; grid-template-columns: 6.5em 1fr} +dl {display: grid; grid-template-columns: 6.5rem 1fr} dt {grid-column: 1; font-weight: 700; line-height: 1.5} -dd {grid-column: 2; line-height: 1.5; text-align: right} -dt, dd {margin-top: 0.5em} -dl p {grid-column: span 2; max-width: 18em} -#gaming h2 {margin-bottom: 0.5em} -#gaming div {display: flex; gap: 1em} -#gaming a {display: flex; width: 2em; height: 2em; align-items: center} -#gaming span {font-size: 1em; line-height: 2; flex-grow: 1; text-align: right} -#work a, #concerts a, #support a {display: flex; gap: 1em; margin-top: 1em; max-width: max-content} -#work span, #concerts span, #support span {display: block; font-size: 1em; line-height: 2} +dd {grid-column: 2; line-height: 1.5; display: flex; justify-content: end} +dd a {display: block; max-width: max-content} +dt, dd {margin-top: 0.5rem} +dl p {grid-column: span 2; max-width: 18rem} +.links {display: flex; flex-flow: column; gap: 1rem} +.links a {display: flex; max-width: max-content; gap: 1rem} +.links span {font-size: 1rem; line-height: 2; display: block} +#gaming .links {flex-flow: row} +#gaming .links span {flex-grow: 1; text-align: right} /* coloring */ body:before { content: ''; @@ -65,93 +63,129 @@ body:before { background: url(./images/sunset-bg-blue.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; - filter: blur(1em); + filter: blur(1rem); opacity: 0.5; z-index: -1 } html {background-color: #212121} -body, header, section {background-color: #212128; color: white} +body, header, section {background-color: #212227; color: white} a {color: #64b5f6} a:visited {color: #d1c4e9} img {color: white} +/* responsive */ +@media (min-width: 30rem) { + #gaming .container {display: flex; justify-content: space-between} + #gaming .links span {flex-grow: unset} + #gaming h2 {margin-bottom: 0} +} +@media (min-width: 35rem) { + .container {padding: 0 2em} +} +@media (min-width: 40rem) { + .container {padding: 0 3rem} + body {margin: 0 auto; width: 40rem} +}
-
+
+

hi, i'm a.

i have approximate knowledge of many things. perpetual student. (nb/ace/they)

+
-
-

let's be friends.

-
-
Chat (XMPP)
-
a@trwnh.com
-

send your message and don't worry about whether i add you as a contact. please turn OMEMO off.

-
Mail (SMTP)
-
a@trwnh.com
-
Social (AP)
-
mastodon.social/@trwnh
-
-
-
-

sometimes i game.

-
- - - - - - - - - - triggerofsol +
+
+

let's be friends.

+
+
Chat (XMPP)
+
a@trwnh.com
+

send your message and don't worry about whether i add you as a contact. please turn OMEMO off.

+
Mail (SMTP)
+
a@trwnh.com
+
Social (AP)
+
mastodon.social/@trwnh
+
-
-

i like going to concerts.

- - - view photos at birdsounds.media - - - - watch footage at obvious_humor - - - - buy prints at society6.com/trwnh - +
+
+

sometimes i game.

+
+ + + + + + + + + + triggerofsol +
+
-
-

i also contribute to open source software and work on the web.

- - - hire me as a consultant - +
+
+

i like going to concerts.

+
+ + + view photos at birdsounds.media + + + + watch footage at obvious_humor + + + + buy prints at society6.com/trwnh + +
+
-
-

consider supporting me?

- - - sponsor me weekly/monthly - - - - become a patron - - - - tip me with a one-time payment - - - - buy with my affiliate link - +
+
+

i also contribute to open source software and work on the web.

+
+ + + hire me as a consultant + +
+
+
+
+
+

consider supporting me?

+
+ + + sponsor me weekly/monthly + + + + become a patron + + + + tip me with a one-time payment + + + + buy with my affiliate link + +
+
+