diff --git a/code/frontend/src/pages/About.tsx b/code/frontend/src/pages/About.tsx
index c98439d..8fdc76b 100644
--- a/code/frontend/src/pages/About.tsx
+++ b/code/frontend/src/pages/About.tsx
@@ -1,6 +1,8 @@
import "./about.css";
+import { useNavigate } from "react-router-dom";
function About() {
+ const navigate = useNavigate();
return (
@@ -33,6 +35,36 @@ function About() {
/>
+
+
This is
+
navigate("/feed")}
+ >
+ Feather Feed
+
+
+ ... a social media platform about Birds.
+
+ Look up our
+ navigate("/feed")}
+ >
+ {" "}
+ Feed{" "}
+
+ and
+ navigate("/register")}
+ >
+ {" "}
+ Sign up{" "}
+
+ for your daily Feather Feed
+
+
);
}
diff --git a/code/frontend/src/pages/about.css b/code/frontend/src/pages/about.css
index 680ecb6..6847dc8 100644
--- a/code/frontend/src/pages/about.css
+++ b/code/frontend/src/pages/about.css
@@ -1,6 +1,3 @@
-:root {
- --margin-mobile: 2rem;
-}
.mainbox {
min-width: 360px;
max-width: 100vw;
@@ -14,6 +11,38 @@
}
}
+.explain {
+ display: grid;
+ grid-template-columns: 1fr;
+ align-items: center;
+ margin: 3vw;
+}
+.explain-announce {
+ width: 90vw;
+ margin: 2vw;
+ font-size: clamp(5rem, 8vw, 15vw);
+ color: white;
+ text-align: left;
+}
+.explain-title {
+ margin: 1vw;
+ width: 90vw;
+ font-size: clamp(7rem, 10vw, 17vw);
+ color: var(--Rotkehlchen-orange-default);
+}
+.explain-text {
+ margin: 2vw;
+ width: 90vw;
+ max-width: 90vw !important;
+ font-size: clamp(3.5rem, 7vw, 14vw);
+ color: white;
+ text-align: left;
+}
+
+.cursor-pointer {
+ cursor: pointer;
+}
+
.about-title {
flex-direction: row;
justify-content: start;
@@ -31,9 +60,9 @@
align-items: center;
justify-content: space-between;
height: clamp(30vw, 45vh, 100%);
- margin: 2vw;
+ margin: var(--margin-mobile);
vertical-align: center;
- margin-block-end: 2rem;
+ margin-block-end: var(--margin-mobile);
}
.block2 {
display: grid;
diff --git a/code/frontend/src/styles/fonts.css b/code/frontend/src/styles/fonts.css
index dbed22c..c6db218 100644
--- a/code/frontend/src/styles/fonts.css
+++ b/code/frontend/src/styles/fonts.css
@@ -26,6 +26,11 @@
}
}
+.generic-title {
+ font-family: "Lora";
+ font-weight: 700;
+}
+
h1 {
font-family: "Lora";
}
diff --git a/code/frontend/src/styles/sizes.css b/code/frontend/src/styles/sizes.css
index ddadbbf..1c40c30 100644
--- a/code/frontend/src/styles/sizes.css
+++ b/code/frontend/src/styles/sizes.css
@@ -1,4 +1,5 @@
:root {
- --header-height: 48px;
- --border-radius: 1rem;
+ --header-height: 48px;
+ --border-radius: 1rem;
+ --margin-mobile: 2rem;
}