cosmetics

1 files changed, 93 insertions, 36 deletions

diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 723b0f08..b9ae0a4f 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -11,10 +11,11 @@ html, body {
 html {
   background: #181818;
 }
-
+a {outline : none;}
+img {border : 0;}
 .content {
   opacity: 0;
-  transition: opacity 0.2s cubic-bezier(0,1,1,1);
+  transition: opacity 0.1s cubic-bezier(0,1,1,1);
 }
 html.desktop .content,
 html.mobile .content {
@@ -48,16 +49,28 @@ header .logo {
   background-image: url(../img/megapixels_logo_white.svg);
   background-size: contain;
   background-repeat: no-repeat;
-  margin-top: 7px;
-  margin-right: 10px;
-  width: 39px;
-  height: 30px;
+  margin-top: 0px;
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
 }
 header .site_name {
   font-family: 'Roboto', sans-serif;
-  font-weight: bold;
+  font-weight: 600;
+  text-transform: uppercase;;
   color: #fff;
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 12px;
+  letter-spacing: 4px;
+}
+header .site_name.splash{
+ font-size: 20px; 
+ line-height: 20px;
+ font-weight: 400;
+}
+header .links{
+  font-size: 18px;
+  line-height: 18px;
 }
 header .sub {
   margin-left: 4px;
@@ -82,25 +95,30 @@ header .links {
 header .links span,
 header .links a {
   display: block;
-  color: #777;
+  color: #d7ba5a;
   text-decoration: none;
   text-transform: uppercase;
   margin-right: 32px;
-  transition: color 0.1s cubic-bezier(0,0,1,1), border-color 0.1s cubic-bezier(0,0,1,1);
+  transition: color 0.1s cubic-bezier(0,0,1,1), border-color 0.05s cubic-bezier(0,0,1,1);
   border-bottom: 1px solid rgba(255,255,255,0);
   padding: 3px;
-  font-weight: 500;
+  font-weight: 400;
 }
 header .links a.active {
-  color: #bbb;
+  color: #f3c266;
+  border-bottom: 1px solid rgba(240,200,150,255);
 }
 .desktop header .links a:hover {
-  color: #fff;
-  border-bottom: 1px solid rgba(255,255,255,255);
+  color: #e9bb5f;
+  border-bottom: 1px solid rgba(240,200,150,255);
 }
 .desktop header .links a.active:hover {
-  color: #fff;
-  border-bottom: 1px solid rgba(255,255,255,255);
+  color: #e9bb5f;
+  border-bottom: 1px solid rgba(240,200,150,255);
+}
+header .links.splash{
+  font-size:22px;
+  font-weight: 400;
 }
 
 /* footer */
@@ -129,7 +147,7 @@ footer > div:nth-child(2) {
 footer a {
   display: inline-block;
   color: #888;
-  transition: color 0.2s cubic-bezier(0,0,1,1);
+  transition: color 0.1s cubic-bezier(0,0,1,1);
   margin-right: 5px;
 }
 footer a:hover {
@@ -144,7 +162,7 @@ h1 {
   font-size: 28pt;
   margin: 75px 0 10px;
   padding: 0;
-  transition: color 0.2s cubic-bezier(0,0,1,1);
+  transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto';
 }
 h2 {
@@ -153,15 +171,15 @@ h2 {
   font-size: 28pt;
   margin: 20px 0 10px;
   padding: 0;
-  transition: color 0.2s cubic-bezier(0,0,1,1);
+  transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto';
 }
 h3 {
   margin: 0 0 20px 0;
   padding: 20px 0 0 0;
-  font-size: 16pt;
+  font-size: 18pt;
   font-weight: 500;
-  transition: color 0.2s cubic-bezier(0,0,1,1);
+  transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto';
 }
 h4 {
@@ -169,7 +187,7 @@ h4 {
   padding: 0;
   font-size: 11pt;
   font-weight: 500;
-  transition: color 0.2s cubic-bezier(0,0,1,1);
+  transition: color 0.1s cubic-bezier(0,0,1,1);
   font-family: 'Roboto';
 }
 .content h3 a {
@@ -206,7 +224,7 @@ th, .gray {
 /* content */
 
 .content {
-  padding-top: 45px;
+  padding-top: 28px;
   padding-bottom: 100px;
   min-height: calc(100vh - 55px);
   line-height: 1.5;
@@ -227,7 +245,7 @@ section {
   line-height: 36px;
 }
 p {
-  margin: 0 0 20px 0;
+  margin: 0 10px 20px 0;
   line-height: 2;
   font-size: 16px;
   font-weight: 300;
@@ -236,7 +254,7 @@ p {
   color: #fff;
   text-decoration: none;
   border-bottom: 1px dashed;
-  transition: color 0.2s cubic-bezier(0,0,1,1);
+  transition: color 0.1s cubic-bezier(0,0,1,1);
 }
 .desktop .content a:hover {
   color: #fff;
@@ -278,7 +296,7 @@ p {
   padding-top: 10px;
   padding-right: 20px;
   margin-right: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 30px;
   /*border-right: 1px solid #444;*/
   font-family: 'Roboto';
   font-size: 14px;
@@ -386,7 +404,7 @@ section img {
   margin: 0 auto;
 }
 section .image {
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }
 section.images {
   display: flex;
@@ -440,12 +458,20 @@ section.fullwidth .image {
 }
 .caption {
   text-align: left;
-  font-size: 9pt;
+  font-size: 10pt;
   color: #999;
   max-width: 960px;
   margin: 10px auto 10px auto;
   font-family: 'Roboto';
 }
+.caption a{
+  color:#ccc;
+  border: 0;
+}
+.caption a:hover{
+  color:#fff;
+  border: 0;
+}
 .sideimage {
   margin: 0px 0 40px 0;
   display: flex;
@@ -595,8 +621,8 @@ section.fullwidth .image {
   height: 140px;
   padding: 10px;
   color: white;
-  font-weight: 300;
-  font-family: 'Roboto Mono'
+  font-weight: 400;
+  font-family: 'Roboto'
 }
 .desktop .content .dataset-list a{
   border:none;
@@ -649,13 +675,19 @@ section.intro_section {
   font-size: 17px;
   line-height: 36px;
   max-width: 680px;
-  font-weight: 400;
+  font-weight: 300;
   color: #ddd;
 }
-.intro_section div > span {
-  box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818;
+.intro_section .hero_desc .bgpad {
+  box-shadow: -7px -7px #181818, 7px -7px #181818, 7px 7px #181818, -7px 7px #181818;
   background: #181818;
 }
+.intro_section .hero_subdesc .bgpad {
+  box-shadow: -8px -8px #181818, 8px -8px #181818, 8px 8px #181818, -8px 8px #181818;
+  background: #181818;
+}
+
+
 .firefox .intro_section div > span {
   box-decoration-break: clone;
 }
@@ -670,6 +702,29 @@ page-specific formatting
   margin-bottom: 10px
 }
 
+.hr-wave-holder {
+  /* Clip edges, as some of the lines don't terminate nicely. */
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 50px;
+    margin-top:100px;
+}
+
+.hr-wave-line1 {
+    background: linear-gradient(45deg, transparent, transparent 49%, #fff 49%, transparent 51%);
+}
+.hr-wave-line2 {
+    background: linear-gradient(-45deg, transparent, transparent 49%, #fff 49%, transparent 51%);
+}
+.hr-wave-line {
+    background-size: 20px 20px;
+    position: absolute;
+    width: 100%;
+    height: 10px;
+}
+
+
 /* map */
 
 .map-legend-item{
@@ -693,14 +748,16 @@ page-specific formatting
 }
 .content-about .about-menu ul li{
   display:inline-block;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
-  margin-right: 5px;
+  margin-right: 8px;
   text-transform: uppercase;
-  margin-right: 15px
+  margin-right: 15px;
+  font-family: 'Roboto';
 }
 .content-about .about-menu ul li a{
   border-bottom: 0;
+  color:#aaa;
 }