fix heading styles (#28) and remove stylus files
This commit is contained in:
kentnek
parent
d251fde9fb
commit
e36a5cd65a
|
|
@ -20,19 +20,10 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: $leading;
|
||||
margin-bottom: 0;
|
||||
line-height: $leading;
|
||||
|
||||
code {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -46,15 +37,15 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
font-size: $scale / 2 * 1rem;
|
||||
font-size: ($scale / 1.2) * 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $scale / 3 * 1rem;
|
||||
font-size: ($scale / 1.44) * 1rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $scale / 4 * 1rem;
|
||||
font-size: ($scale / 1.728) * 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
/*
|
||||
* Handles mobile nav
|
||||
*/
|
||||
|
||||
function toggleMobileNavState() {
|
||||
const body = document.querySelector("body");
|
||||
body.classList.toggle("nav--active");
|
||||
}
|
||||
|
||||
/*
|
||||
* Initializes burger functionality
|
||||
*/
|
||||
|
||||
function initBurger() {
|
||||
const burger = document.querySelector(".burger");
|
||||
burger.addEventListener("click", toggleMobileNavState);
|
||||
}
|
||||
|
||||
initBurger();
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
@import 'partials/_normalize'
|
||||
@import 'partials/_vars'
|
||||
@import 'partials/_reset'
|
||||
@import 'partials/_typography'
|
||||
@import 'partials/_nav'
|
||||
|
||||
body.nav--active
|
||||
overflow: hidden
|
||||
|
||||
main
|
||||
padding: 3rem 1.5rem
|
||||
|
||||
// compensates for the nav sidebar on tablet and desktop
|
||||
@media screen and (min-width: $medium)
|
||||
padding-left: "calc(1.5rem + %s)" % $navWidth
|
||||
|
||||
@media screen and (max-width: $medium - 1)
|
||||
padding-top: "calc(3rem + %s)" % $burgerContainerHeight
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
@import '../_main'
|
||||
@import '../partials/_social-icons'
|
||||
|
||||
|
||||
.splash-container
|
||||
height: 100%
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
font-size: 14px
|
||||
|
||||
@media screen and (min-width: $medium)
|
||||
font-size: 18px
|
||||
|
||||
|
||||
|
||||
.splash
|
||||
|
||||
h1
|
||||
font-size: 3em
|
||||
line-height: 1
|
||||
letter-spacing: -0.03em
|
||||
margin: 0
|
||||
|
||||
h2
|
||||
font-size: 2.25em
|
||||
font-weight: 500
|
||||
line-height: 1.25
|
||||
max-width: 22em
|
||||
letter-spacing: -0.03em
|
||||
|
||||
.fancy
|
||||
color: $primary
|
||||
|
||||
.handle
|
||||
display: inline-block
|
||||
margin-top: 0.275em
|
||||
color: $grey
|
||||
letter-spacing: 0.5px
|
||||
|
||||
.writing
|
||||
text-decoration: none
|
||||
color: $primary
|
||||
|
||||
/* overrides */
|
||||
|
||||
main
|
||||
padding-top: 0
|
||||
padding-bottom: 0
|
||||
height: 100%
|
||||
|
||||
.social-icons
|
||||
justify-content: flex-start
|
||||
padding-top: 2rem
|
||||
|
|
@ -1,201 +0,0 @@
|
|||
@import '../_main'
|
||||
@import '../partials/_social-icons'
|
||||
@import '../partials/_github-syntax-highlighting'
|
||||
|
||||
.post
|
||||
width: 100%
|
||||
max-width: 34rem
|
||||
margin: 0 auto
|
||||
|
||||
h2,
|
||||
h3
|
||||
position: relative
|
||||
padding-top: 10px
|
||||
|
||||
.anchor
|
||||
text-decoration: none
|
||||
position: absolute
|
||||
left: -1rem
|
||||
color: $grey
|
||||
font-size: 1.2rem
|
||||
font-weight: 400
|
||||
|
||||
.anchor:hover
|
||||
color: $darkGrey
|
||||
|
||||
blockquote
|
||||
width: 95%
|
||||
margin: 0 auto
|
||||
font-size: 1rem
|
||||
|
||||
a
|
||||
color: $darkGrey
|
||||
text-decoration: underline
|
||||
|
||||
img
|
||||
width: 100%
|
||||
max-width: 500px
|
||||
margin: 0 auto
|
||||
display: block
|
||||
|
||||
.post__content a
|
||||
font-weight: 400
|
||||
color: #0366d6
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
.post__title
|
||||
margin-top: 0
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.post__date
|
||||
color: $grey
|
||||
font-size: 0.8rem
|
||||
|
||||
.cp_embed_wrapper
|
||||
margin-top: 1.5rem
|
||||
|
||||
.codepen__caption
|
||||
display: block
|
||||
width: 75%
|
||||
margin: 0.5rem auto 0
|
||||
color: $grey
|
||||
font-size: .8rem
|
||||
font-weight: 300
|
||||
text-align: center
|
||||
|
||||
.note
|
||||
width: 90%
|
||||
margin: 1rem auto 0
|
||||
font-size: 12px
|
||||
text-align: center
|
||||
line-height: 1.5
|
||||
color: $grey
|
||||
|
||||
code
|
||||
font-size: 12px
|
||||
color: $darkGrey
|
||||
background-color: transparent;
|
||||
|
||||
&:before,
|
||||
&:after
|
||||
content: '`'
|
||||
|
||||
a
|
||||
color: $darkGrey
|
||||
text-decoration: underline
|
||||
|
||||
.tags__list
|
||||
padding-right: 1.5rem
|
||||
margin: 1.5rem 0 0
|
||||
list-style: none
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
|
||||
.tag__item
|
||||
margin-right: 1rem
|
||||
display: inline-block
|
||||
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
|
||||
.tag__link
|
||||
display: inline-block
|
||||
text-decoration: none
|
||||
padding: .2em .4em
|
||||
border-radius: 3px
|
||||
background: lighten($primary, 90%)
|
||||
color: $primary
|
||||
font-size: 0.8rem
|
||||
|
||||
&:hover
|
||||
background: lighten($primary, 81%)
|
||||
|
||||
.gif
|
||||
margin-top: 1.5rem
|
||||
|
||||
img
|
||||
max-width: 375px
|
||||
|
||||
p.warning
|
||||
background: #FFF9DF
|
||||
padding: 1rem
|
||||
font-size: 0.8rem
|
||||
line-height: 1.5
|
||||
color: #747160
|
||||
border-left: 2px solid #747160
|
||||
|
||||
a
|
||||
color: #747160
|
||||
text-decoration: underline
|
||||
|
||||
.pagination
|
||||
display: flex
|
||||
flex-direction: column
|
||||
margin-top: 1.5rem
|
||||
|
||||
@media screen and (min-width: 600px)
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
|
||||
.pagination__item
|
||||
text-decoration: none
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
&:nth-child(2)
|
||||
margin-top: 1.5rem
|
||||
|
||||
@media screen and (min-width: 600px)
|
||||
width: 275px
|
||||
padding: 15px
|
||||
border-radius: 4px
|
||||
|
||||
&:first-of-type
|
||||
padding-right: 15px
|
||||
|
||||
&:last-of-type
|
||||
margin-top: 0
|
||||
|
||||
&:hover
|
||||
background-color: #f6f9fc
|
||||
|
||||
.pagination__label
|
||||
color: $grey
|
||||
font-size: 0.8rem
|
||||
|
||||
.pagination__title
|
||||
color: $black
|
||||
font-weight: 700
|
||||
margin-top: 0.25rem
|
||||
|
||||
footer
|
||||
text-align: center
|
||||
padding: 0 1.5rem
|
||||
background: #ffffff
|
||||
|
||||
p
|
||||
color: $grey
|
||||
font-size: 0.65rem
|
||||
|
||||
|
||||
/* overrides */
|
||||
.post__content
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
li
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
&::before
|
||||
content: '-'
|
||||
color: $darkGrey
|
||||
position: absolute
|
||||
margin-left: -15px
|
||||
|
||||
.twitter-tweet.twitter-tweet-rendered
|
||||
margin: 1.5rem auto!important
|
||||
width: 375px!important
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
@import '../_main'
|
||||
@import '../partials/_post-list'
|
||||
|
||||
.tags__list
|
||||
list-style: none
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 50px
|
||||
flex-shrink: 0
|
||||
|
||||
@media screen and (max-width: $medium - 1)
|
||||
display: none
|
||||
|
||||
.post__header .tags__list
|
||||
display: none
|
||||
padding-left: 0
|
||||
|
||||
@media screen and (max-width: $medium - 1)
|
||||
display: block
|
||||
|
||||
.tag__item
|
||||
display: inline-block
|
||||
margin-right: 10px
|
||||
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
|
||||
.tag__link
|
||||
font-size: 0.8rem
|
||||
|
||||
.tag__link
|
||||
text-decoration: none
|
||||
color: $grey
|
||||
font-size: 0.9rem
|
||||
|
||||
&::before
|
||||
content: '#'
|
||||
font-size: 0.7rem
|
||||
padding-right: 1px
|
||||
|
||||
&:hover
|
||||
color: $darkGrey
|
||||
|
||||
/* page overrides */
|
||||
.post-list__container
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
@import '../_main'
|
||||
@import '../partials/_post-list'
|
||||
|
||||
.tag__header
|
||||
align-items: baseline
|
||||
display: flex
|
||||
margin: 0 auto
|
||||
margin-bottom: 3rem
|
||||
|
||||
a,
|
||||
.separator
|
||||
color: $grey
|
||||
font-size: 1.5rem
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
.separator
|
||||
align-self: center
|
||||
margin: 0 5px
|
||||
|
||||
.tag__term
|
||||
margin: 0
|
||||
font-weight: 600
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.burger__container
|
||||
height: $burgerContainerHeight
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 0 1.5rem
|
||||
position: fixed
|
||||
width: 100%
|
||||
background: #fff
|
||||
z-index: 2
|
||||
|
||||
@media screen and (min-width: $medium)
|
||||
display: none
|
||||
|
||||
|
||||
.burger
|
||||
position: relative
|
||||
width: $meatWidth
|
||||
height: $meatWidth
|
||||
cursor: pointer
|
||||
|
||||
.burger__meat
|
||||
position: absolute
|
||||
width: $meatWidth
|
||||
height: $meatHeight
|
||||
background: $black
|
||||
top: "calc(50% - %s / 2)" % $meatHeight
|
||||
left: "calc(50% - %s / 2)" % $meatWidth
|
||||
transition: all 150ms ease-in
|
||||
|
||||
.burger__meat--1
|
||||
transform: translateY(-10px)
|
||||
|
||||
.burger__meat--2
|
||||
width: "calc(%s - 6px)" % $meatWidth
|
||||
|
||||
.burger__meat--3
|
||||
transform: translateY(10px)
|
||||
|
||||
|
||||
.nav--active .burger__meat--1
|
||||
transform: rotate(45deg)
|
||||
|
||||
.nav--active .burger__meat--2
|
||||
opacity: 0
|
||||
|
||||
.nav--active .burger__meat--3
|
||||
transform: rotate(-45deg)
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
$black = #111
|
||||
$grey = #9B9B9B
|
||||
$darkGrey = #717171
|
||||
$white = #fff
|
||||
$primary = #9013FE
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
code[class*="language-"],
|
||||
pre[class*="language-"]
|
||||
color: #24292e
|
||||
-moz-tab-size: 4
|
||||
-o-tab-size: 4
|
||||
tab-size: 4
|
||||
|
||||
-webkit-hyphens: none
|
||||
-moz-hyphens: none
|
||||
-ms-hyphens: none
|
||||
hyphens: none
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata,
|
||||
.token.plain-text
|
||||
color: #6a737d
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.operator
|
||||
color: #d73a49
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted
|
||||
color: #22863a
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted
|
||||
color: #032f62
|
||||
|
||||
|
||||
.token.function,
|
||||
.token.class-name
|
||||
color: #6f42c1
|
||||
|
||||
/* language-specific */
|
||||
|
||||
/* JSX */
|
||||
.language-jsx .token.punctuation,
|
||||
.language-jsx .token.tag .token.punctuation,
|
||||
.language-jsx .token.tag .token.script,
|
||||
.language-jsx .token.plain-text
|
||||
color: #24292e
|
||||
|
||||
.language-jsx .token.tag .token.attr-name
|
||||
color: #6f42c1
|
||||
|
||||
.language-jsx .token.tag .token.class-name
|
||||
color: #005cc5
|
||||
|
||||
.language-jsx .token.tag .token.script-punctuation,
|
||||
.language-jsx .token.attr-value .token.punctuation:first-child
|
||||
color: #d73a49
|
||||
|
||||
.language-jsx .token.attr-value
|
||||
color: #032f62
|
||||
|
||||
.language-jsx span.[class="comment"]
|
||||
color: pink
|
||||
|
||||
/* HTML */
|
||||
.language-html .token.tag .token.punctuation
|
||||
color: #24292e
|
||||
|
||||
.language-html .token.tag .token.attr-name
|
||||
color: #6f42c1
|
||||
|
||||
.language-html .token.tag .token.attr-value,
|
||||
.language-html .token.tag .token.attr-value .token.punctuation:not(:first-child)
|
||||
color: #032f62
|
||||
|
||||
/* CSS */
|
||||
.language-css .token.selector
|
||||
color: #6f42c1
|
||||
|
||||
.language-css .token.property
|
||||
color: #005cc5
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
@import '_burger'
|
||||
|
||||
.nav
|
||||
font-size: 16px
|
||||
position: fixed
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
background: #fff
|
||||
visibility: hidden
|
||||
z-index: 1
|
||||
|
||||
@media screen and (min-width: $medium)
|
||||
display: block
|
||||
visibility: visible
|
||||
padding-top: 3em
|
||||
width: $navWidth
|
||||
|
||||
.nav--active .nav
|
||||
visibility: visible
|
||||
height: 100%
|
||||
width: 100%
|
||||
|
||||
|
||||
.nav__list
|
||||
text-align: right
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
width: 50%
|
||||
|
||||
@media screen and (min-width: $medium)
|
||||
width: auto
|
||||
|
||||
// Creates a drop-in animation when opening the mobile menu
|
||||
@media screen and (max-width: $medium - 1)
|
||||
transform: translateY(-25px)
|
||||
opacity: 0
|
||||
|
||||
.nav--active &
|
||||
transform: translateY(0)
|
||||
opacity: 1
|
||||
transition: all 500ms ease
|
||||
|
||||
|
||||
.nav__list li
|
||||
margin-bottom: 3em
|
||||
line-height: 1.5em
|
||||
|
||||
&:last-of-type
|
||||
margin-bottom: 0
|
||||
|
||||
@media screen and (min-width: $medium)
|
||||
margin-bottom: 1.75em
|
||||
|
||||
|
||||
.nav__list a
|
||||
color: $grey
|
||||
text-decoration: none
|
||||
font-size: 2em
|
||||
|
||||
&.active
|
||||
color: $black
|
||||
|
||||
&:hover
|
||||
color: $black
|
||||
|
||||
@media screen and (min-width: $medium)
|
||||
font-size: 1em
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
button,
|
||||
button[type="button"],
|
||||
button[type="reset"],
|
||||
button[type="submit"]
|
||||
-webkit-appearance: button
|
||||
|
||||
input,
|
||||
input[type=text],
|
||||
input[type=email]
|
||||
-webkit-appearance: none
|
||||
-moz-appearance: none
|
||||
appearance: none
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.paginator-container
|
||||
position: absolute
|
||||
width: 100%
|
||||
text-align: center
|
||||
|
||||
.paginator
|
||||
display: inline-block
|
||||
height: 24px
|
||||
width: 24px
|
||||
margin: 0 1.5rem
|
||||
background-image: url(/icons/chevron-left.svg)
|
||||
background-size: contain
|
||||
background-repeat: no-repeat
|
||||
|
||||
.paginator--right
|
||||
transform: rotate(180deg)
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.post-list__container
|
||||
margin: 0 auto
|
||||
max-width: 1200px
|
||||
width: 100%
|
||||
|
||||
@media screen and (min-width: $medium)
|
||||
padding-left: 50px
|
||||
|
||||
.post-list
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
.post
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.post__title
|
||||
margin-top: 0
|
||||
font-weight: 500
|
||||
|
||||
a
|
||||
color: $black
|
||||
text-decoration: none
|
||||
|
||||
.post__date
|
||||
color: $grey
|
||||
font-size: 0.8rem
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
html,
|
||||
body
|
||||
background-color: $white
|
||||
color: $black
|
||||
height: 100%
|
||||
|
||||
html
|
||||
box-sizing: border-box
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after
|
||||
padding: 0
|
||||
margin: 0
|
||||
box-sizing: inherit
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
$medium = 800px
|
||||
$large = 1400px
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.social-icons
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
.social-icons__icon
|
||||
width: 1.2rem
|
||||
height: 1.2rem
|
||||
background-size: contain
|
||||
background-repeat: no-repeat
|
||||
|
||||
.social-icons__icon--twitter
|
||||
background-image: url(/icons/twitter.svg)
|
||||
margin-right: 2rem
|
||||
|
||||
.social-icons__icon--github
|
||||
background-image: url(/icons/github.svg)
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
$baseFontSize = 16
|
||||
$fontSizeMobile = 14
|
||||
$baseLineHeight = 1.5
|
||||
$scale = 1.414
|
||||
$leading = $baseLineHeight * 1rem
|
||||
|
||||
html
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,Cantarell, "Helvetica Neue", sans-serif
|
||||
-webkit-font-smoothing: antialiased
|
||||
font-size: 95%
|
||||
|
||||
@media screen and (min-width: $medium)
|
||||
font-size: 100%
|
||||
|
||||
@media screen and (min-width: $large)
|
||||
font-size: 115%
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
margin-top: $leading
|
||||
margin-bottom: 0
|
||||
line-height: $leading
|
||||
|
||||
code
|
||||
// font-size: inherit
|
||||
|
||||
h1
|
||||
font-size: 1.5 * $scale * 1rem
|
||||
line-height: 1.5 * $leading
|
||||
margin-top: 1.5 * $leading
|
||||
|
||||
h2
|
||||
font-size: $scale * 1rem
|
||||
|
||||
h3
|
||||
font-size: $scale / 2 * 1rem
|
||||
|
||||
h4
|
||||
font-size: $scale / 3 * 1rem
|
||||
|
||||
h5
|
||||
font-size: $scale / 4 * 1rem
|
||||
|
||||
p
|
||||
margin-top: $leading
|
||||
margin-bottom: 0
|
||||
line-height: $leading
|
||||
|
||||
ul,
|
||||
ol
|
||||
padding-left: $leading
|
||||
margin-top: $leading
|
||||
margin-bottom: $leading
|
||||
|
||||
li
|
||||
line-height: $leading
|
||||
|
||||
ul,
|
||||
ol
|
||||
margin-top: 0
|
||||
margin-bottom: 0
|
||||
|
||||
blockquote
|
||||
margin-top: $leading
|
||||
margin-bottom: $leading
|
||||
line-height: $leading
|
||||
color: $darkGrey
|
||||
font-style: italic
|
||||
|
||||
pre
|
||||
line-height: 1.45
|
||||
margin-top: $leading
|
||||
padding: 16px
|
||||
word-wrap: normal
|
||||
overflow: auto
|
||||
background-color: #f6f8fa
|
||||
border-radius: 3px
|
||||
|
||||
code
|
||||
font-size: 85%
|
||||
font-family: "SFMono-Regular", Consolas, Menlo, monospace
|
||||
padding: 0.2em 0.4em
|
||||
margin: 0
|
||||
background-color: rgba(27,31,35,0.05)
|
||||
border-radius: 3px
|
||||
|
||||
pre>code
|
||||
word-break: normal
|
||||
white-space: pre
|
||||
|
||||
pre code
|
||||
display: inline
|
||||
padding: 0
|
||||
margin: 0
|
||||
overflow: visible
|
||||
line-height: inherit
|
||||
word-wrap: normal
|
||||
background-color: transparent
|
||||
border: 0
|
||||
|
||||
.lead
|
||||
font-size: $scale * 1rem
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import '_colors'
|
||||
@import '_screenSizes'
|
||||
|
||||
$navWidth = 100px
|
||||
$meatWidth = 28px
|
||||
$meatHeight = 2px
|
||||
$burgerContainerHeight = 4rem
|
||||
Loading…
Reference in New Issue