scss reorg and ui rework
This commit is contained in:
parent
c8db743235
commit
71b1965ba3
|
|
@ -1,168 +0,0 @@
|
||||||
a:link {color: #06f;}
|
|
||||||
a:visited {color: rgb(147, 85, 197)}
|
|
||||||
|
|
||||||
.button, .button:link, .button:visited {
|
|
||||||
width: 100%;
|
|
||||||
@media (min-width: 33.75em) {
|
|
||||||
width: max-content;
|
|
||||||
}
|
|
||||||
font-size: clamp(1em,2vw,1em);
|
|
||||||
padding: 1em;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 0.25em;
|
|
||||||
font-weight: 700;
|
|
||||||
gap: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button.primary {
|
|
||||||
background: #06f;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.button.secondary {
|
|
||||||
background: white;
|
|
||||||
border: 2px solid #06f;
|
|
||||||
color: #06f;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin pullquote {
|
|
||||||
content: attr(data-pullquote);
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.2;
|
|
||||||
display: flex;
|
|
||||||
font-family: serif;
|
|
||||||
color: #555;
|
|
||||||
padding: 1em;
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
.has-pullquote{
|
|
||||||
&.before:before {
|
|
||||||
@include pullquote;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
&.after:after {
|
|
||||||
@include pullquote;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#praise {
|
|
||||||
.title:before {
|
|
||||||
content: 'praise';
|
|
||||||
}
|
|
||||||
.testimonials {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
gap: 2em;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.testimonial {
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas: "b b" "a n";
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
gap: 1em;
|
|
||||||
width: 18em;
|
|
||||||
}
|
|
||||||
.avatar {
|
|
||||||
grid-area: a;
|
|
||||||
margin-left: 1em;
|
|
||||||
width: 4em;
|
|
||||||
height: 4em;
|
|
||||||
border-radius: 100em;
|
|
||||||
background: #212121;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
grid-area: n;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.bubble {
|
|
||||||
grid-area: b;
|
|
||||||
background: #212121;
|
|
||||||
color: white;
|
|
||||||
padding: 0.5em;
|
|
||||||
border-radius: 0.5em;
|
|
||||||
position: relative;
|
|
||||||
grid-column: span 2;
|
|
||||||
min-height: 80px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.4;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.bubble:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 0.5em solid transparent;
|
|
||||||
border-top-color: #212121;
|
|
||||||
bottom: -1em;
|
|
||||||
left:2.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#intro {
|
|
||||||
--headerHeight: 4em;
|
|
||||||
--navHeight: 4em;
|
|
||||||
background-color: #00234F;
|
|
||||||
color: white;
|
|
||||||
background-image: url('/images/puzzlehead.svg');
|
|
||||||
background-size: contain;
|
|
||||||
background-position-x: center;
|
|
||||||
background-position-y: bottom;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
min-height: calc(100vh - var(--headerHeight) - var(--navHeight));
|
|
||||||
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight) - var(--navHeight));
|
|
||||||
@media (min-width: 960px) {
|
|
||||||
min-height: calc(100vh - var(--headerHeight));
|
|
||||||
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight));
|
|
||||||
}
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
.tagline {
|
|
||||||
font-size: 1.5em;
|
|
||||||
font-weight: 700;
|
|
||||||
em {color: #0f6;font-style: italic;}
|
|
||||||
margin-bottom: 0.7rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
.blurb {
|
|
||||||
margin-bottom: 1.75em;
|
|
||||||
max-width: 30ch;
|
|
||||||
font-size: 1.1em;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
// TODO: matrix of weird sizes for intro breakpoints
|
|
||||||
//
|
|
||||||
// END: matrix of weird sizes for breakpoints
|
|
||||||
.button {
|
|
||||||
background: #06f;
|
|
||||||
color: white;
|
|
||||||
width: max-content;
|
|
||||||
i {margin: 0;}
|
|
||||||
span {display: none;}
|
|
||||||
@media (min-width: 30em) {
|
|
||||||
span {display: block;}
|
|
||||||
padding: 1em 2em;
|
|
||||||
}
|
|
||||||
border-radius: 100em;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1em;
|
|
||||||
right: 1em;
|
|
||||||
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
|
||||||
0 2px 2px rgba(0,0,0,0.11),
|
|
||||||
0 4px 4px rgba(0,0,0,0.11),
|
|
||||||
0 6px 8px rgba(0,0,0,0.11),
|
|
||||||
0 8px 16px rgba(0,0,0,0.11);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
7
assets/scss/base/mixins.scss
Normal file
7
assets/scss/base/mixins.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@mixin box-shadow {
|
||||||
|
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
||||||
|
0 2px 2px rgba(0,0,0,0.11),
|
||||||
|
0 4px 4px rgba(0,0,0,0.11),
|
||||||
|
0 6px 8px rgba(0,0,0,0.11),
|
||||||
|
0 8px 16px rgba(0,0,0,0.11);
|
||||||
|
}
|
||||||
|
|
@ -37,6 +37,7 @@
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
a {word-wrap: break-word;}
|
||||||
h1 {font-size: 2.49em}
|
h1 {font-size: 2.49em}
|
||||||
h2 {font-size: 2.07em}
|
h2 {font-size: 2.07em}
|
||||||
h3 {font-size: 1.728em}
|
h3 {font-size: 1.728em}
|
||||||
|
|
|
||||||
14
assets/scss/base/variables.scss
Normal file
14
assets/scss/base/variables.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
$container-width: 960px;
|
||||||
|
|
||||||
|
html {
|
||||||
|
--nav-height: 4em;
|
||||||
|
--header-height: 4em;
|
||||||
|
--link-color: #06f;
|
||||||
|
--link-visited: rgb(147, 85, 197);
|
||||||
|
--primary-accent: #06f;
|
||||||
|
--ui-background: #fff;
|
||||||
|
--ui-background-track: #ddd;
|
||||||
|
--ui-text: #212121;
|
||||||
|
--ui-text-muted: #777;
|
||||||
|
--ui-text-bold: #000;
|
||||||
|
}
|
||||||
25
assets/scss/components/button.scss
Normal file
25
assets/scss/components/button.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
.button, .button:link, .button:visited {
|
||||||
|
width: 100%;
|
||||||
|
@media (min-width: 33.75em) {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
font-size: clamp(1em,2vw,1em);
|
||||||
|
padding: 1em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 0.25em;
|
||||||
|
font-weight: 700;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.primary {
|
||||||
|
background: var(--primary-accent);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.button.secondary {
|
||||||
|
background: white;
|
||||||
|
border: 2px solid var(--primary-accent);
|
||||||
|
color: #06f;
|
||||||
|
}
|
||||||
34
assets/scss/components/h-card.scss
Normal file
34
assets/scss/components/h-card.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
.h-card {
|
||||||
|
font-family: monospace;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 18rem;
|
||||||
|
margin: 2em auto;
|
||||||
|
border-radius: 1em;
|
||||||
|
@include box-shadow;
|
||||||
|
.banner {
|
||||||
|
background-image: url('/images/sunset.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border-radius: 100em;
|
||||||
|
width: 25%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
dl {
|
||||||
|
dt, dd {width: max-content;}
|
||||||
|
padding: 1rem;
|
||||||
|
dt {font-weight: 700; margin-bottom: 0.25em}
|
||||||
|
dd {margin-bottom: 0.5em; max-width: 100%;}
|
||||||
|
}
|
||||||
|
}
|
||||||
56
assets/scss/components/intro.scss
Normal file
56
assets/scss/components/intro.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
#intro {
|
||||||
|
--headerHeight: 4em;
|
||||||
|
--navHeight: 4em;
|
||||||
|
background-color: #00234F;
|
||||||
|
color: white;
|
||||||
|
background-image: url('/images/puzzlehead.svg');
|
||||||
|
background-size: contain;
|
||||||
|
background-position-x: center;
|
||||||
|
background-position-y: bottom;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
min-height: calc(100vh - var(--headerHeight) - var(--navHeight));
|
||||||
|
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight) - var(--navHeight));
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
min-height: calc(100vh - var(--headerHeight));
|
||||||
|
min-height: calc(var(--vh, 1vh) * 100 - var(--headerHeight));
|
||||||
|
}
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
.tagline {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 700;
|
||||||
|
em {color: #0f6;font-style: italic;}
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
.blurb {
|
||||||
|
margin-bottom: 1.75em;
|
||||||
|
max-width: 30ch;
|
||||||
|
font-size: 1.1em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
// TODO: matrix of weird sizes for intro breakpoints
|
||||||
|
//
|
||||||
|
// END: matrix of weird sizes for breakpoints
|
||||||
|
.button {
|
||||||
|
background: #06f;
|
||||||
|
color: white;
|
||||||
|
width: max-content;
|
||||||
|
i {margin: 0;}
|
||||||
|
span {display: none;}
|
||||||
|
@media (min-width: 30em) {
|
||||||
|
span {display: block;}
|
||||||
|
padding: 1em 2em;
|
||||||
|
}
|
||||||
|
border-radius: 100em;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1em;
|
||||||
|
right: 1em;
|
||||||
|
@include box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
2
assets/scss/components/links.scss
Normal file
2
assets/scss/components/links.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
a:link {color: var(--link-color);}
|
||||||
|
a:visited {color: var(--link-visited);}
|
||||||
57
assets/scss/components/praise.scss
Normal file
57
assets/scss/components/praise.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
#praise {
|
||||||
|
.title:before {
|
||||||
|
content: 'praise';
|
||||||
|
}
|
||||||
|
.testimonials {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
gap: 2em;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.testimonial {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: "b b" "a n";
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
gap: 1em;
|
||||||
|
width: 18em;
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
grid-area: a;
|
||||||
|
margin-left: 1em;
|
||||||
|
width: 4em;
|
||||||
|
height: 4em;
|
||||||
|
border-radius: 100em;
|
||||||
|
background: #212121;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
grid-area: n;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.bubble {
|
||||||
|
grid-area: b;
|
||||||
|
background: #212121;
|
||||||
|
color: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
position: relative;
|
||||||
|
grid-column: span 2;
|
||||||
|
min-height: 80px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.4;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bubble:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 0.5em solid transparent;
|
||||||
|
border-top-color: #212121;
|
||||||
|
bottom: -1em;
|
||||||
|
left:2.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
20
assets/scss/components/pullquote.scss
Normal file
20
assets/scss/components/pullquote.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
@mixin pullquote {
|
||||||
|
content: attr(data-pullquote);
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.2;
|
||||||
|
display: flex;
|
||||||
|
font-family: serif;
|
||||||
|
color: #555;
|
||||||
|
padding: 1em;
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
.has-pullquote{
|
||||||
|
&.before:before {
|
||||||
|
@include pullquote;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
&.after:after {
|
||||||
|
@include pullquote;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -99,11 +99,7 @@
|
||||||
margin-top: 4em;
|
margin-top: 4em;
|
||||||
}
|
}
|
||||||
.project {
|
.project {
|
||||||
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
|
@include box-shadow;
|
||||||
0 2px 2px rgba(0,0,0,0.11),
|
|
||||||
0 4px 4px rgba(0,0,0,0.11),
|
|
||||||
0 6px 8px rgba(0,0,0,0.11),
|
|
||||||
0 8px 16px rgba(0,0,0,0.11);
|
|
||||||
border-radius: 0.25em;
|
border-radius: 0.25em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,23 @@
|
||||||
@import "base/reset.scss";
|
@import "base/reset.scss";
|
||||||
|
@import "base/variables.scss";
|
||||||
|
@import "base/mixins.scss";
|
||||||
@import "base/sections.scss";
|
@import "base/sections.scss";
|
||||||
@import "base/page.scss";
|
@import "base/page.scss";
|
||||||
@import "base/list.scss";
|
@import "base/list.scss";
|
||||||
@import "base/components.scss";
|
|
||||||
|
|
||||||
@import "content/index.scss";
|
@import "components/links.scss";
|
||||||
|
@import "components/pullquote.scss";
|
||||||
|
@import "components/button.scss";
|
||||||
|
@import "components/h-card.scss";
|
||||||
|
@import "components/intro.scss";
|
||||||
|
@import "components/praise.scss";
|
||||||
|
|
||||||
@import "content/work.scss";
|
@import "content/index.scss";
|
||||||
|
@import "content/work.scss";
|
||||||
@import "content/work/trilogy.scss";
|
@import "content/work/trilogy.scss";
|
||||||
@import "content/work/mastodon.scss";
|
@import "content/work/mastodon.scss";
|
||||||
|
@import "content/code.scss";
|
||||||
@import "content/code.scss";
|
@import "content/blog.scss";
|
||||||
|
|
||||||
@import "content/blog.scss";
|
|
||||||
|
|
||||||
@import "partials/site-header.scss";
|
@import "partials/site-header.scss";
|
||||||
@import "partials/site-footer.scss";
|
@import "partials/site-footer.scss";
|
||||||
|
|
@ -1,77 +1,12 @@
|
||||||
.site-footer {
|
.site-footer {
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
hr {
|
color: #212121;
|
||||||
width: 0.5rem;
|
padding: 2em 0 calc(2em + 4em);
|
||||||
height: 0.5rem;
|
@media (min-width: 960px) {
|
||||||
background: #212121;
|
padding: 2em 0;
|
||||||
border: 0;
|
|
||||||
border-radius: 100em;
|
|
||||||
position: relative;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
display: none;
|
|
||||||
&:before, &:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 0.5rem;
|
|
||||||
height: 0.5rem;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: #212121;
|
|
||||||
border-radius: 100em;
|
|
||||||
}
|
|
||||||
&:before {
|
|
||||||
margin-left: -0.75rem;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
margin-left: 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
hr {display: none}
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
|
||||||
padding: 1em;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column-reverse;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2rem;
|
|
||||||
@media (min-width: 41rem) {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 18rem 1fr;
|
|
||||||
align-items: stretch;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.about {max-width: 100%;}
|
|
||||||
.h-card {
|
|
||||||
font-family: monospace;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
.banner {
|
|
||||||
background-image: url('/images/sunset.jpg');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
border-radius: 100em;
|
|
||||||
width: 50%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
background: rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
background: white;
|
|
||||||
color: #212121;
|
|
||||||
dl {
|
|
||||||
dt, dd {width: max-content;}
|
|
||||||
padding: 1rem;
|
|
||||||
dt {font-weight: 700; margin-bottom: 0.25em}
|
|
||||||
dd {margin-bottom: 0.5em; max-width: 100%;}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.external-links {
|
.external-links {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -91,8 +26,6 @@
|
||||||
i {font-size: 1.6em;}
|
i {font-size: 1.6em;}
|
||||||
}
|
}
|
||||||
.footer-copy {
|
.footer-copy {
|
||||||
background: white;
|
|
||||||
color: #212121;
|
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,8 @@
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
|
background: var(--ui-background);
|
||||||
|
color: var(--ui-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-masthead {
|
.site-masthead {
|
||||||
|
|
@ -16,6 +17,9 @@
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@media (min-width: $container-width) {
|
||||||
|
flex: unset;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.site-icon {
|
.site-icon {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
|
|
@ -25,12 +29,12 @@
|
||||||
.site-title {
|
.site-title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 1rem;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
padding-bottom: 4rem;
|
padding-bottom: var(--nav-height);
|
||||||
@media (min-width: 960px) {
|
@media (min-width: $container-width) {
|
||||||
padding-bottom: unset;
|
padding-bottom: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -41,21 +45,21 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
background: white;
|
background: var(--ui-background);
|
||||||
color: #777;
|
color: var(--ui-text-muted);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
ul {
|
ul {
|
||||||
height: 4em;
|
height: var(--nav-height);
|
||||||
max-width: 960px;
|
max-width: $container-width;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
li {
|
li {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border-bottom: 4px solid #ddd;
|
border-bottom: 4px solid var(--ui-background-track);
|
||||||
&.active {
|
&.active {
|
||||||
color: black;
|
color: var(--ui-text-bold);
|
||||||
border-bottom: 4px solid #06f;
|
border-bottom: 6px solid var(--primary-accent);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
|
|
@ -69,21 +73,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
|
box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
|
||||||
@media (min-width: 960px) {
|
@media (min-width: $container-width) {
|
||||||
position: unset;
|
position: unset;
|
||||||
bottom: unset;
|
bottom: unset;
|
||||||
left: unset;
|
left: unset;
|
||||||
width: unset;
|
flex-grow: unset;
|
||||||
background: unset;
|
width: 20em;
|
||||||
margin-left: 6em;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 960px) {
|
@media (min-width: $container-width) {
|
||||||
.site-header {
|
.site-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background: white;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,23 @@
|
||||||
<header class="" id="under-construction">
|
<header class="" id="under-construction">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="title" style="margin-bottom: 0; margin-top: 1.5rem;">site under construction</h1>
|
<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>
|
||||||
|
<dt>full name</dt>
|
||||||
|
<dd class="fn n p-name"><span class="given-name">abdullah</span> <span class="family-name">tarawneh</span></dd>
|
||||||
|
<dt>preferred name</dt>
|
||||||
|
<dd class="nickname p-nickname">a</dd>
|
||||||
|
<dt>email (smtp)</dt>
|
||||||
|
<dd><a href="mailto:a@trwnh.com" class="email u-email">a@trwnh.com</a></dd>
|
||||||
|
<dt>chat (xmpp)</dt>
|
||||||
|
<dd><a href="xmpp:a@trwnh.com" class="url u-impp">a@trwnh.com</a></dd>
|
||||||
|
<dt>social (activitypub)</dt>
|
||||||
|
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="url u-url">mastodon.social/@trwnh</a></dd>
|
||||||
|
<dt>notes</dt>
|
||||||
|
<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
|
||||||
|
</dl>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,8 @@
|
||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<hr>
|
<hr>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="about">
|
|
||||||
<article class="vcard h-card">
|
|
||||||
<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div>
|
|
||||||
<dl>
|
|
||||||
<dt>full name</dt>
|
|
||||||
<dd class="fn n p-name"><span class="given-name">abdullah</span> <span class="family-name">tarawneh</span></dd>
|
|
||||||
<dt>preferred name</dt>
|
|
||||||
<dd class="nickname p-nickname">a</dd>
|
|
||||||
<dt>email (smtp)</dt>
|
|
||||||
<dd><a href="mailto:a@trwnh.com" class="email u-email">a@trwnh.com</a></dd>
|
|
||||||
<dt>chat (xmpp)</dt>
|
|
||||||
<dd><a href="xmpp:a@trwnh.com" class="url u-impp">a@trwnh.com</a></dd>
|
|
||||||
<dt>social (activitypub)</dt>
|
|
||||||
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="url u-url">mastodon.social/@trwnh</a></dd>
|
|
||||||
<dt>notes</dt>
|
|
||||||
<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
|
|
||||||
</dl>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<div class="footer-copy">
|
<div class="footer-copy">
|
||||||
<h1>site meta</h1>
|
<h1></h1>
|
||||||
{{ if .GitInfo }}
|
|
||||||
<h2>latest change:</h2>
|
|
||||||
<div class="git-lastcommit">
|
|
||||||
<time datetime='{{ .Lastmod.Format "2006-01-02T15:04:05Z0700" }}'>{{ .Lastmod.UTC.Format "Mon, 2006 Jan 02 15:04:05 MST" }}</time>
|
|
||||||
<p>{{ .GitInfo.Subject }}</p>
|
|
||||||
<a href='https://git.trwnh.com/a/abdullahtarawneh.com/commit/{{ .GitInfo.Hash }}'>{{ .GitInfo.AbbreviatedHash }}</a>
|
|
||||||
</div>
|
|
||||||
{{ else }}
|
|
||||||
<h2>page last modified:</h2>
|
|
||||||
<time datetime="">{{ .Lastmod }}</time>
|
|
||||||
{{ end }}
|
|
||||||
<h2>other properties:</h2>
|
<h2>other properties:</h2>
|
||||||
<a href="https://trwnh.com"><h3>trwnh.com</h3></a>
|
<a href="https://trwnh.com"><h3>trwnh.com</h3></a>
|
||||||
<p>links to everything else i do</p>
|
<p>links to everything else i do</p>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
Loading…
Reference in a new issue