fix: improve thin project list paddings (ory#99)

NickUfer · Jul 2, 2020 · 1d8e50d · 1d8e50d
1 parent e7e299b
commit 1d8e50d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/thin-project.module.css b/src/components/thin-project.module.css
@@ -2,7 +2,15 @@
 
 .thin {
   background-color: var(--colors-base-white);
-  padding: 96px 0;
+  padding: 32px 0;
+
+  &:first-child {
+    padding-top: 96px;
+  }
+
+  &:last-child {
+    padding-bottom: 64px;
+  }
 
   & h3 {
     color: var(--colors-themed-default);

diff --git a/src/components/thin-project.tsx b/src/components/thin-project.tsx
@@ -25,17 +25,17 @@ const ThinProject = ({
       <div className={cn('row middle-lg')}>
         <div className="col-lg-offset-1 col-lg-4 col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10">
           <Link to={href} className={cn(styles.cap, 'secondary')}>
-                <h3>{title}</h3>
+            <h3>{title}</h3>
           </Link>
           <p>{description}</p>
-              <Link to={href} className={cn(styles.cap, 'secondary')} >
-                {learn}
-              </Link>
+          <Link to={href} className={cn(styles.cap, 'secondary')}>
+            {learn}
+          </Link>
         </div>
         <div className="col-lg-offset-2 col-lg-4 col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10">
-            <Link to={href} >
-              <img src={visual} alt={`${title} visualized`} />
-            </Link>
+          <Link to={href}>
+            <img src={visual} alt={`${title} visualized`}/>
+          </Link>
         </div>
       </div>
     </div>