192 lines
3.7 KiB
SCSS
192 lines
3.7 KiB
SCSS
/* variables */
|
|
|
|
//color
|
|
$black: #000;
|
|
$white: #fff;
|
|
$red: #ff0000;
|
|
|
|
$green: #7bc6b1;
|
|
$orange: #f2826a;
|
|
$background: #f2eee5;
|
|
$dark-background: #333;
|
|
|
|
$gray-dark: #5c5c5c;
|
|
$gray-mid: #b2b2b2;
|
|
$gray-light: #e0e0e0;
|
|
|
|
$border-dark: #333;
|
|
|
|
// base measures
|
|
$baseline: 20px;
|
|
$base-font-size: 16px;
|
|
$base-line-height: 20px;
|
|
$button-height: 60px;
|
|
|
|
.center {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.padded-lg {padding: ($baseline * 2) 0;}
|
|
.padded {padding: ($baseline * 2) 0;}
|
|
.padded-sm {padding: ($baseline) 0;}
|
|
|
|
|
|
// components
|
|
$nav-height: 100px;
|
|
$hero-height: 500px;
|
|
$docs-top-margin: 60px;
|
|
$sidebar-background-color: $dark-background;
|
|
$sidebar-width: 225px;
|
|
|
|
|
|
//typography
|
|
$serif: 'tk-ff-tisa-web-pro', 'ff-tisa-web-pro-1', 'ff-tisa-web-pro-2', 'tisa ot', helvetica, Georgia, serif;
|
|
$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$mono: 'Inconsolata', 'courier new', courier, mono-space;
|
|
|
|
.serif {font-family: $serif;}
|
|
.sans {font-family: $sans;}
|
|
.mono {font-family: $mono;}
|
|
|
|
.text-center {text-align: center !important;}
|
|
.text-left {text-align: left !important;}
|
|
.text-right {text-align: right !important;}
|
|
|
|
.text-green {color: $green;}
|
|
|
|
.uppercase {text-transform: uppercase !important;}
|
|
|
|
@font-face {
|
|
font-family: 'HeimatStencil-SemiBold';
|
|
src: url('../../fonts/2772B2_0_0.eot');
|
|
src: url('../../fonts/2772B2_0_0.woff') format('woff'),
|
|
url('../../fonts/2772B2_0_0.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
//color
|
|
.dark-background {
|
|
background-color: inherit;
|
|
color: $white;
|
|
|
|
a {
|
|
color: inherit;
|
|
&:hover {
|
|
color: $green;
|
|
}
|
|
&:active {
|
|
color: darken($green, 30%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.white-background {
|
|
background-color: $white;
|
|
}
|
|
|
|
|
|
//elements
|
|
.divider {
|
|
background: url(/images/divider.png) no-repeat center bottom;
|
|
height: 70px;
|
|
width: 70px;
|
|
background-size: 70px 70px;
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.packer {
|
|
color: $orange;
|
|
font-size: 20px;
|
|
|
|
a:hover,
|
|
a:active,
|
|
a:visited {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// media queries
|
|
$break-sm: 480px;
|
|
$break-med: 768px;
|
|
$break-max: 1200px;
|
|
$break-lg: 980px;
|
|
|
|
@mixin respond-to($media) {
|
|
@if $media == mobile {
|
|
@media only screen and (max-width: $break-sm) { @content; }
|
|
}
|
|
@else if $media == tablet {
|
|
@media only screen and (max-width: $break-med - 1) { @content; }
|
|
}
|
|
@else if $media == desktop {
|
|
@media only screen and (min-width: $break-med) and (max-width: $break-lg - 1) { @content; }
|
|
}
|
|
@else if $media == desktop-lg {
|
|
@media only screen and (min-width: $break-max) { @content; }
|
|
}
|
|
}
|
|
|
|
/*
|
|
* example *
|
|
.profile-pic {
|
|
@include respond-to(mobile) { width: 100% ;}
|
|
@include respond-to(tablet) { width: 125px; }
|
|
}
|
|
*/
|
|
//////
|
|
|
|
/* utlities */
|
|
.d {
|
|
border-bottom: 1px solid $red;
|
|
border-top: 1px solid $red;
|
|
background-color: transparentize($red, .9);
|
|
}
|
|
|
|
.hyphenate {
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.full-width {
|
|
margin-right: -20px;
|
|
margin-left: -20px;
|
|
}
|
|
|
|
.add-transition {
|
|
transition: all .1s ease-in-out;
|
|
-moz-transition: all .1s ease-in-out;
|
|
-webkit-transition: all .1s ease-in-out;
|
|
-o-transition: all .1s ease-in-out;
|
|
}
|
|
|
|
@mixin opacity($opacity) {
|
|
-khtml-opacity: $opacity;
|
|
-moz-opacity: $opacity;
|
|
opacity: $opacity;
|
|
}
|
|
|
|
@mixin transform-scale($value) {
|
|
-moz-transform: scale($value);
|
|
-webkit-transform: scale($value);
|
|
transform: scale($value);
|
|
}
|
|
|
|
@mixin transition($type, $speed, $easing) {
|
|
-webkit-transition: $type $speed $easing;
|
|
-moz-transition: $type $speed $easing;
|
|
-o-transition: $type $speed $easing;
|
|
transition: $type $speed $easing;
|
|
}
|
|
|
|
@mixin rounded($radius) {
|
|
-moz-border-radius: $radius;
|
|
-webkit-border-radius: $radius;
|
|
-khtml-border-radius: $radius;
|
|
border-radius: $radius;
|
|
}
|