From 6c3c654271e7ca7e8fd769ab37b6e2340ca13df4 Mon Sep 17 00:00:00 2001 From: Kameron Kenny <1267885+kkenny@users.noreply.github.com> Date: Sat, 25 May 2024 11:44:37 -0400 Subject: [PATCH] huh --- 404.html | 16 + _sass/0-settings/_colors.scss | 35 ++ _sass/0-settings/_global.scss | 8 + _sass/1-tools/_grid.scss | 124 +++++++ _sass/1-tools/_mixins.scss | 26 ++ _sass/1-tools/_normalize.scss | 341 ++++++++++++++++++ _sass/1-tools/_reset.scss | 38 ++ _sass/1-tools/_shared.scss | 15 + _sass/1-tools/_syntax-highlighting.scss | 71 ++++ _sass/2-base/_base.scss | 213 +++++++++++ _sass/3-modules/_buttons.scss | 27 ++ _sass/3-modules/_footer.scss | 82 +++++ _sass/3-modules/_loader.scss | 54 +++ _sass/3-modules/_pagination.scss | 41 +++ _sass/3-modules/_sidebar.scss | 280 ++++++++++++++ _sass/4-layouts/_home.scss | 461 ++++++++++++++++++++++++ _sass/4-layouts/_page.scss | 71 ++++ _sass/4-layouts/_post.scss | 231 ++++++++++++ _sass/4-layouts/_tags.scss | 32 ++ _sass/5-trumps/_helpers.scss | 91 +++++ assets/css/style.scss | 7 - favicon.ico | Bin 0 -> 1150 bytes search.json | 14 + tags.html | 33 ++ 24 files changed, 2304 insertions(+), 7 deletions(-) create mode 100755 404.html create mode 100755 _sass/0-settings/_colors.scss create mode 100755 _sass/0-settings/_global.scss create mode 100755 _sass/1-tools/_grid.scss create mode 100755 _sass/1-tools/_mixins.scss create mode 100755 _sass/1-tools/_normalize.scss create mode 100755 _sass/1-tools/_reset.scss create mode 100644 _sass/1-tools/_shared.scss create mode 100755 _sass/1-tools/_syntax-highlighting.scss create mode 100755 _sass/2-base/_base.scss create mode 100755 _sass/3-modules/_buttons.scss create mode 100644 _sass/3-modules/_footer.scss create mode 100644 _sass/3-modules/_loader.scss create mode 100644 _sass/3-modules/_pagination.scss create mode 100644 _sass/3-modules/_sidebar.scss create mode 100644 _sass/4-layouts/_home.scss create mode 100644 _sass/4-layouts/_page.scss create mode 100644 _sass/4-layouts/_post.scss create mode 100644 _sass/4-layouts/_tags.scss create mode 100755 _sass/5-trumps/_helpers.scss delete mode 100644 assets/css/style.scss create mode 100644 favicon.ico create mode 100644 search.json create mode 100755 tags.html diff --git a/404.html b/404.html new file mode 100755 index 0000000..7ad424c --- /dev/null +++ b/404.html @@ -0,0 +1,16 @@ +--- +layout: page +title: Page not found +image: 04.jpg +permalink: /404.html +--- + +
+
+
+

404

+

The requested page could not be found.

+

Back to the bLog

+
+
+
diff --git a/_sass/0-settings/_colors.scss b/_sass/0-settings/_colors.scss new file mode 100755 index 0000000..0ef3912 --- /dev/null +++ b/_sass/0-settings/_colors.scss @@ -0,0 +1,35 @@ +// Main Colors +$primary-color: #1ABC9C; +$secondary-color: #C19CD8; +$highlight: #ffeea8; +$text: #C9D3E7; +$gray-blue: #707890; +$white: #ffffff; +$black: #101010; +$lighten-black: #323743; +$blue-black: #2C2F36; +$blue-darken: #232427; +$green-darken: #2C3635; +$danger: #e02f40; +$success: #34a74e; + + +// Background Colors +$background: $blue-black; + +// Body Color +$body-color: $text; + +// Headings +$heading-font-color: #404040; + +// Links +$link-color: $primary-color; +$link-color-hover: lighten($link-color, 15%); + +// Button +$button-color: $white; +$button-background-color: $primary-color; + +// Border +$border-color: #3E4250; diff --git a/_sass/0-settings/_global.scss b/_sass/0-settings/_global.scss new file mode 100755 index 0000000..3d24309 --- /dev/null +++ b/_sass/0-settings/_global.scss @@ -0,0 +1,8 @@ +// Spaces +$base-spacing-unit: 15px; + +// Border radius +$global-radius: 3px; + +// Transition +$global-transition: .35s; diff --git a/_sass/1-tools/_grid.scss b/_sass/1-tools/_grid.scss new file mode 100755 index 0000000..b446563 --- /dev/null +++ b/_sass/1-tools/_grid.scss @@ -0,0 +1,124 @@ +$columns: 12; +$container-base-width: 1200px; +$container-offset: $base-spacing-unit; + +$mobile: 576px; +$tablet: 768px; +$desktop: 992px; + +$mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns ); + +.container { + max-width: $container-base-width; + padding-left: $container-offset; + padding-right: $container-offset; + margin: 0 auto; +} + +.container-full { + max-width: 100%; + padding-left: $container-offset; + padding-right: $container-offset; + margin: 0 auto; +} + +.row { + display: flex; + flex-wrap: wrap; + flex: 0 1 auto; + flex-direction: row; + box-sizing: border-box; + margin-left: ($base-spacing-unit * -1); + margin-right: ($base-spacing-unit * -1); +} + +.col { + padding-left: $base-spacing-unit; + padding-right: $base-spacing-unit; +} + +[class^="col-"] { + flex: auto; +} + +/* ========== MOBILE FIRST ========== */ + +// MOBILE +@for $i from 0 through $columns { + .col-#{$i} { + width: percentage( $i / $columns ); + } +} + +@for $i from 0 through $columns { + .push-#{$i} { + margin-left: percentage( $i / $columns ); + } +} + +@for $i from 0 through $columns { + .pull-#{$i} { + margin-right: percentage( $i / $columns ); + } +} + + +@each $key, $val in $mq { + + // TABLET + @media(min-width: $tablet) { + + @for $i from 0 through $columns { + .col-t-#{$i} { + width: percentage( $i / $columns ); + } + } + + @for $i from 0 through $columns { + .push-t-#{$i} { + margin-left: percentage( $i / $columns ); + } + } + + @for $i from 0 through $columns { + .pull-t-#{$i} { + margin-right: percentage( $i / $columns ); + } + } + } + + + // DESKTOP + @media(min-width: $desktop) { + + @for $i from 0 through $columns { + .col-d-#{$i} { + width: percentage( $i / $columns ); + } + } + + @for $i from 0 through $columns { + .push-d-#{$i} { + margin-left: percentage( $i / $columns ); + } + } + + @for $i from 0 through $columns { + .pull-d-#{$i} { + margin-right: percentage( $i / $columns ); + } + } + } + +} + +@media(min-width: $desktop) { + .d-hide { + display: none !important; + } + + .d-show { + display: block !important; + } +} + diff --git a/_sass/1-tools/_mixins.scss b/_sass/1-tools/_mixins.scss new file mode 100755 index 0000000..a4d0525 --- /dev/null +++ b/_sass/1-tools/_mixins.scss @@ -0,0 +1,26 @@ +// Clearfix +@mixin clearfix() { + &::after, + ::before { + content: ""; + display: table; + clear: both; + } +} + +// Reset lists +@mixin list-reset() { + list-style-type: none; + margin: 0; + padding: 0; +} + +// Screen reader text +@mixin screen-reader() { + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute !important; + width: 1px; + word-wrap: normal !important; +} diff --git a/_sass/1-tools/_normalize.scss b/_sass/1-tools/_normalize.scss new file mode 100755 index 0000000..47b010e --- /dev/null +++ b/_sass/1-tools/_normalize.scss @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/_sass/1-tools/_reset.scss b/_sass/1-tools/_reset.scss new file mode 100755 index 0000000..c3b0932 --- /dev/null +++ b/_sass/1-tools/_reset.scss @@ -0,0 +1,38 @@ +/** + * A very simple reset that sits on top of Normalize.css. +*/ + +body, +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +dl, dd, ol, ul, +fieldset, legend, +figure, +hr { + margin: 0; + padding: 0; +} + + +/** + * Remove trailing margins from nested lists. + */ + +li > { + + ul, + ol { + margin-bottom: 0; + } + +} + + +/** + * Remove default table spacing. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/_sass/1-tools/_shared.scss b/_sass/1-tools/_shared.scss new file mode 100644 index 0000000..55a3dec --- /dev/null +++ b/_sass/1-tools/_shared.scss @@ -0,0 +1,15 @@ +h1, h2, h3, h4, h5, h6, +ul, ol, dl, +blockquote, p, address, +hr, +table, +fieldset, figure, +pre { + margin-bottom: $base-spacing-unit; +} + + +ul, ol, +dd { + margin-left: $base-spacing-unit; +} diff --git a/_sass/1-tools/_syntax-highlighting.scss b/_sass/1-tools/_syntax-highlighting.scss new file mode 100755 index 0000000..2d1eb87 --- /dev/null +++ b/_sass/1-tools/_syntax-highlighting.scss @@ -0,0 +1,71 @@ +/* + Syntax Highlighting +*/ + +.highlight { + background: $blue-black; + + .highlighter-rouge & { + background: #eef; + } + + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #6d1 } // Literal.String.Backtick + .sc { color: #6d1 } // Literal.String.Char + .sd { color: #6d1 } // Literal.String.Doc + .s2 { color: #6d1 } // Literal.String.Double + .se { color: #6d1 } // Literal.String.Escape + .sh { color: #6d1 } // Literal.String.Heredoc + .si { color: #6d1 } // Literal.String.Interpol + .sx { color: #6d1 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #6d1 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} diff --git a/_sass/2-base/_base.scss b/_sass/2-base/_base.scss new file mode 100755 index 0000000..b4feec4 --- /dev/null +++ b/_sass/2-base/_base.scss @@ -0,0 +1,213 @@ +// Body +$base-font-size: 16px; +$base-font-style: normal; +$base-font-variant: normal; +$base-font-weight: normal; +$base-font-family: 'Nunito', sans-serif; +$base-line-height: 28px; + +*, *::after, *::before { + box-sizing: border-box; +} + +body { + font-family: $base-font-family; + font-size: $base-font-size; + line-height: $base-line-height; + color: $body-color; + background: $background; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + input, textarea { + border: $border-color 1px solid; + outline: none; + &:focus:required:invalid { + border-color: $danger; + } + &:required:valid { + border-color: $success; + } + } +} + +::placeholder { + color: #666; +} + +*::selection { + color: $white; + background-color: $primary-color; +} + + +// Headings +$heading-font-weight: 700; +$heading-font-family: 'Nunito', -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif; + +$font-size-h1: 36px; +$font-size-h2: 28px; +$font-size-h3: 24px; +$font-size-h4: 20px; +$font-size-h5: 18px; +$font-size-h6: 16px; + +$heading-line-height: 1.2; + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: initial; +} + +h1 { + font-size: $font-size-h1; +} + +h2 { + font-size: $font-size-h2; +} + +h3 { + font-size: $font-size-h3; +} + +h4 { + font-size: $font-size-h4; +} + +h5 { + font-size: $font-size-h5; +} + +h6 { + font-size: $font-size-h6; +} + + +// Blockquote +blockquote { + padding-left: $base-spacing-unit; + border-left: 3px solid $primary-color; + font-style: normal; +} + + +// Pre +pre { + overflow: auto; + padding: 15px; + margin-bottom: 0; + font-size: 14px; + white-space: pre-wrap; + word-wrap: break-word; + word-break: break-all; +} + + +// Images +img { + max-width: 100%; + height: auto; + vertical-align: middle; + &+em { + text-align: center; + display: block; + margin-top: 10px; + font-weight: normal; + font-size: 16px; + color: $gray-blue; + } +} + + +// Links +a { + text-decoration: none; + color: $link-color; + transition: $global-transition; + + &:hover { + color: $link-color-hover; + } +} + +// Hr +hr { + display: block; + height: 2px; + padding: 0; + margin: 30px 0; + line-height: 0; + border: 0; + background-color: $border-color; +} + + +// Blockquote +blockquote { + padding: 15px 15px 15px 30px; + font-size: 18px; + font-style: normal; + border-left: 4px solid $primary-color; + p { + margin-bottom: 0; + } +} + + +// Pre +pre { + overflow: auto; + padding: 15px; + margin-bottom: 0; + font-size: 14px; + white-space: pre-wrap; + word-wrap: break-word; + word-break: break-all; +} + +// Table +.table-container { + max-width: 100%; + overflow-x: auto; +} + +table { + font-size: 12px; + color:$black; + width: 100%; + border-width: 1px; + border-color: $gray-blue; + border-collapse: collapse; +} + +table th { + padding: 8px; + font-size: 16px; + text-align: left; + border: 1px solid $gray-blue; + color: $white; + background-color: $primary-color; +} + +table tr { + background-color: lighten($primary-color, 45%); + transition: all .3s ease; + &:nth-child(even) { + background-color: $white; + } +} + +table td { + padding: 8px; + font-size: 14px; + border: 1px solid $gray-blue; +} + +table tr:hover { + background-color: $white; +} \ No newline at end of file diff --git a/_sass/3-modules/_buttons.scss b/_sass/3-modules/_buttons.scss new file mode 100755 index 0000000..01b1890 --- /dev/null +++ b/_sass/3-modules/_buttons.scss @@ -0,0 +1,27 @@ +.button { + display: inline-block; + white-space: nowrap; + vertical-align: middle; + font: inherit; + text-align: center; + padding: round($base-spacing-unit / 2) ($base-spacing-unit * 2); + border-radius: $global-radius; + cursor: pointer; + transition: $global-transition; + + &--primary { + color: $button-color; + background-color: $button-background-color; + + &:hover { + background-color: darken($primary-color, 15%); + color: $white; + transition: $global-transition; + } + } + + &--big { + display: block; + width: 100%; + } +} diff --git a/_sass/3-modules/_footer.scss b/_sass/3-modules/_footer.scss new file mode 100644 index 0000000..75605a5 --- /dev/null +++ b/_sass/3-modules/_footer.scss @@ -0,0 +1,82 @@ +// FOOTER +.footer { + padding: 50px 0; + margin-top: 30px; + background: $black; +} + +.footer-top { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 15px; + margin-bottom: 10px; + border-bottom: 1px solid $border-color; + .logo-text { + font-size: 16px; + font-weight: 700; + line-height: 16px; + text-transform: uppercase; + letter-spacing: 5px; + color: $text; + &:hover { + color: $gray-blue; + } + } + .top { + display: flex; + justify-content: center; + align-items: center; + width: 30px; + height: 30px; + border: 1px solid $blue-black; + background-color: $blue-black; + color: $text; + cursor: pointer; + transition: $global-transition; + opacity: .5; + &:hover { + opacity: 1; + } + } +} + +.footer-bottom { + display: flex; + align-items: center; + flex-wrap: wrap; + .copyright { + margin-right: 60px; + p { + margin-bottom: 0; + font-size: 13px; + color: $gray-blue; + a { + color: $gray-blue; + &:hover { + color: $primary-color; + } + } + } + } + .footer-social { + ul { + li { + display: inline-block; + margin-left: 15px; + &:first-child { + margin-left: 0; + } + a { + font-size: 13px; + font-weight: bold; + color: $gray-blue; + transition: $global-transition; + &:hover { + color: $primary-color; + } + } + } + } + } +} \ No newline at end of file diff --git a/_sass/3-modules/_loader.scss b/_sass/3-modules/_loader.scss new file mode 100644 index 0000000..1e57eaf --- /dev/null +++ b/_sass/3-modules/_loader.scss @@ -0,0 +1,54 @@ +// Loader Settings +.preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 999; + overflow: hidden; + background: $black; +} + +.loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 10px; + font-family: 'Nunito', sans-serif; + font-size: 21px; + letter-spacing: .5em; + text-transform: uppercase; + font-weight: 700; + color: #fff; + background: $black; + + span { + color: #fff; + mix-blend-mode: difference; + } + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 60px; + height: 100%; + background: #fff; + animation: animate 3s linear infinite; + } +} + +@keyframes animate { + 0% { + left: 0; + } + 50% { + left: calc(100% - 70px); + } + 100% { + left: 0; + } +} \ No newline at end of file diff --git a/_sass/3-modules/_pagination.scss b/_sass/3-modules/_pagination.scss new file mode 100644 index 0000000..a8cd0b0 --- /dev/null +++ b/_sass/3-modules/_pagination.scss @@ -0,0 +1,41 @@ +// Pagination +.pagination { + margin: 20px 0 40px; + .pagination-list { + display: flex; + align-items: center; + text-align: center; + .older-posts, .previous-posts, .newer-posts { + display: inline-block; + flex-grow: 1; + .older-link, .previous-link, .newer-link { + display: flex; + justify-content: center; + align-items: center; + padding: 20px 35px; + font-size: 14px; + line-height: 18px; + font-weight: bold; + color: $text; + background: rgba($blue-darken, .95); + transition: $global-transition; + &:hover { + background: rgba(28, 29, 31, 0.95); + } + } + } + .older-link { + i { + margin-left: 10px; + } + } + .previous-link, .newer-link { + i { + margin-right: 10px; + } + } + } + @media only screen and (min-width: 768px) { + margin: 20px 0; + } +} \ No newline at end of file diff --git a/_sass/3-modules/_sidebar.scss b/_sass/3-modules/_sidebar.scss new file mode 100644 index 0000000..25e66c0 --- /dev/null +++ b/_sass/3-modules/_sidebar.scss @@ -0,0 +1,280 @@ +// Sidebar +.sidebar { + margin-bottom: 30px; +} +.widget { + padding: 40px 15px; + margin-bottom: 30px; + background: rgba($blue-darken, .95); + box-shadow: 0 9px 18px 0 rgba(0, 0, 0, 0.25); + .widget-title { + position: relative; + padding-bottom: 15px; + margin-bottom: 20px; + font-size: 21px; + text-align: center; + &:after { + content: ""; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + display: block; + width: 50px; + height: 2px; + background: $border-color; + } + } +} + +// Recent Widget +.recent-posts { + display: flex; + flex-wrap: wrap; + align-items: center; + margin-bottom: 15px; + &:hover{ + .recent-image { + &::before { + background: rgba(0, 0, 0, .15); + transition: all .5s ease; + } + } + .recent-content { + .recent-title { + a { + color: $link-color-hover; + } + } + } + } + &:last-child { + margin-bottom: 0; + } + .recent-header { + width: 100%; + margin-bottom: 10px; + background: $black; + &.reveal-in { + .recent-image { + opacity: 1; + } + } + } + .recent-image { + position: relative; + display: block; + width: 100%; + height: 220px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-color: $black; + box-shadow: 0 9px 18px 0 rgba(0, 0, 0, 0.25); + opacity: 0; + transition: all 1s cubic-bezier(0.6, 0.3, 0, 1); + &:after { + content: ""; + display: table; + padding-top: 20%; + } + &:before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + transition: all .5s ease; + } + } + + .recent-content { + margin: 5px 0; + .recent-title { + margin-bottom: 0; + font-weight: 700; + a { + font-size: 18px; + color: $text; + } + } + .recent-date { + font-size: 12px; + color: $gray-blue; + } + } +} + +// Social Widget +.social-profiles { + text-align: center; + .social-profiles-item { + display: inline-block; + margin: 3px; + } + .social-profiles-link { + display: inline-block; + line-height: 16px; + padding: 8px 10px; + border: 1px solid $border-color; + border-radius: $global-radius; + color: $border-color; + &:hover { + border-color: $primary-color; + color: $primary-color; + } + i { + font-size: 18px; + } + } +} + +// Instagram Widget +.widget-instagram { + .instagram-box { + text-align: center; + .instagram-grid { + margin-bottom: 30px; + } + .instagram-item { + width: 33.333%; + padding: 3px; + float: left; + overflow: hidden; + a { + position: relative; + display: block; + &:after { + content: ""; + position: absolute; + top: 0; + display: block; + height: 100%; + width: 100%; + background: rgba($blue-darken, .3); + transition: $global-transition; + } + &:hover { + &:after { + background: transparent; + } + } + } + } + .instagram-prof { + font-size: 14px; + color: #3E4250; + &:hover { + text-decoration: underline; + } + } + } +} + +// Newsletter Widget +.widget-newsletter { + text-align: center; + .newsletter-subtitle { + margin-bottom: 20px; + font-size: 18px; + } + .newsletter-text { + max-width: 170px; + margin: 0 auto 30px; + font-size: 14px; + line-height: 19px; + } + .newsletter-group-top { + position: relative; + } + .email-icon { + position: absolute; + top: 50%; + left: 10px; + font-size: 22px; + transform: translateY(-50%); + color: rgba(44, 47, 54, 0.4); + } + .newsletter-email, + .newsletter-button { + width: 100%; + height: 50px; + border: none; + outline: none; + } + .newsletter-email { + padding: 15px 15px 15px 33px; + } + .newsletter-button { + margin-top: 20px; + font-size: 14px; + font-weight: 700; + cursor: pointer; + color: $white; + background: $blue-black; + transition: $global-transition; + &:hover { + background: $primary-color; + } + } +} + +// Tags Widget +.tag-list { + .tag-item { + display: inline-block; + margin: 3px; + &:last-child { + margin-right: 0; + } + .tag { + display: inline-block; + padding: 5px 15px; + font-size: 12px; + border-radius: $global-radius; + color: $text; + background: $blue-black; + &:hover { + color: $white; + background: $primary-color; + } + } + } +} + +// Media +@media only screen and (min-width: 576px) { + .widget { + padding: 40px; + } +} + +@media only screen and (min-width: 768px) { + .recent-posts { + .recent-header { + margin-bottom: 5px; + } + .recent-image { + height: 120px; + } + .recent-content { + .recent-title { + a { + font-size: 16px; + } + } + } + } +} + +@media only screen and (min-width: 992px) { + .recent-posts { + flex-wrap: nowrap; + .recent-header { + width: auto; + margin-right: 15px; + } + .recent-image { + width: 110px; + } + } +} \ No newline at end of file diff --git a/_sass/4-layouts/_home.scss b/_sass/4-layouts/_home.scss new file mode 100644 index 0000000..7d2fd0c --- /dev/null +++ b/_sass/4-layouts/_home.scss @@ -0,0 +1,461 @@ +// Header +.header { + margin-bottom: 50px; + background: $black; +} + +.header, .header-box { + height: 60px; +} + +.header-box { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + .logo-title { + .logo-text { + font-size: 16px; + font-weight: 700; + line-height: 16px; + text-transform: uppercase; + letter-spacing: 5px; + color: $text; + &:hover { + color: #fff; + } + } + } +} + +.nav-menu, +.search { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + transform: scale(.5); + z-index: -1; + background: $blue-black; + overflow-y: auto; + opacity: 0; + &.active { + transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); + transform: scale(1); + z-index: 10; + opacity: 1; + } +} + +.menu-list { + max-width: 750px; + width: 100%; + margin: 5% auto 0; + padding: 15px; + list-style: none; + overflow-y: auto; + .menu-item { + text-align: center; + } + .menu-link { + position: relative; + font-size: 30px; + font-weight: 700; + line-height: 60px; + color: $text; + &:before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 5px; + pointer-events: none; + background: #3DDCA1; + transform: scale3d(0, 1, 1); + transform-origin: 100% 50%; + transition: transform 0.35s cubic-bezier(0.8, 0, 0.2, 1); + } + &:hover { + &:before { + transform: scale3d(1, 1, 1); + transform-origin: 0 50%; + } + } + } +} + +.search-close-button { + margin: 0 auto 50px; +} + +.menu-close { + margin: 20% auto 0; +} + +.menu-close, +.search-close-button { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + font-size: 40px; + border-radius: 50%; + border: 2px solid $gray-blue; + color: $gray-blue; + transition: all $global-transition; + cursor: pointer; + &:hover { + border-color: $text; + color: $text; + } +} + +.nav-menu .menu-link, +.nav-buttons i.ion { + transition: color $global-transition; + &:hover { + color: #fff; + } +} + +.nav-buttons { + i.ion { + margin-left: 10px; + font-size: 20px; + vertical-align: middle; + color: $text; + cursor: pointer; + &:first-child { + margin-left: 0; + } + } +} + +.search-box { + max-width: 750px; + width: 100%; + margin: 10% auto 0; + padding: 15px; + text-align: center; + .search-text { + width: 100%; + height: 60px; + margin-bottom: 30px; + text-align: center; + font-size: 18px; + font-weight: 700; + letter-spacing: 2px; + text-transform: uppercase; + color: #c1c1c7; + background: #4f505d; + &::placeholder { + color: #c1c1c7; + } + } +} + +.search-results-list { + margin: 0; + .search-item { + margin-bottom: 15px; + list-style: decimal inside; + text-align: left; + border-bottom: 2px solid $lighten-black; + white-space: nowrap; + .search-link { + display: inline-block; + width: 100%; + padding: 15px; + font-size: 21px; + color: $white; + white-space: normal; + &:hover { + color: $gray-blue; + } + } + } + .search-no-item { + font-size: 18px; + color: $danger; + list-style: none; + } +} + +// Articles +.article-first { + margin-bottom: 30px; + background: $black; + .article-image-first { + position: relative; + display: flex; + align-items: center; + min-height: 450px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-color: $black; + box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .25); + &:before { + content: ""; + display: table; + padding-top: 50%; + } + } + .article-content-first { + padding: 20px; + color: $text; + .article-tag { + .tag { + font-size: 12px; + } + } + .article-date { + .date { + font-size: 12px; + color: rgba($text, .8); + } + } + .article-title { + margin-bottom: 20px; + font-size: 30px; + line-height: 30px; + font-weight: normal; + a { + color: $text; + transition: $global-transition; + } + } + .article-excerpt { + max-width: 450px; + margin-bottom: 30px; + font-size: 14px; + line-height: 23px; + } + .button { + font-size: 14px; + font-weight: 700; + border: 1px solid rgba(201, 211, 231, 50); + color: $text; + transition: $global-transition; + &:hover { + border: 1px solid $primary-color; + background: $primary-color; + color: $white; + } + } + } +} + +.article { + display: flex; + margin-bottom: 25px; + &:hover { + .article-image { + .image-overlay-text { + opacity: 1; + } + } + .article-image { + .image-overlay { + opacity: .5; + width: 100%; + } + } + } + .article-box { + padding-bottom: 20px; + border-bottom: 2px solid $border-color; + } + .article-head { + background: $black; + } + .article-image { + position: relative; + display: block; + margin-bottom: 20px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-color: $black; + box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .25); + &:before { + content: ""; + display: table; + padding-top: 75%; + } + .image-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 0; + height: 100%; + background-color: rgba(0,0,0,0.8); + opacity: 0; + transition: all 0.4s ease; + } + .image-overlay-text { + position: absolute; + top: 50%; + left: 50%; + font-size: 110px; + text-align: center; + letter-spacing: 2px; + color: $text; + transform: translate(-50%,-50%); + transition: all 0.4s ease 0.3s; + opacity: 0; + } + } + .article-content { + .article-info { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + margin-bottom: 5px; + .article-date { + font-size: 12px; + color: rgba($text, .8); + } + .article-tag { + .tag { + display: inline-block; + padding: 2px 5px; + margin-right: 5px; + font-size: 12px; + line-height: 18px; + font-weight: bold; + border: 1px solid $primary-color; + border-radius: $global-radius; + text-transform: capitalize; + color: $primary-color; + transition: $global-transition; + &:last-child { + margin-right: 0; + } + &:hover { + background: $primary-color; + color: $white; + } + } + } + } + .article-title { + margin-bottom: 5px; + a { + font-size: 24px; + color: $text; + } + } + .article-excerpt { + margin-bottom: 0; + font-size: 15px; + line-height: 25px; + color: $gray-blue; + } + } +} + +.article-box { + position: relative; + overflow: hidden; +} + +.article-first .article-image-first, .article-box .article-image { + position: relative; + opacity: 0; + transition: all 1s cubic-bezier(0.6, 0.3, 0, 1); +} + +.article-first.reveal-in .article-image-first, .article-box.reveal-in .article-image { + opacity: 1; +} + + + +// Media +@media only screen and (min-width: 576px) { + .article-first { + .article-content-first { + .article-title { + font-size: 45px; + line-height: 45px; + } + .article-excerpt { + margin-bottom: 50px; + } + } + } + + .menu-list { + .menu-link { + font-size: 50px; + line-height: 80px; + &:before { + height: 8px; + } + } + } + + .search-box { + .search-text { + height: 80px; + margin-bottom: 30px; + font-size: 24px; + } + } +} + +@media only screen and (min-width: 768px) { + .article-first { + .article-content-first { + padding: 60px 40px 0; + } + } +} + +@media only screen and (min-width: 992px) { + .nav-menu { + position: relative; + display: block; + transform: none; + opacity: 1; + z-index: 10; + background: transparent; + .menu-list { + padding: 0; + margin: 0; + .menu-item { + display: inline-block; + margin: 0 15px 0 0; + &:last-child { + margin-right: 0; + } + } + .menu-link { + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + line-height: 19px; + &:before { + content: none; + } + } + } + .menu-close { + display: none; + } + } + .nav-menu .menu-link, + .nav-buttons i.ion { + transition: color $global-transition; + &:hover { + color: #fff; + } + } +} diff --git a/_sass/4-layouts/_page.scss b/_sass/4-layouts/_page.scss new file mode 100644 index 0000000..6e3bb7d --- /dev/null +++ b/_sass/4-layouts/_page.scss @@ -0,0 +1,71 @@ +// Page +.page { + margin-bottom: 20px; +} + +.page-image-box { + background: $black; + &.reveal-in { + .page-image { + opacity: 1; + } + } +} + +.page-image { + min-height: 230px; + margin-bottom: 30px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-color: $black; + box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25); + opacity: 0; + transition: all 1s cubic-bezier(0.6, 0.3, 0, 1); + &:after { + content: ""; + display: table; + width: 100%; + padding-top: 50%; + } +} + +.page-content { + padding: 40px 15px; + box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25); + background: rgba($blue-darken, .95); +} + +.page-head { + padding-bottom: 30px; + .page-title { + font-size: 28px; + text-align: center; + font-weight: normal; + line-height: 28px; + margin-bottom: 0; + } +} + +.page-head, .page-body { + margin-bottom: 20px; + border-bottom: 1px solid $border-color; +} + +.page-body { + padding-bottom: 20px; +} + +@media only screen and (min-width: 576px) { + .page-content { + padding: 40px; + } + + .page-head { + .page-title { + font-size: 43px; + line-height: 43px; + margin-bottom: 10px; + } + } +} \ No newline at end of file diff --git a/_sass/4-layouts/_post.scss b/_sass/4-layouts/_post.scss new file mode 100644 index 0000000..ea3acb3 --- /dev/null +++ b/_sass/4-layouts/_post.scss @@ -0,0 +1,231 @@ +// Post +.post { + margin-bottom: 20px; +} + +.post-image-box { + background: $black; + &.reveal-in { + .post-image { + opacity: 1; + } + } +} + +.post-image { + min-height: 430px; + margin-bottom: 30px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-color: $black; + box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25); + position: relative; + opacity: 0; + transition: all 1s cubic-bezier(0.6, 0.3, 0, 1); + &:after { + content: ""; + display: table; + width: 100%; + padding-top: 50%; + } +} + +.post-head, .post-content { + background: rgba($blue-darken, .95); +} + +.post-content { + padding: 40px 15px; + box-shadow: 0 9px 18px 0 rgba(0,0,0,0.25); +} + +.post-head, .post-body { + margin-bottom: 20px; + border-bottom: 1px solid $border-color; +} + +.post-head { + padding-bottom: 30px; + .post-tag { + margin-bottom: 20px; + text-align: center; + .tag { + display: inline-block; + padding: 5px 15px; + margin-right: 5px; + font-size: 12px; + line-height: 18px; + font-weight: bold; + border: 1px solid $primary-color; + text-transform: capitalize; + color: $primary-color; + transition: $global-transition; + &:last-child { + margin-right: 0; + } + &:hover { + background: $primary-color; + color: $white; + } + } + } + .post-title { + font-size: 28px; + text-align: center; + font-weight: normal; + line-height: 28px; + margin-bottom: 5px; + } + .post-date { + span { + font-size: 12px; + } + } +} + +.post-info, .post-info-author { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.post-info { + .post-info-author { + .info-author-avatar { + display: inline-block; + width: 32px; + height: 32px; + margin-right: 10px; + border-radius: 50%; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + .info-author-name, span { + font-size: 12px; + text-transform: uppercase; + } + span { + margin-right: 10px; + } + .info-author-name { + position: relative; + padding-right: 20px; + margin-right: 15px; + color: $text; + &:after { + content: ""; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + display: block; + width: 2px; + height: 12px; + background: $border-color; + } + } + } +} + +.post-body { + padding-bottom: 20px; +} + +.post-share { + padding: 10px 0; + .share-item { + display: inline-block; + padding-right: 15px; + a { + color: $border-color; + &:hover { + color: $primary-color; + } + i.ion { + font-size: 20px; + } + } + } +} + +// POST NAVIGATION +.post-navigation { + display: flex; + flex-wrap: wrap; + margin-top: 30px; +} + +.prev, .next { + flex-basis: 100%; + padding: 15px; + background: #26272B; + &:hover { + background: darken(#26272B, 3%); + .post-nav-title { + color: $primary-color; + transition: $global-transition; + } + } + .post-nav-arrow { + font-size: 14px; + color: $text; + } + .post-nav-title { + font-size: 18px; + color: $text; + transition: $global-transition; + } +} + +.prev { + margin-bottom: 10px; +} + +.prev, .next { + text-align: center; +} + +// COMMENTS SECTION +.comments { + padding: 0 15px; + background: $blue-darken; +} + +// MEDIA +@media only screen and (min-width: 576px) { + .post-content { + padding: 40px; + } + .post-head { + .post-title { + font-size: 43px; + line-height: 43px; + margin-bottom: 10px; + } + } + .post-navigation { + display: flex; + justify-content: space-between; + flex-wrap: nowrap; + } + .prev, .next { + flex-basis: 48%; + padding: 20px; + .post-nav-title { + font-size: 21px; + } + } + .prev { + text-align: left; + margin-bottom: 0; + } + .next { + text-align: right; + } + .comments { + padding: 0 40px; + } +} \ No newline at end of file diff --git a/_sass/4-layouts/_tags.scss b/_sass/4-layouts/_tags.scss new file mode 100644 index 0000000..a1d019d --- /dev/null +++ b/_sass/4-layouts/_tags.scss @@ -0,0 +1,32 @@ +// Tags +.tags-list { + display: flex; + flex-wrap: wrap; + margin: 40px 0; + padding: 0; + list-style: none; + .tags-item { + margin: 5px; + } + .tags-link { + display: inline-block; + padding: 7px 12px; + font-size: 14px; + border-radius: 4px; + color: $text; + font-weight: 700; + background: $blue-black; + &:hover { + color: $white; + background: $primary-color; + } + } +} + +.tags-title { + margin-bottom: 5px; +} + +.tags-group { + margin-bottom: 30px; +} \ No newline at end of file diff --git a/_sass/5-trumps/_helpers.scss b/_sass/5-trumps/_helpers.scss new file mode 100755 index 0000000..c698a64 --- /dev/null +++ b/_sass/5-trumps/_helpers.scss @@ -0,0 +1,91 @@ +// Text Alignment +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +.text-justify { + text-align: justify; +} + + +// Display +.block { + display: block; +} + +.inline-block { + display: inline-block; +} + +.inline { + display: inline; +} + + +// Vertical Center +.vertical-center { + display: flex; + align-items: center; + justify-content: center; +} + + +// Display State +.show { + display: block !important; +} + +.hide { + display: none !important; +} + +.invisible { + visibility: hidden; +} + + +// Floats +.float-left { + float: left; +} + +.float-right { + float: right; +} + + +// Padding +.no-padding { + padding: 0; +} + + +// Margins +.no-margin { + margin: 0; +} + + +// Clearfix +.clearfix { + @include clearfix(); +} + +// Lists Reset +.list-reset { + @include list-reset(); +} + + +// Screen Reader +.screen-reader-text { + @include screen-reader(); +} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss deleted file mode 100644 index 21ab144..0000000 --- a/assets/css/style.scss +++ /dev/null @@ -1,7 +0,0 @@ ---- ---- - -@import "{{ site.theme }}"; - - - diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..92d95605d8538366eee0719547312bd73393cafd GIT binary patch literal 1150 zcmZQzU<5(|0R|wcz>vYhz#zuJz@P!dKp~(AL>x#lFaYJy0XsYU|4}>|2BT?UWTpZ1 I@_ + + +
+ + {% for item in (0..site.tags.size) %}{% unless forloop.last %} + {% capture this_word %}{{ tag_words[item] | strip_newlines }}{% endcapture %} +

{{ this_word }}

+
+ {% for post in site.tags[this_word] %}{% if post.title != null %} +
+
+ {{ post.title }} | {{ post.date | date_to_string }} +
+
+ {% endif %}{% endfor %} +
+ {% endunless %}{% endfor %} + \ No newline at end of file