mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 01:46:51 +01:00
first batch of stylus reorg
This commit is contained in:
parent
3d1a7e772d
commit
aadeb2e5c3
35
_src/assets/styl/alerts.styl
Normal file
35
_src/assets/styl/alerts.styl
Normal file
@ -0,0 +1,35 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Mixins
|
||||
//
|
||||
|
||||
.alert
|
||||
padding: $padding-base-horizontal
|
||||
margin-bottom: $line-height-computed
|
||||
border-radius: $border-radius-base
|
||||
font-size: $font-size-small
|
||||
border: 1px solid transparent
|
||||
|
||||
// alignment and spacing of inner content
|
||||
> p,
|
||||
> ul
|
||||
margin-bottom: 0
|
||||
> p + p
|
||||
margin-top: 5px
|
||||
|
||||
.alert-success
|
||||
color: #468847
|
||||
background: #dff0d8
|
||||
border-color: #b5c6a8
|
||||
|
||||
.alert-danger,
|
||||
.alert-error
|
||||
color: #b94a48
|
||||
background: #f2dede
|
||||
border-color: #dcc5ca
|
||||
|
||||
.alert-info
|
||||
color: #3a87ad
|
||||
background: #d9edf7
|
||||
border-color: #a6ced8
|
||||
142
_src/assets/styl/buttons.styl
Normal file
142
_src/assets/styl/buttons.styl
Normal file
@ -0,0 +1,142 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Buttons
|
||||
//
|
||||
|
||||
.btn
|
||||
@extend .textcenter
|
||||
display: inline-block
|
||||
margin-bottom: 0
|
||||
font-weight: normal
|
||||
vertical-align: middle
|
||||
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-base, $line-height-base, $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 rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.7)
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: rgba(255,255,255,.5)
|
||||
|
||||
&:active
|
||||
background-color: transparent
|
||||
border-top-color: rgba(94,131,162,.5)
|
||||
box-shadow: 0 1px 0 #fff
|
||||
transition: none
|
||||
|
||||
&: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
|
||||
|
||||
.btn span
|
||||
font-size: .9em
|
||||
color: rgba(19, 56, 50, .6)
|
||||
margin-left: .3em
|
||||
|
||||
// Primary Button
|
||||
.btn-primary
|
||||
color: darken($link-color, 30%)
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.3)
|
||||
background: lighten(@link-color, 15%)
|
||||
border-color: rgba(40,101,93,.4)
|
||||
border-bottom-color: rgba(40,101,93,.5)
|
||||
box-shadow: 0 1px 3px rgba(151,156,159,.1), inset 0 1px 0 rgba(255,255,255,.4)
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
color: darken($link-color, 30%)
|
||||
background-color: lighten($link-color, 25%)
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.3)
|
||||
|
||||
&:active
|
||||
color: darken(@link-color, 30%)
|
||||
background-color: lighten(@link-color, 15%)
|
||||
border-top-color: rgba(40,101,93,.9)
|
||||
box-shadow: 0 1px 0 #fff, inset 0 0 18px rgba(43,100,92,.3)
|
||||
|
||||
|
||||
.more-link
|
||||
@extend .btn
|
||||
background: none
|
||||
border: none
|
||||
box-shadow: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
i:before
|
||||
top: .15em
|
||||
position: relative
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
background: none
|
||||
|
||||
&:active
|
||||
background: $link-color
|
||||
box-shadow: none
|
||||
|
||||
|
||||
.btn-block
|
||||
display: block
|
||||
|
||||
|
||||
//
|
||||
// Tweet button
|
||||
//
|
||||
.btn.twitter-share
|
||||
display: inline-block
|
||||
padding: 1px 3px 0 3px
|
||||
height: 21px
|
||||
border: 1px solid #ccc
|
||||
border-radius: 3px
|
||||
font: bold 11px/17px Helvetica, Arial, sans-serif
|
||||
text-align: left
|
||||
color: #333
|
||||
text-transform: none
|
||||
text-decoration: none
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
|
||||
background-color: #f8f8f8
|
||||
background-image: linear-gradient(top, #fff, #dedede);
|
||||
vertical-align: top
|
||||
box-shadow: none
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active
|
||||
border-color: #bbb
|
||||
background-color: #d9d9d9
|
||||
background-image: linear-gradient(top, #f8f8f8, #d9d9d9);
|
||||
|
||||
&:active
|
||||
top: 0
|
||||
background-color: #efefef
|
||||
box-shadow: inset 0 3px 5px rgba(0,0,0,0.1)
|
||||
|
||||
// icon
|
||||
&:before
|
||||
font-size: 15px
|
||||
margin-right: 2px
|
||||
top: 1px
|
||||
color: #0089cb
|
||||
65
_src/assets/styl/code.styl
Normal file
65
_src/assets/styl/code.styl
Normal file
@ -0,0 +1,65 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Code
|
||||
//
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp
|
||||
font-family: $font-family-monospace
|
||||
|
||||
code,
|
||||
kbd
|
||||
padding: 2px 4px;
|
||||
font-size: 90%
|
||||
|
||||
code
|
||||
color: $code-color;
|
||||
background-color: $code-bg;
|
||||
border-radius: $border-radius-base
|
||||
white-space: nowrap
|
||||
|
||||
kbd
|
||||
color: $kbd-color
|
||||
background-color: $kbd-bg
|
||||
border-radius: $border-radius-small
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
|
||||
|
||||
pre
|
||||
display: block;
|
||||
padding: (($line-height-computed - 1) / 2)
|
||||
margin: 0 0 $line-height-computed
|
||||
font-size: ($font-size-base - 1)
|
||||
line-height: $line-height-base
|
||||
word-break: break-all
|
||||
word-wrap: break-word
|
||||
color: $code-color
|
||||
background-color: $code-bg
|
||||
border-radius: $border-radius-base
|
||||
|
||||
// make 'em scrollable
|
||||
overflow: scroll
|
||||
-webkit-overflow-scrolling: touch
|
||||
max-height: 300px
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code
|
||||
padding: 0
|
||||
font-size: inherit
|
||||
color: inherit
|
||||
white-space: pre-wrap
|
||||
background-color: transparent
|
||||
border-radius: 0
|
||||
|
||||
code.bash
|
||||
padding-left: 1.5em
|
||||
display: block
|
||||
|
||||
&:before
|
||||
content: "$"
|
||||
color: $text-color-dimmed
|
||||
display: inline-block
|
||||
margin-left: -1.5em
|
||||
margin-right: .8em
|
||||
183
_src/assets/styl/content.styl
Normal file
183
_src/assets/styl/content.styl
Normal file
@ -0,0 +1,183 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Generic Content
|
||||
//
|
||||
|
||||
|
||||
// Page Title
|
||||
/////////////////////////////////////
|
||||
|
||||
.page-title
|
||||
@extend .h2, .heading-band
|
||||
color: $brand-grey-light
|
||||
margin-top: $line-height-computed/2
|
||||
margin-bottom: $line-height-computed/2
|
||||
|
||||
// icons
|
||||
&:before
|
||||
font-size: 32px
|
||||
color: fade($text-color-dimmed, 70%)
|
||||
margin-right: .5em
|
||||
|
||||
@media $breakpoint2
|
||||
margin-left: -108%
|
||||
.page-photos &
|
||||
margin-bottom: $line-height-computed*4
|
||||
|
||||
.hentry
|
||||
@extend .divider-bottom
|
||||
padding: $line-height-computed*2 0
|
||||
|
||||
@media $breakpoint2
|
||||
padding: $line-height-computed*4 0
|
||||
|
||||
&:first-child
|
||||
padding-top: $line-height-computed
|
||||
|
||||
.page-single &
|
||||
padding-bottom: $line-height-computed*2
|
||||
border: none
|
||||
&:before
|
||||
@extend .hide
|
||||
|
||||
// Post Title
|
||||
/////////////////////////////////////
|
||||
|
||||
.entry-title {
|
||||
@extend .h1, .textcenter
|
||||
color: $headings-color
|
||||
margin-top: 0
|
||||
margin-bottom: $line-height-computed
|
||||
|
||||
.format-link &
|
||||
@extend .h3
|
||||
|
||||
// Post Content
|
||||
/////////////////////////////////////
|
||||
|
||||
.entry-content
|
||||
h1,
|
||||
h2
|
||||
@extend .heading-band
|
||||
|
||||
h1
|
||||
font-size: ceil($font-size-base * 2.5)
|
||||
|
||||
p:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
|
||||
// post category icons
|
||||
/////////////////////////////////////
|
||||
|
||||
.posttype
|
||||
@extend .aligncenter
|
||||
width: 20px
|
||||
margin-bottom: $line-height-computed/2
|
||||
margin-top: -$line-height-computed
|
||||
|
||||
// icon adjustments
|
||||
&:before
|
||||
font-size: 20px
|
||||
color: $text-color-light
|
||||
|
||||
&:hover:before
|
||||
color: $link-color
|
||||
|
||||
|
||||
// Post meta
|
||||
/////////////////////////////////////
|
||||
|
||||
.entry-meta
|
||||
@extend .clearfix
|
||||
margin-top: $line-height-computed*2
|
||||
font-size: $font-size-small
|
||||
|
||||
.byline,
|
||||
time,
|
||||
.categories
|
||||
@extend .textcenter
|
||||
|
||||
.byline,
|
||||
time
|
||||
font-style: italic
|
||||
|
||||
.byline
|
||||
margin-bottom: 0
|
||||
color: $text-color-light
|
||||
|
||||
.by
|
||||
display: block
|
||||
|
||||
time
|
||||
display: block
|
||||
color: $text-color-dimmed
|
||||
|
||||
.categories
|
||||
margin-top: $line-height-computed
|
||||
|
||||
.avatar
|
||||
width: 80px
|
||||
height: 80px
|
||||
border-radius: 80px
|
||||
border: 2px solid #fff
|
||||
|
||||
|
||||
// Goodies download
|
||||
/////////////////////////////////////
|
||||
|
||||
.goodie-actions
|
||||
@extend .clearfix, .aligncenter
|
||||
max-width: 640px
|
||||
|
||||
p,
|
||||
.btn
|
||||
margin-bottom: 0
|
||||
|
||||
.btn
|
||||
display: block
|
||||
|
||||
.download
|
||||
margin-top: $line-height-computed/2
|
||||
|
||||
@media $breakpoint2
|
||||
margin-top: 0
|
||||
text-align: right
|
||||
|
||||
// Masonry
|
||||
/////////////////////////////////////
|
||||
|
||||
.masonry
|
||||
@media $breakpoint2
|
||||
width: 125%
|
||||
margin-left: -12.5%
|
||||
.clearfix
|
||||
|
||||
.hentry
|
||||
@media $breakpoint1
|
||||
width: 49%
|
||||
float: left
|
||||
clear: none
|
||||
padding-top: 0
|
||||
padding-bottom: 0
|
||||
margin-bottom: .7em
|
||||
margin-top: 0
|
||||
margin-left: 0
|
||||
margin-right: 1%
|
||||
border: none
|
||||
|
||||
&:before
|
||||
display: none
|
||||
|
||||
&:nth-child(2n+1)
|
||||
margin-right: 0
|
||||
|
||||
&:last-child
|
||||
margin-bottom: 3em
|
||||
|
||||
.grid-sizer
|
||||
width: 100%
|
||||
|
||||
@media screen and (min-width: 480px)
|
||||
width: 50%
|
||||
190
_src/assets/styl/forms.styl
Normal file
190
_src/assets/styl/forms.styl
Normal file
@ -0,0 +1,190 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Forms
|
||||
//
|
||||
|
||||
|
||||
// Normalize non-controls
|
||||
/////////////////////////////////////
|
||||
|
||||
fieldset
|
||||
padding: 0
|
||||
margin: 0
|
||||
border: 0
|
||||
min-width: 0
|
||||
|
||||
legend
|
||||
display: block
|
||||
width: 100%
|
||||
padding: 0
|
||||
margin-bottom: $line-height-computed
|
||||
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%
|
||||
height: $input-height-base
|
||||
padding: $padding-base-vertical $padding-base-horizontal
|
||||
font-size: $input-font-size
|
||||
font-weight: $input-font-weight
|
||||
line-height: $line-height-base
|
||||
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(color $input-color-placeholder, font-size $font-size-base, line-height $line-height-base+.3)
|
||||
|
||||
&:hover
|
||||
lighten($input-bg, 30%)
|
||||
|
||||
&:focus
|
||||
background-color: $input-bg-focus
|
||||
border-color: $input-border-focus
|
||||
outline: 0
|
||||
placeholder(color 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: $line-height-computed
|
||||
|
||||
|
||||
// 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: $line-height-computed // 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($input-height-small, $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($input-height-large, $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()
|
||||
81
_src/assets/styl/grid.styl
Normal file
81
_src/assets/styl/grid.styl
Normal file
@ -0,0 +1,81 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Grid
|
||||
//
|
||||
|
||||
|
||||
// Prevents padding to be added
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
// 320px and up
|
||||
.container
|
||||
padding: 0 7%
|
||||
width: 100%
|
||||
|
||||
.row
|
||||
margin-top: $line-height-computed
|
||||
margin-bottom: $line-height-computed
|
||||
|
||||
|
||||
.col1,
|
||||
.col2,
|
||||
.col3,
|
||||
.col4,
|
||||
.col5,
|
||||
.col6
|
||||
width: 100%
|
||||
margin-left: 0
|
||||
// ensures empty columns won't collapse
|
||||
min-height: 1px
|
||||
|
||||
// clear
|
||||
.container,
|
||||
.row
|
||||
@extend .clearfix
|
||||
|
||||
@media $breakpoint2
|
||||
|
||||
.container
|
||||
padding: 0 15%
|
||||
|
||||
.row
|
||||
max-width: 35em
|
||||
margin: $line-height-computed*2 auto
|
||||
padding-left: 0
|
||||
padding-right: 0
|
||||
|
||||
.col1,
|
||||
.col2,
|
||||
.col3,
|
||||
.col4,
|
||||
.col5,
|
||||
.col6
|
||||
float: left
|
||||
margin-left: 4%
|
||||
|
||||
.col1:first-child,
|
||||
.col2:first-child,
|
||||
.col3:first-child,
|
||||
.col4:first-child,
|
||||
.col5:first-child,
|
||||
.col6,
|
||||
.col3:nth-child(2n+3),
|
||||
.col2:nth-child(3n+4),
|
||||
.col1:nth-child(6n+7)
|
||||
margin-left: 0
|
||||
clear: both
|
||||
|
||||
.col1
|
||||
width: 13%
|
||||
.col2
|
||||
width: 30.6%
|
||||
.col3
|
||||
width: 48%
|
||||
.col4
|
||||
width: 65%
|
||||
.col5
|
||||
width: 82%
|
||||
.col6
|
||||
width: 100%
|
||||
114
_src/assets/styl/icons.styl
Normal file
114
_src/assets/styl/icons.styl
Normal file
@ -0,0 +1,114 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Icons
|
||||
//
|
||||
|
||||
|
||||
@font-face
|
||||
font-family: 'entypo'
|
||||
src:url('../fonts/entypo.eot')
|
||||
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/entypo.woff') format('woff'),
|
||||
url('../fonts/entypo.ttf') format('truetype'),
|
||||
url('../fonts/entypo.svg#entypo') format('svg')
|
||||
font-weight: normal
|
||||
font-style: normal
|
||||
|
||||
[class*="icon-"]:before
|
||||
color: $text-color-light
|
||||
font-size: 20px
|
||||
font-family: 'entypo'
|
||||
speak: none
|
||||
font-style: normal
|
||||
font-weight: normal
|
||||
font-variant: normal
|
||||
text-transform: none
|
||||
line-height: 1
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
|
||||
.btn&
|
||||
font-size: 18px
|
||||
margin-right: .3em
|
||||
top: .1em
|
||||
position: relative
|
||||
vertical-align: baseline
|
||||
line-height: inherit
|
||||
|
||||
.btn-primary&
|
||||
color: darken($link-color, 15%)
|
||||
|
||||
|
||||
.icon-twitter:before
|
||||
content: "\e600"
|
||||
|
||||
.icon-rss:before
|
||||
content: "\e603"
|
||||
|
||||
.icon-user:before,
|
||||
.icon-personal:before
|
||||
content: "\e604"
|
||||
|
||||
.icon-leaf:before
|
||||
content: "\e605"
|
||||
|
||||
.icon-link:before
|
||||
content: "\e606"
|
||||
|
||||
.icon-pictures:before,
|
||||
.icon-photos:before
|
||||
content: "\e607"
|
||||
|
||||
.icon-camera:before,
|
||||
.icon-photography:before
|
||||
content: "\e608"
|
||||
|
||||
.icon-arrow-down-circle:before,
|
||||
.icon-download:before
|
||||
content: "\e609"
|
||||
|
||||
.icon-forward:before
|
||||
content: "\e60a"
|
||||
|
||||
.icon-heart:before
|
||||
content: "\e60b"
|
||||
|
||||
.icon-info:before
|
||||
content: "\e60c"
|
||||
|
||||
.icon-github:before
|
||||
content: "\e60e"
|
||||
|
||||
.icon-star:before,
|
||||
.entry-content ul li:before
|
||||
content: "\e60d"
|
||||
|
||||
.icon-search:before
|
||||
content: "\e60f"
|
||||
|
||||
.icon-googleplus:before
|
||||
content: "\e601"
|
||||
|
||||
.icon-facebook:before
|
||||
content: "\e602"
|
||||
|
||||
.icon-list:before
|
||||
content: "\e610"
|
||||
|
||||
.icon-tools:before,
|
||||
.icon-design:before
|
||||
content: "\e611"
|
||||
|
||||
.icon-arrow-down:before
|
||||
content: "\e612"
|
||||
|
||||
.icon-arrow-right:before
|
||||
content: "\e614"
|
||||
|
||||
.icon-arrow-left:before
|
||||
content: "\e615"
|
||||
|
||||
.icon-gift:before,
|
||||
.icon-goodies:before
|
||||
content: "\e613"
|
||||
62
_src/assets/styl/kremalicious3.styl
Normal file
62
_src/assets/styl/kremalicious3.styl
Normal file
@ -0,0 +1,62 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
//
|
||||
//
|
||||
|
||||
|
||||
// Normalize all the things
|
||||
@import 'bower_components/normalize-css/normalize.css'
|
||||
|
||||
// Core variables and mixins
|
||||
@import 'variables'
|
||||
@import 'mixins'
|
||||
|
||||
// grid
|
||||
@import 'grid'
|
||||
|
||||
// Typography
|
||||
@import 'typography'
|
||||
|
||||
// Scaffolding
|
||||
@import 'scaffolding'
|
||||
|
||||
// Icons
|
||||
@import 'icons'
|
||||
|
||||
// Forms & Buttons
|
||||
@import 'forms'
|
||||
@import 'buttons'
|
||||
|
||||
// Media: images, video etc.
|
||||
@import 'media'
|
||||
|
||||
// Tables
|
||||
@import 'tables'
|
||||
|
||||
// Code
|
||||
@import 'code'
|
||||
@import 'syntax'
|
||||
|
||||
// Alerts
|
||||
@import 'alerts'
|
||||
|
||||
// Content
|
||||
@import 'content'
|
||||
@import 'content-photo.less'
|
||||
@import 'content-link.less'
|
||||
@import 'content-related.less'
|
||||
@import 'comments.less'
|
||||
@import 'sticky.less'
|
||||
|
||||
@import 'page-about.less'
|
||||
@import 'page-404.less'
|
||||
|
||||
// Navigation
|
||||
@import 'navigation.less'
|
||||
|
||||
// Animations
|
||||
@import 'animations.less'
|
||||
|
||||
// Print
|
||||
@import 'print.less'
|
||||
47
_src/assets/styl/media.styl
Normal file
47
_src/assets/styl/media.styl
Normal file
@ -0,0 +1,47 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Media
|
||||
//
|
||||
|
||||
|
||||
// Responsive Media
|
||||
/////////////////////////////////////
|
||||
|
||||
figure, img, svg, video, audio, embed, canvas
|
||||
max-width: 100%
|
||||
height: auto
|
||||
margin: 0 auto
|
||||
display: block
|
||||
border-radius: $border-radius-base
|
||||
|
||||
|
||||
// Images
|
||||
/////////////////////////////////////
|
||||
|
||||
img
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.2)
|
||||
|
||||
.teaser,
|
||||
.teaser img
|
||||
margin-top: $line-height-computed*1.5
|
||||
margin-bottom: $line-height-computed*1.5
|
||||
|
||||
|
||||
// Media Positioning
|
||||
/////////////////////////////////////
|
||||
|
||||
img.alignleft,
|
||||
img.alignright,
|
||||
img.aligncenter
|
||||
float: none
|
||||
display: block
|
||||
margin: $line-height-computed auto
|
||||
|
||||
@media $breakpoint2
|
||||
img.alignleft
|
||||
margin: 0 $line-height-computed $line-height-computed 0
|
||||
|
||||
img.alignright
|
||||
margin: 0 0 $line-height-computed $line-height-computed
|
||||
220
_src/assets/styl/mixins.styl
Normal file
220
_src/assets/styl/mixins.styl
Normal file
@ -0,0 +1,220 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Mixins
|
||||
//
|
||||
|
||||
|
||||
// Micro Clearfix
|
||||
/////////////////////////////////////
|
||||
|
||||
clearfix()
|
||||
&:after
|
||||
content: ""
|
||||
display: table
|
||||
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 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
|
||||
|
||||
// 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
|
||||
|
||||
|
||||
// Dimmed Text
|
||||
/////////////////////////////////////
|
||||
|
||||
dimmed()
|
||||
color: $text-color-dimmed
|
||||
p
|
||||
color: $text-color-dimmed
|
||||
li
|
||||
color: $text-color-dimmed
|
||||
|
||||
.dimmed
|
||||
dimmed()
|
||||
|
||||
|
||||
// Text overflow
|
||||
/////////////////////////////////////
|
||||
|
||||
.ellipsis
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
|
||||
|
||||
// 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,.55)
|
||||
padding: $line-height-computed/2 $line-height-computed $line-height-computed/2 100%
|
||||
margin-left: -100%;
|
||||
.border-right-radius($border-radius-base)
|
||||
|
||||
|
||||
// Lead paragraph
|
||||
/////////////////////////////////////
|
||||
|
||||
.lead
|
||||
font-size: $font-size-large;
|
||||
line-height: $line-height-computed*1.15
|
||||
|
||||
|
||||
// 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(input-height, padding-vertical, padding-horizontal, font-size, line-height, border-radius)
|
||||
height: input-height
|
||||
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&
|
||||
height: input-height
|
||||
line-height: input-height
|
||||
|
||||
textarea&,
|
||||
select[multiple]&
|
||||
height: auto
|
||||
237
_src/assets/styl/scaffolding.styl
Normal file
237
_src/assets/styl/scaffolding.styl
Normal file
@ -0,0 +1,237 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Scaffolding
|
||||
//
|
||||
|
||||
|
||||
// Body reset
|
||||
/////////////////////////////////////
|
||||
|
||||
html
|
||||
font-size: 62.5%
|
||||
-webkit-tap-highlight-color: fade($link-color, 20%);
|
||||
|
||||
body
|
||||
background: $body-bg
|
||||
|
||||
|
||||
.document
|
||||
position: relative
|
||||
|
||||
|
||||
// Topbar
|
||||
/////////////////////////////////////
|
||||
|
||||
.topbar
|
||||
@extend .clearfix
|
||||
background: $body-bg
|
||||
border-bottom: 1px solid rgba(255,255,255,.7)
|
||||
box-shadow: inset 0 1px 4px fade($brand-dark, 20%), inset 0 -1px 4px fade($brand-dark, 20%)
|
||||
|
||||
.row
|
||||
margin-top: $line-height-computed/2
|
||||
margin-bottom: $line-height-computed/2
|
||||
position: relative
|
||||
|
||||
|
||||
// Banner
|
||||
/////////////////////////////////////
|
||||
|
||||
.banner
|
||||
@extend .alignleft
|
||||
|
||||
@media $breakpoint2
|
||||
margin-left: -54px
|
||||
|
||||
.banner-title
|
||||
margin-top: .1em
|
||||
margin-bottom: 0
|
||||
// display toned down logo
|
||||
// by default
|
||||
@extend .logo
|
||||
|
||||
.banner-logo
|
||||
.ir
|
||||
|
||||
// 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 }
|
||||
|
||||
|
||||
// Logo
|
||||
/////////////////////////////////////
|
||||
|
||||
.logo
|
||||
display: block
|
||||
background-image: data-uri('../img/logo.png')
|
||||
background-repeat: no-repeat
|
||||
background-position: left top
|
||||
width: 47px
|
||||
height: 31px
|
||||
|
||||
@media $breakpoint2
|
||||
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
|
||||
|
||||
|
||||
// close button
|
||||
/////////////////////////////////////
|
||||
|
||||
a.close,
|
||||
.close
|
||||
@extend .textcenter
|
||||
width: 16px
|
||||
height: 16px
|
||||
line-height: 12px
|
||||
font-size: 16px
|
||||
padding: 0
|
||||
border-radius: 16px
|
||||
display: block
|
||||
background: $brand-grey-light
|
||||
color: #fff
|
||||
|
||||
&:hover
|
||||
background: $link-color-hover
|
||||
|
||||
|
||||
// Footer
|
||||
/////////////////////////////////////
|
||||
|
||||
.footer
|
||||
@extend .textcenter
|
||||
background: fade($brand-dark, 5%)
|
||||
border-top: 1px solid rgba(255,255,255,.7)
|
||||
box-shadow: inset 0 1px 4px fade($brand-dark, 20%)
|
||||
|
||||
.gravatar
|
||||
margin-bottom: $line-height-computed/2
|
||||
|
||||
.footer-description
|
||||
@extend .h5
|
||||
a
|
||||
display: block
|
||||
|
||||
&,
|
||||
.footer-description
|
||||
color: $text-color-light
|
||||
line-height: $line-height-computed
|
||||
|
||||
.footer-copyright
|
||||
@extend .divider-top
|
||||
padding-top: $line-height-computed
|
||||
padding-bottom: $line-height-computed
|
||||
|
||||
p
|
||||
margin-bottom: 0
|
||||
font-size: $font-size-mini
|
||||
|
||||
// Subscribe component
|
||||
.subscribe
|
||||
margin: $line-height-computed auto
|
||||
p
|
||||
@extend .clearfix .textcenter
|
||||
margin: 0
|
||||
|
||||
.btn
|
||||
@extend .textcenter
|
||||
width: 48px
|
||||
height: 40px
|
||||
line-height: 34px
|
||||
padding: 0
|
||||
margin: 0
|
||||
display: inline-block
|
||||
color: $text-color-light
|
||||
|
||||
&:first-child
|
||||
margin-left: 0
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
|
||||
&:before
|
||||
// Icon resets for color animations
|
||||
transition: color .3s ease-in-out)
|
||||
color: inherit
|
||||
margin: 0 !important
|
||||
|
||||
.subscribe-title
|
||||
@extend .h5
|
||||
color: $text-color-dimmed
|
||||
margin-bottom: $line-height-computed/2
|
||||
|
||||
.footer:hover .subscribe .rss:before
|
||||
color: #e15a00
|
||||
|
||||
.footer:hover .subscribe .twitter:before
|
||||
color: #019ad2
|
||||
|
||||
.footer:hover .subscribe .google:before
|
||||
color: #c63b1e
|
||||
|
||||
.footer:hover .subscribe .facebook:before
|
||||
color: #3b5998
|
||||
|
||||
|
||||
// topbar and footer as fixed
|
||||
// site background
|
||||
/////////////////////////////////////
|
||||
|
||||
.topbar
|
||||
height: 71px
|
||||
|
||||
.menu-open &
|
||||
height: auto
|
||||
|
||||
.document
|
||||
background-color: $page-bg
|
||||
|
||||
@media only screen and (min-width: 40.625em) and (min-height: 650px)
|
||||
body
|
||||
position: relative
|
||||
|
||||
.document
|
||||
z-index: 2
|
||||
margin-top: 71px
|
||||
.transition
|
||||
|
||||
.menu-open &
|
||||
margin-top: 300px
|
||||
|
||||
margin-bottom: 580px;
|
||||
border-top: 1px solid rgba(255,255,255,.7)
|
||||
border-bottom: 1px solid rgba(255,255,255,.7)
|
||||
box-shadow: 0 1px 4px fade($brand-dark, 10%), 0 -1px 4px fade($brand-dark, 10%)
|
||||
|
||||
.topbar,
|
||||
.footer
|
||||
position: fixed
|
||||
border: none
|
||||
|
||||
.topbar
|
||||
z-index: 1
|
||||
top: 0
|
||||
box-shadow: inset 0 1px 4px fade($brand-dark, 10%)
|
||||
border: none
|
||||
|
||||
.footer
|
||||
z-index: 0
|
||||
height: 580px
|
||||
bottom: 0
|
||||
box-shadow: none
|
||||
|
||||
.menu-open &
|
||||
@extend .hide
|
||||
66
_src/assets/styl/syntax.styl
Normal file
66
_src/assets/styl/syntax.styl
Normal file
@ -0,0 +1,66 @@
|
||||
//
|
||||
// Colorful
|
||||
// https://github.com/richleland/pygments-css
|
||||
//
|
||||
|
||||
.highlight .hll { background-color: #ffffcc }
|
||||
.highlight .c { color: #808080 } /* Comment */
|
||||
.highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */
|
||||
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
|
||||
.highlight .o { color: #303030 } /* Operator */
|
||||
.highlight .cm { color: #808080 } /* Comment.Multiline */
|
||||
.highlight .cp { color: #507090 } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #808080 } /* Comment.Single */
|
||||
.highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
|
||||
.highlight .gd { color: #A00000 } /* Generic.Deleted */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #FF0000 } /* Generic.Error */
|
||||
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||
.highlight .gi { color: #00A000 } /* Generic.Inserted */
|
||||
.highlight .go { color: #808080 } /* Generic.Output */
|
||||
.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
|
||||
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #303090; font-weight: bold } /* Keyword.Type */
|
||||
.highlight .m { color: #6000E0; font-weight: bold } /* Literal.Number */
|
||||
.highlight .s { background-color: #fff0f0 } /* Literal.String */
|
||||
.highlight .na { color: #0000C0 } /* Name.Attribute */
|
||||
.highlight .nb { color: #007020 } /* Name.Builtin */
|
||||
.highlight .nc { color: #B00060; font-weight: bold } /* Name.Class */
|
||||
.highlight .no { color: #003060; font-weight: bold } /* Name.Constant */
|
||||
.highlight .nd { color: #505050; font-weight: bold } /* Name.Decorator */
|
||||
.highlight .ni { color: #800000; font-weight: bold } /* Name.Entity */
|
||||
.highlight .ne { color: #F00000; font-weight: bold } /* Name.Exception */
|
||||
.highlight .nf { color: #0060B0; font-weight: bold } /* Name.Function */
|
||||
.highlight .nl { color: #907000; font-weight: bold } /* Name.Label */
|
||||
.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
|
||||
.highlight .nt { color: #007000 } /* Name.Tag */
|
||||
.highlight .nv { color: #906030 } /* Name.Variable */
|
||||
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
|
||||
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */
|
||||
.highlight .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #0040D0 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #D04020 } /* Literal.String.Doc */
|
||||
.highlight .s2 { background-color: #fff0f0 } /* Literal.String.Double */
|
||||
.highlight .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
|
||||
.highlight .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */
|
||||
.highlight .si { background-color: #e0e0e0 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
|
||||
.highlight .s1 { background-color: #fff0f0 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #A06000 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #306090 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #3030B0 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */
|
||||
42
_src/assets/styl/tables.styl
Normal file
42
_src/assets/styl/tables.styl
Normal file
@ -0,0 +1,42 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Tables
|
||||
//
|
||||
|
||||
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
background-color: transparent
|
||||
margin-bottom: $line-height-computed
|
||||
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
|
||||
233
_src/assets/styl/typography.styl
Normal file
233
_src/assets/styl/typography.styl
Normal file
@ -0,0 +1,233 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Typography
|
||||
//
|
||||
|
||||
|
||||
// Base
|
||||
/////////////////////////////////////
|
||||
|
||||
body
|
||||
font-family: $font-family-base
|
||||
font-weight: $font-weight-base
|
||||
font-size: $font-size-base
|
||||
line-height: $line-height-base
|
||||
color: $font-color-base
|
||||
word-wrap: break-word
|
||||
|
||||
@media $breakpoint1
|
||||
line-height: $line-height-computed
|
||||
|
||||
@media $breakpoint3
|
||||
font-size: 125%
|
||||
line-height: 1.6em
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol
|
||||
margin: 0 0 $line-height-computed
|
||||
|
||||
|
||||
// Headings
|
||||
/////////////////////////////////////
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6
|
||||
font-family: $headings-font-family
|
||||
font-weight: $headings-font-weight
|
||||
color: $headings-color
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2
|
||||
margin-top: $line-height-computed*2
|
||||
margin-bottom: $line-height-computed*2
|
||||
|
||||
h3, .h3
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6
|
||||
margin-top: $line-height-computed
|
||||
margin-bottom: $line-height-computed
|
||||
|
||||
h1, .h1
|
||||
font-size: $font-size-h1
|
||||
|
||||
h2, .h2
|
||||
font-size: $font-size-h2
|
||||
|
||||
h3, .h3
|
||||
font-size: $font-size-h3
|
||||
|
||||
h4, .h4
|
||||
font-size: $font-size-h4
|
||||
|
||||
h5, .h5
|
||||
font-size: $font-size-h5
|
||||
|
||||
h6, .h6
|
||||
font-size: $font-size-h6
|
||||
|
||||
|
||||
// Links
|
||||
/////////////////////////////////////
|
||||
|
||||
a
|
||||
color: $link-color
|
||||
text-decoration: none
|
||||
outline: 0
|
||||
transition: color .2s ease-in-out
|
||||
position: relative
|
||||
|
||||
&:hover
|
||||
color: $link-color-hover
|
||||
|
||||
&:active
|
||||
transition: none
|
||||
top: 1px
|
||||
background: $link-color
|
||||
color: #fff
|
||||
text-shadow: none
|
||||
|
||||
h1 &,
|
||||
h2 &,
|
||||
h3 &
|
||||
color: $headings-color
|
||||
|
||||
|
||||
// Lists
|
||||
/////////////////////////////////////
|
||||
|
||||
ul,
|
||||
ol
|
||||
margin-top: 0
|
||||
margin-bottom: $line-height-computed
|
||||
list-style: none
|
||||
padding-left: 2em
|
||||
|
||||
ul li
|
||||
position: relative
|
||||
margin-bottom: .5em
|
||||
|
||||
&:before
|
||||
font-size: 14px
|
||||
font-family: 'entypo'
|
||||
color: $text-color-light
|
||||
speak: none
|
||||
font-style: normal
|
||||
font-weight: normal
|
||||
font-variant: normal
|
||||
text-transform: none
|
||||
line-height: 1
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
position: absolute
|
||||
left: -2em
|
||||
top: .5em
|
||||
|
||||
ol
|
||||
counter-reset: ol-counter
|
||||
|
||||
li
|
||||
position: relative
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
left: -2em
|
||||
top: 0
|
||||
color: #fff
|
||||
content: counter(ol-counter)
|
||||
counter-increment: ol-counter
|
||||
font-style: italic
|
||||
font-size: 14px
|
||||
background: $text-color-dimmed
|
||||
|
||||
width: 20px
|
||||
height: 20px
|
||||
border-radius: 20px
|
||||
line-height: 20px
|
||||
display: block
|
||||
text-align: center
|
||||
top: .2em
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,.7))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol
|
||||
ul,
|
||||
ol
|
||||
margin-bottom: 0
|
||||
|
||||
nav ul,
|
||||
nav ol
|
||||
@extend .list-unstyled
|
||||
|
||||
// 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
|
||||
|
||||
// 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
|
||||
font-style: italic
|
||||
|
||||
cite
|
||||
font-style: normal
|
||||
|
||||
hr
|
||||
@extend .divider-bottom
|
||||
border: 0
|
||||
margin-bottom: $line-height-computed*2
|
||||
|
||||
|
||||
// Quotes
|
||||
/////////////////////////////////////
|
||||
|
||||
blockquote,
|
||||
blockquote > p
|
||||
font-style: italic
|
||||
color: $text-color-light
|
||||
|
||||
blockquote
|
||||
padding: ($line-height-computed / 2) $line-height-computed
|
||||
margin: 0 0 $line-height-computed
|
||||
border-left: 2px solid $text-color-dimmed
|
||||
|
||||
p:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
|
||||
|
||||
// Selection
|
||||
/////////////////////////////////////
|
||||
|
||||
::-moz-selection { background: #2e4f5c; color: #fff; }
|
||||
::selection { background: #2e4f5c; color: #fff; }
|
||||
146
_src/assets/styl/variables.styl
Normal file
146
_src/assets/styl/variables.styl
Normal file
@ -0,0 +1,146 @@
|
||||
//
|
||||
// kremalicious3
|
||||
// --------------
|
||||
// Global variables & settings
|
||||
//
|
||||
|
||||
|
||||
// Settings
|
||||
/////////////////////////////////////
|
||||
|
||||
vendors = official webkit // Stylus' @keyframes settings
|
||||
vendor-prefixes = webkit moz official // Nib vendor prefixes
|
||||
support-for-ie = false // Nib IE 8 support
|
||||
|
||||
|
||||
// Asset Paths
|
||||
/////////////////////////////////////
|
||||
|
||||
$img-path = '/assets/images/'
|
||||
$font-path = '/assets/fonts/'
|
||||
|
||||
|
||||
// Colors
|
||||
/////////////////////////////////////
|
||||
|
||||
$brand-dark = #015565
|
||||
$brand-light = #e7eef4
|
||||
$brand-cyan = #3a9085
|
||||
$brand-grey = #56666e
|
||||
$brand-grey-light = #96a6ad
|
||||
|
||||
|
||||
// Typography
|
||||
/////////////////////////////////////
|
||||
|
||||
$font-size-base = 18px
|
||||
$font-size-large = ceil($font-size-base * 1.35)
|
||||
$font-size-small = ceil($font-size-base * 0.8)
|
||||
$font-size-mini = ceil($font-size-base * 0.7)
|
||||
|
||||
$font-size-h1 = floor(($font-size-base * 2.75))
|
||||
$font-size-h2 = floor(($font-size-base * 2))
|
||||
$font-size-h3 = ceil(($font-size-base * 1.75))
|
||||
$font-size-h4 = $font-size-large
|
||||
$font-size-h5 = $font-size-base
|
||||
$font-size-h6 = $font-size-small
|
||||
|
||||
$line-height-base = 1.5
|
||||
$line-height-computed = floor($font-size-base * $line-height-base)
|
||||
$line-height-large = 1.7142857143
|
||||
$line-height-small = 1.1428571429
|
||||
|
||||
$font-family-base = 'ff-tisa-sans-web-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif
|
||||
$font-weight-base = 400
|
||||
$font-color-base = $brand-grey
|
||||
|
||||
$font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace
|
||||
|
||||
$headings-font-family = 'brandon-grotesque','Helvetica Neue',Helvetica,Arial,sans-serif
|
||||
$headings-font-weight = 500 // Medium
|
||||
$headings-line-height = 1.2
|
||||
$headings-color = $brand-dark
|
||||
|
||||
|
||||
// Text Colors
|
||||
/////////////////////////////////////
|
||||
|
||||
$text-color = lighten($brand-grey, 5%)
|
||||
$text-color-light = darken($brand-grey-light, 5%)
|
||||
$text-color-dimmed = lighten($brand-grey-light, 5%)
|
||||
|
||||
|
||||
// Scaffolding
|
||||
/////////////////////////////////////
|
||||
|
||||
$body-bg = #dfe8ef
|
||||
$page-bg = $brand-light
|
||||
|
||||
|
||||
// Links
|
||||
/////////////////////////////////////
|
||||
|
||||
$link-color = lighten($brand-cyan, 5%)
|
||||
$link-color-hover = lighten($link-color, 10%)
|
||||
|
||||
|
||||
// Components spacing
|
||||
/////////////////////////////////////
|
||||
|
||||
$border-radius-base = 3px
|
||||
$border-radius-small = $border-radius-base
|
||||
$border-radius-large = $border-radius-base
|
||||
|
||||
$padding-base-vertical = 6px
|
||||
$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 = rgba(255,255,255,.3)
|
||||
$input-bg-focus = rgba(255,255,255,.7)
|
||||
$input-bg-disabled = $brand-grey-light
|
||||
|
||||
$input-font-size = $font-size-base
|
||||
$input-font-weight = 700
|
||||
|
||||
$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
|
||||
|
||||
$input-height-base = ($line-height-computed + ($padding-base-vertical * 2) + 2)
|
||||
$input-height-large = (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 1)
|
||||
$input-height-small = (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2)
|
||||
|
||||
|
||||
// Code
|
||||
/////////////////////////////////////
|
||||
|
||||
$code-bg = rgba(255,255,255,.6)
|
||||
$code-color = spin($text-color, 70)
|
||||
$kbd-bg = $code-bg
|
||||
$kbd-color = $code-color
|
||||
|
||||
// Responsive breakpoints
|
||||
/////////////////////////////////////
|
||||
|
||||
$breakpoint1 = 'only screen and (min-width: 30em)'
|
||||
$breakpoint2 = 'only screen and (min-width: 40.625em)'
|
||||
$breakpoint3 = '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) '
|
||||
Loading…
Reference in New Issue
Block a user