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