blog/assets/scss/main.scss

753 lines
19 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;
flex-direction: column;
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 {
overflow-x: hidden; // safety for thoughts side scroller
padding-top: max(10vmin, 2rem);
width: 80%;
// main page post list
ul.posts {
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;
}
}
}
// main page thoughts scroller
ul.thoughts {
list-style: none;
display: flex;
flex-direction: row;
padding: 0.5vmax 0;
margin: 2.5vmax 0;
overflow-x: auto;
transform: translateX(calc(-1 * ((100vw - var(--screen-display)) / 2)));
white-space: nowrap;
width: 100vw;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
li {
display: flex;
margin-right: max(2vmax, 1rem);
&:first-child { // push the first one right 1/2 the max column size by default
margin-left: calc((100vw - var(--screen-display)) / 2);
}
a {
background: var(--background-accent);
border-radius: 1rem;
display: flex;
flex-direction: column;
font-size: max(1.5vmax, 1rem);
justify-content: space-between;
padding: max(2vmax, 1rem);
top: 0;
transition: 150ms top ease-in-out;
white-space: normal;
width: 20vmax;
span {
flex-grow: 1;
}
time {
color: var(--text-color);
font-size: max( 1.25vmax, 1rem);
font-weight: 800;
margin-top: max(1.75vmax, 1rem);
text-transform: uppercase;
}
&:hover {
top: -0.5vmax;
}
}
// add some buffer to the last one in the list
&:last-child::after {
content: '';
display: block;
width: 6vmin;
height: 100%;
right: 0;
}
}
}
}
// full post pages
&#post {
align-items: center;
}
// short takes pages
&#thought {
align-items: center;
max-width: var(--screen-full);
h1 {
color: var(--text-color-take);
font-size: max(2.5vmax, 2rem); // slightly smaller
}
}
// list pages
&#list {
align-items: center;
width: 80%;
h1 {
align-self: center;
font-size: max(3.75vmax, 2rem);
font-weight: 800;
letter-spacing: -0.075rem;
line-height: 1.15;
margin: 2vmax 0 5vmax;
text-transform: capitalize;
}
section {
background: var(--background-accent);
border-radius: max(1.5vmax, 0.5rem);
border-left: max(1.5vmax, 0.5rem) solid var(--text-color-title);
margin-bottom: max(4vmax, 1.5rem);
padding: max(1.5vmax, 1rem) max(3vmax, 1.5rem);
position: relative;
time {
align-items: flex-end;
display: flex;
flex-direction: column;
font-size: max(3.75vmax, 1.75rem);
font-weight: 800;
letter-spacing: -0.075rem;
line-height: 1.15;
height: 5vmax;
justify-content: center;
opacity: 0.1;
position: absolute;
right: 1vmax;
top: 0;
width: 25vmax;
}
h2 {
font-family: $font-family-title;
font-size: max(2vmax, 1.75rem);
font-weight: 800;
letter-spacing: -0.05rem;
line-height: 1.1;
margin-top: max(1vmax, 0.75rem);
}
h3 {
font-size: max(1.375vmax, 1rem);
}
p {
font-size: max(1.375vmax, 1rem);
line-height: 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-items: center;
align-self: stretch;
display: flex;
justify-content: center;
margin-top: 5vmax;
position: relative;
&:not(:first-child) {
margin-top: 1vmax;
}
span {
margin-left: 0.5vmax;
}
&.pb {
padding-bottom: 2vmax;
}
}
}
// 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-content lists
ul {
// post and thought tags
&.tags {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
list-style: 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;
}
}
}
// tags that are just text
&.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";