From 2e0af76e6364be1cc45f419f6ec0c557f45c2337 Mon Sep 17 00:00:00 2001
From: kentnek <itaqmail@gmail.com>
Date: Sun, 21 Jun 2020 05:30:31 +0800
Subject: [PATCH] fix heading styles (#28) and remove stylus files

---
 assets/scss/partials/_typography.scss         |  17 +-
 src/js/index.js                               |  19 --
 src/styles/_main.styl                         |  18 --
 src/styles/pages/about.styl                   |  54 -----
 src/styles/pages/post.styl                    | 201 ------------------
 src/styles/pages/posts.styl                   |  47 ----
 src/styles/pages/tags.styl                    |  24 ---
 src/styles/partials/_burger.styl              |  47 ----
 src/styles/partials/_colors.styl              |   5 -
 .../partials/_github-syntax-highlighting.styl |  89 --------
 src/styles/partials/_nav.styl                 |  69 ------
 src/styles/partials/_normalize.styl           |  12 --
 src/styles/partials/_pagination.styl          |  16 --
 src/styles/partials/_post-list.styl           |  27 ---
 src/styles/partials/_reset.styl               |  15 --
 src/styles/partials/_screenSizes.styl         |   2 -
 src/styles/partials/_social-icons.styl        |  16 --
 src/styles/partials/_typography.styl          | 106 ---------
 src/styles/partials/_vars.styl                |   7 -
 19 files changed, 4 insertions(+), 787 deletions(-)
 delete mode 100644 src/js/index.js
 delete mode 100644 src/styles/_main.styl
 delete mode 100644 src/styles/pages/about.styl
 delete mode 100644 src/styles/pages/post.styl
 delete mode 100644 src/styles/pages/posts.styl
 delete mode 100644 src/styles/pages/tags.styl
 delete mode 100644 src/styles/partials/_burger.styl
 delete mode 100644 src/styles/partials/_colors.styl
 delete mode 100644 src/styles/partials/_github-syntax-highlighting.styl
 delete mode 100644 src/styles/partials/_nav.styl
 delete mode 100644 src/styles/partials/_normalize.styl
 delete mode 100644 src/styles/partials/_pagination.styl
 delete mode 100644 src/styles/partials/_post-list.styl
 delete mode 100644 src/styles/partials/_reset.styl
 delete mode 100644 src/styles/partials/_screenSizes.styl
 delete mode 100644 src/styles/partials/_social-icons.styl
 delete mode 100644 src/styles/partials/_typography.styl
 delete mode 100644 src/styles/partials/_vars.styl

diff --git a/assets/scss/partials/_typography.scss b/assets/scss/partials/_typography.scss
index 7faa97019..0619c000e 100644
--- a/assets/scss/partials/_typography.scss
+++ b/assets/scss/partials/_typography.scss
@@ -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 {
diff --git a/src/js/index.js b/src/js/index.js
deleted file mode 100644
index 66edd2e70..000000000
--- a/src/js/index.js
+++ /dev/null
@@ -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();
diff --git a/src/styles/_main.styl b/src/styles/_main.styl
deleted file mode 100644
index 0e9eb8c80..000000000
--- a/src/styles/_main.styl
+++ /dev/null
@@ -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
diff --git a/src/styles/pages/about.styl b/src/styles/pages/about.styl
deleted file mode 100644
index 7b01ae772..000000000
--- a/src/styles/pages/about.styl
+++ /dev/null
@@ -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
diff --git a/src/styles/pages/post.styl b/src/styles/pages/post.styl
deleted file mode 100644
index b9c7b850a..000000000
--- a/src/styles/pages/post.styl
+++ /dev/null
@@ -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
diff --git a/src/styles/pages/posts.styl b/src/styles/pages/posts.styl
deleted file mode 100644
index c0a04d49b..000000000
--- a/src/styles/pages/posts.styl
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/styles/pages/tags.styl b/src/styles/pages/tags.styl
deleted file mode 100644
index 7282dda5f..000000000
--- a/src/styles/pages/tags.styl
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/styles/partials/_burger.styl b/src/styles/partials/_burger.styl
deleted file mode 100644
index 092920cfa..000000000
--- a/src/styles/partials/_burger.styl
+++ /dev/null
@@ -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)
\ No newline at end of file
diff --git a/src/styles/partials/_colors.styl b/src/styles/partials/_colors.styl
deleted file mode 100644
index 9a48ee527..000000000
--- a/src/styles/partials/_colors.styl
+++ /dev/null
@@ -1,5 +0,0 @@
-$black      = #111
-$grey       = #9B9B9B
-$darkGrey   = #717171
-$white      = #fff
-$primary    = #9013FE
\ No newline at end of file
diff --git a/src/styles/partials/_github-syntax-highlighting.styl b/src/styles/partials/_github-syntax-highlighting.styl
deleted file mode 100644
index 25356743e..000000000
--- a/src/styles/partials/_github-syntax-highlighting.styl
+++ /dev/null
@@ -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
diff --git a/src/styles/partials/_nav.styl b/src/styles/partials/_nav.styl
deleted file mode 100644
index 4fab14423..000000000
--- a/src/styles/partials/_nav.styl
+++ /dev/null
@@ -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
diff --git a/src/styles/partials/_normalize.styl b/src/styles/partials/_normalize.styl
deleted file mode 100644
index b2a99e3ba..000000000
--- a/src/styles/partials/_normalize.styl
+++ /dev/null
@@ -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
diff --git a/src/styles/partials/_pagination.styl b/src/styles/partials/_pagination.styl
deleted file mode 100644
index 2fa72ab85..000000000
--- a/src/styles/partials/_pagination.styl
+++ /dev/null
@@ -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)
\ No newline at end of file
diff --git a/src/styles/partials/_post-list.styl b/src/styles/partials/_post-list.styl
deleted file mode 100644
index adb0fd78d..000000000
--- a/src/styles/partials/_post-list.styl
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/src/styles/partials/_reset.styl b/src/styles/partials/_reset.styl
deleted file mode 100644
index 98aa1ba51..000000000
--- a/src/styles/partials/_reset.styl
+++ /dev/null
@@ -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 
\ No newline at end of file
diff --git a/src/styles/partials/_screenSizes.styl b/src/styles/partials/_screenSizes.styl
deleted file mode 100644
index 1ab850b86..000000000
--- a/src/styles/partials/_screenSizes.styl
+++ /dev/null
@@ -1,2 +0,0 @@
-$medium = 800px
-$large = 1400px
\ No newline at end of file
diff --git a/src/styles/partials/_social-icons.styl b/src/styles/partials/_social-icons.styl
deleted file mode 100644
index cf1938af2..000000000
--- a/src/styles/partials/_social-icons.styl
+++ /dev/null
@@ -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)
diff --git a/src/styles/partials/_typography.styl b/src/styles/partials/_typography.styl
deleted file mode 100644
index b0fb82f2e..000000000
--- a/src/styles/partials/_typography.styl
+++ /dev/null
@@ -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
diff --git a/src/styles/partials/_vars.styl b/src/styles/partials/_vars.styl
deleted file mode 100644
index 0949f4b55..000000000
--- a/src/styles/partials/_vars.styl
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '_colors'
-@import '_screenSizes'
-
-$navWidth = 100px
-$meatWidth = 28px
-$meatHeight = 2px
-$burgerContainerHeight = 4rem
\ No newline at end of file