<style> #title-text {
display: none !important;} @import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css?family=bitter");
/*---------------------------- BASICS ----------------------------*/
@viewport {
zoom: 1;
width: extend-to-zoom;
}
body {
background-color: #feffff;
}
@supports (background-attachment: fixed) {
.frontpage {
background: #9aa1a7;
}
}
.frontpage {
font-size: 16px;
font-size: 1rem;
font-family: "Open Sans", "Lucida Sans Unicode", "Lucida Grande", Geneva,
Arial, sans-serif;
}
li {
list-style-type: none;
}
.screenreader-text {
display: block; /*screen reader hack by zeldman:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/*/
height: 1px;
width: 1px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
/*---------------------------- STYLING CSS ----------------------------*/
.frontpage {
background: #f8f9fa;
color: #fbfbfb;
background: linear-gradient(to bottom, #ffffff, #ffffff);
background: right center no-repeat fixed url(https://puu.sh/yQSxu.jpg);
position: relative;
overflow-y: hidden;
}
.container {
display: -ms-grid;
display: grid;
width: 600px;
margin-left: auto;
margin-right: auto;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
grid-template-areas:
"h"
"c"
"f";
}
.site-header {
grid-column: 1 / -1; /*equals to grid-column-starts: 1 and grid-column-ends: -1;
-1 value is to make sure that header will always be positioned at the first row */
grid-area: h;
display: -ms-grid;
display: grid;
grid-template-columns: 216px auto;
grid-template-rows: 1fr;
grid-gap: 0px;
}
.site-content {
grid-column: 2 / -1;
grid-area: c;
display: -ms-grid;
display: grid;
grid-template-columns: 420px auto;
grid-template-rows: 1fr;
grid-gap: 0px;
}
.hero-content {
padding: 0px 0;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "ht .";
}
.hero-text {
grid-area: ht;
display: block;
}
.hero-author {
color: #a4a6a9;
font-style: normal;
font-size: 12px;
font-size: 0.75rem;
}
.hero-title {
margin-top: 10px;
font-size: 36px;
font-size: 2.25rem;
line-height: 1.5;
color: #363636;
font-family: LATO;
}
.hero-description {
font-size: 16px;
font-size: 1rem;
color: #363636;
font-family: LATO;
}
.hero-button {
grid-area: ht;
margin-top: 70px;
/*display: block;*/
text-align: left;
display: -ms-grid;
display: grid;
grid-template-columns: auto 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
grid-template-areas: "sb cb";
}
.hero-button a:nth-of-type(1) {
grid-area: sb;
}
.hero-button a:nth-of-type(2) {
grid-area: cb;
}
.hero-button a {
display: inline-block;
width: 110px;
padding: 10px 0;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.hero-button a.skip:hover {
background-color: #a4a6a9;
background-color: transparent;
color: #0397e9;
border: 1px #a4a6a9 solid;
}
.hero-button a.skip {
background-color: #0397e9;
color: #fbfbfb;
border: 1px #0397e9 solid;
border-radius: 50px;
/*margin-right: 20px;*/
}
.hero-button a.continue:hover {
background-color: #eeeeee;
color: #0397e9;
border: 1px solid #eeeeee;
}
.hero-button a.continue {
background-color: transparent;
color: #0397e9;
border: 1px #0397e9 solid;
border-radius: 50px;
}
.site-footer {
grid-column: 1 / -1;
grid-area: f;
}
.logo {
width: 216px;
height: auto;
}
.logo-img {
width: inherit;
height: inherit;
}
.menu {
display: inline-block;
}
.menu-link {
margin: 0;
padding: 0;
}
.menu-link li {
display: inline-block;
}
/*---------------------------- MEDIA QUERIES ----------------------------*/
@media screen and (max-width: 992px) {
.frontpage {
padding: 64px;
padding: 4rem;
}
}
@media screen and (max-width: 768px) {
.frontpage {
padding: 48px;
padding: 3rem;
}
}
@media screen and (max-width: 576px) {
.site-content {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 480px) {
.site-content {
grid-template-columns: 1fr;
}
.frontpage {
padding: 32px;
padding: 2rem;
}
.hero-content {
padding: 60px 0;
}
.hero-button a {
font-size: 16px;
font-size: 1rem;
width: 100%;
}
.hero-button {
margin-top: 60px;
grid-template-columns: repeat(2, 1fr);
text-align: left;
}
}
@media screen and (max-width: 320px) {
.frontpage {
padding: 24px;
padding: 1.5rem;
}
.hero-content {
padding: 40px 0;
}
.site-content {
grid-template-columns: 1fr;
}
.hero-button {
margin-top: 30px;
text-align: center;
grid-template-columns: 1fr;
grid-template-rows: 50px 50px;
grid-gap: 10px;
grid-template-areas:
"sb"
"cb";
}
.hero-button a.skip {
margin: auto;
grid-area: sb;
}
.hero-button a {
width: 100%;
display: block;
margin: auto;
}
.hero-title {
font-size: 28px;
font-size: 1.75rem;
}
}
/*---------------------------- SUPPORTS ----------------------------*/
@supports (grid-gap: 10px) {
.hero-button {
margin-top: 10px;
}
}
</style> |