blog/assets/scss/main.scss

402 lines
10 KiB
SCSS

/*! posts.andrewgioia.com style definitions v1.0.0 */
// normalize
@import "../../node_modules/normalize.css/normalize";
// sass variables
@import "variables";
:root {
--bg-normal: #{$tan-lt};
--bg-dark: #{$black-dk};
--border-normal: #{$white};
--border-dark: #{$black-md};
--font-size-base: #{$font-size-base};
--link-color-normal: #{$blue-md};
--link-color-dark: #{$blue-lt};
--text-normal: #{$navy-md};
--text-normal-hl: #{$navy-dk};
--text-dark: #{$gray};
--text-dark-hl: #{$white};
--text-title-normal: #{$purple-md};
--text-title-dark: #{$purple-lt};
--text-subdued-normal: #{$tan-md};
--text-subdued-dark: #{$black-lt};
--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(--bg-normal);
color: var(--text-normal);
display: flex;
flex-direction: column;
font-family: $font-family-base;
justify-content: flex-start;
}
header {
align-self: stretch;
border-top: 1vmax solid var(--border-normal);
padding: 5vmin 6vmin 0;
h1 {
font-size: max(2vmax, 1.25rem);
margin: 0;
a {
color: var(--text-normal);
}
span {
color: var(--text-subdued-normal);
}
}
}
main {
display: flex;
max-width: var(--screen-display);
padding: max(5vmin, 2rem) 6vmin;
position: relative;
// sections
&#home {
padding-top: max(10vmin, 2rem);
width: 80%;
}
&#post {
flex-direction: column;
align-items: center;
}
// post titles
aside {
margin: 0 7.5vmin max(2vmax, 1rem);
text-align: center;
h1 {
color: var(--text-title-normal);
font-family: $font-family-title;
font-size: max(3.75vmax, 2rem);
font-weight: 800;
letter-spacing: -0.075rem;
line-height: 1.1;
}
time {
font-size: max(1.5vmax, 1rem);
font-weight: 900;
text-transform: uppercase;
}
}
// post content
article {
align-items: center;
display: flex;
flex-direction: column;
h2 {
color: var(--text-normal-hl);
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 {
color: var(--text-normal-hl);
font-size: max(2vmax, 1.375rem);
margin: 2vmax 10vmin 1vmax;
text-align: center;
}
// skinny elements
p,
ul,
h3,
section,
blockquote {
width: min(50vmax, 100%);
}
// 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);
}
}
// 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 {
li {
font-size: max(1.375vmax, 1rem);
line-height: max(2vmax, 1.5rem);
&:last-child {
padding-bottom: 0;
}
}
}
section {
ol li,
ol li p {
font-size: max(1vmax, 0.75rem);
line-height: max(1.5vmax, 1.1rem);
}
}
// images
figure {
margin: 2vmax 10vmax 1vmax;
img {
width: 100%;
}
figcaption {
text-align: center;
}
}
// blockquotes
blockquote {
margin: max(1vmax, 0.75rem) 0;
p {
border-left: 1vmax solid var(--border-normal);
padding-left: 2vmax;
margin-top: 0;
margin-bottom: 0;
padding: max(1vmax, 0.75rem) 0 max(1vmax, 0.75rem) 2vmax;
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
}
}
}
// bottom content
section {
&#author {
align-self: stretch;
display: flex;
justify-content: center;
margin-top: 5vmax;
position: relative;
span {
margin-left: 0.5vmax;
}
&.border {
border-top: max(0.25vmax, 0.25rem) solid var(--border-dark);
padding-top: 5vmax;
&::before {
align-items: center;
background: var(--bg-normal);
border-radius: 100%;
content: $icon-barracuda;
display: block;
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);
}
}
}
}
}
nav {
&#TableOfContents {
display: none;
}
}
a {
color: var(--link-color-normal);
position: relative;
text-decoration: none;
&:not(.arrow):hover {
border-bottom: 2px solid var(--link-color-normal);
}
// 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.5rem) translateX(100%);
-moz-transform: translateY(-0.5rem) translateX(100%);
transform: translateY(-0.5rem) 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.5rem) translateX(-1.5rem);
-moz-transform: translateY(-0.5rem) translateX(-1.5rem);
transform: translateY(-0.5rem) translateX(-1.5rem);
transition: opacity 150ms ease-in-out, margin-top 150ms ease-in-out;
}
// show the arrow on hover
&.arrow:hover::after {
display: block;
margin-top: -3px;
opacity: 100;
}
// back-to-top links
&#top {
display: block;
align-self: flex-end;
margin: 3vmax;
&:hover {
border: none;
}
}
}
// specific link effects
header h1 a.back::after {
-webkit-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
-moz-transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
transform: translateY(-0.5rem) translateX(min(-1.75vmax, -1.25rem));
}
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;
padding: 0;
width: 100%;
li a {
background: var(--border-normal);
border-radius: 1000rem;
display: block;
font-size: max(1.25vmax, 1rem);
margin: 0 1vmax 2vmax;
padding: 1vmax 2vmax;
&:hover {
background: var(--link-color-normal);
border: none;
color: #fff;
}
}
}
}
// schemes
@import "dark";
// media queries
@import "media";