From f82c58c555e314329157f64f2e20465d129d9452 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Fri, 25 Jun 2021 11:44:16 +0000
Subject: [PATCH] feat: improved design of portfolio

---
 assets/css/style.css |  121 ++++++++++++++++++++++++++++++++++++++++
 1 files changed, 120 insertions(+), 1 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index fa0a255..467f626 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -806,7 +806,7 @@
   font-weight: 400;
   font-style: normal;
   border-radius: 999em;
-  padding: 5px;
+  padding: 10px;
 }
 
 .btn:hover {
@@ -845,10 +845,56 @@
   padding: 6px 12px;
 }
 
+/* Portfolio */
 .cta {
   padding-bottom: 1em;
 }
 
+.box-wrapper {
+  padding: 48px;
+  position: relative;
+  z-index: 0;
+}
+
+.box-image {
+  box-shadow: 0 0 16px rgb(0 0 0 / 25%);
+  display: block;
+  background-color: #fff;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.box-image img {
+  width: 100%;
+  box-shadow: #000;
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+  object-fit: cover;
+  border-bottom: 0px;
+  display: block;
+}
+
+.box-image--right,
+.box-image--left {
+  margin-right: auto;
+  margin-left: auto;
+  width: calc(100% - 64px);
+  background-color: var(--bg-color);
+  max-width: 400px;
+}
+
+.box {
+  box-shadow: 0 0 48px rgb(0 0 0 / 25%);
+  background-color: var(--bg-color);
+  padding: 32px;
+}
+
+.box--left,
+.box--right {
+  margin-top: -24px;
+}
+
 /* Menu */
 .menu {
   float: right;
@@ -962,6 +1008,62 @@
   .footer--base {
     display: none;
   }
+
+  .box {
+    padding: 64px;
+    box-shadow: 0 0 48px var(--border-color);
+    background-color: #fff;
+    border-radius: 0.5em;
+  }
+
+  .box-wrapper::before {
+    border: 1px solid var(--border-color);
+    content: '';
+    z-index: -1;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    bottom: 10%;
+    right: 10%;
+    background: transparent;
+    border-radius: 0.5em;
+  }
+
+  .box-image--right,
+  .box-image--left {
+    width: 60%;
+    object-fit: contain;
+    max-width: none;
+    z-index: 2;
+  }
+
+  .box-image--right {
+    margin-right: 0;
+    margin-left: auto;
+    border-top-right-radius: 0.5em;
+    border-top-left-radius: 0.5em;
+    border-bottom-right-radius: 0.5em;
+  }
+
+  .box-image--left {
+    margin-right: auto;
+    margin-left: 0;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    border-bottom-left-radius: 0.5em;
+  }
+
+  .box--left,
+  .box--right {
+    width: 60%;
+    margin-top: -48px;
+    z-index: 3;
+    background: var(--blockquote-border-color);
+  }
+
+  .box--right {
+    margin-left: auto;
+  }
 }
 
 @media screen and (max-width: 960px) {
@@ -1099,6 +1201,23 @@
   .list-with-title .listing .listing-post a {
     width: 80%;
   }
+
+  .box--right,
+  .box--left {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .box-image--left,
+  .box-image--right {
+    padding: 0px;
+  }
+
+  .box-wrapper {
+    padding-left: 48px;
+    padding-right: 48px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+  }
 }
 
 /* Medium zoom */

--
Gitblit v1.10.0