Heading Design

src/App/App.css

@@ -144,12 +144,16 @@ a {
   color: var(--accent-gradient-one-of-three) !important;
   text-decoration: none !important;
 }
-h3{
-  margin-bottom: 2vw !important;
+.our-h3{
+  margin-top: 20px !important;
+  margin-bottom: 5px !important;
 }
-h1, h2, h3, h4, h5, h6{
-  color: var(--text-primary) !important;
+.short-hr{
+  height: 1px !important;
+  border-width: 2px !important;
 }
+
+
 code{
   color:black !important;
 }
@@ -396,13 +400,22 @@ margin-bottom: 10vw !important;
   margin-bottom: 20px !important;
 }
 h2{
-  font-size: 3rem !important;
-  background-clip: text !important;
+  text-align:center;
+  text-transform:uppercase;
   color: var(--text-primary) !important;
-  padding-top: 15px !important;
-  font-weight: bolder !important;
- /*  background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
- */}
+  font-size: 3rem !important ; 
+  letter-spacing: 1px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: 16px 0;
+  grid-gap: 22px;  
+  height: auto;
+}
+.h2-box{
+  margin-top: 8vh !important;
+  margin-bottom: 8vh !important;
+  height: auto;
+}
  h1{
   font-size: 4rem !important;
   background-clip: text !important;
@@ -411,6 +424,76 @@ h2{
   font-weight: bolder !important;
  /*  background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
  */}
+ .h3{
+  text-align: center;
+  font-size: 2.5rem !important ; 
+  text-transform: uppercase;
+  padding-bottom: 5px;
+  color: var(--text-primary) !important;
+  margin-top: 5vh !important;
+ }
+ .h3:before {
+  width: 28px;
+  height: 7px;
+  display: block;
+  content: "";
+  position: relative;
+  bottom: -77px;
+  left: 50%;
+  margin-left: -14px;
+  background-color: var(--text-primary);
+}
+.h3:after {
+  width: 150px;
+  height: 1px;
+  display: block;
+  content: "";
+  position: relative;
+  margin-top: 25px;
+  left: 50%;
+  margin-left: -75px;
+  background-color: var(--text-primary);
+}
+
+ h2:after, h2:before {
+  content: " ";
+  display: block;
+  border-bottom: 5px solid var(--text-primary);
+  background-color: var(--background);
+  bottom: -1rem !important;
+  position: relative;
+}
+
+.h4:before {
+  display: inline-block;
+  position: relative;
+  content: "";
+  bottom: -17px;
+  height: 6px;
+  width: 55px;
+  background-color: #111;
+}
+.h4:after {
+  position: relative;
+  height: 2px;
+  display: inline-block;
+  content: "";
+  bottom: -15px;
+  left: -250px;
+  width: 95%;
+  max-width: 255px;
+  background-color: #333;
+}
+h4{
+  margin-bottom: 2vw !important;
+  font-size: 2rem !important;
+  background-clip: text !important;
+  padding-top: 15px !important;
+  font-weight: 500 !important;
+  color: var(--text-primary) !important;
+  text-decoration-line: underline;
+}
+
 
 .underline--magical {
   background-image: linear-gradient(120deg, var(--lightblue) 0%, var(--mediumpurple) 100%);

src/components/Headings.tsx

@@ -72,9 +72,8 @@ export function H2({text, id}:{text: string, id?: string}){
         idtext = stringToSlug(text); 
     }
     return(
-        <div>
+        <div className="h2-box">
             <h2 id={idtext}>{text}</h2>
-            <hr/>
         </div>
         
     )
@@ -90,7 +89,7 @@ export function H3({text, id}:{text: string, id?: string}){
     }
     return(
         <div>
-            <h3 id={idtext}>{text}</h3>  
+            <h3  className="h3" id={idtext}> {text} </h3>  
         </div>
         
     )
@@ -105,7 +104,7 @@ export function H4({text, id}:{text: string, id?: string}){
     }
     return(
         <div>
-            <h4 id={idtext}>{text}</h4>  
+            <h4 id={idtext}> {text} </h4>  
         </div>
         
     )
@@ -184,7 +183,7 @@ return(
 
 export function Hshadone({text}:{text: string}){
     return(
-    <div>
+    <div className="h3-box">
         <p className="stroke shadow-stroke">{text}</p>
     </div>
     )

src/components/sections.tsx

-import { H2 } from "./Headings"
+import { H2, H3 } from "./Headings"
 
 
 export function Section({id, title, children}: {id: string, title: string, children: React.ReactNode}){
@@ -19,7 +19,7 @@ export function Subesction({id, title, children}: {id: string, title: string, ch
 
     return(
         <section id={id}>
-                  <div id={id + "H"}><h3>{title}</h3> </div>
+                <H3 text={title} id={id + "H"}></H3>
                   {children}
         </section>
     )