potato/website
1
0
Fork 0
Code Pull Requests Actions Packages Releases Activity

Add pronouns

Browse Source
This commit is contained in:
Ian Adam Naval 2021-09-24 20:57:30 -04:00
parent 26de796dcd
commit db08d9afb8
2 changed files with 165 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ianonavy/_includes/header.html
View File

@ -4,7 +4,10 @@
<div class="site-header-title"> <div class="site-header-title">
<a href="{{ site.baseurl }}/"><img class="site-avatar" src="{{ site.gravatar_url }}" alt="Photo of {{ site.title }}"></a> <a href="{{ site.baseurl }}/"><img class="site-avatar" src="{{ site.gravatar_url }}" alt="Photo of {{ site.title }}"></a>
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a> <div class="site-title">
<a class="name" href="{{ site.baseurl }}/">{{ site.title }}</a>
<a class="pronouns" href="https://pronoun.is/they/.../themself">pronoun.is/they/them</a>
</div>
</div> </div>
<nav class="site-nav"> <nav class="site-nav">

325
ianonavy/_sass/_layout.scss
View File

@ -2,294 +2,291 @@
* Site header * Site header
*/ */
.site-header .wrapper { .site-header .wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.site-header-title { .site-header-title {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.site-avatar { .site-avatar {
float: left; float: left;
border-radius: 8px; border-radius: 8px;
margin: $spacing-unit $spacing-unit $spacing-unit 0; margin: $spacing-unit $spacing-unit $spacing-unit 0;
} }
.site-header { .site-header {
border-top: 5px solid $grey-color-dark; border-top: 5px solid $grey-color-dark;
min-height: 56px; min-height: 56px;
// Positioning context for the mobile navigation icon // Positioning context for the mobile navigation icon
position: relative; position: relative;
} }
.site-title { .site-title {
display: flex;
flex-flow: column nowrap;
.name {
font-size: 26px; font-size: 26px;
line-height: 56px; line-height: 28px;
letter-spacing: -1px; letter-spacing: -1px;
margin-bottom: 0; margin-bottom: 0;
float: left; float: left;
&:hover { &:hover {
color: $blue-color; color: $blue-color;
text-decoration: none; text-decoration: none;
} }
&, &,
&:visited { &:visited {
color: $grey-color-dark; color: $grey-color-dark;
} }
}
} }
.site-nav { .site-nav {
float: right; float: right;
line-height: 56px; line-height: 56px;
.menu-icon {
display: none;
}
.page-link {
color: $text-color;
line-height: $base-line-height;
// Gaps between nav items, but not on the first one
&:not(:first-child) {
margin-left: 20px;
}
}
@include media-query($on-palm) {
position: absolute;
top: 9px;
right: 30px;
background-color: $background-color;
border: 1px solid $grey-color-light;
border-radius: 5px;
text-align: right;
.menu-icon { .menu-icon {
display: none; display: block;
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;
> svg {
width: 18px;
height: 15px;
path {
fill: $grey-color-dark;
}
}
}
.trigger {
clear: both;
display: none;
}
&:hover .trigger {
display: block;
padding-bottom: 5px;
} }
.page-link { .page-link {
color: $text-color; display: block;
line-height: $base-line-height; padding: 5px 10px;
// Gaps between nav items, but not on the first one
&:not(:first-child) {
margin-left: 20px;
}
}
@include media-query($on-palm) {
position: absolute;
top: 9px;
right: 30px;
background-color: $background-color;
border: 1px solid $grey-color-light;
border-radius: 5px;
text-align: right;
.menu-icon {
display: block;
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;
> svg {
width: 18px;
height: 15px;
path {
fill: $grey-color-dark;
}
}
}
.trigger {
clear: both;
display: none;
}
&:hover .trigger {
display: block;
padding-bottom: 5px;
}
.page-link {
display: block;
padding: 5px 10px;
}
} }
}
} }
/** /**
* Site footer * Site footer
*/ */
.site-footer { .site-footer {
border-top: 1px solid $grey-color-light; border-top: 1px solid $grey-color-light;
padding: $spacing-unit 0; padding: $spacing-unit 0;
} }
.footer-heading { .footer-heading {
font-size: 18px; font-size: 18px;
margin-bottom: $spacing-unit / 2; margin-bottom: $spacing-unit / 2;
} }
.contact-list, .contact-list,
.social-media-list { .social-media-list {
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
} }
.footer-col-wrapper { .footer-col-wrapper {
font-size: 15px; font-size: 15px;
color: $grey-color; color: $grey-color;
margin-left: -$spacing-unit / 2; margin-left: -$spacing-unit / 2;
@extend %clearfix; @extend %clearfix;
} }
.footer-col { .footer-col {
float: left; float: left;
margin-bottom: $spacing-unit / 2; margin-bottom: $spacing-unit / 2;
padding-left: $spacing-unit / 2; padding-left: $spacing-unit / 2;
} }
.footer-col-1 { .footer-col-1 {
width: -webkit-calc(35% - (#{$spacing-unit} / 2)); width: -webkit-calc(35% - (#{$spacing-unit} / 2));
width: calc(35% - (#{$spacing-unit} / 2)); width: calc(35% - (#{$spacing-unit} / 2));
} }
.footer-col-2 { .footer-col-2 {
width: -webkit-calc(20% - (#{$spacing-unit} / 2)); width: -webkit-calc(20% - (#{$spacing-unit} / 2));
width: calc(20% - (#{$spacing-unit} / 2)); width: calc(20% - (#{$spacing-unit} / 2));
} }
.footer-col-3 { .footer-col-3 {
width: -webkit-calc(45% - (#{$spacing-unit} / 2)); width: -webkit-calc(45% - (#{$spacing-unit} / 2));
width: calc(45% - (#{$spacing-unit} / 2)); width: calc(45% - (#{$spacing-unit} / 2));
} }
@include media-query($on-laptop) { @include media-query($on-laptop) {
.footer-col-1, .footer-col-1,
.footer-col-2 { .footer-col-2 {
width: -webkit-calc(50% - (#{$spacing-unit} / 2)); width: -webkit-calc(50% - (#{$spacing-unit} / 2));
width: calc(50% - (#{$spacing-unit} / 2)); width: calc(50% - (#{$spacing-unit} / 2));
} }
.footer-col-3 { .footer-col-3 {
width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2));
} }
} }
@include media-query($on-palm) { @include media-query($on-palm) {
.footer-col { .footer-col {
float: none; float: none;
width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2));
} }
} }
/** /**
* Page content * Page content
*/ */
.page-content { .page-content {
padding: $spacing-unit 0; padding: $spacing-unit 0;
} }
.page-heading { .page-heading {
font-size: 20px; font-size: 20px;
} }
.post h2 { .post h2 {
margin: 0; margin: 0;
} }
.post-list { .post-list {
margin-left: 0; margin-left: 0;
list-style: none; list-style: none;
> li { > li {
margin-bottom: $spacing-unit; margin-bottom: $spacing-unit;
} }
} }
.post-meta { .post-meta {
display: block; display: block;
font-size: $small-font-size; font-size: $small-font-size;
color: $grey-color; color: $grey-color;
margin-bottom: $spacing-unit / 2; margin-bottom: $spacing-unit / 2;
} }
.post-link { .post-link {
display: block; display: block;
font-size: 24px; font-size: 24px;
} }
.post-read-more { .post-read-more {
display: block; display: block;
margin: $spacing-unit / 2 0; margin: $spacing-unit / 2 0;
} }
/** /**
* Posts * Posts
*/ */
.post-header { .post-header {
margin-bottom: $spacing-unit; margin-bottom: $spacing-unit;
} }
.post-title { .post-title {
font-size: 42px; font-size: 42px;
letter-spacing: -1px; letter-spacing: -1px;
line-height: 1; line-height: 1;
@include media-query($on-laptop) { @include media-query($on-laptop) {
font-size: 36px; font-size: 36px;
} }
} }
.post-content { .post-content {
margin-bottom: $spacing-unit; margin-bottom: $spacing-unit;
h2 { h2 {
font-size: 32px; font-size: 32px;
@include media-query($on-laptop) { @include media-query($on-laptop) {
font-size: 28px; font-size: 28px;
}
} }
}
h3 { h3 {
font-size: 26px; font-size: 26px;
@include media-query($on-laptop) { @include media-query($on-laptop) {
font-size: 22px; font-size: 22px;
}
} }
}
h4 { h4 {
font-size: 20px; font-size: 20px;
@include media-query($on-laptop) { @include media-query($on-laptop) {
font-size: 18px; font-size: 18px;
}
} }
}
} }
/** /**
* Projects * Projects
*/ */
.projects-project { .projects-project {
display: block; display: block;
clear: both; clear: both;
border-bottom: 1px #ccc dotted; border-bottom: 1px #ccc dotted;
min-height: 240px; min-height: 240px;
padding: $spacing-unit 0; padding: $spacing-unit 0;
&:first-child { &:first-child {
padding-top: 0; padding-top: 0;
} }
&:last-child { &:last-child {
border: none; border: none;
} }
} }
.projects-screenshot { .projects-screenshot {
float: left; float: left;
margin: 0 $spacing-unit $spacing-unit 0; margin: 0 $spacing-unit $spacing-unit 0;
border: 1px #ccc solid; border: 1px #ccc solid;
} }