Refactor hero section and layout styles; improve spacing and alignment

grafische-republiek · grafische-republiek · commit 18b905b4d69d · 2025-11-21T17:36:06.000+01:00
diff --git a/sass/components/hero.scss b/sass/components/hero.scss
@@ -7,7 +7,7 @@
     display: grid;
     gap: 1.5rem;
     grid-template-columns: repeat(12, 1fr);
-    padding-block: 6rem;
+    padding-block: 4.5rem;
   }
 
   h1 {
diff --git a/sass/components/projects.scss b/sass/components/projects.scss
@@ -1,20 +1,32 @@
 .hero-container {
     .hero-menu {
-        display: block;
-        text-align: center;
-        margin: auto;
-        padding-top: 2rem;
+        margin-block-start: 1.5rem;
+        display: flex;
+        justify-content: center;
 
         ul {
             display: flex;
             flex-wrap: wrap;
-            gap: 0.5rem;
+            width: 100%;
+            max-width: 36.75rem;
         }
 
         li {
-            a.btn-secondary {
-                padding-inline: 0.5rem;
-                height: 2rem;
+            flex: 1;
+
+            a {
+                width: 100%;
+                padding-inline: 0;
+
+                &:hover {
+                    background-color: var(--color-secondary-400);
+                }
+            }
+
+            &:not(:last-child) {
+                a {
+                    border-inline-end: 0;
+                }
             }
         }
     }
diff --git a/sass/global/global.scss b/sass/global/global.scss
@@ -7,3 +7,6 @@ body {
   line-height: var(--line-height);
 }
 
+.text-center {
+  text-align: center;
+}
diff --git a/sass/global/layout.scss b/sass/global/layout.scss
@@ -16,7 +16,7 @@ main {
   margin-block-start: 3rem;
 
   @media (min-width: 62rem) {
-    margin-block-start: 6rem;
+    margin-block-start: 4.5rem;
   }
 }
 
diff --git a/templates/projects/project.html b/templates/projects/project.html
@@ -3,6 +3,9 @@
 
 {% block content %}
 <div class="hero-container">
+    <div class="hero">
+        <h1 class="text-center"><span>{{ page.title | safe }}</span></h1>
+    </div>
     <div class="hero-menu">
         <ul>
             {% set links = page.extra.links %}
@@ -11,9 +14,7 @@
             {% endfor %}
         </ul>
     </div>
-    <div class="hero">
-        <h1><span>{{ page.title | safe }}</span></h1>
-    </div>
+
 </div>
 
 <div class="paragraph">

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`display: grid;`
`8`	`8`	`gap: 1.5rem;`
`9`	`9`	`grid-template-columns: repeat(12, 1fr);`
`10`		`- padding-block: 6rem;`
	`10`	`+ padding-block: 4.5rem;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`h1 {`
Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,6 @@ body {`
`7`	`7`	`line-height: var(--line-height);`
`8`	`8`	`}`
`9`	`9`
	`10`	`+.text-center {`
	`11`	`+ text-align: center;`
	`12`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ main {`
`16`	`16`	`margin-block-start: 3rem;`
`17`	`17`
`18`	`18`	`@media (min-width: 62rem) {`
`19`		`- margin-block-start: 6rem;`
	`19`	`+ margin-block-start: 4.5rem;`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`