extend range before max-width
This commit is contained in:
parent
4e86078310
commit
8fb940771e
1 changed files with 124 additions and 90 deletions
100
index.html
100
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,25 +63,41 @@ 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}
|
||||
}
|
||||
</style>
|
||||
<!-- end default styling ------------------------------------------->
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header id="top">
|
||||
<header id="top" class="section">
|
||||
<div class="container">
|
||||
<h1>hi, i'm a.</h1>
|
||||
<p>i have approximate knowledge of many things. perpetual student. (nb/ace/they)</p>
|
||||
</div>
|
||||
</header>
|
||||
<section id="contact">
|
||||
<section id="contact" class="section">
|
||||
<div class="container">
|
||||
<h2>let's be friends.</h2>
|
||||
<dl>
|
||||
<dt>Chat (XMPP)</dt>
|
||||
|
|
@ -94,10 +108,12 @@ img {color: white}
|
|||
<dt>Social (AP)</dt>
|
||||
<dd><a href="https://mastodon.social/@trwnh">mastodon.social/@trwnh</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
<section id="gaming">
|
||||
<section id="gaming" class="section">
|
||||
<div class="container">
|
||||
<h2>sometimes i game.</h2>
|
||||
<div>
|
||||
<div class="links">
|
||||
<a href="https://twitch.tv/triggerofsol">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="1 -3 1001 1144" width="32" height="32"><path d="M907 605 740 772H490L347 903V772H144V93h763v512zM49-3 1 188v834h215v119h107l119-119h191l369-369V-3H49z"></path><path d="M395 559h93V280h-93v279zm255 0h94V280h-94v279z"></path></svg>
|
||||
</a>
|
||||
|
|
@ -109,9 +125,12 @@ img {color: white}
|
|||
</a>
|
||||
<span>triggerofsol</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="concerts">
|
||||
<section id="concerts" class="section">
|
||||
<div class="container">
|
||||
<h2>i like going to concerts.</h2>
|
||||
<div class="links">
|
||||
<a href="https://birdsounds.media">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="57 19 101 178" width="32" height="32" style="fill:currentColor"><path d="M741 366v173a70 70 0 0 0-69 17c-26 26-29 64-8 86 10 9 22 14 36 14 18 0 36-8 49-21a72 72 0 0 0 22-49V446l19 21c32 29 26 67 10 90l25 16c24-35 29-89-14-128-26-24-40-51-40-79zm46 114a13 13 0 0 0-13 13 13 13 0 0 0 13 13 13 13 0 0 0 13-13 13 13 0 0 0-13-13z" transform="translate(-200 -137) scale(.42587)"/><path d="m92 151-18 3-8 11c7-1 13 1 13 1l-17 8c-5 14-5 23-5 23s18-9 31-21c30-25 39-57 39-57l-11 7s1 4-5 11c-6 8-14-2-21 3l-9 7c7 1 11 4 11 4z"/></svg>
|
||||
<span>view photos at birdsounds.media</span>
|
||||
|
|
@ -124,16 +143,24 @@ img {color: white}
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="32" height="32"><path fill="currentColor" d="M25 2a23 23 0 1 0 0 46 23 23 0 0 0 0-46zm13 10 1 1-3 1-3 2-4 6s2-2 6-2c7 0 5 7 4 9-1 3-5 6-9 6-3 0-6-1-7-5-1 3-2 5-8 5l-6-1-1-2c0-2 1-2 2-2 3 0 4 4 4 4s3 0 3-3-7-3-7-7 4-5 7-5c4 0 6 2 6 2 3-7 12-9 15-9zm-20 8s-3 0-3 3c0 2 5 2 7 5v-4h-1c-3 0-3-4-3-4zm13 3c-2 0-4 2-4 6 0 3 2 5 3 5 2 0 3-3 4-5 0-4-1-6-3-6z"/></svg>
|
||||
<span>buy prints at society6.com/trwnh</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="work">
|
||||
<section id="work" class="section">
|
||||
<div class="container">
|
||||
<h2>i also contribute to open source software and work on the web.</h2>
|
||||
<div class="links">
|
||||
<a href="https://abdullahtarawneh.com">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="73 50 1055 1100" width="32" height="32"><path fill="currentColor" d="M683 905a604 604 0 0 1-87 123 604 604 0 0 1-141-262c65-9 130-12 195-9l-16-74h-35c-54 0-107 3-159 10a760 760 0 0 1-3-206 1210 1210 0 0 0 318 1 672 672 0 0 1 5 120l72 38a860 860 0 0 0-4-170c67-13 132-31 197-55a451 451 0 0 1-6 326l65 35A527 527 0 0 0 607 50h-8a534 534 0 0 0-22 0 527 527 0 0 0 22 1053h14c38-1 76-6 112-15l-42-183zm310-551c-58 21-118 38-178 50a801 801 0 0 0-121-270 455 455 0 0 1 299 220zM596 127c31 37 109 140 145 289-96 12-193 12-290-1a735 735 0 0 1 145-288zm-99 8c-40 59-91 150-119 268-58-12-116-28-173-49a455 455 0 0 1 292-219zM146 577c0-55 10-108 28-156 62 23 126 41 191 54a754 754 0 0 0 2 230c-62 13-123 30-183 52-25-55-38-116-38-180zm73 245c53-19 108-34 163-45 27 107 72 187 109 240a455 455 0 0 1-272-195z"/><path fill="currentColor" d="M1128 877 689 641l107 478 84-127 117 158 100-74-117-158z"/></svg>
|
||||
<span>hire me as a consultant</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="support">
|
||||
<section id="support" class="section">
|
||||
<div class="container">
|
||||
<h2>consider supporting me?</h2>
|
||||
<div class="links">
|
||||
<a href="https://liberapay.com/trwnh">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 210" height="32" width="32"><path fill="currentColor" d="M21 0C11 0 0 10 0 21v168c0 13 11 21 21 21h168c13 0 21-8 21-21V21c0-11-8-21-21-21zm79 34-19 84v8l3 3h5l-2 18-16-3-11-8v-21l19-76Zm34 34 16 3a26 26 0 0 1 13 18l2 11-2 18-11 16-13 10a47 47 0 0 1-29 3l-8 26H81l24-100a126 126 0 0 1 29-5zm-11 19-10 42 8 2 10-2 6-6 5-10 2-11-2-10-11-5z"/></svg>
|
||||
<span>sponsor me weekly/monthly</span>
|
||||
|
|
@ -150,8 +177,15 @@ img {color: white}
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="-352 -291 801 679" width="32" height="32" fill="currentColor"><path d="M262 134c-17-22-35-41-35-83V-90c0-60 5-115-40-156-35-34-93-45-138-45-87 0-184 32-204 138-2 12 6 18 13 19l89 10c8-1 14-9 16-17 8-37 39-54 73-54 19 0 41 7 52 23 13 19 11 44 11 66v12C46-88-23-85-73-63c-57 25-98 74-98 148 0 94 60 141 137 141 65 0 101-15 151-66 17 24 22 36 53 61 6 3 15 3 21-3v1l70-60c8-7 7-16 1-25zM82 94c-15 25-38 41-64 41-35 0-55-27-55-66 0-77 70-91 136-91v20c0 35 1 64-17 96z"/><path d="M371 288a586 586 0 0 1-720-52c-8-7 0-17 9-11a796 796 0 0 0 698 43c15-6 28 10 13 20z"/><path d="M408 247c-12-15-74-7-103-4-8 1-10-6-2-12 50-35 132-25 142-13s-3 94-50 134c-7 6-14 3-10-5 10-27 34-86 23-100z"/></svg>
|
||||
<span>buy with my affiliate link</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<a href="#top">back to top</a>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="text/javascript">
|
||||
var sc_project=10574713;
|
||||
var sc_invisible=1;
|
||||
|
|
|
|||
Loading…
Reference in a new issue