feat: Designer Feedback - titles

scout-ch · Jan 11, 2024 · fc7f3a9 · fc7f3a9
1 parent 7688835
commit fc7f3a9
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 37 deletions.
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
@@ -49,10 +49,10 @@ function Section(props: Props) {
     return <section className='content'>
         <Helmet><title>{props.section['title']}</title></Helmet>
         <div id="section-title" className={`section-title section-${props.section.sorting} mb-2`}>
-            <h1>
-                {props.section.icon && (<img className='icon' src={props.section.icon.url} alt="icon" />)}
+            <h1 className={`bg-primary`}>
                 {props.section['title']}
             </h1>
+            {props.section.icon && (<img className='icon pl-2' src={props.section.icon.url} alt="icon" />)}
         </div>
         <div className='section-body rounded p-3 color-bg-default'>
             <div className='section-description'>

diff --git a/src/index.scss b/src/index.scss
@@ -11,7 +11,6 @@
 
 // @import './styles/fonts/fonts.css';
 @import './styles/section.scss';
-@import './styles/chapter.scss';
 // @import './styles/nav.scss';
 @import './styles/header.scss';
 @import './styles/table.scss';
@@ -52,12 +51,6 @@
   h4 {
     color: var(--color-primary-light);
   }
-  .icon {
-    align-self:center; // height: 100%;
-    // margin: 0em 1.5em 0em -1.5em;
-    padding-right: 0.5em;
-    width: 80px;
-  }
   img {
     max-width: 100%;
   }

diff --git a/src/styles/chapter.scss b/src/styles/chapter.scss
diff --git a/src/styles/section.scss b/src/styles/section.scss
@@ -6,5 +6,49 @@
   .md-img {
     display: block;
   }
+  .section-title {
+    h1 {
+      color: white;
+      background-color: var(--color-primary);
+      display: inline-block;
+      width: calc(100% - 80px);
+      margin-top: -10px;
+    }
+    .icon {
+      align-self:center; // height: 100%;
+      // margin: 0em 1.5em 0em -1.5em;
+      width: 80px;
+      margin-top: 20px;
+    }
+  }
+
+  .chapter {
+    margin-top: 20px;
+
+    &-title {
+        h2 {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid;
+      }
+    }
+
+    .md-img {
+      display: inline-block;
+      figcaption {
+        margin: -.5em 0em 0em 0em;
+      }
+    }
+
+    // h2 {
+    //   margin-top: 16px;
+    // }
+    h3 {
+      margin-top: 8px;
+    }
+    h4 {
+      margin-top: 4px;
+    }
+  }
 }