huh
This commit is contained in:
Kameron Kenny
parent
2c50cbacdf
commit
6c3c654271
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: page
|
||||
title: Page not found
|
||||
image: 04.jpg
|
||||
permalink: /404.html
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col col-12" style="text-align: center">
|
||||
<h2>404</h2>
|
||||
<p>The requested page could not be found.</p>
|
||||
<p><a href="{{site.baseurl}}/">Back to the bLog</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Spaces
|
||||
$base-spacing-unit: 15px;
|
||||
|
||||
// Border radius
|
||||
$global-radius: 3px;
|
||||
|
||||
// Transition
|
||||
$global-transition: .35s;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
---
|
||||
|
||||
@import "{{ site.theme }}";
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
layout: null
|
||||
---
|
||||
[
|
||||
{% for post in site.posts %}
|
||||
{
|
||||
"title" : "{{ post.title | escape }}",
|
||||
"category" : "{{ post.category }}",
|
||||
"tags" : "{{ post.tags | array_to_sentence_string }}",
|
||||
"url" : "{{ site.baseurl }}{{ post.url }}",
|
||||
"date" : "{{ post.date }}"
|
||||
} {% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
]
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
layout: page
|
||||
title: Tags in Blog
|
||||
image: 10.jpg
|
||||
permalink: /tags/
|
||||
---
|
||||
{% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
|
||||
{% assign tag_words = site_tags | split:',' | sort %}
|
||||
|
||||
<div class="tags">
|
||||
<ul class="tags-list">
|
||||
{% for item in (0..site.tags.size) %}{% unless forloop.last %}
|
||||
{% capture this_word %}{{ tag_words[item] | strip_newlines }}{% endcapture %}
|
||||
<li class="tags-item"><a href="#{{ this_word | cgi_escape }}" class="tags-link">{{ this_word }} <span>{{ site.tags[this_word].size }}</span></a></li>
|
||||
{% endunless %}{% endfor %}
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
{% for item in (0..site.tags.size) %}{% unless forloop.last %}
|
||||
{% capture this_word %}{{ tag_words[item] | strip_newlines }}{% endcapture %}
|
||||
<h2 class="tags-title" id="{{ this_word | cgi_escape }}">{{ this_word }}</h2>
|
||||
<div class="tags-group">
|
||||
{% for post in site.tags[this_word] %}{% if post.title != null %}
|
||||
<div class="tag-item">
|
||||
<div class="tag-text">
|
||||
<a class="tag-link" href="{{ root_url }}{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a> | <small><span class="tag-date">{{ post.date | date_to_string }}</span></small>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}{% endfor %}
|
||||
</div>
|
||||
{% endunless %}{% endfor %}
|
||||
</div> <!-- /.tags -->
|
||||
Loading…
Reference in New Issue