You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

573 lines
40 KiB
CSS

6 years ago
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
max-height: 100%; }
*:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit; }
body {
color: #3a4145;
font-family: 'Lato', sans-serif;
font-size: 1.8rem;
height: 100%;
letter-spacing: .01rem;
line-height: 1.75em;
max-height: 100%; }
body .post-title:not(.post-template) {
font-size: 3.6rem; }
body.page-template .post-title {
font-size: 5rem; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Catamaran', sans-serif;
line-height: 1.2em;
margin: 1.8em 0 0.5em; }
a {
color: #4a4a4a;
-webkit-transition: color .3s ease;
transition: color .3s ease; }
a:hover {
color: #111; }
.site-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
/**
* ===================
* FRONTPAGE DESIGN
* ===================
*/
.header-bg {
background: url("../img/bg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 120vh;
position: relative;
width: 100%; }
@media only screen and (max-width: 767px) {
.header-bg {
height: 110vh; } }
.header-overlay {
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(85%, #3498db));
background: linear-gradient(180deg, transparent, #3498db 85%);
height: 120vh;
left: 0;
opacity: 1;
position: absolute;
right: 0;
top: 0; }
@media only screen and (max-width: 767px) {
.header-overlay {
height: 110vh; } }
.below-header {
background: #3498db;
position: relative; }
.below-header:before {
border-bottom: 2px solid #fff;
border-right: 130vw solid #fff;
border-top: 30vh solid #3498db;
bottom: 0;
content: '';
position: absolute;
right: 0;
width: 0; }
.header-text {
height: auto;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 50; }
.header-text .top-content {
color: #fff;
padding: 35vh 10vw 0;
text-align: center; }
@media only screen and (max-width: 767px) {
.header-text .top-content {
padding: 15vh 5vh 0; } }
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.header-text .top-content {
padding: 25vh 8vh 0; } }
.header-text .top-content h1 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 5em;
font-weight: 300;
line-height: 1.1em;
margin: 0; }
@media only screen and (max-width: 767px) {
.header-text .top-content h1 {
font-size: 4em; } }
.header-text .top-content h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.33em;
font-weight: 300;
line-height: 1.1em;
margin-bottom: 10px;
margin-top: 20px; }
@media only screen and (max-width: 767px) {
.header-text .top-content h2 {
font-size: 1.2em; } }
.header-text .top-content h4 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
font-weight: 300;
line-height: 1.4em;
margin-top: 30px; }
@media only screen and (max-width: 767px) {
.header-text .top-content h4 {
font-size: .9em; } }
.header-text .top-content a {
margin-top: 60px; }
.header-text .hidden-content {
margin: auto;
margin-top: 10vh;
max-width: 1140px;
-webkit-transition: translateZ(0);
transition: translateZ(0);
width: 60vw; }
@media only screen and (max-width: 767px) {
.header-text .hidden-content {
width: 95vw; } }
@media only screen and (min-width: 1200px) and (max-width: 1765px) {
.header-text .hidden-content {
width: 80vw; } }
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.header-text .hidden-content {
width: 80vw; } }
.header-text .grid {
min-width: 0; }
@media only screen and (max-width: 767px) {
.header-text .grid {
margin: 0;
padding: 0; } }
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.header-text .grid .col-7-12 {
width: 100%; } }
@media only screen and (max-width: 767px) {
.header-text .grid .col-7-12 {
width: 100%; } }
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.header-text .grid .col-4-12 {
border-top: 2px dotted #3498db;
margin: 5vh 0 0;
padding-top: 5vh;
width: 100%; } }
@media only screen and (max-width: 767px) {
.header-text .grid .col-4-12 {
border-top: 2px dotted #3498db;
margin: 5vh 0 0;
padding-top: 5vh;
width: 100%; } }
.header-text .cv-box {
background: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
padding: 30px;
-webkit-transition: translateZ(0);
transition: translateZ(0); }
.header-text .cv-box p {
font-size: .9em;
line-height: 1.5em;
margin: 1em 0; }
.header-text .cv-box .right {
display: inline-block;
float: right; }
@media only screen and (max-width: 767px) {
.header-text .cv-box .right {
display: block;
font-size: .8em;
margin-bottom: 10px;
margin-top: -4px;
width: 100%; } }
.header-text .cv-box .subtext {
color: #666;
display: block;
font-size: .8em;
line-height: 1.3em;
width: 80%; }
.header-text .cv-box .languages p {
font-size: .8em;
line-height: 1.5em;
margin: 0;
padding: 0; }
.header-text .cv-box .profile h6 {
font-size: 1.2em;
font-weight: 300;
margin: 1em 0 .4em; }
.header-text .cv-box .profile p {
font-size: .8em;
line-height: 1.5em;
margin: 0;
padding: 0; }
.header-text .cv-box .profile .full-width {
clear: both;
margin-top: 5vh;
width: 100%; }
.header-text .cv-box .profile .small-footer {
color: #666; }
.header-text .cv-box .profile .links {
list-style-type: none;
margin-bottom: 2.2em;
padding: 0; }
.header-text .cv-box .profile .links li {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
line-height: 18px;
min-height: 22px;
padding: 2px 0 0; }
.header-text .cv-box .profile .links li a {
text-decoration: none; }
.header-text .cv-box .profile .links li a:hover {
text-decoration: underline; }
.header-text .cv-box .profile-picture {
float: left;
margin: 0 20px 20px 0; }
.header-text .cv-box h5 {
font-family: 'Lato', sans-serif;
font-size: 1.8rem;
font-weight: 600;
line-height: 3rem;
margin-bottom: 2vh; }
.header-text .cv-box h6 {
font-family: 'Lato', sans-serif;
font-size: 1.6rem;
line-height: 2rem; }
.header-text .tags {
color: #fff;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.1em;
margin-top: 10vh;
text-align: center; }
.header-text .tags small {
font-size: .8em; }
.header-text .tags ul {
line-height: 3em;
list-style: none;
margin: auto;
max-width: 30vw;
padding: 0; }
@media only screen and (min-width: 1200px) and (max-width: 1765px) {
.header-text .tags ul {
max-width: 50%; } }
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.header-text .tags ul {
max-width: 50%; } }
@media only screen and (max-width: 767px) {
.header-text .tags ul {
max-width: 80%; } }
.header-text .tags li {
background: rgba(255, 255, 255, 0.3);
border-radius: 5px;
display: inline-block;
font-size: 16px;
line-height: 1.5em;
margin: 0 .5vw;
padding: 4px 10px; }
.header-text .tags li:hover {
opacity: .8; }
.header-text .tags a {
color: #fff; }
.profile-picture {
border-radius: 48px;
height: 96px;
width: 96px; }
.main-header {
background: #3a4145 no-repeat center center;
background-size: cover;
display: table;
height: 100vh;
overflow: hidden;
position: relative;
text-align: center;
width: 100%; }
.main-header .inner {
width: 80%; }
/**
* =======================
* FRONT PAGE CONTENT
* =======================
*/
.scroll-down {
-webkit-animation: bounce 4s 2s infinite;
animation: bounce 4s 2s infinite;
color: rgba(255, 255, 255, 0.7);
display: block;
font-size: 24px;
height: 24px;
left: 50%;
margin-left: -12px;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: translateZ(0);
transition: translateZ(0);
width: 24px;
z-index: 100; }
@media only screen and (max-width: 767px) {
.scroll-down {
display: none; } }
.scroll-down:hover {
-webkit-animation: none;
animation: none;
color: #fff; }
.mobile-button {
background: #fff;
-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
color: #3498db;
display: none;
font-family: 'Source Sans Pro', sans-serif;
font-size: .9em;
line-height: 1.2em;
padding: .8em 2em;
width: auto; }
@media only screen and (max-width: 767px) {
.mobile-button {
display: inline-block; } }
.mobile-button:hover {
cursor: pointer; }
.blog-title {
border-bottom: 2px solid #3498db;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 1.3em;
font-weight: 300;
line-height: 1.7em;
padding: 0 .2em;
text-align: center; }
.blog-title-container {
text-align: center; }
.index-content {
margin-top: 0;
position: relative;
z-index: 52; }
.footer {
background: #3a4145;
min-height: 5vh; }
.footer .container {
color: #fff;
font-family: 'Lato', sans-serif;
font-size: .6em;
height: auto;
line-height: 1.8em;
padding: 2vh 0; }
@media only screen and (max-width: 767px) {
.footer .container {
text-align: center; } }
.footer .container a {
color: #fff;
text-decoration: none; }
.footer .container a:hover {
text-shadow: -0.2px -0.2px 0 #fff, 0.2px -0.2px 0 #fff, -0.2px 0.2px 0 #fff, 0.2px 0.2px 0 #fff;
-webkit-transition: all .5s;
transition: all .5s; }
.container {
height: auto;
margin: auto;
max-width: 1140px;
width: 60vw; }
@media only screen and (max-width: 767px) {
.container {
width: 90vw; } }
@media only screen and (min-width: 1200px) and (max-width: 1765px) {
.container {
width: 80vw; } }
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.container {
width: 80vw; } }
.container .right {
float: right; }
@media only screen and (max-width: 767px) {
.container .right {
display: block;
float: none; } }
/**
* =================
* DEFAULT PAGE DESIGN
* =================
*/
main {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1; }
.top-header {
background: #3498db;
height: auto; }
.top-header .container {
color: #fff;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.2em;
font-weight: 600;
line-height: 1.5em;
padding: 2vh 0; }
@media only screen and (max-width: 767px) {
.top-header .container {
text-align: center; } }
.top-header .container a {
color: #fff;
text-decoration: none; }
.top-header .container a:hover {
border-bottom: 2px solid #fff; }
.post {
border-bottom: #ebf2f6 1px solid;
margin: 4rem auto;
max-width: 710px;
padding-bottom: 4rem;
position: relative;
width: 80%;
word-wrap: break-word; }
.post-title {
line-height: 1.2em; }
.post-title a {
text-decoration: none; }
.post-excerpt p {
font-size: .9em;
line-height: 1.7em;
margin: 0; }
.read-more {
text-decoration: none; }
.post-meta {
color: #9eabb3;
display: block;
font-family: 'Lato', sans-serif;
font-size: 1.5rem;
line-height: 2.2rem;
margin: 1.75rem 0;
word-spacing: .2rem; }
.post-meta a {
color: #9eabb3;
text-decoration: none; }
.post-meta a:hover {
text-decoration: underline; }
.post-date {
border-left: #d5dbde 1px solid;
display: inline-block;
font-size: 1.3rem;
margin-left: 8px;
padding-left: 12px;
text-transform: uppercase;
white-space: nowrap; }
.author-thumb {
border-radius: 100%;
float: left;
height: 24px;
margin-right: 9px;
width: 24px; }
.author-profile {
margin-top: 5rem; }
.author-profile .author-image {
margin-top: 0;
margin-bottom: 20px; }
.author-image-cover {
margin-top: -100px; }
.user-meta {
min-height: 77px;
padding: .3rem 40px 0 100px;
position: relative; }
.user-image {
left: 0;
position: absolute;
top: 0; }
.user-name {
display: block;
font-weight: 700; }
.user-bio {
display: block;
font-size: 1.4rem;
line-height: 1.5rem;
max-width: 440px; }
.publish-meta {
padding: 4.3rem 0 4rem;
position: absolute;
right: 0;
text-align: right;
top: 0; }
.publish-heading {
display: block;
font-weight: 700; }
.publish-date {
display: block;
font-size: 1.4rem;
line-height: 1.5rem; }
.no-cover {
display: none; }
.page-title {
line-height: 1.2em; }
@media only screen and (max-width: 500px) {
.page-title {
text-align: center; } }
.page-title .description {
color: #9eabb3;
display: block;
font-size: .5em;
font-weight: 300; }
.main-header-content hr {
margin: 2em 0; }
.extra-pagination:after {
display: none; }
.color-cover {
background-color: #3498db; }
6 years ago
@media only screen and (max-width: 500px) {
.read-next {
margin-bottom: 0; } }
.read-next-story .post {
padding: 6rem; }
/*# sourceMappingURL=data:application/json;base64,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