redo home page
This commit is contained in:
parent
e0d51b5cc3
commit
8f1157c592
|
|
@ -18,4 +18,25 @@
|
|||
outline: solid;
|
||||
outline-color: var(--primary-accent);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
@function css-function( $function, $values... ) {
|
||||
@return
|
||||
$function
|
||||
+ unquote( '(' )
|
||||
+ $values
|
||||
+ unquote( ')' )
|
||||
;
|
||||
}
|
||||
|
||||
@function css-min( $values... ) {
|
||||
@return css-function( min, $values );
|
||||
}
|
||||
|
||||
@function css-max( $values... ) {
|
||||
@return css-function( max, $values );
|
||||
}
|
||||
|
||||
@function css-clamp( $values... ) {
|
||||
@return css-function( clamp, $values );
|
||||
}
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
}
|
||||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.5em;
|
||||
|
|
@ -22,54 +21,70 @@
|
|||
margin-bottom: 0.5em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
#bio {
|
||||
.title:before {
|
||||
content: 'bio';
|
||||
}
|
||||
.blurb {
|
||||
line-height: 1.4;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.quotes {
|
||||
color: #555;
|
||||
padding: 2rem;
|
||||
font-size: 1.25rem;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-around;
|
||||
line-height: 1.5;
|
||||
gap: 4rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
#skills {
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit,minmax(15em,1fr));
|
||||
gap: 2em;
|
||||
}
|
||||
.title {grid-column: 1 / -1;}
|
||||
.title:before {
|
||||
content: 'skills';
|
||||
}
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-areas: "img" "title" "desc";
|
||||
grid-template-rows: auto auto 1fr;
|
||||
&__title {
|
||||
grid-area: title;
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
&__desc {
|
||||
grid-area: desc;
|
||||
line-height: 1.4;
|
||||
}
|
||||
&__img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: contain;
|
||||
grid-area: img;
|
||||
border-radius: 1em;
|
||||
}
|
||||
&.sysadm .card__img {padding: 1em;}
|
||||
|
||||
#summary .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
@media (min-width: 40rem) {
|
||||
grid-template-columns: 18rem 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
#contact {
|
||||
.title:before {
|
||||
content: 'contact';
|
||||
#birdsounds {
|
||||
background: black;
|
||||
color: white;
|
||||
text-align: center;
|
||||
> img {
|
||||
max-height: 100vh;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
object-position: center bottom;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
div img {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
@media (min-width: 40rem) {
|
||||
> img {
|
||||
height: 20rem;
|
||||
}
|
||||
flex-flow: row-reverse;
|
||||
justify-content: space-between;
|
||||
max-width: 40rem;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '↗';
|
||||
position: absolute;
|
||||
right: -1em;
|
||||
top: -1em;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
#updates {
|
||||
line-height: 1.5;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
{{ define "main" }}
|
||||
<main id="index">
|
||||
<header class="" id="under-construction">
|
||||
<header class="section" id="summary">
|
||||
<div class="container">
|
||||
<h1 class="title" style="margin-bottom: 0; margin-top: 1.5rem;">site under construction</h1>
|
||||
<article class="vcard h-card">
|
||||
<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div>
|
||||
<dl>
|
||||
|
|
@ -20,7 +19,30 @@
|
|||
<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
|
||||
</dl>
|
||||
</article>
|
||||
<div class="quotes">
|
||||
<blockquote>
|
||||
<p>it's scary how much you know.</p>
|
||||
</blockquote>
|
||||
<blockquote style="text-align: right">
|
||||
<p>you're the first person i've met that keeps a spreadsheet of their lightbulbs.</p>
|
||||
</blockquote>
|
||||
<blockquote style="text-align: center">
|
||||
<p>VERY MUCH not garbage [...] a worthwhile human</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="container" id="birdsounds">
|
||||
<div class="">
|
||||
<img src="/images/logos/koken_y.png" alt="birdsounds.media logo">
|
||||
<a href="https://birdsounds.media" class="">view my photos</a>
|
||||
</div>
|
||||
<img src="/images/soulpunx.jpg" alt="#soulpunx">
|
||||
</section>
|
||||
<section class="section" id="updates">
|
||||
<div class="container">
|
||||
<p>currently: working on my websites, trying to do some documentation for an untitled social app project, and looking for work. check out the "work" tab of this site for my elevator pitch.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 845 KiB |
Loading…
Reference in New Issue