From d385f6237481e2f9fac2aff6145ec058d841ed18 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 20 Sep 2024 20:55:37 +0200
Subject: [PATCH] Heading Design
---
src/App/App.css | 103 ++++++++++++++++++++++++++++++++----
src/components/Headings.tsx | 9 ++--
src/components/sections.tsx | 4 +-
3 files changed, 99 insertions(+), 17 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index d0290e41..76bfcd1a 100644
--- a/src/App/App.css
+++ b/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%);
diff --git a/src/components/Headings.tsx b/src/components/Headings.tsx
index 12d7e2ea..78ea1f01 100644
--- a/src/components/Headings.tsx
+++ b/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>
)
diff --git a/src/components/sections.tsx b/src/components/sections.tsx
index 5d23303f..b42e7ba2 100644
--- a/src/components/sections.tsx
+++ b/src/components/sections.tsx
@@ -1,4 +1,4 @@
-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>
)
--
GitLab