diff --git a/css/fonts.css b/css/fonts.css index a57dbd1..3972eff 100755 --- a/css/fonts.css +++ b/css/fonts.css @@ -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; + } /* diff --git a/css/layout.css b/css/layout.css old mode 100644 new mode 100755 index f5e09f7..ec3567b --- a/css/layout.css +++ b/css/layout.css @@ -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; } diff --git a/css/media-queries.css b/css/media-queries.css index ff9523c..272b8bc 100755 --- a/css/media-queries.css +++ b/css/media-queries.css @@ -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; -} -} - - - - - - - - diff --git a/images/header-background.jpg b/images/header-background.jpg old mode 100644 new mode 100755 index 6490b00..421aac3 Binary files a/images/header-background.jpg and b/images/header-background.jpg differ diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 85265b6..8ca62c6 --- a/index.html +++ b/index.html @@ -58,25 +58,17 @@