Dennis/dennispotter-cv
1
0
Fork 0
Code Issues 4 Pull Requests Releases Activity

Updated landing page. New background, changed mono space font to Hack, added different animation of text

Browse Source
This commit is contained in:
Dennis Potter
2018-07-15 11:47:47 +02:00
committed by Dennis Potter
parent c2a76c5f5f
commit 6bf3f69fe6
6 changed files with 119 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/fonts.css
View File

@@ -1,33 +1,13 @@
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
/*
* Monosans
* Hack
================================================================================ */
@font-face {
font-family: 'Space Mono';
font-style: normal;
font-weight: 400;
src: url('../fonts/monosans/space-mono-v2-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Space Mono'), local('SpaceMono-Regular'),
url('fonts/monosans/space-mono-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/monosans/space-mono-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/monosans/space-mono-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/monosans/space-mono-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/monosans/space-mono-v2-latin-regular.svg#SpaceMono') format('svg'); /* Legacy iOS */
}
/*
* DroidSans
================================================================================ */
@font-face {
font-family: 'droid_sans_monoregular';
src: url('fonts/DroidFonts/DroidSansMono-webfont.eot');
src: url('fonts/DroidFonts/DroidSansMono-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/DroidFonts/DroidSansMono-webfont.woff') format('woff'),
url('fonts/DroidFonts/DroidSansMono-webfont.ttf') format('truetype'),
url('fonts/DroidFonts/DroidSansMono-webfont.svg#droid_sans_monoregular') format('svg');
font-family: 'hackregular';
src: url('fonts/hack/Hack-Regular-webfont.woff2') format('woff2'),
url('fonts/hack/Hack-Regular-webfont.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
/*

114
css/layout.css Normal file → Executable file
View File

@@ -24,56 +24,36 @@
body { background: #0f0f0f; }
.icon-down-circle {
opacity: 0;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
.icon-down-circle.load {
opacity: 1;
}
/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */
#header-hi {
float: left;
color: #11ABB0;
#header-eng-div p {
opacity: 0;
-webkit-transition: opacity 1.5s ease-in;
-moz-transition: opacity 1.5s ease-in;
-ms-transition: opacity 1.5s ease-in;
-o-transition: opacity 1.5s ease-in;
transition: opacity 1.5s ease-in;
}
#header-eng {
float: left;
display: none;
color: #11ABB0;
#header-eng-div p.load {
opacity: 1;
}
#header-scr {
float: left;
color: #11ABB0;
display: none;
}
#header-empt {
float: left;
color: #11ABB0;
display: none;
}
#header-hi-div {
}
@media (max-width: 768px) {
#header-eng-div {
word-break: break-all;
}
#header-scr-div {
word-break: break-all;
}
}
#header-eng-div {
margin-top: 4px;
}
#header-scr-div {
margin-top: 4px;
}
#header-empt-div {
margin-top: 4px;
}
header {
position: relative;
height: 800px;
@@ -105,29 +85,30 @@ header .banner {
header .banner-text { width: 100%; }
header .banner-text h1 {
font: 60px/1.1em 'droid_sans_monoregular', monospace;
color: #fff;
font: 100px/1.1em 'hackregular', monospace;
color: #303030;
letter-spacing: -2px;
margin: 0 auto 18px auto;
text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
text-align: left;
vertical-align: top;
min-height: 270px;
margin: 500px auto 50px auto;
text-align: center;
vertical-align: center;
min-height: 20px;
width: 100%;
font-weight: bold;
}
header .banner-text a, a:visited{ color: #FFFFFF; }
header .banner-text a:hover{ color: #11ABB0; }
header .banner-text h3 {
font: 18px/1.9em 'librebaskerville-regular', serif;
color: #A8A8A8;
margin: 0 auto;
width: 70%;
text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
font: 40px/1.1em 'hackregular', monospace;
color: #606060;
margin: 0 auto 50px auto;
width: 100%;
text-align: center;
vertical-align: center;
}
header .banner-text h3 span,
header .banner-text h3 a {
color: #fff;
color: #606060;
}
header .banner-text hr {
width: 60%;
@@ -138,17 +119,29 @@ header .banner-text hr {
/* header social links */
header .social {
opacity: 0;
margin: 24px 0;
padding: 0;
font-size: 30px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, .8);
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
header .social li {
display: inline-block;
text-align: center;
margin: 0 15px;
padding: 0;
}
header .social li a { color: #fff; }
header .social.load {
opacity: 1;
}
header .social li a { color: #606060; }
header .social li a:hover { color: #11ABB0; }
/* scrolldown link */
@@ -157,13 +150,12 @@ header .scrolldown a {
bottom: 30px;
left: 50%;
margin-left: -29px;
color: #fff;
color: #606060;
display: block;
height: 42px;
width: 42px;
font-size: 42px;
line-height: 42px;
color: #fff;
border-radius: 100%;
-webkit-transition: all .3s ease-in-out;
@@ -223,7 +215,7 @@ ul#nav li a {
line-height: 32px;
text-decoration: none;
text-align: left;
color: #fff;
color: #606060;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
@@ -1020,7 +1012,7 @@ call-to-action .button {
#contact-pgp {
float: left;
margin-left: 7px;
font:20px/1.1em 'droid_sans_monoregular', monospace;
font:20px/1.1em 'hackregular', monospace;
margin-top: -4px;
}

58
css/media-queries.css
View File

@@ -14,9 +14,15 @@
/* header styles
------------------------------------------------------------------ */
header .banner-text h1 {
font: 80px/1.1em 'DroidSansMono', monospace;
letter-spacing: -1px;
margin: 0 auto 12px auto;
font: 100px/1.1em 'hackregular', monospace;
margin: 150px auto 30px auto;
letter-spacing: -1px;
font-weight: bold;
}
header .banner-text h3 {
font: 17px/1.9em 'hackregular', monospace;
margin: 0 auto 30px auto;
width: 100%;
}
}
@@ -29,12 +35,15 @@
------------------------------------------------------------------ */
header .banner { padding-bottom: 12px; }
header .banner-text h1 {
font: 78px/1.1em 'DroidSansMono', monospace;
font: 100px/1.1em 'hackregular', monospace;
margin: 45px auto 30px auto;
letter-spacing: -1px;
font-weight: bold;
}
header .banner-text h3 {
font: 17px/1.9em 'librebaskerville-regular', serif;
width: 80%;
font: 17px/1.9em 'hackregular', monospace;
margin: 0 auto 30px auto;
width: 100%;
}
header .banner-text hr {
width: 65%;
@@ -112,7 +121,7 @@
width: 48px;
height: 48px;
text-align: left;
background-color: #11ABB0;
background-color: #303030;
position: relative;
border: none;
float: right;
@@ -191,9 +200,13 @@
padding-bottom: 12px;
padding-top: 6px;
}
header .banner-text h1 { font: 68px/1.1em 'DroidSansMono', monospace; }
header .banner-text h3 {
font: 16px/1.9em 'librebaskerville-regular', serif;
header .banner-text h1 {
font: 68px/1.1em 'hackregular', monospace;
margin: 0 auto 30px auto;
}
header .banner-text h3 {
font: 16px/1.0em 'hackregular', monospace;
margin: 0 auto 30px auto;
width: 85%;
}
header .banner-text hr {
@@ -351,13 +364,14 @@
-------------------------------------------------------------------- */
header .banner { padding-top: 24px; }
header .banner-text h1 {
font: 25px/1.1em 'DroidSansMono', monospace;
margin: 0 auto 24px auto;
min-height: 230px;
margin-top: 20px;
font: 65px/1.1em 'hackregular', monospace;
margin: 175px auto 30px auto;
min-height: 20px;
font-weight: bold;
}
header .banner-text h3 {
font: 14px/1.9em 'librebaskerville-regular', sans-serif;
font: 14px/1.2em 'hackregular', monospace;
margin: 0 auto 30px auto;
width: 90%;
}
@@ -373,17 +387,3 @@
footer .social-links li { margin-left: 14px; }
}
@media only screen and (max-width: 400px) {
header .banner-text h1 {
min-height: 160px;
}
}