complete rework, template for portfolio in the future

Homepage/assets/css/style.css

@@ -1,39 +1,173 @@
-    .row.content {
-        min-height: calc(100vh - 3.5rem);
-    }
-    
+:root {
+    --bs-font-sans-serif: 'Source Sans 3', 'Source Sans Pro', Helvetica, sans-serif;
+    --bs-body-font-size: 1.333rem;
+    --bs-body-font-weight: 300;
+    --bs-body-color: #474747;
+    --bs-body-color-rgb: 71, 71, 71;
+    --bs-body-bg: #f7f7f7;
+    --bs-border-color: #e0e0e0;
+    --bs-secondary-color: #999999;
+    --bs-primary: #37c0fb;
+    --bs-primary-rgb: 55, 192, 251;
+    --bs-link-color: #37c0fb;
+    --bs-link-color-rgb: 55, 192, 251;
+    --bs-link-hover-color: #50c8fc;
+    --arcana-accent: #37c0fb;
+    --arcana-accent-hover: #50c8fc;
+    --arcana-accent-active: #1eb8fb;
+}
 
-    .sidenav {
-      background-color: #f1f1f1;
-    }
-    
+body {
+    background: #f7f7f7 url('../images/bg01.png');
+}
 
-    footer {
-      background-color: #555;
-      color: white;
-      padding: 15px;
-    }
-    
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+    letter-spacing: -0.025em;
+}
 
-    @media screen and (max-width: 767px) {
-      .sidenav {
-        height: auto;
-        padding: 15px;
-        }
-      
-        .row.content {min-height: auto;}
-    }
+a {
+    text-decoration: none;
+    border-bottom: dotted 1px;
+    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
 
-    .svgimages {
-        height: 14px;
-        width: 14px;
-    }
+a:hover {
+    border-bottom-color: transparent;
+}
 
-    .req {
+.sheet {
+    background-color: #fff;
+    background-image: url('../images/bg02.png'), url('../images/bg03.png'), url('../images/bg01.png');
+    background-position: top left, bottom left, top left;
+    background-size: 100% 6em, 100% 6em, auto;
+    background-repeat: no-repeat, no-repeat, repeat;
+    padding: 5em 2.5em;
+}
+
+.row.content {
+    min-height: 60vh;
+}
+
+.sidenav .nav {
+    display: block;
+    list-style: none;
+    padding-left: 0;
+}
+
+.sidenav .nav-item {
+    margin: 0 0 0.75em 0;
+}
+
+.sidenav .nav-link {
+    display: inline;
+    padding: 0;
+    color: var(--arcana-accent);
+    border-bottom: dotted 1px;
+}
+
+.sidenav .nav-link:hover {
+    color: var(--arcana-accent-hover);
+    border-bottom-color: transparent;
+}
+
+.sidenav h4 {
+    color: #999999;
+    font-size: 0.9em;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    margin-bottom: 1.25em;
+}
+
+footer {
+    padding: 3em 0 4em 0;
+}
+
+footer a {
+    color: inherit;
+    border-bottom-color: rgba(71, 71, 71, 0.25);
+}
+
+footer a:hover {
+    color: var(--arcana-accent);
+    border-bottom-color: transparent;
+}
+
+.btn-primary {
+    --bs-btn-bg: var(--arcana-accent);
+    --bs-btn-border-color: var(--arcana-accent);
+    --bs-btn-hover-bg: var(--arcana-accent-hover);
+    --bs-btn-hover-border-color: var(--arcana-accent-hover);
+    --bs-btn-active-bg: var(--arcana-accent-active);
+    --bs-btn-active-border-color: var(--arcana-accent-active);
+    --bs-btn-color: #fff;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-active-color: #fff;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), url('../images/bg01.png');
+    border-radius: 5px;
+    font-weight: 600;
+    padding: 0.5em 1.5em;
+}
+
+.form-control, .form-select {
+    font-weight: 300;
+}
+
+.banner,
+.section-img {
+    width: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 5px;
+    margin-bottom: 2em;
+}
+
+.banner {
+    height: 16em;
+}
+
+.section-img {
+    height: 12em;
+}
+
+.svgimages {
+    height: 14px;
+    width: 14px;
+}
+
+.req {
     color: #d43d28;
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     margin-left: 0.3rem;
-}
+}
+
+@media screen and (max-width: 980px) {
+    :root {
+        --bs-body-font-size: 1.167rem;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    :root {
+        --bs-body-font-size: 1.083rem;
+    }
+
+    .sheet {
+        padding: 3em 1.25em;
+    }
+
+    .row.content {
+        min-height: auto;
+    }
+
+    .banner {
+        height: 10em;
+    }
+
+    .section-img {
+        height: 8em;
+    }
+}