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; }