website-remake (#85)

Reviewed-on: #85
Co-authored-by: antilopa <antilopa@disroot.org>
Co-committed-by: antilopa <antilopa@disroot.org>

css/defaults.css

@@ -344,14 +344,15 @@ a, a:visited {
    -o-transition: color .3s ease-in-out;
    transition: color .3s ease-in-out;
 }
-a:hover, a:focus { color: #438f93; }
+a:hover, a:focus { color: var(--link); }
 p a, p a:visited { line-height: inherit; }
 
 
 a.lighter, a.lighter:visited {
    text-decoration: none;
    outline: 0;
-   color: #8EB726;
+   color: var(--link);  #8EB726;
+   /*background-color: var(--highlight);*/
 
    -webkit-transition: color .3s ease-in-out;
    -moz-transition: color .3s ease-in-out;
@@ -361,6 +362,10 @@ a.lighter, a.lighter:visited {
 
 a.lighter:hover, a.lighter:focus { color: #50162D; }
 
+/* colors */
+
+.highlight { color: var(--highlight); }
+
 /* Lists */
 
 ul, ol { margin-bottom: 24px; margin-top: 12px; }

css/style.css

@@ -22,6 +22,13 @@ Disroot Main style Sheet
 /* General
 ------------------------------------*/
 
+:root{
+  --main: #50162D;
+  --secondary: #1F5C60;
+  --highlight: #C2CFB7;
+  --link: #B9A2AB;
+}
+
 body { background: #fff; color: #555;}
 
 /* Header
@@ -29,10 +36,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 +88,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 +225,21 @@ figcaption {
 
 .miniheader {
     position: relative;
-    height: 100vh;
-    min-height: 400px;
+    height: 50vh;
     width: 100%;
 }
 
 .miniheader-img {
     position: fixed;
-    height: 100vh;
-    min-height: 400px;
+    height: 50vh;
+    min-height: 200px;
     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 +265,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%;
@@ -460,8 +468,8 @@ ul.dropdown-content a{
 
 .language-selector .btn i {
     position: absolute;
-    top: 20px;
-    right: 15px;
+    top: 20px;  
+    right: 15px;  
 }
 
 .language-selector .dropdown-menu {
@@ -474,7 +482,7 @@ ul.dropdown-content a{
 }
 
 .language-selector .dropdown-menu li:hover {
-    background-color: #8EB726;
+    background-color: var(--highlight);
 }
 
 .language-selector .dropdown-menu>li>a {
@@ -528,15 +536,21 @@ ul#nav li a:hover .ul#nav li ul {
 
 .two-col {
    width: 100%;
-   padding-top: 80px;
-   padding-bottom: 20px;
+   padding-top: 150px;
+   padding-bottom: 30px;
    overflow: hidden;
-   transform: skew(0deg, -1deg) translateY(-40px);
+/*   transform: perspective(2500px) rotateY(-45deg) scale(2.1,1.1) translateX(-500px); */
+   transform: skew(0deg, -3deg) translateY(-100px);
    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 +575,7 @@ ul#nav li a:hover .ul#nav li ul {
     margin-left: 8%;
 }
 
+
 /* three-col */
 
 .three-col {
@@ -588,11 +603,11 @@ ul#nav li a:hover .ul#nav li ul {
 /* fullbar */
 
 .fullbar {
-    padding: 40px 0px;
+    padding: 40px 0px 110px;
     text-align: center;
-    transform: skew(0deg, 1deg) translateY(-20px);
-    margin-top: -60px;
-    margin-bottom: 0px;
+    transform: skew(0deg, 3deg) translateY(45px);
+    margin-top: -300px;
+    margin-bottom: 50px;
     position: relative;
     z-index: 9;
 
@@ -603,8 +618,7 @@ ul#nav li a:hover .ul#nav li ul {
     display: inline-block;
     vertical-align: middle;
     margin: 0 auto;
-    padding-bottom: 30px;
-    transform: skew(0deg, -1deg) translateY(0px);
+    transform: skew(0deg, -3deg) translateY(-50px);
 }
 
 .fullbar h1, .fullbar h2, .fullbar h3, .fullbar h4, .fullbar h5, .fullbar h6{
@@ -725,6 +739,7 @@ ul#nav li a:hover .ul#nav li ul {
 	justify-content: left;
 	-webkit-align-items: flex-start;
 	align-items: flex-start;
+  padding-bottom: 100px;
 }
 
 .client-item {
@@ -732,32 +747,38 @@ ul#nav li a:hover .ul#nav li ul {
   width: 20% !important;
   min-width: 200px;
   min-height: 180px;
+  border-radius: 50%;
   border: none;
-  box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
+  /*box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);*/
   margin: 2%;
-  background-color: #ffffff;
+  /*background-color: var(--secondary);*/
   text-align: center;
 }
 
 .client-item h3 {
   line-height: 1.2;
   text-align: center;
+
 }
 
 .clients img {
   width: 70%;
-  filter: grayscale(100%);
+  mix-blend-mode: screen;
 }
 
-.clients img:hover {
-  filter: grayscale(30%);
+.client-item:hover img {
+  filter: grayscale(70%);
 }
 
+/*.clients h6, .clients i {
+  color: var(--main);
+}*/
+
 .clients h6, .clients i:first-of-type {
   display: inline-block;
-  margin: 0 0 0 2%;
+  margin: 0 0 0 3%;
   padding: 0;
-  font-size: 60%;
+  font-size: 100%;
 }
 
 .tooltiptext {
@@ -1165,7 +1186,6 @@ textarea {
 
 footer {
    background-color: #50162D;
-   color: #FFFFFF;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;

templates/modular/2col.html.twig

@@ -1,5 +1,5 @@
 <div class="two-col" style="background-color:{{ page.header.bgcolor }};">
-<div class="two-col-content" style="color:{{ page.header.fontcolor }}; text-align:{{ page.header.text_align }}; word-wrap: break-word;" >
+<div class="two-col-content" style="color:{{ page.header.fontcolor }}; {% if page.header.padding %} padding:{{ page.header.padding }}; {% endif %}; {% if page.header.margin %} margin:{{ page.header.margin }} auto; {% endif %}; text-align:{{ page.header.text_align }}; word-wrap: break-word;" >
 
 {% block content %}
 

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 %}