Use hugo sass prozessing

8 files changed, 340 insertions, 0 deletions

diff --git a/assets/sass/_base-variables.sass b/assets/sass/_base-variables.sass
new file mode 100644
index 0000000..fcefd6c
--- /dev/null
+++ b/assets/sass/_base-variables.sass
@@ -0,0 +1,6 @@
+$family-sans-serif: Nunito Sans, sans-serif
+$title-stack: Nunito Sans, sans-serif
+$body-size: 16px
+$code: $primary
+$code-background: $background
+$title-weight: 300
diff --git a/assets/sass/_base.sass b/assets/sass/_base.sass
new file mode 100644
index 0000000..a3c5a46
--- /dev/null
+++ b/assets/sass/_base.sass
@@ -0,0 +1,277 @@
+html
+    background-color: $background
+
+body
+    font-size: $body-size
+    font-family: $family-sans-serif
+    color: $body-color
+    background-color: $background
+
+@keyframes fadeIn
+    from
+        opacity: 0
+    to
+        opacity: 1
+
+.fade-in
+    opacity: 0
+    animation: fadeIn ease-in 1
+    animation-fill-mode: forwards
+    animation-duration: 1s
+
+.fade-in.one
+    animation-delay: 0.7s
+
+.fade-in.two
+    animation-delay: 1.4s
+
+.fade-in.three
+    animation-delay: 1.8s
+
+.section
+    background-color: $background
+
+.hero
+    background-color: $background
+
+a
+    color: $primary
+    &:hover
+        color: $link-hover
+        font-style: none
+    &:active
+        color: $primary
+
+.title
+    color: $h-color
+
+.subtitle
+    color: $h-color
+
+h1
+    color: $h-color
+    font-family: $title-stack
+
+h2
+    color: $h-color
+    font-family: $title-stack
+
+ul
+    padding: 0
+
+img
+    border-radius: 5px
+    border: 1px solid $secondary
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4)
+
+hr
+    background-color: #dbdbdb
+    height: 1px
+
+.container
+    max-width: 1000px
+
+.noborder
+    border-radius: 0px
+    border: none
+    box-shadow: none
+
+.img-responsive
+    border-radius: 5px
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4)
+
+.avatar
+    border: none
+    @include mobile
+        max-width: 50%
+
+.thumbnail
+    border: none
+
+.bold-title
+    font-size: 6rem
+    @include mobile
+        font-size: 3rem
+        text-align: center
+
+.tagline
+    font-size: 2.5rem
+    @include mobile
+        font-size: 1.5rem
+
+.top-pad
+    padding-top: 1rem
+
+.bottom-pad
+    padding-bottom: 1rem
+
+.no-padding
+    padding: 0
+
+.strong-post-title
+    font-weight: $weight-bold
+
+.post-item
+    display: block
+    list-style: none
+    list-style-position: outside
+    margin-left: 0
+
+.post-data
+    font-size: 1rem
+    line-height: 2rem
+
+.blog-share
+    .icon
+        height: 1rem
+        width: 1rem
+        vertical-align: baseline
+        margin: 0 5px
+
+.navbar
+    background-color: $background
+
+.navbar-burger
+    margin-right: auto
+
+.navbar-burger:hover
+    background-color: $background
+
+.navbar-item
+    text-transform: uppercase
+    font-size: 14px
+
+a.navbar-item:hover:hover
+    color: $secondary
+
+.expanding-menu
+    ul
+        list-style: none
+        display: none
+
+.expanding-menu:hover ul
+    display: block
+    transition: height 1s ease
+
+.social-icons
+    padding: 0 10px
+
+.icon
+    height: 2rem
+    width: 2rem
+    margin: 0 10px
+
+.footer-text
+    font-size: 0.8em
+    a
+        color: $body-color
+    .fa
+        font-size: 0.8em
+        vertical-align: baseline
+
+.tags-list
+    width: 70%
+    margin: 0 auto
+    text-align: center
+    font-family: $h-color
+    font-size: 1.5rem
+    @include mobile
+        width: 100%
+
+.tag-cloud
+    font-size: 1.5rem
+    margin-right: 1.5rem
+    @include mobile
+        font-size: 1.5rem
+        margin-right: 1rem
+
+.card
+    box-shadow: none
+
+.card-content
+    background-color: $background
+    font-size: 1.5rem
+
+.hidden
+    display: none
+
+.markdown
+    p
+        margin-bottom: 1em
+    h1
+        font-size: $size-1
+        @include mobile
+            font-size: $size-2
+    h2
+        font-size: $size-2
+        line-height: 1em
+        margin-top: 1em
+        margin-bottom: 0.5em
+        @include mobile
+            font-size: $size-3
+    h3
+        font-size: $size-3
+        @include mobile
+            font-size: $size-4
+    h4
+        font-size: $size-4
+        @include mobile
+            font-size: $size-5
+    h5
+        font-size: $size-5
+    h6
+        font-size: $size-6
+    a
+        color: $primary
+        :hover
+            color: $secondary
+            font-style: none
+        :active
+            color: $primary
+    ul
+        margin-bottom: 1.25rem
+        margin-left: 1.5em
+        list-style: none
+    li
+        list-style-type: disc
+        margin-left: 1.5em
+        list-style-position: outside
+        padding-left: 1em
+    em
+        font-style: italic
+    strong
+        font-weight: 700
+    hr
+        position: relative
+        margin: 1.75rem 0
+        border: 0
+        border-top: 1px solid $secondary
+    abbr
+        font-size: 0.8rem
+        font-weight: bold
+        color: #666666
+        text-transform: uppercase
+    abbr[title]
+        cursor: help
+        border-bottom: 1px dotted #808080
+    blockquote
+        padding: .5rem 1rem
+        margin: .8rem 0
+        color: #7a7a7a
+        border-left: .25rem solid #e5e5e5
+        blockquote p:last-child
+        margin-bottom: 0
+    table
+        margin: 2em 0 2em 0
+        width: 100%
+        border: 1px solid #e5e5e5
+        border-collapse: collapse
+    td, th
+        padding: .25rem .5rem
+        border: 1px solid #e5e5e5
+        text-align: center
+    tbody tr:nth-child(odd) td,
+    tbody tr:nth-child(odd) th
+        background-color: #f7f7f7
+    pre
+        border-radius: 3px
diff --git a/assets/sass/_dark-style.sass b/assets/sass/_dark-style.sass
new file mode 100755
index 0000000..79a8d63
--- /dev/null
+++ b/assets/sass/_dark-style.sass
@@ -0,0 +1,9 @@
+.modal-card-title
+    color: $primary
+
+.modal-card-body
+    background-color: $background
+
+.markdown
+    strong
+        color: $body-color
diff --git a/assets/sass/_dark-variables.sass b/assets/sass/_dark-variables.sass
new file mode 100644
index 0000000..743e988
--- /dev/null
+++ b/assets/sass/_dark-variables.sass
@@ -0,0 +1,6 @@
+$body-color: #78888b
+$background: #111111
+$primary: #ed6a5a
+$secondary: #f4f1bb
+$h-color: #75b8c8
+$link-hover: $secondary
diff --git a/assets/sass/_fonts.sass b/assets/sass/_fonts.sass
new file mode 100644
index 0000000..b2007cd
--- /dev/null
+++ b/assets/sass/_fonts.sass
@@ -0,0 +1,23 @@
+/* vietnamese */
+@font-face
+  font-family: 'Nunito Sans'
+  font-style: normal
+  font-weight: 400
+  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(../fonts/NunitoSans-Regular.ttf) format('woff2')
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
+
+/* latin-ext */
+@font-face
+  font-family: 'Nunito Sans'
+  font-style: normal
+  font-weight: 400
+  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(../fonts/NunitoSans-Regular.ttf) format('woff2')
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
+
+/* latin */
+@font-face
+  font-family: 'Nunito Sans'
+  font-style: normal
+  font-weight: 400
+  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(../fonts/NunitoSans-Regular.ttf) format('woff2')
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
diff --git a/assets/sass/_light-style.sass b/assets/sass/_light-style.sass
new file mode 100755
index 0000000..57c2897
--- /dev/null
+++ b/assets/sass/_light-style.sass
@@ -0,0 +1,5 @@
+.modal-background
+    background-color: rgba(256, 256, 256, 0.90)
+
+.modal-close
+    background-color: #000000
diff --git a/assets/sass/_light-variables.sass b/assets/sass/_light-variables.sass
new file mode 100644
index 0000000..c95f278
--- /dev/null
+++ b/assets/sass/_light-variables.sass
@@ -0,0 +1,6 @@
+$body-color: #4a4a4a
+$background: #ffffff
+$primary: #00b8d4
+$secondary: #dbdbdb
+$h-color: #222222
+$link-hover: #000000
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
new file mode 100644
index 0000000..8950f4c
--- /dev/null
+++ b/assets/sass/style.sass
@@ -0,0 +1,8 @@
+{{ $themeStyle := .Site.Params.themeStyle | default "light" }}
+
+@import "../vendor/bulma/bulma.sass"
+@import "fonts.sass"
+@import "base-variables.sass"
+@import "{{ $themeStyle }}-variables.sass"
+@import "base.sass"
+@import "{{ $themeStyle }}-style.sass"