From 63576a9180abd4378b69df21971416389086aec4 Mon Sep 17 00:00:00 2001
From: Thefeli73 <thefeli73@hotmail.com>
Date: Mon, 9 Mar 2020 23:08:35 +0100
Subject: [PATCH] add structure and css for website display

---
 src/css/layout/_main.scss | 43 +++++++++++++++++++++++++++++++--------
 src/index.html            | 12 +++++++++--
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/css/layout/_main.scss b/src/css/layout/_main.scss
index c9f02d6..47b9b75 100644
--- a/src/css/layout/_main.scss
+++ b/src/css/layout/_main.scss
@@ -6,17 +6,42 @@
     margin: 8em 0;
 
     > section {
-      width: 100%;
-      max-width: 800px;
+      width: 61.805%;
       margin: 8em auto;
       background-color: #fff;
 
-      > div {
-        width: 100%;
-        padding-bottom: 50%;
+      &:hover {
+        cursor: pointer;
+      }
+
+      > a {
+        all: initial;
+        all: unset;
+
+        > div {
+          width: 100%;
+          height: 0;
+          padding-bottom: 61.805%;
+          overflow: hidden;
+
+          > picture > img {
+            width: 100%;
+            @include vendor('transition', (
+              'filter #{_duration(transition2)} ease',
+              'transform #{_duration(slow-transition)} ease'
+            ));
+            @include vendor('filter', 'brightness(1.15) contrast(0.8) grayscale(1)');
+            @include vendor('transform', 'scale(1)');
+
+            &:hover {
+              @include vendor('filter', 'brightness(1.0) contrast(1.0) grayscale(0.2)');
+              @include vendor('transform', 'scale(1.2)');
+            }
+          }
+        }
       }
     }
-    /*
+
         @include breakpoint('<=xlarge') {
 
         }
@@ -32,15 +57,15 @@
         @include breakpoint('<=small') {
 
         }
-*/
+
         @include breakpoint('<=xsmall') {
           > section {
             margin: 2em auto;
           }
         }
-/*
+
         @include breakpoint('<=xxsmall') {
 
         }
-    */
+
   }
diff --git a/src/index.html b/src/index.html
index 2139b01..ced8f76 100644
--- a/src/index.html
+++ b/src/index.html
@@ -93,8 +93,16 @@
 
 <div id="main">
   <section>
-    <div>
-    </div>
+    <a target="_blank" rel="noopener" href="https://schulze-uebersetzungen.eu">
+      <div>
+      <picture id="letters">
+        <source srcset="/img/site/schulze-uebersetzungen/letters@1.00x.webp" type="image/webp">
+        <source srcset="/img/site/schulze-uebersetzungen/letters@1.00x.png" type="image/png">
+        <img src="/img/site/schulze-uebersetzungen/letters@1.00x.png" alt="schulze-uebersetzungen">
+      </picture>
+      <h2>schulze-uebersetzungen</h2>
+      </div>
+    </a>
   </section>
   <section>
     <div>