diff --git a/assets/sass/_blog.scss b/assets/sass/_blog.scss deleted file mode 100644 index f39d66a..0000000 --- a/assets/sass/_blog.scss +++ /dev/null @@ -1,114 +0,0 @@ -$article-image-size: 24px; - -section.blog-recent { - .header { - display: flex; - justify-content: space-between; - - .all-articles { - display: flex; - flex-direction: column; - justify-content: center; - - a { - text-decoration: none; - - &:after { - content: "ยป"; - } - } - } - } -} - -section.blog-recent, -section.blog { - .list { - .blog-items { - list-style: none; - - .blog-item { - background-color: $background-lighter; - border-radius: 16px; - padding: 8px; - display: flex; - cursor: pointer; - user-select: none; - - transition: transform 250ms ease-in-out; - - &:not(:last-child) { - margin-bottom: 1rem; - } - - &:hover { - transform: translateX(2rem); - - @media (max-width: $xl) { - transform: translateX(1rem); - } - - @media (max-width: $lg) { - transform: translateX(0.5rem); - } - } - - .article-image { - max-width: $article-image-size; - max-height: $article-image-size; - - margin-right: 1rem; - } - - .article-text { - .article-title { - line-height: $article-image-size; - font-size: 1.2rem; - margin: 0; - } - - .article-desc, - .article-date { - display: block; - } - - .article-date { - color: darken($text-color, 15%); - } - } - } - } - } -} - -section.blog-popular { - .popular-items { - list-style: none; - padding: 0; - - li { - display: grid; - grid-template-columns: 25px 1fr; - - &:not(:first-child) { - margin-bottom: 0.25rem; - } - - &:not(:last-child) { - margin-top: 0.25rem; - } - - .arrow { - display: flex; - flex-direction: column; - justify-content: center; - width: 25px; - } - - .link { - text-decoration: none; - font-size: 1.2rem; - } - } - } -} diff --git a/assets/sass/_footer.scss b/assets/sass/_footer.scss index 90500c1..2c5c2bd 100644 --- a/assets/sass/_footer.scss +++ b/assets/sass/_footer.scss @@ -1,52 +1,39 @@ -$icon-size: 2rem; - footer { - display: flex; - justify-content: space-between; - - @media (max-width: $sm) { - flex-direction: column; - - .credits { - text-align: center; - } - } - - .credits { - p { - a { - text-decoration: none; - } - } - } - - .social-links { display: flex; - flex-direction: column; - justify-content: center; + flex-direction: row; + justify-content: space-between; - ul { - display: flex; - list-style: none; - justify-content: center; - padding: 0; - - li { - a { - text-decoration: none; - color: $text-color; - margin: 0.5rem; - - &:hover { - color: darken($text-color, 10%); - } - - i { - line-height: $icon-size; - font-size: $icon-size; - } - } - } + @media (max-width: $sm) { + display: block + } + + .credits {} + + .social-links { + ul { + padding: 0; + display: flex; + flex-direction: row; + justify-content: space-around; + + list-style: none; + + li { + a { + font-size: 2rem; + color: $text-color; + } + + @media (min-width: $sm) { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + + @media (min-width: $md) { + margin-left: 1rem; + margin-right: 1rem; + } + } + } } - } } diff --git a/assets/sass/_header.scss b/assets/sass/_header.scss index 23d5ae3..415d2ab 100644 --- a/assets/sass/_header.scss +++ b/assets/sass/_header.scss @@ -1,78 +1,106 @@ -$brand-height: 64px; - header { - display: flex; - justify-content: space-between; + position: relative; + background-color: $background-header; + padding-top: 3rem; - .brand { - display: flex; - text-decoration: none; - color: $text-color; - user-select: none; - - .brand-logo { - width: auto; - height: $brand-height; + @media (max-width: $sm) { + padding-top: 1rem; } - .brand-name { - line-height: $brand-height; - vertical-align: middle; - font-size: 28px; + .top-bar { + display: flex; + flex-direction: row; + justify-content: space-between; - margin-left: 2rem; + .brand { + $brandSize: 64px; - @media (max-width: $sm) { - font-size: 20px; - margin-left: 1rem; - } - } - } + display: flex; + flex-direction: row; - .site-nav { - flex-grow: 1; - max-width: 200px; + text-decoration: none; + color: $text-color; + user-select: none; - .nav-items { - display: flex; - justify-content: space-between; - list-style: none; - padding: 0; + .brand-logo { + height: $brandSize; + width: auto; + } - .nav-item { - text-align: center; + .brand-name { + line-height: $brandSize; + vertical-align: middle; + font-size: 28px; - a { - text-decoration: none; - font-size: 1.1rem; - color: $text-color; - - &:hover { - color: darken($text-color, 15%); - } + margin-left: 2rem; + } } - } - } - } - @media (max-width: $md) { - flex-direction: column; + .site-nav { + .nav-items { + display: flex; + flex-direction: row; - .site-nav { - flex-grow: unset; - max-width: unset; + list-style: none; - .nav-items { - justify-content: unset; - - .nav-item { - flex-basis: 100%; + .nav-item { + a { + text-decoration: none; + color: $text-color; + user-select: none; + } + } + } } - } } - } -} -body > .header { - margin-bottom: 1rem; + .hero { + max-width: 60%; + margin-top: 4rem; + margin-bottom: 4rem; + + @media (max-width: $lg) { + max-width: 75%; + margin-top: 2rem; + margin-bottom: 2rem; + } + + @media (max-width: $md) { + max-width: 100%; + margin-top: 1rem; + } + + h1 { + color: $accent-color; + font-size: 2.5rem; + + @media (max-width: $md) { + font-size: 1.5rem; + } + } + + p { + font-size: 14px; + line-height: 2; + } + } + + .wave { + overflow: hidden; + display: block; + + height: 90px; + z-index: 3; + + svg { + position: absolute; + left: -3%; + right: -3%; + bottom: 0; + width: 106%; + min-width: 600px; + + fill: $background-main; + } + } } diff --git a/assets/sass/_hero.scss b/assets/sass/_hero.scss deleted file mode 100644 index 5856bf5..0000000 --- a/assets/sass/_hero.scss +++ /dev/null @@ -1,30 +0,0 @@ -section.hero { - max-width: 60%; - margin-top: 4rem; - margin-bottom: 4rem; - - @media (max-width: $lg) { - max-width: 75%; - margin-top: 2rem; - margin-bottom: 2rem; - } - - @media (max-width: $md) { - max-width: 100%; - margin-top: 1rem; - } - - h1 { - color: $primary; - font-size: 2.5rem; - - @media (max-width: $md) { - font-size: 1.5rem; - } - } - - p { - font-size: 14px; - line-height: 2; - } -} diff --git a/assets/sass/_home.scss b/assets/sass/_home.scss deleted file mode 100644 index 19f89fc..0000000 --- a/assets/sass/_home.scss +++ /dev/null @@ -1,56 +0,0 @@ -.split-content { - display: flex; - - main { - margin-right: 4rem; - width: 75%; - } - - aside { - width: 25%; - } - - @media (max-width: $lg) { - flex-direction: column; - - main, - aside { - width: 100%; - } - } -} - -.home-header { - position: relative; - background-color: rgba($black, 0.5); - padding-bottom: 90px; - padding-top: 45px; - - @media (max-width: $md) { - padding-top: 30px; - } - - .wave { - overflow: hidden; - display: block; - position: absolute; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 90px; - transform: translateY(1px); - z-index: 3; - - svg { - position: absolute; - left: -3%; - right: -3%; - bottom: 0; - width: 106%; - min-width: 600px; - - fill: $background; - } - } -} diff --git a/assets/sass/_layout.scss b/assets/sass/_layout.scss new file mode 100644 index 0000000..61cfbe2 --- /dev/null +++ b/assets/sass/_layout.scss @@ -0,0 +1,37 @@ +html { + &, + body { + padding: 0; + margin: 0; + } + + body { + header {} + + .container { + .split-content { + display: flex; + + main { + margin-right: 4rem; + width: 75%; + } + + aside { + width: 25%; + } + + @media (max-width: $lg) { + flex-direction: column; + + main, + aside { + width: 100%; + } + } + } + + footer {} + } + } +} diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index e3d8d93..8c0888f 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -3,26 +3,12 @@ $font-family-sans-serif: "Nunito", sans-serif; $font-size-base: 0.9rem; $line-height-base: 1.6; -// Base colors -$white: #ffffff; -$black: #000000; -$blue: #3490dc; -$indigo: #6574cd; -$purple: #9561e2; -$pink: #f66d9b; -$red: #e3342f; -$orange: #f6993f; -$yellow: #ffed4a; -$green: #38c172; -$teal: #4dc0b5; -$cyan: #6cb2eb; - // Theme colors -$background: #162028; -$background-lighter: #1c2d35; -$background-darker: #0f171d; -$primary: #a1fab3; -$text-color: #ecf8ff; +$background-header: #0b1014; +$background-main: #162028; +$text-color: #ecf8ff; +$accent-color: #a1fab3; +$active-color: #a0dcff; // Breakpoints $sm: 576px; diff --git a/assets/sass/app.scss b/assets/sass/app.scss index 68d1cce..f9aff84 100644 --- a/assets/sass/app.scss +++ b/assets/sass/app.scss @@ -11,8 +11,6 @@ @import "container"; // Component specific styling +@import "layout"; @import "header"; -@import "hero"; -@import "blog"; @import "footer"; -@import "home"; diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 2db2845..4850a0c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,7 @@ \ No newline at end of file + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index ba3a38c..7d073fb 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,6 +1,6 @@ -
+
-
+
Daniel de Cloet @@ -10,19 +10,20 @@
  • Snippets
    • -
    +
    + {{ if $.Params.hero }} -
    -

    {{ safeHTML $.Params.heroMain }}

    -

    {{ safeHTML $.Params.heroSub }}

    -
    +
    +

    {{ safeHTML $.Params.heroMain }}

    +

    {{ safeHTML $.Params.heroSub }}

    +
    {{ end }}
    {{ if $.Params.hero }} -
    - -
    +
    + +
    {{ end }} - +