mirror of
https://github.com/kremalicious/blog.git
synced 2025-01-02 18:13:10 +01:00
more base typography
This commit is contained in:
parent
5057d0d716
commit
d01499f87a
GPG Key ID:
606EEEF3C479A91F
@ -1,77 +0,0 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Code
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp
|
||||
font-family: $font-family-monospace
|
||||
font-size: $font-size-small
|
||||
hyphens: none
|
||||
|
||||
code,
|
||||
kbd
|
||||
padding: 2px 4px
|
||||
|
||||
code,
|
||||
samp
|
||||
color: darken($code-color, 40%)
|
||||
background-color: alpha($code-bg, 5%)
|
||||
border-radius: $border-radius-base
|
||||
|
||||
kbd
|
||||
color: $kbd-color
|
||||
background-color: $kbd-bg
|
||||
border-radius: $border-radius-small
|
||||
border: 1px solid $kbd-bg
|
||||
box-shadow: inset 0 1px 0 rgba(#fff, .4)
|
||||
|
||||
pre
|
||||
display: block
|
||||
padding: 0
|
||||
margin-bottom: $spacer
|
||||
line-height: $line-height
|
||||
color: $code-color
|
||||
background-color: $code-bg
|
||||
margin-left: -($spacer)
|
||||
margin-right: -($spacer)
|
||||
|
||||
// make 'em scrollable
|
||||
overflow: scroll
|
||||
-webkit-overflow-scrolling: touch
|
||||
max-height: 300px
|
||||
|
||||
@media $screen-sm
|
||||
max-height: 500px
|
||||
|
||||
@media $screen-md
|
||||
border-radius: $border-radius-base
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code
|
||||
white-space: pre
|
||||
overflow: auto
|
||||
display: block
|
||||
padding: $spacer
|
||||
font-size: inherit
|
||||
color: inherit
|
||||
background-color: transparent
|
||||
border-radius: 0
|
||||
|
||||
overflow-wrap: normal
|
||||
word-wrap: normal
|
||||
word-break: normal
|
||||
|
||||
code.language-shell
|
||||
padding-left: 1.5em
|
||||
display: block
|
||||
|
||||
&:before
|
||||
@extend .text-dimmed
|
||||
content: "$"
|
||||
display: inline-block
|
||||
margin-left: -.5em
|
||||
margin-right: .8em
|
||||
@ -41,9 +41,10 @@ module.exports = {
|
||||
linkImagesToOriginal: false,
|
||||
sizeByPixelDensity: true,
|
||||
showCaptions: true,
|
||||
backgroundColor: '#e7eef4'
|
||||
backgroundColor: '#dfe8ef'
|
||||
}
|
||||
},
|
||||
'gatsby-remark-prismjs',
|
||||
'gatsby-remark-smartypants',
|
||||
'gatsby-remark-autolink-headers'
|
||||
]
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
"gatsby-plugin-sitemap": "^2.0.0-beta.2",
|
||||
"gatsby-remark-autolink-headers": "^2.0.0-beta.3",
|
||||
"gatsby-remark-images": "^2.0.1-beta.7",
|
||||
"gatsby-remark-prismjs": "^3.0.0-beta.3",
|
||||
"gatsby-remark-smartypants": "^2.0.0-beta.2",
|
||||
"gatsby-source-filesystem": "^2.0.1-beta.5",
|
||||
"gatsby-transformer-remark": "^2.1.1-beta.3",
|
||||
@ -43,6 +44,7 @@
|
||||
"node-sass": "^4.9.2",
|
||||
"normalize-css": "^2.3.1",
|
||||
"normalize-opentype.css": "^0.2.4",
|
||||
"prismjs": "^1.15.0",
|
||||
"qrious": "^4.0.2",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
@import 'variables';
|
||||
|
||||
.screen {
|
||||
flex: 1;
|
||||
max-width: 38rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: $spacer;
|
||||
}
|
||||
|
||||
85
src/styles/_code.scss
Normal file
85
src/styles/_code.scss
Normal file
@ -0,0 +1,85 @@
|
||||
@import 'variables';
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
code,
|
||||
samp {
|
||||
color: darken($code-color, 40%);
|
||||
background-color: rgba($code-bg, .05);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
kbd {
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid $kbd-bg;
|
||||
box-shadow: inset 0 1px 0 rgba(#fff, .4);
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
padding: $spacer / 2;
|
||||
margin-bottom: $spacer;
|
||||
line-height: $line-height;
|
||||
color: $code-color;
|
||||
background-color: $code-bg;
|
||||
margin-left: -($spacer);
|
||||
margin-right: -($spacer);
|
||||
|
||||
// make 'em scrollable
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: 300px;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
overflow-wrap: normal;
|
||||
word-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
pre > code.language-bash {
|
||||
padding-left: 1.5em;
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
content: '$';
|
||||
opacity: .5;
|
||||
display: inline-block;
|
||||
margin-left: -.5em;
|
||||
margin-right: .8em;
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'] {
|
||||
background: rgba($code-bg, .1);
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
@import 'syntax';
|
||||
158
src/styles/_syntax.scss
Normal file
158
src/styles/_syntax.scss
Normal file
@ -0,0 +1,158 @@
|
||||
/*
|
||||
Name: Duotone Space
|
||||
Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
|
||||
|
||||
Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css)
|
||||
Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
|
||||
*/
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
tab-size: 4;
|
||||
hyphens: none;
|
||||
background: #24242e;
|
||||
color: #767693;
|
||||
}
|
||||
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #5151e6;
|
||||
}
|
||||
|
||||
pre[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection {
|
||||
text-shadow: none;
|
||||
background: #5151e6;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
// :not(pre) > code[class*='language-'] {
|
||||
// }
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #5b5b76;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #5b5b76;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.operator,
|
||||
.token.number {
|
||||
color: #dd672c;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.function {
|
||||
color: #767693;
|
||||
}
|
||||
|
||||
.token.tag-id,
|
||||
.token.selector,
|
||||
.token.atrule-id {
|
||||
color: #ebebff;
|
||||
}
|
||||
|
||||
code.language-javascript,
|
||||
.token.attr-name {
|
||||
color: #aaaaca;
|
||||
}
|
||||
|
||||
code.language-css,
|
||||
code.language-scss,
|
||||
.token.boolean,
|
||||
.token.string,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.language-scss .token.string,
|
||||
.style .token.string,
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit,
|
||||
.token.statement,
|
||||
.token.regex,
|
||||
.token.atrule {
|
||||
color: #fe8c52;
|
||||
}
|
||||
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #fe8c52;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
border-bottom: 1px dotted #ebebff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
color: #aaaaca;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre > code.highlight {
|
||||
outline: .4em solid #7676f4;
|
||||
outline-offset: .4em;
|
||||
}
|
||||
|
||||
/* overrides color-values for the Line Numbers plugin
|
||||
* http://prismjs.com/plugins/line-numbers/
|
||||
*/
|
||||
.line-numbers .line-numbers-rows {
|
||||
border-right-color: #262631;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span::before {
|
||||
color: #393949;
|
||||
}
|
||||
|
||||
/* overrides color-values for the Line Highlight plugin
|
||||
* http://prismjs.com/plugins/line-highlight/
|
||||
*/
|
||||
.line-highlight {
|
||||
background: rgba(221, 103, 44, .2);
|
||||
background: -webkit-linear-gradient(
|
||||
left,
|
||||
rgba(221, 103, 44, .2) 70%,
|
||||
rgba(221, 103, 44, 0)
|
||||
);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(221, 103, 44, .2) 70%,
|
||||
rgba(221, 103, 44, 0)
|
||||
);
|
||||
}
|
||||
@ -5,8 +5,8 @@ $easing: cubic-bezier(.75, 0, .08, 1);
|
||||
/////////////////////////////////////
|
||||
|
||||
$brand-main: #015565;
|
||||
$brand-cyan: #43a699;
|
||||
$brand-main-light: #88bec8;
|
||||
$brand-cyan: #43a699;
|
||||
$brand-light: #e7eef4;
|
||||
|
||||
$brand-grey: #6b7f88;
|
||||
@ -16,9 +16,11 @@ $brand-grey-dimmed: lighten($brand-grey, 50%);
|
||||
// Backgrounds
|
||||
/////////////////////////////////////
|
||||
|
||||
$body-background-color: $brand-light;
|
||||
$body-background-color: #dfe8ef;
|
||||
$body-background-color--dark: darken($brand-grey, 30%);
|
||||
|
||||
$page-background-color: $brand-light;
|
||||
|
||||
// Text Colors
|
||||
/////////////////////////////////////
|
||||
|
||||
@ -28,7 +30,7 @@ $text-color-light: $brand-grey-light;
|
||||
$text-color--dark: $brand-grey-light;
|
||||
$text-color-light--dark: $brand-grey;
|
||||
|
||||
// Typography
|
||||
// Base Typography
|
||||
/////////////////////////////////////
|
||||
|
||||
$font-size-root: 18px;
|
||||
@ -55,6 +57,9 @@ $font-color-base: $text-color;
|
||||
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
|
||||
// Headings
|
||||
/////////////////////////////////////
|
||||
|
||||
$font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
|
||||
Helvetica, Arial, sans-serif;
|
||||
$font-weight-headings: 500;
|
||||
@ -63,7 +68,25 @@ $line-height-headings: 1.1;
|
||||
$color-headings: $brand-main;
|
||||
$color-headings--dark: $brand-main-light;
|
||||
|
||||
// Code
|
||||
/////////////////////////////////////
|
||||
|
||||
$code-bg: #343642;
|
||||
$code-color: $brand-light;
|
||||
$kbd-bg: $code-bg;
|
||||
$kbd-color: $code-color;
|
||||
|
||||
// Components spacing
|
||||
/////////////////////////////////////
|
||||
|
||||
$spacer: ($font-size-base * $line-height);
|
||||
|
||||
$border-radius: 3px;
|
||||
|
||||
// Responsive breakpoints
|
||||
/////////////////////////////////////
|
||||
|
||||
$screen-xs: 30em;
|
||||
$screen-sm: 40.625em;
|
||||
$screen-md: 60em;
|
||||
$screen-lg: 87.5em;
|
||||
@ -10,11 +10,11 @@ html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $body-background-color;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: $font-size-root;
|
||||
background: $body-background-color;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -24,13 +24,18 @@ body {
|
||||
line-height: $line-height;
|
||||
color: $font-color-base;
|
||||
text-rendering: optimizeLegibility;
|
||||
letter-spacing: -.01em;
|
||||
font-feature-settings: 'liga', 'kern';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
min-height: 100vh;
|
||||
background: $body-background-color;
|
||||
transition: background .6s $easing;
|
||||
|
||||
// handling long text, like URLs
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
&.dark {
|
||||
background-color: $body-background-color--dark;
|
||||
color: $text-color--dark;
|
||||
@ -43,27 +48,73 @@ ol {
|
||||
margin: 0 0 $spacer;
|
||||
}
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
/////////////////////////////////////
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// Headings
|
||||
/////////////////////////////////////
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: $spacer * 2;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-h1;
|
||||
font-size: $font-size-h2;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
font-size: $font-size-h1;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $font-size-h2;
|
||||
font-size: $font-size-h3;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
font-size: $font-size-h2;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-h3;
|
||||
font-size: $font-size-h4;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $font-size-h4;
|
||||
font-size: $font-size-h5;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
font-size: $font-size-h4;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $font-size-h5;
|
||||
font-size: $font-size-h6;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
font-size: $font-size-h5;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
@ -96,11 +147,24 @@ a {
|
||||
text-decoration: none;
|
||||
transition: .2s ease-out;
|
||||
|
||||
h1 &,
|
||||
h2 &,
|
||||
h3 & {
|
||||
color: $color-headings;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
color: lighten($brand-cyan, 10%);
|
||||
transform: translate3d(0, -.1rem, 0);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transition: none;
|
||||
color: darken($brand-cyan, 30%);
|
||||
box-shadow: inset 0 -1px 0 darken($brand-cyan, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
// Media
|
||||
@ -114,8 +178,175 @@ svg {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Lists
|
||||
/////////////////////////////////////
|
||||
|
||||
ul {
|
||||
li {
|
||||
&::before {
|
||||
content: ' \2015'; // horizontal bar: ― ―
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: ol-counter;
|
||||
|
||||
li {
|
||||
&::before {
|
||||
content: counter(ol-counter) '.';
|
||||
counter-increment: ol-counter;
|
||||
}
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer;
|
||||
padding-left: ($spacer * 1.5);
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
// stylelint-disable no-descending-specificity
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: -($spacer * 1.5);
|
||||
top: -1px;
|
||||
color: $text-color-light;
|
||||
user-select: none;
|
||||
}
|
||||
// stylelint-enable no-descending-specificity
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Inline typography
|
||||
/////////////////////////////////////
|
||||
|
||||
b,
|
||||
strong,
|
||||
.bold {
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
em,
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
dfn {
|
||||
text-transform: none;
|
||||
font-style: normal;
|
||||
font-size: inherit;
|
||||
border-bottom: 1px dashed $brand-grey-dimmed;
|
||||
cursor: help;
|
||||
font-feature-settings: inherit;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #fffaab;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px dashed #afc3cb;
|
||||
padding-bottom: $spacer;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
&::before {
|
||||
bottom: -2px;
|
||||
width: 100%;
|
||||
border-bottom: 1px dashed #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Quotes
|
||||
/////////////////////////////////////
|
||||
|
||||
q {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-style: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
blockquote > p {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 $spacer;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg) {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
// quotation marks
|
||||
&::before {
|
||||
content: '“';
|
||||
font-size: 300%;
|
||||
color: lighten($text-color, 40%);
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -20px;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg) {
|
||||
top: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Selection
|
||||
/////////////////////////////////////
|
||||
|
||||
::-moz-selection {
|
||||
background: #2e4f5c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #2e4f5c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#___gatsby {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// More basic elements
|
||||
/////////////////////////////////////
|
||||
|
||||
@import 'code';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user