Skip to main content
// CUSTOM MIXINS --------------------------------------
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin breakpoint($breakat){
@media #{$breakat} { @content; }
}
// VARIABLES ----------------------------------------
//colors
$blue:#4d5e76;
$text-color: #6C6C7A;
$link-color: $blue;
$link-hover-color: darken($link-color, 20%);
//bootstrap breakpoints
$xs : "(min-width: 480px)";
$sm : "(min-width: 768px)";
$md : "(min-width: 992px)";
$lg : "(min-width: 1200px)";
//bootstrap overrides
$border-radius-base: 0;
// FONTS ----------------------------------------
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,900,900i');
// BASICS ---------------------------------------
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: bottom;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
//my basics
html{
min-height: 100%;
position: relative;
-webkit-font-smoothing:antialiased;
box-sizing: border-box;
}
body{
-webkit-font-smoothing:antialiased;
font-family: 'Lato', sans-serif;
background-color: #333;
-webkit-text-size-adjust: none;
}
*, *:before, *:after {
box-sizing: inherit;
}
img{
max-width:100%;
}
// ACCESSIBLITY ---------------------------------
*:focus{
outline: default;
}
.sr-only-focusable:focus{
position: absolute;
top: 10px;
left: 50%;
transform:translate(-50%, 0);
padding: 10px 20px;
z-index: 9999;
font-size: 1.2em;
}
// TYPOGRAPHY -----------------------------------
h1{
font-weight: 300;
font-size: 3.3em;
line-height: 0.8em;
color:#777;
}
h2{
font-weight: 300;
font-size: 2.5em;
margin: 1em 0 0.4em;
@include breakpoint($md){
font-weight: 100;
font-size: 5em;
}
}
h3{
font-weight: 300;
font-size: 1.8em;
margin: 0.2em 0 0.2em;
}
h4{
text-transform: uppercase;
font-weight: 600;
font-size: 0.66em;
color:#666666;
margin-bottom: 0.6em;
}
p{
color:$text-color;
line-height: 1.2em;
}
a, a:visited, a:active{
color: $blue;
text-decoration: none;
}
a:hover{
color: $link-hover-color;
}
// REUSABLE ELEMENTS -----------------------------
.btn-default{
text-transform: uppercase;
border-radius: 0;
color: #777;
}
.mobile-only{
@include breakpoint($sm){
display: none !important;
}
}
.desktop-only{
display: none;
@include breakpoint($sm){
display: initial;
}
}
// FORM OVERRIDES -----------------------------
.form-control-feedback{
height: auto;
width: auto;
position: relative;
line-height: 1em;
}
.control-label{
margin-bottom: 0.6em;
}
// HERO -----------------------------------------
section.hero{
position: relative;
figure{
img{
max-width:100%;
}
}
}
// NAV -----------------------------------------
.navbar{
background:rgba(255,255,255,0.9);
.navbar-brand{
font-weight: 300;
font-size: 1.5em;
small{
display: none;
@include breakpoint($md){
display: inline;
font-size: 0.65em;
vertical-align: baseline;
font-weight: 400;
}
}
}
.navbar-nav > .active > a{
background:transparent;
color: $blue;
}
a{
color:white;
}
.linked-in i {
background: #0077B5;
color:white;
padding: 6px;
margin: -4px 0;
border-radius: 3px;
}
}
.site{
width: 100%;
position: relative;
top: 0;
left: 0;
background:#f0f0f0;
z-index:10;
transition: left 0.3s;
padding-bottom: 50px;
overflow:hidden;
@include breakpoint($sm){
width: calc(100% - 60px);
box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
}
body.peek .site{
left:-10%;
}
body.code .site{
left:calc(-100% + 120px);
cursor: pointer;
}
body.rev-peek .site{
left: -80%;
}
// SECTIONS -------------------------------------
section{
&.work{
.project{
margin-bottom: 2em;
figure img{
border:1px solid rgba(0,0,0,0.3);
}
a{
text-decoration: none;
}
span.tech{
display: block;
font-weight: 400;
color: #555;
margin-top: 1em;
font-size: 0.9em;
}
h3{
margin: 0.2em 0 0;
padding-bottom: 0.2em;
}
p{
margin-bottom: 1em;
}
@include breakpoint($md){
p, span.btn{
display: none;
}
}
}
}
&.philosophy{
h3{
font-weight: 400;
font-size: 1.3em;
margin-bottom: 0.3em;
color: #555555;
}
p{
padding-bottom: 1.3em;
}
}
}
// SIDEBAR --------------------------------------
aside.code-view{
position: fixed;
top: 0;
left: 0;
width: 100%;
cursor:pointer;
height: 100%;
overflow:hidden;
display: none;
@include breakpoint($sm){
display: block;
}
.code-toggle{
position: absolute;
font-family: 'Lato', sans-serif;
font-weight: 300;
top: 80px;
color: #dedede;
font-size: 1.4em;
right:calc(54.5% + 20px);
z-index: 1000;
display: block;
}
pre{
width: 45.5%;
float: left;
padding: 120px 20px 60px 115px;
border:0;
border-right: 1px solid #2e2e2e;
white-space: pre-wrap;
word-break: keep-all;
position: relative;
&:before{
content:'SCSS';
display: block;
position: absolute;
font-family: 'Lato', sans-serif;
font-weight: 300;
top: 80px;
color: #999;
font-size: 1.4em;
margin-left: 17px;
}
&.lang-html{
width:54.5%;
padding-left: 14px;
&:before{
content: 'HTML';
}
}
&.lang-js{
&:before{
content: 'JS';
}
}
}
}
body.code aside.code-view{
cursor: default;
}
span.code-view, span.site-view{
position: fixed;
transform-origin:100% 50%;
transform:rotate(-90deg);
top: 100px;
right: 20px;
display: none;
z-index:1000;
color: #dedede;
text-transform: uppercase;
font-size: 1.4em;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
padding: 10px 15px;
text-decoration: none;
font-weight: 300;
cursor:pointer;
@include breakpoint($sm){
display: block;
}
&:hover{
}
}
span.site-view{
transform-origin:0% 50%;
transform:rotate(90deg);
right:auto;
left: 90px;
display: none;
transition: left 0.3s;
}
body.code span.code-view{
display: none;
}
body.code span.site-view{
display: block;
}
body.rev-peek span.site-view{
left: calc(15% + 30px);
}
.mobile-code{
padding: 120px 20px 60px 20px !important;
border:0;
border-right: 1px solid #2e2e2e;
white-space: pre-wrap;
word-break: keep-all;
position: relative;
&:before{
display: block;
position: absolute;
font-family: 'Lato', sans-serif;
font-weight: 300;
top: 80px;
color: #999;
font-size: 1.4em;
margin-left: 17px;
}
&.lang-css:before{
content:'CODE VIEW: SCSS';
}
&.lang-html:before{
content:'CODE VIEW: HTML';
}
&.lang-js:before{
content:'CODE VIEW: JS';
}
}
/* ====================================================================
Helium Modal styles
==================================================================== */
/* === essential styles === */
.helium-modal{
position: absolute;
top:0;
left:0;
width:100%;
background-color: rgba(0,0,0,0.6);
z-index: 2000;
display: none;
.modal{
position: absolute;
left: -9999px;
display: block;
top: auto;
bottom: auto;
left: auto;
right: auto;
/* === customizable styles === */
background-color: #ffffff;
padding: 40px;
box-shadow: 0 4px 4px rgba(0,0,0,0.2);
max-width: 700px;
figure{
border:1px solid #ddd;
}
span.btn{
display: none;
}
span.tech{
display: block;
font-weight: 400;
color: #555;
margin-top: 1em;
font-size: 0.9em;
}
a.btn-default{
margin-top:1em;
}
a.x-button{
position: absolute;
top:12px;
right:10px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 40px;
line-height: 20px;
color: #222;
}
}
}