mirror of https://github.com/andrewgioia/blog.git
672 lines
17 KiB
SCSS
672 lines
17 KiB
SCSS
/*! posts.andrewgioia.com style definitions v1.0.0 */
|
|
|
|
// normalize
|
|
@import "../../node_modules/normalize.css/normalize";
|
|
|
|
// sass variables
|
|
@import "variables";
|
|
|
|
:root {
|
|
--background: #{$tan-lt};
|
|
--background-accent: #{$white};
|
|
--border-accent: #{$tan-md};
|
|
--border-subdued: #{$white};
|
|
--font-size-base: #{$font-size-base};
|
|
--link-color: #{$blue-md};
|
|
--text-color: #{$navy-md};
|
|
--text-color-accent: #{$navy-dk};
|
|
--text-color-subdued: #{$tan-md};
|
|
--text-color-take: #{$sky-md};
|
|
--text-color-title: #{$purple-md};
|
|
--text-color-h3: #{$teal-md};
|
|
--screen-mobile: #{$screen-mobile};
|
|
--screen-tablet: #{$screen-tablet};
|
|
--screen-laptop: #{$screen-laptop};
|
|
--screen-display: #{$screen-display};
|
|
--screen-full: #{$screen-full};
|
|
}
|
|
|
|
// fonts
|
|
@import "icons";
|
|
|
|
// base styles
|
|
html {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
body {
|
|
align-items: center;
|
|
background: var(--background);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: $font-family-base;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
header {
|
|
align-self: stretch;
|
|
border-top: 1vmax solid var(--border-subdued);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 5vmin 6vmin 0;
|
|
|
|
h1 {
|
|
font-size: max(2vmax, 1.25rem);
|
|
margin: 0;
|
|
|
|
a {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
span {
|
|
color: var(--text-color-subdued);
|
|
|
|
&.slug {
|
|
text-transform: lowercase;
|
|
}
|
|
}
|
|
}
|
|
|
|
nav {
|
|
a {
|
|
color: var(--text-color);
|
|
display: inline-block;
|
|
font-size: max(1.5vmax, 1rem);
|
|
font-weight: 700;
|
|
margin-top: 0.25rem;
|
|
&:not(:first-child) {
|
|
margin-left: max(2.5vmax, 1rem);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
max-width: var(--screen-display);
|
|
padding: max(5vmin, 2rem) 6vmin;
|
|
position: relative;
|
|
|
|
// content titles
|
|
aside {
|
|
margin: 0 7.5vmin max(2vmax, 1rem);
|
|
text-align: center;
|
|
|
|
img#banner {
|
|
display: none; // only showing this on phones
|
|
margin: 0 -6vmin 10vmin;
|
|
width: calc(100% + 12vmin);
|
|
}
|
|
|
|
h1 {
|
|
color: var(--text-color-title);
|
|
font-family: $font-family-title;
|
|
font-size: max(3.75vmax, 2rem);
|
|
font-weight: 800;
|
|
letter-spacing: -0.075rem;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
time {
|
|
font-size: max(1.5vmax, 1rem);
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
&.paginate { // full width for the arrows
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0 0 max(2vmax, 1rem);
|
|
|
|
#next,
|
|
#previous {
|
|
flex-grow: 0;
|
|
padding-top: 2vmax;
|
|
width: 7.5vmax;
|
|
|
|
svg {
|
|
border-radius: 100rem;
|
|
}
|
|
|
|
&:hover svg {
|
|
background-color: var(--text-color-subdued);
|
|
stroke: var(--text-color);
|
|
}
|
|
}
|
|
#next {
|
|
text-align: right;
|
|
|
|
svg {
|
|
padding: 0.2vmax 0 .2vmax 0.4vmax;
|
|
}
|
|
}
|
|
#previous {
|
|
text-align: left;
|
|
|
|
svg {
|
|
padding: 0.2vmax 0.4vmax .2vmax 0;
|
|
}
|
|
}
|
|
|
|
#meta {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// content body
|
|
article {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
h2 { // section titles, outset width
|
|
color: var(--text-color-accent);
|
|
font-size: max(2.25vmax, 1.5rem);
|
|
font-weight: 800;
|
|
letter-spacing: -0.05rem;
|
|
margin: 2vmax 10vmin 1vmax;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h3 { // subsection headers, body width
|
|
color: var(--text-color-h3);
|
|
font-size: max(2vmax, 1.375rem);
|
|
margin: 2vmax 10vmin 1vmax;
|
|
text-align: center;
|
|
}
|
|
|
|
h4 { // highlighted sections, left aligned and bigger
|
|
font-size: max(1.75vmax, 1.25rem);
|
|
font-weight: 500;
|
|
font-weight: 800;
|
|
line-height: max(2.5vmax, 1.75rem);
|
|
margin: max(1vmax, 0.75rem) 0;
|
|
width: min(50vmax, 100%)
|
|
}
|
|
|
|
// skinny elements
|
|
p,
|
|
ul,
|
|
h3,
|
|
section,
|
|
blockquote {
|
|
width: min(50vmax, 100%);
|
|
}
|
|
|
|
// lists
|
|
ul,
|
|
ol {
|
|
margin: max(1vmax, 0.75rem) 0;
|
|
padding: 0;
|
|
|
|
li {
|
|
margin-left: max(3vmax, 1rem);
|
|
padding: 0 0 max(2vmax, 1rem) max(1vmax, 0.5rem);
|
|
|
|
p:first-child { // each li's first p needs reduced top margin
|
|
margin-top: max(0.5vmax, 0.5rem)
|
|
}
|
|
&:first-child p:first-child { // the first item's first p gets none
|
|
margin-top: 0;
|
|
}
|
|
p:last-child { // every last para needs it's bottom margin removed too
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
ul {
|
|
// default font-size on lists should be same as paragraphs
|
|
li {
|
|
font-size: max(1.375vmax, 1rem);
|
|
line-height: max(2vmax, 1.5rem);
|
|
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
section {
|
|
// for lists inside <sections>, like FNs, we'll make it a little smaller
|
|
ol li,
|
|
ol li p {
|
|
font-size: max(1.125vmax, 0.85rem);
|
|
line-height: max(1.5vmax, 1.375rem);
|
|
}
|
|
}
|
|
|
|
// post images
|
|
figure {
|
|
margin: 2vmax 0;
|
|
max-width: 80vw;
|
|
picture,
|
|
img {
|
|
border-radius: 1rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// captions below post images
|
|
figcaption {
|
|
font-size: max(1.25vmax, 0.9rem);
|
|
font-style: italic;
|
|
padding: 1vmax 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// home page
|
|
&#home {
|
|
padding-top: max(10vmin, 2rem);
|
|
width: 80%;
|
|
}
|
|
|
|
// full post pages
|
|
&#post {
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// short takes pages
|
|
&#thought {
|
|
align-items: center;
|
|
flex-direction: column;
|
|
max-width: var(--screen-full);
|
|
|
|
h1 {
|
|
color: var(--text-color-take);
|
|
font-size: max(2.5vmax, 2rem); // slightly smaller
|
|
}
|
|
|
|
article {
|
|
align-items: center;
|
|
//background-color: var(--background-accent);
|
|
border-radius: max(2vmax, 1rem);
|
|
display: flex;
|
|
flex-direction: column;
|
|
//padding: 2vmax 4vmax;
|
|
width: min(50vmax, 100%);
|
|
}
|
|
}
|
|
|
|
// list pages
|
|
&#list {
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 80%;
|
|
|
|
h1 {
|
|
align-self: center;
|
|
font-size: max(3vmax, 2rem);
|
|
margin: 1vmax 0 3vmax;
|
|
}
|
|
section {
|
|
display: list-item;
|
|
list-style: decimal-leading-zero;
|
|
margin-bottom: max(2vmax, 1.5rem);
|
|
|
|
&::marker {
|
|
font-weight: 800;
|
|
font-size: max(2vmax, 1.5rem);
|
|
}
|
|
|
|
h2 {
|
|
font-family: $font-family-title;
|
|
font-size: max(2vmax, 1.5rem);
|
|
font-weight: 800;
|
|
letter-spacing: -0.05rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
h3 {
|
|
font-size: max(1.375vmax, 1rem);
|
|
}
|
|
|
|
p {
|
|
font-size: max(1.375vmax, 1rem);
|
|
line-height: max(2vmax, 1.5rem);
|
|
}
|
|
|
|
// after the first one, put a top border to divide them
|
|
+ section {
|
|
border-top: 0.5vmax solid var(--border-subdued);
|
|
padding-top: max(2vmax, 1.5rem);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// paragraphs
|
|
p {
|
|
font-size: max(1.375vmax, 1rem);
|
|
line-height: max(2vmax, 1.5rem);
|
|
margin: max(1vmax, 0.75rem) 0;
|
|
|
|
&.big { // larger highlight and intro paragraphs
|
|
font-size: max(1.75vmax, 1.25rem);
|
|
font-weight: 500;
|
|
line-height: max(2.5vmax, 1.75rem);
|
|
|
|
> strong {
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
&.swqm { // starts with a quotation mark
|
|
text-indent: min(-0.55vmax, -0.4rem);
|
|
}
|
|
}
|
|
|
|
// blockquotes
|
|
blockquote {
|
|
margin: max(1vmax, 0.75rem) 0;
|
|
|
|
p {
|
|
border-left: 1vmax solid var(--border-accent);
|
|
padding-left: 2vmax;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
padding: max(1vmax, 0.75rem) 0 max(1vmax, 0.75rem) 2vmax;
|
|
width: auto !important;
|
|
|
|
&:first-child {
|
|
padding-top: 0;
|
|
}
|
|
&:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// post footer info
|
|
footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: max(5vmin, 2rem) 6vmin;
|
|
position: relative;
|
|
max-width: calc(100% - 12vmin);
|
|
width: 100%;
|
|
|
|
&.border {
|
|
border-top: max(0.25vmax, 0.25rem) solid var(--border-accent);
|
|
|
|
&::before {
|
|
align-items: center;
|
|
background: var(--background);
|
|
border-radius: 100%;
|
|
color: var(--border-accent);
|
|
content: $icon-barracuda;
|
|
display: flex;
|
|
font-family: 'andrew';
|
|
font-size: max(3vmax, 2.5rem);
|
|
height: max(5vmax, 4rem);
|
|
justify-content: center;
|
|
left: 50%;
|
|
margin-left: min(-2.5vmax, -2rem);
|
|
position: absolute;
|
|
text-align: center;
|
|
top: min(-2.5vmax, -2rem);
|
|
width: max(5vmax, 4rem);
|
|
}
|
|
}
|
|
|
|
// bottom content, should be footer
|
|
section {
|
|
align-self: stretch;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 5vmax;
|
|
position: relative;
|
|
|
|
span {
|
|
margin-left: 0.5vmax;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
// footnotes
|
|
section.footnotes {
|
|
ol {
|
|
margin-bottom: 0;
|
|
li:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
a[href^="#fn:"]:before{ content: '[' }
|
|
a[href^="#fn:"]:after{ content: ']' }
|
|
|
|
// table of contents
|
|
#toc {
|
|
background: rgba(255,255,255,0.9);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
position: fixed;
|
|
right: -35vw;
|
|
top: 0;
|
|
transition: 400ms 250ms right ease-in-out;
|
|
width: 35vw;
|
|
|
|
&::before {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cline x1='8' y1='6' x2='21' y2='6' /%3E%3Cline x1='8' y1='12' x2='21' y2='12' /%3E%3Cline x1='8' y1='18' x2='21' y2='18' /%3E%3Cline x1='3' y1='6' x2='3.01' y2='6' /%3E%3Cline x1='3' y1='12' x2='3.01' y2='12' /%3E%3Cline x1='3' y1='18' x2='3.01' y2='18' /%3E%3C/svg%3E%0A");
|
|
background-size: 75% 75%;
|
|
background-position: 0 50%;
|
|
background-repeat: no-repeat;
|
|
bottom: max(5vmin, 2rem);
|
|
content: '';
|
|
cursor: pointer;
|
|
display: block;
|
|
height: 4vmax;
|
|
left: -12vmin;
|
|
position: absolute;
|
|
transition-property: opacity, left;
|
|
transition-duration: 400ms;
|
|
transition-timing-function: ease-in-out;
|
|
transition-delay: 250ms;
|
|
width: 12vmin;
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
right: 0;
|
|
|
|
&::before {
|
|
opacity: 0;
|
|
left: -5vmax;
|
|
}
|
|
}
|
|
|
|
nav#TableOfContents {
|
|
padding: 1vmax 3vmax 1vmax 1vmax;
|
|
height: calc(100vh - 2vmax);
|
|
overflow-y: auto;
|
|
|
|
ul { // first level
|
|
list-style: upper-roman;
|
|
ul { // second level
|
|
list-style: upper-alpha;
|
|
ul { // third level
|
|
list-style: decimal;
|
|
}
|
|
}
|
|
}
|
|
li {
|
|
font-size: max(1.375vmax, 1rem);
|
|
line-height: max(1.75vmax, 1.375rem);
|
|
margin-bottom: max(1vmax, 0.75rem);
|
|
> a {
|
|
display: block;
|
|
margin-bottom: max(1vmax, 0.75rem);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
a,
|
|
b {
|
|
color: var(--link-color);
|
|
font-style: normal;
|
|
position: relative;
|
|
text-decoration: none;
|
|
|
|
// novelty arrow
|
|
&.arrow::after {
|
|
color: inherit;
|
|
content: $icon-arrow;
|
|
display: block;
|
|
font-family: 'andrew';
|
|
font-size: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
-webkit-transform: translateY(-0.25rem) translateX(100%);
|
|
-moz-transform: translateY(-0.25rem) translateX(100%);
|
|
transform: translateY(-0.25rem) translateX(100%);
|
|
transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
|
|
}
|
|
|
|
// back links move this to the left
|
|
&.arrow.back::after {
|
|
content: $icon-arrow-left;
|
|
left: 0;
|
|
-webkit-transform: translateY(-0.25rem) translateX(-1.25rem);
|
|
-moz-transform: translateY(-0.25rem) translateX(-1.25rem);
|
|
transform: translateY(-0.25rem) translateX(-1.25rem);
|
|
transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
|
|
}
|
|
|
|
// show the arrow on hover
|
|
&.arrow:hover::after,
|
|
&.wa:hover b.arrow::after {
|
|
display: block;
|
|
margin-top: -3px;
|
|
opacity: 100;
|
|
}
|
|
|
|
// back-to-top links
|
|
&#top {
|
|
display: block;
|
|
align-self: flex-end;
|
|
margin: 5vmin 10vmin 3vmin 0;
|
|
|
|
&:hover {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// specific link effects
|
|
p a:hover {
|
|
border-bottom: 2px solid var(--link-color);
|
|
}
|
|
header h1 a.arrow.back::after {
|
|
-webkit-transform: translateY(-0.5rem) translateX(min(-2vmax, -1.25rem));
|
|
-moz-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
|
|
transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
|
|
}
|
|
|
|
// non-post lists
|
|
ul {
|
|
&.list { // main page post list
|
|
display: flex;
|
|
flex-direction: column;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
|
|
li {
|
|
align-items: stretch;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding-bottom: max(2.5vmax, 1.1rem);
|
|
|
|
div {
|
|
flex: 0 1 auto; // don't grow, shrink if needed, auto size onload
|
|
font-size: max(2.5vmax, 1.1rem);
|
|
font-weight: 600;
|
|
}
|
|
|
|
time {
|
|
flex: 0 0 auto; // don't grow, don't shrink. auto size onload
|
|
font-size: max(2vmax, 1rem);
|
|
font-weight: 900;
|
|
padding-top: 0.5vmax;
|
|
padding-left: 1vmax;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
&.tags {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
list-style-type: none;
|
|
margin: 4vmax 0 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
|
|
li a {
|
|
background: var(--background-accent);
|
|
border-radius: 1000rem;
|
|
display: block;
|
|
font-size: max(1.25vmax, 1rem);
|
|
margin: 0 1vmax 2vmax;
|
|
padding: 1vmax 2vmax;
|
|
|
|
&:hover {
|
|
background: var(--link-color);
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
&.clean {
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: start;
|
|
list-style-type: none;
|
|
margin: 1vmax 0 0;
|
|
padding: 0;
|
|
|
|
li a {
|
|
color: var(--text-color);
|
|
font-size: max(1.25vmax, 1rem);
|
|
margin: 0 0.5vmax;
|
|
|
|
&:hover {
|
|
color: var(--text-color-accent);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// horizontal rules
|
|
hr {
|
|
border: none;
|
|
border-top: max(0.25vmax, 0.25rem) solid var(--border-accent);
|
|
margin: 3vmax 0;
|
|
}
|
|
|
|
// extras
|
|
span.tag {
|
|
background: var(--background-accent);
|
|
padding: 0.25vmax 1vmax;
|
|
}
|
|
|
|
// schemes
|
|
@import "dark";
|
|
|
|
// media queries
|
|
@import "media"; |