mirror of
https://github.com/andrewgioia/blog.git
synced 2024-11-15 04:54:47 +00:00
403 lines
10 KiB
SCSS
403 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(--text-subdued-normal);
|
|
padding-left: 2vmax;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding: max(1vmax, 0.75rem) 0 max(1vmax, 0.75rem) 2vmax;
|
|
width: auto;
|
|
|
|
&: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: 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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 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"; |