mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-18 22:05:29 -04:00
just some SASS cleanup
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
@include responsive--global();
|
||||
@include responsive--header();
|
||||
@include responsive--footer();
|
||||
@include responsive--content();
|
||||
|
||||
@include responsive--home();
|
||||
@include responsive--list();
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// System fonts and web fonts
|
||||
// Web fonts
|
||||
$webfont-sans: "Inter", sans-serif;
|
||||
$webfont-mono: "Hack", monospace;
|
||||
|
||||
// System fonts
|
||||
// https://markdotto.com/2018/02/07/github-system-fonts/
|
||||
// stylelint-disable indentation
|
||||
$system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
@@ -10,8 +14,6 @@ $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
$system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
|
||||
"Menlo", "Courier", monospace;
|
||||
$webfont-inter: "Inter", sans-serif;
|
||||
$webfont-hack: "Hack", monospace;
|
||||
|
||||
// Misc Settings
|
||||
$responsive-width: 890px;
|
||||
|
||||
102
assets/sass/components/_content.scss
Normal file
102
assets/sass/components/_content.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
div#content {
|
||||
font-size: 0.95em;
|
||||
letter-spacing: -0.008em;
|
||||
line-height: 1.7;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 0.5em;
|
||||
letter-spacing: 0.001em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
img,
|
||||
figure {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
margin: 1em auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
figure {
|
||||
// reduce margin between image and caption
|
||||
img {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
// image captions
|
||||
figcaption {
|
||||
font-size: 0.9em;
|
||||
color: $color-medium;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 1em;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
div.embed {
|
||||
&.video {
|
||||
video {
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.tweet {
|
||||
// stylelint-disable-next-line selector-type-no-unknown
|
||||
twitter-widget,
|
||||
iframe.twitter-tweet {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.youtube {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
margin: 1em auto;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
iframe.youtube-player {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.gh-buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.codepen {
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--content() {
|
||||
}
|
||||
@@ -1,9 +1,21 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/*! Inter Typeface | SIL Open Font License 1.1 | https://rsms.me/inter/ */
|
||||
/*!
|
||||
* Inter typeface v3.11 - https://rsms.me/inter/
|
||||
*
|
||||
* Copyright (c) 2016-2019 The Inter Project Authors.
|
||||
* Licensed under the SIL Open Font License, Version 1.1:
|
||||
* https://github.com/rsms/inter/blob/v3.11/LICENSE.txt
|
||||
*/
|
||||
@include font-face("Inter", "./fonts/inter-regular-subset", 400, true);
|
||||
@include font-face("Inter", "./fonts/inter-medium-subset", 500, true);
|
||||
@include font-face("Inter", "./fonts/inter-bold-subset", 700, true);
|
||||
|
||||
/*! Hack Typeface | MIT License | https://sourcefoundry.org/hack/ */
|
||||
/*!
|
||||
* Hack typeface v3.003 - https://sourcefoundry.org/hack/
|
||||
*
|
||||
* Copyright (c) 2018 Source Foundry Authors.
|
||||
* Licensed under the MIT License:
|
||||
* https://github.com/source-foundry/Hack/blob/v3.003/LICENSE.md
|
||||
*/
|
||||
@include font-face("Hack", "./fonts/hack-regular-subset", 400);
|
||||
|
||||
@@ -7,10 +7,9 @@ body {
|
||||
margin: 0 auto;
|
||||
background-color: $color-gray-background; // really just the color of header & footer
|
||||
color: $color-text;
|
||||
font-family: $webfont-inter;
|
||||
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
||||
font-family: $webfont-sans;
|
||||
font-kerning: normal;
|
||||
font-variant-ligatures: normal;
|
||||
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
||||
line-height: 1.5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -26,7 +25,6 @@ a {
|
||||
transition: background-size 0.25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-size: 100% $link-underline-size;
|
||||
}
|
||||
|
||||
@@ -39,161 +37,63 @@ strong {
|
||||
letter-spacing: 0.001em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid $color-links;
|
||||
margin-left: 0.5em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
// https://css-tricks.com/examples/hrs/
|
||||
hr {
|
||||
width: 90%;
|
||||
margin: 1.5em auto;
|
||||
border: 0;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(to right, #ffffff, #cccccc, #ffffff);
|
||||
}
|
||||
|
||||
// all code
|
||||
code {
|
||||
font-family: $webfont-mono;
|
||||
background: $color-super-light;
|
||||
font-size: 0.95em;
|
||||
letter-spacing: 0;
|
||||
page-break-inside: avoid;
|
||||
|
||||
// inline code in paragraphs (single tildes)
|
||||
border: 1px solid $color-light;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
// code fences
|
||||
div.highlight {
|
||||
background: $color-super-light;
|
||||
border: 1px solid $color-light;
|
||||
border-left: 3px solid $color-links;
|
||||
line-height: 1.6;
|
||||
max-width: 100%;
|
||||
overflow-x: scroll;
|
||||
object-fit: scale-down;
|
||||
margin: 1em 0;
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
// overrides inline code styles
|
||||
code {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// white background for entire width content area
|
||||
div#wrap {
|
||||
width: 100%;
|
||||
background-color: $color-background;
|
||||
}
|
||||
|
||||
div#content {
|
||||
font-size: 0.95em;
|
||||
letter-spacing: -0.008em;
|
||||
line-height: 1.7;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
letter-spacing: 0.001em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
img,
|
||||
figure {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
margin: 1em auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
figure {
|
||||
// reduce margin between image and caption
|
||||
img {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
// image captions
|
||||
figcaption {
|
||||
font-size: 0.9em;
|
||||
color: $color-medium;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid $color-links;
|
||||
margin-left: 0.5em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
margin-left: 1em;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
// https://css-tricks.com/examples/hrs/
|
||||
hr {
|
||||
width: 90%;
|
||||
margin: 1.5em auto;
|
||||
border: 0;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(to right, #ffffff, #cccccc, #ffffff);
|
||||
}
|
||||
|
||||
video.embed {
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
div.embed {
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.youtube {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
margin: 1em auto;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
iframe.youtube-player {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.codepen {
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-type-no-unknown
|
||||
twitter-widget,
|
||||
iframe.twitter-tweet {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// all code
|
||||
code,
|
||||
div.highlight {
|
||||
font-family: $webfont-hack;
|
||||
background: $color-super-light;
|
||||
font-size: 0.95em;
|
||||
letter-spacing: 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
// inline code in paragraphs (single tildes)
|
||||
code {
|
||||
border: 1px solid $color-light;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
// code fences
|
||||
div.highlight {
|
||||
border: 1px solid $color-light;
|
||||
border-left: 3px solid $color-links;
|
||||
line-height: 1.6;
|
||||
max-width: 100%;
|
||||
overflow-x: scroll;
|
||||
object-fit: scale-down;
|
||||
font-size: 1em;
|
||||
margin: 1em 0;
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
// overrides inline code styles
|
||||
code {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--global() {
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/*! Compiled CSS from SASS: https://go.jarv.is/ssKHe */
|
||||
|
||||
// Variables & Functions
|
||||
@import 'abstracts/variables';
|
||||
@import 'abstracts/functions';
|
||||
@@ -11,6 +9,7 @@
|
||||
@import 'components/global';
|
||||
@import 'components/header';
|
||||
@import 'components/footer';
|
||||
@import 'components/content';
|
||||
|
||||
// Pages
|
||||
@import 'pages/home';
|
||||
|
||||
@@ -27,6 +27,5 @@ main#etc {
|
||||
font-size: 1.6em;
|
||||
padding: 0 0.6em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,17 +38,6 @@ main#home {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// non-link colors
|
||||
span {
|
||||
&#serverless {
|
||||
color: $color-serverless;
|
||||
}
|
||||
|
||||
&#shh {
|
||||
color: $color-medium-light;
|
||||
}
|
||||
}
|
||||
|
||||
img#me {
|
||||
float: right;
|
||||
margin: 0 0 0.5em 1em;
|
||||
@@ -60,7 +49,7 @@ main#home {
|
||||
}
|
||||
|
||||
a {
|
||||
// Loop through $colors-home -- the main reason I switched to SASS :)
|
||||
// Loop through $colors-home (see abstracts/_variables)
|
||||
@each $id, $color in $colors-home {
|
||||
&##{$id} {
|
||||
color: $color;
|
||||
@@ -85,6 +74,17 @@ main#home {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// non-link colors
|
||||
span {
|
||||
&#serverless {
|
||||
color: $color-serverless;
|
||||
}
|
||||
|
||||
&#shh {
|
||||
color: $color-medium-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user