Base design finished & content
This commit is contained in:
288
assets/css/simplegrid.css
Normal file
288
assets/css/simplegrid.css
Normal file
@ -0,0 +1,288 @@
|
||||
/*
|
||||
Simple Grid
|
||||
Project Page - http://thisisdallas.github.com/Simple-Grid/
|
||||
Author - Dallas Bass
|
||||
Site - http://dallasbass.com
|
||||
*/
|
||||
|
||||
|
||||
[class*='grid'],
|
||||
[class*='col-'],
|
||||
[class*='mobile-'],
|
||||
.grid:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[class*='col-'] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
padding-right: 20px; /* column-space */
|
||||
}
|
||||
|
||||
[class*='col-'] [class*='col-']:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.grid:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.grid-pad {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px; /* grid-space to left */
|
||||
padding-right: 0; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */
|
||||
}
|
||||
|
||||
.push-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Content Columns */
|
||||
|
||||
.col-1-1 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-2-3, .col-8-12 {
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
.col-1-2, .col-6-12 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.col-1-3, .col-4-12 {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.col-1-4, .col-3-12 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.col-1-5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.col-1-6, .col-2-12 {
|
||||
width: 16.667%;
|
||||
}
|
||||
|
||||
.col-1-7 {
|
||||
width: 14.28%;
|
||||
}
|
||||
|
||||
.col-1-8 {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.col-1-9 {
|
||||
width: 11.1%;
|
||||
}
|
||||
|
||||
.col-1-10 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.col-1-11 {
|
||||
width: 9.09%;
|
||||
}
|
||||
|
||||
.col-1-12 {
|
||||
width: 8.33%
|
||||
}
|
||||
|
||||
/* Layout Columns */
|
||||
|
||||
.col-11-12 {
|
||||
width: 91.66%
|
||||
}
|
||||
|
||||
.col-10-12 {
|
||||
width: 83.333%;
|
||||
}
|
||||
|
||||
.col-9-12 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.col-5-12 {
|
||||
width: 41.66%;
|
||||
}
|
||||
|
||||
.col-7-12 {
|
||||
width: 58.33%
|
||||
}
|
||||
|
||||
/* Pushing blocks */
|
||||
|
||||
.push-2-3, .push-8-12 {
|
||||
margin-left: 66.66%;
|
||||
}
|
||||
|
||||
.push-1-2, .push-6-12 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.push-1-3, .push-4-12 {
|
||||
margin-left: 33.33%;
|
||||
}
|
||||
|
||||
.push-1-4, .push-3-12 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.push-1-5 {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.push-1-6, .push-2-12 {
|
||||
margin-left: 16.667%;
|
||||
}
|
||||
|
||||
.push-1-7 {
|
||||
margin-left: 14.28%;
|
||||
}
|
||||
|
||||
.push-1-8 {
|
||||
margin-left: 12.5%;
|
||||
}
|
||||
|
||||
.push-1-9 {
|
||||
margin-left: 11.1%;
|
||||
}
|
||||
|
||||
.push-1-10 {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.push-1-11 {
|
||||
margin-left: 9.09%;
|
||||
}
|
||||
|
||||
.push-1-12 {
|
||||
margin-left: 8.33%
|
||||
}
|
||||
|
||||
@media handheld, only screen and (max-width: 767px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 20px; /* grid-space to left */
|
||||
padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
|
||||
}
|
||||
|
||||
[class*='col-'] {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin: 10px 0;
|
||||
padding-left: 0;
|
||||
padding-right: 10px; /* column-space */
|
||||
}
|
||||
|
||||
[class*='col-'] [class*='col-'] {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* Mobile Layout */
|
||||
|
||||
[class*='mobile-col-'] {
|
||||
float: left;
|
||||
margin: 0 0 10px;
|
||||
padding-left: 0;
|
||||
padding-right: 10px; /* column-space */
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.mobile-col-1-1 {
|
||||
width: 100%;
|
||||
}
|
||||
.mobile-col-2-3, .mobile-col-8-12 {
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
.mobile-col-1-2, .mobile-col-6-12 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.mobile-col-1-3, .mobile-col-4-12 {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.mobile-col-1-4, .mobile-col-3-12 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.mobile-col-1-5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.mobile-col-1-6, .mobile-col-2-12 {
|
||||
width: 16.667%;
|
||||
}
|
||||
|
||||
.mobile-col-1-7 {
|
||||
width: 14.28%;
|
||||
}
|
||||
|
||||
.mobile-col-1-8 {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.mobile-col-1-9 {
|
||||
width: 11.1%;
|
||||
}
|
||||
|
||||
.mobile-col-1-10 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.mobile-col-1-11 {
|
||||
width: 9.09%;
|
||||
}
|
||||
|
||||
.mobile-col-1-12 {
|
||||
width: 8.33%
|
||||
}
|
||||
|
||||
/* Layout Columns */
|
||||
|
||||
.mobile-col-11-12 {
|
||||
width: 91.66%
|
||||
}
|
||||
|
||||
.mobile-col-10-12 {
|
||||
width: 83.333%;
|
||||
}
|
||||
|
||||
.mobile-col-9-12 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.mobile-col-5-12 {
|
||||
width: 41.66%;
|
||||
}
|
||||
|
||||
.mobile-col-7-12 {
|
||||
width: 58.33%
|
||||
}
|
||||
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
assets/img/profile.jpg
Normal file
BIN
assets/img/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@ -13,31 +13,22 @@
|
||||
var $postContent = $(".post-content");
|
||||
$postContent.fitVids();
|
||||
|
||||
$(".scroll-down").arctic_scroll();
|
||||
$(".scroll-up").arctic_scroll();
|
||||
|
||||
$(".menu-button, .nav-cover, .nav-close").on("click", function(e){
|
||||
e.preventDefault();
|
||||
$("body").toggleClass("nav-opened nav-closed");
|
||||
var scrollTarget = (window.innerHeight * 0.30);
|
||||
// Don't hide this earlier (in CSS) for SEO reasons
|
||||
$('.hidden-content').hide();
|
||||
|
||||
// On scroll, check if the height is passed, and if so, trigger.
|
||||
$(document).scroll(function(e){
|
||||
if (window.scrollY >= scrollTarget) {
|
||||
$('#scroll-arrow').hide(200);
|
||||
$('.hidden-content').fadeIn(100);
|
||||
} else if (window.scrollY < scrollTarget) {
|
||||
$('.hidden-content').fadeOut(200);
|
||||
$('#scroll-arrow').show(200);
|
||||
}
|
||||
});
|
||||
|
||||
var object = $('.homepage-top-header');
|
||||
var toggleHeight = 1442;
|
||||
|
||||
if (object !== null) {
|
||||
$(document).scroll(function(e){
|
||||
if (window.scrollY >= (toggleHeight - 100)) {
|
||||
object.show(300);
|
||||
} else if (window.scrollY < toggleHeight) {
|
||||
object.hide(300);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var animateobject = $('.top-header-animate');
|
||||
if (animateobject !== null) {
|
||||
animateobject.show(200);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Arctic Scroll by Paul Adam Davis
|
||||
|
||||
@ -7,6 +7,7 @@ $arrow-bg: rgba(255, 255, 255, .7);
|
||||
$white: #fff;
|
||||
$page-bg: #3498db;
|
||||
$header-link-color: #ccc;
|
||||
$subtext-color: #666;
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
@ -51,7 +52,6 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $header-color;
|
||||
font-family: 'Oxygen', sans-serif;
|
||||
line-height: 2em;
|
||||
margin: 0 0 .4em;
|
||||
@ -91,7 +91,7 @@ a {
|
||||
}
|
||||
|
||||
$front-page-picture-header: 120vh;
|
||||
$front-page-bg-header: 50vh;
|
||||
$front-page-bg-header: 95vh;
|
||||
|
||||
|
||||
// Big cover on the frontpage
|
||||
@ -132,6 +132,32 @@ $front-page-bg-header: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
// Bouncing arrow
|
||||
.scroll-down {
|
||||
animation: bounce 4s 2s infinite;
|
||||
color: $arrow-bg;
|
||||
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
height: 24px;
|
||||
left: 50%;
|
||||
margin-left: -12px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transform: rotate(-90deg);
|
||||
transition: translateZ(0);
|
||||
width: 24px;
|
||||
z-index: 100;
|
||||
|
||||
// Stop the bouncing while hovered
|
||||
&:hover {
|
||||
animation: none;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-text {
|
||||
height: ($front-page-bg-header + $front-page-picture-header);
|
||||
left: 0;
|
||||
@ -139,65 +165,206 @@ $front-page-bg-header: 50vh;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
height: 15vh;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
|
||||
&:before {
|
||||
border-right: 60vw solid transparent;
|
||||
border-top: 15vh solid $page-bg;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.top-header-contents {
|
||||
color: $white;
|
||||
height: 10vh;
|
||||
padding: 2.5vh;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 110;
|
||||
|
||||
h3 {
|
||||
.top-content {
|
||||
color: $white;
|
||||
font-family: 'Catamaran', sans-serif;
|
||||
font-size: 1.8em;
|
||||
font-weight: 800;
|
||||
line-height: 1em;
|
||||
margin: 0;
|
||||
padding-top: 35vh;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 90px;
|
||||
font-weight: 300;
|
||||
line-height: 1.1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
line-height: 1.1em;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
a {
|
||||
color: $header-link-color;
|
||||
text-decoration: none;
|
||||
$top-layer-effect: rgba(0, 0, 0, .15);
|
||||
$layer-effect: #eee;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
.hidden-content {
|
||||
margin: auto;
|
||||
margin-top: 10vh;
|
||||
max-width: 1140px;
|
||||
transition: translateZ(0);
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
.cv-box {
|
||||
background: $white;
|
||||
box-shadow:
|
||||
// Top layer
|
||||
0 1px 1px $top-layer-effect,
|
||||
// Second layer
|
||||
0 10px 0 -5px $layer-effect,
|
||||
// Second layer shadow
|
||||
0 10px 1px -4px $top-layer-effect,
|
||||
// Third layer
|
||||
0 20px 0 -10px $layer-effect,
|
||||
// Third layer shadow
|
||||
0 20px 1px -9px $top-layer-effect;
|
||||
padding: 30px;
|
||||
transition: translateZ(0);
|
||||
|
||||
p {
|
||||
font-size: .9em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
color: $subtext-color;
|
||||
display: block;
|
||||
font-size: .8em;
|
||||
line-height: 1.3em;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.languages {
|
||||
p {
|
||||
font-size: .8em;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
font-family: 'Catamaran', sans-serif;
|
||||
font-size: .8em;
|
||||
.profile {
|
||||
h6 {
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
margin: 1em 0 .4em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .8em;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
clear: both;
|
||||
margin-top: 5vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.small-footer {
|
||||
color: $subtext-color;
|
||||
}
|
||||
|
||||
.links {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-size: 16px;
|
||||
height: 22px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
float: left;
|
||||
margin: 0 20px 20px 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
line-height: 3rem;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
$tag-bg: rgba(255, 255, 255, .3);
|
||||
|
||||
.tags {
|
||||
color: $white;
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
|
||||
line-height: 1.1em;
|
||||
margin-top: 10vh;
|
||||
text-align: center;
|
||||
|
||||
small {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
background: $tag-bg;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
line-height: 1.5em;
|
||||
margin: 0 .5vw;
|
||||
padding: 4px 10px;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-top-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-header-animate {
|
||||
display: none;
|
||||
.profile-picture {
|
||||
border-radius: 48px;
|
||||
height: 96px;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
|
||||
Reference in New Issue
Block a user