1 files changed, 82 insertions, 0 deletions
diff --git a/sysret.org/themes/tabi-lean/sass/parts/_home-banner.scss b/sysret.org/themes/tabi-lean/sass/parts/_home-banner.scss
new file mode 100644
index 0000000..ce6b9c1
--- /dev/null
+++ b/sysret.org/themes/tabi-lean/sass/parts/_home-banner.scss
@@ -0,0 +1,82 @@
+#banner-container-home {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin: 0.2rem auto;
+    width: 100%;
+
+    @media only screen and (max-width: 600px) {
+        display: block;
+        margin-block-end: 2rem;
+    }
+
+    #home-banner-text {
+        flex: 1;
+        margin-block-end: 1.5rem;
+        color: var(--primary-color);
+        font-size: 1.875rem;
+        line-height: 3rem;
+
+        li {
+            font-size: 1rem;
+        }
+
+        #home-banner-header {
+            margin: 0;
+            margin-block-end: 1rem;
+            font-weight: 550;
+            font-size: 2.8rem;
+
+            @media only screen and (max-width: 600px) {
+                margin-block-end: 0;
+                font-size: 2.2rem;
+            }
+        }
+
+        #banner-home-subtitle {
+            color: var(--text-color);
+            font-weight: 250;
+            line-height: 1.75rem;
+
+            p {
+                font-size: 1rem;
+            }
+
+            a {
+                font-weight: 400;
+            }
+        }
+
+        @media only screen and (max-width: 600px) {
+            width: 100%;
+        }
+    }
+
+    #image-container-home {
+        position: relative;
+        margin: auto 0;
+        padding-inline-start: 2rem;
+        max-width: 11rem;
+        overflow: hidden;
+        text-align: center;
+
+        #banner-home-img {
+            border: none;
+            aspect-ratio: 1 / 1;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+
+            @media only screen and (max-width: 600px) {
+                max-width: 12rem;
+                max-height: 12rem;
+            }
+        }
+
+        @media only screen and (max-width: 600px) {
+            padding-inline-start: 0;
+            width: 100%;
+            max-width: none;
+        }
+    }
+}