colors and spacing

css/style.css

@@ -22,6 +22,12 @@ Disroot Main style Sheet
 /* General
 ------------------------------------*/
 
+:root{
+  --main: #50162D;
+  --secondary: #1F5C60;
+  --highlight: #C2CFB7;
+}
+
 body { background: #fff; color: #555;}
 
 /* Header
@@ -29,10 +35,10 @@ body { background: #fff; color: #555;}
 
 header {
    position: relative;
-   height: 100vh;
+   height: 70vh;
    min-height: 400px;
    width: 100%;
-   background: #161415 url(../images/header-background.jpg)  no-repeat center center;
+   background: #fff url(../images/header-background.png)  no-repeat top center;
   /* background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)  ), url(../images/adm.png) no-repeat center center;*/
   /*background: #161415 url(../images/fuckoffgoogle3.jpeg)  no-repeat center center;
   */
@@ -81,8 +87,8 @@ header {
 
 .aliaschallenge-header .miniheader-img {
   background-position: right top;
-  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
-    filter: grayscale(0%);
+  /*-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
+  /*  filter: grayscale(0%);*/
 }
 
 .domains .framed {
@@ -218,22 +224,21 @@ figcaption {
 
 .miniheader {
     position: relative;
-    height: 100vh;
-    min-height: 400px;
+    height: 50vh;
     width: 100%;
 }
 
 .miniheader-img {
     position: fixed;
-    height: 100vh;
+    height: 50vh;
     min-height: 400px;
     width: 100%;
     background-position: right bottom;
     background-size: cover !important;
     -webkit-background-size: cover !important;
     -o-background-size: cover;
-    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
-    filter: grayscale(100%);
+   /* -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+   /* filter: grayscale(100%);*/
     text-align: center;
     overflow: hidden;
     z-index: -999;
@@ -259,21 +264,23 @@ header .banner {
 header .banner-text { width: 100%; }
 header .banner-text h1 {
    font: 90px/1.1em 'opensans-bold', sans-serif;
-   color: #fff;
+   color: var(--main);
    letter-spacing: -2px;
    margin: 0 auto 18px auto;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
 }
 header .banner-text h3 {
    font: 18px/1.9em 'librebaskerville-regular', serif;
-   color: #A8A8A8;
+   color: var(--main);
+   background-color: var(--highlight);
+   transform: rotate(-4deg) translateY(-0px);
    margin: 0 auto;
    width: 80%;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
 }
 header .banner-text h3 span,
 header .banner-text h3 a {
-   color: #fff;
+   color: var(--main);
 }
 header .banner-text hr {
    width: 60%;
@@ -528,15 +535,20 @@ ul#nav li a:hover .ul#nav li ul {
 
 .two-col {
    width: 100%;
-   padding-top: 80px;
-   padding-bottom: 20px;
+   padding-top: 110px;
+   padding-bottom: 30px;
    overflow: hidden;
-   transform: skew(0deg, -1deg) translateY(-40px);
+   transform: skew(0deg, -3deg) translateY(-60px);
    margin-top: -40px;
+   position:relative;
+}
+
+.two-col .columns {
+  padding: 0 40px;
 }
 
 .two-col .row {
-  transform: skew(0deg, 2deg) translateY(0px);
+  transform: skew(0deg, 6deg) translateY(0px);
 }
 
 .two-col h1, .two-col h2, .two-col h3, .two-col h4, .two-col h5, .two-col h6 {
@@ -561,6 +573,7 @@ ul#nav li a:hover .ul#nav li ul {
     margin-left: 8%;
 }
 
+
 /* three-col */
 
 .three-col {
@@ -588,11 +601,11 @@ ul#nav li a:hover .ul#nav li ul {
 /* fullbar */
 
 .fullbar {
-    padding: 40px 0px;
+    padding: 40px 0px 100px;
     text-align: center;
-    transform: skew(0deg, 1deg) translateY(-20px);
-    margin-top: -60px;
-    margin-bottom: 0px;
+    transform: skew(0deg, 3deg) translateY(45px);
+    margin-top: -200px;
+    margin-bottom: 50px;
     position: relative;
     z-index: 9;
 
@@ -604,7 +617,7 @@ ul#nav li a:hover .ul#nav li ul {
     vertical-align: middle;
     margin: 0 auto;
     padding-bottom: 30px;
-    transform: skew(0deg, -1deg) translateY(0px);
+    transform: skew(0deg, -3deg) translateY(0px);
 }
 
 .fullbar h1, .fullbar h2, .fullbar h3, .fullbar h4, .fullbar h5, .fullbar h6{
@@ -1165,7 +1178,6 @@ textarea {
 
 footer {
    background-color: #50162D;
-   color: #FFFFFF;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;

templates/partials/mini-header.html.twig

@@ -3,7 +3,7 @@
 </div>
 {% else %}
 <div id="miniheader" class="miniheader {{ page.slug }}-header">
-<div class="miniheader-img" style="background:url({{ page.url }}/{{ page.header.header_image }}) top center no-repeat fixed; ">
+<div class="miniheader-img" style="background:url({{ page.url }}/{{ page.header.header_image }}) bottom right no-repeat fixed; ">
 </div>
 {% endif %}