mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-09-15 22:25:33 -04:00
just some SASS cleanup
This commit is contained in:
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() {
|
||||
|
||||
Reference in New Issue
Block a user