From d099c04445677e73ab6b60890643a771ada13b57 Mon Sep 17 00:00:00 2001
From: Liliana Sanfilippo <liliana.sanfilippo@uni-bielefeld.de>
Date: Fri, 20 Sep 2024 21:21:57 +0200
Subject: [PATCH] Headings
---
src/App/App.css | 79 +++++++++++++++++++------------------
src/components/Headings.tsx | 4 +-
src/components/Quotes.tsx | 8 ++--
3 files changed, 47 insertions(+), 44 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 76bfcd1a..fa7ae102 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -399,7 +399,7 @@ margin-bottom: 10vw !important;
min-height: 5vw;
margin-bottom: 20px !important;
}
-h2{
+.h2{
text-align:center;
text-transform:uppercase;
color: var(--text-primary) !important;
@@ -416,6 +416,7 @@ h2{
margin-bottom: 8vh !important;
height: auto;
}
+
h1{
font-size: 4rem !important;
background-clip: text !important;
@@ -425,6 +426,7 @@ h2{
/* background-image: repeating-linear-gradient(-45deg, var(--text-primary) 0, var(--text-primary) 2px, white 2px, white 4px) !important;
*/}
.h3{
+ margin-bottom: 40px !important;
text-align: center;
font-size: 2.5rem !important ;
text-transform: uppercase;
@@ -432,18 +434,19 @@ h2{
color: var(--text-primary) !important;
margin-top: 5vh !important;
}
- .h3:before {
+ .h3:after {
width: 28px;
height: 7px;
display: block;
content: "";
position: relative;
- bottom: -77px;
+ bottom: -12px;
left: 50%;
margin-left: -14px;
- background-color: var(--text-primary);
+ background-color: var(--mediumpurple);
+
}
-.h3:after {
+.h3:before {
width: 150px;
height: 1px;
display: block;
@@ -451,11 +454,16 @@ h2{
position: relative;
margin-top: 25px;
left: 50%;
+ bottom: -65px;
margin-left: -75px;
background-color: var(--text-primary);
}
- h2:after, h2:before {
+h2{
+ color: var(--text-primary) !important
+}
+
+.h2:after, .h2:before {
content: " ";
display: block;
border-bottom: 5px solid var(--text-primary);
@@ -464,34 +472,29 @@ h2{
position: relative;
}
-.h4:before {
- display: inline-block;
- position: relative;
- content: "";
- bottom: -17px;
- height: 6px;
- width: 55px;
- background-color: #111;
+.h4:after, .h4:before {
+ content: " ";
+ display: block;
+ border-bottom: 1px solid var(--mediumpurple);
+ border-top: 1px solid var(--mediumpurple);
+ height: 5px;
+ background-color:var(--background);
}
-.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;
+.h4{
+ margin-top: 5px;
color: var(--text-primary) !important;
- text-decoration-line: underline;
+ margin-top: 30px !important ;
+ font-size:15px; color:#444;
+ word-spacing:1px;
+ font-weight:normal;
+ letter-spacing:2px;
+ text-transform: uppercase;
+ font-weight:500;
+ display: grid;
+ grid-template-columns: 1fr max-content 1fr;
+ grid-template-rows: 27px 0;
+ grid-gap: 20px;
+ align-items: center;
}
@@ -2566,11 +2569,11 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote header */
-.blockquote h2 {
+.blockquote .block-h2 {
font-style: italic;
position: relative; /* for pseudos */
color: black;
- font-size: 2.8rem;
+ font-size: 2.8rem !important;
font-weight: normal;
line-height: 1;
font-size: larger;
@@ -2581,7 +2584,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote right double quotes */
-.blockquote h2:after {
+.blockquote .block-h2:after {
content:"";
position: absolute;
border: 5px solid var(--text-primary);
@@ -2595,7 +2598,7 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
z-index: 3;
}
-.blockquote h2:before {
+.blockquote .block-h2:before {
content:"";
position: absolute;
width: 80px;
@@ -2615,10 +2618,10 @@ html[dir=rtl] .hint-container.danger .hint-container-title:before {
}
/* Blockquote subheader */
-.blockquote h4 {
+.blockquote .block-h4{
position: relative;
color: black;
- font-size: 1.3rem;
+ font-size: 1.3rem !important;
font-weight: 400;
line-height: 1.2;
font-size: medium;
diff --git a/src/components/Headings.tsx b/src/components/Headings.tsx
index 78ea1f01..f7a34e57 100644
--- a/src/components/Headings.tsx
+++ b/src/components/Headings.tsx
@@ -73,7 +73,7 @@ export function H2({text, id}:{text: string, id?: string}){
}
return(
<div className="h2-box">
- <h2 id={idtext}>{text}</h2>
+ <h2 className="h2" id={idtext}>{text}</h2>
</div>
)
@@ -104,7 +104,7 @@ export function H4({text, id}:{text: string, id?: string}){
}
return(
<div>
- <h4 id={idtext}> {text} </h4>
+ <h4 className="h4" id={idtext}> {text} </h4>
</div>
)
diff --git a/src/components/Quotes.tsx b/src/components/Quotes.tsx
index 012bfb20..56bfcef1 100644
--- a/src/components/Quotes.tsx
+++ b/src/components/Quotes.tsx
@@ -4,10 +4,10 @@ export function BlockQuote({text, cite}: {text: string; cite: string}){
return(
<div className="blockquote-wrapper">
<div className="blockquote">
- <h2>
+ <h2 className="block-h2">
{text}
</h2>
- <h4><em>{cite}</em></h4>
+ <h4 className="block-h4"><em>{cite}</em></h4>
</div>
</div>
)
@@ -19,10 +19,10 @@ export function BlockQuoteB({text, cite, id}: {text: string; cite: string, id?:
return(
<div className="blockquote-wrapper">
<div className="blockquotex">
- <h2>
+ <h2 className="block-h2">
{text}
</h2>
- <h4><em>{cite}</em> <a href={h}><sup>{id}</sup></a></h4>
+ <h4 className="block-h4"><em>{cite}</em> <a href={h}><sup>{id}</sup></a></h4>
</div>
</div>
)
--
GitLab