From 9bff1e241e5b07241c5b63024d0df2fd5c026f96 Mon Sep 17 00:00:00 2001 From: Rike Date: Mon, 29 Apr 2024 17:25:34 +0200 Subject: [PATCH] feat: improve website texts --- frontend/src/components/Footer.tsx | 2 +- frontend/src/index.css | 89 +++++++++++++++++----------- frontend/src/pages/About.tsx | 38 ++++++------ frontend/src/pages/Documentation.tsx | 69 ++++++++++++++------- frontend/src/pages/Home.tsx | 44 +++++++------- 5 files changed, 145 insertions(+), 97 deletions(-) diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index be58cad..420a54e 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -6,7 +6,7 @@ const Footer: React.FC = () => {


All we have to decide is what to do with the time that is given to us.{" "} - Built with ♥ in {new Date().getFullYear()}
+ Built with ♥ 2019-{new Date().getFullYear()}

); diff --git a/frontend/src/index.css b/frontend/src/index.css index b4faf5d..6766cf8 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,21 +1,20 @@ @charset "UTF-8"; -html, body { +html, +body { max-width: 100%; overflow-x: hidden; - } .card { /* margin-bottom: 3rem; */ - border: 1rem solid var(--card-border-color) + border: 1rem solid var(--card-border-color); } .logo { - font-size: 1.0rem !important; + font-size: 1rem !important; padding: 25px !important; /* font-family: 'Just Another Hand', cursive; */ color: var(--a-visited-color) !important; - } table { @@ -24,15 +23,14 @@ table { .logo a:hover { text-decoration: none; - color: var(--card-border-color) + color: var(--card-border-color); } a:hover { text-decoration: none; - color: var(--header-fore-color) + color: var(--header-fore-color); } - header { color: var(--card-border-color); background-color: var(--fore-color) !important; @@ -40,7 +38,6 @@ header { overflow-x: hidden; } - .drawer-toggle:before { color: var(--card-border-color); font-size: 80px; @@ -55,18 +52,39 @@ header { } } -p, li, ul, th, td, tr, em, a, b, input, label, button { - font-family: 'Work Sans', sans-serif !important; +p, +li, +ul, +th, +td, +tr, +em, +a, +b, +input, +label, +button { + font-family: "Work Sans", sans-serif !important; color: #4c4c4c; font-size: 16px; line-height: 2.1rem; } @media screen and (min-width: 1000px) { - p, li, ul, th, td, tr, em, a, b, input, label, button { + p, + li, + ul, + th, + td, + tr, + em, + a, + b, + input, + label, + button { font-size: 20px; line-height: 2.8rem; - } } @@ -87,7 +105,6 @@ h1 { } } - .subtitle { margin-top: -1.7rem; margin-left: 1rem; @@ -97,7 +114,6 @@ h1 { @media screen and (max-width: 576px) { .subtitle { font-size: 35px; - } } @@ -110,7 +126,6 @@ h2 { h2 { font-size: 28px; line-height: 3.5rem; - } } @@ -118,15 +133,16 @@ h3 { font-size: 36px !important; } - h2 > smaller { top: -1rem; font-size: 1.5rem !important; - } -h1, h2, h3, .subtitle { - font-family: 'Martel', serif; +h1, +h2, +h3, +.subtitle { + font-family: "Martel", serif; } .container { @@ -135,9 +151,8 @@ h1, h2, h3, .subtitle { padding: 0; } #content-wrap { - padding-bottom: 4rem; + padding-bottom: 4rem; margin-bottom: 70px; - } #flexy { @@ -155,25 +170,33 @@ footer { text-align: center; bottom: 0; width: 100%; - height: 3rem; + height: 4rem; } -footer > p, footer b { +footer > p, +footer b { font-size: 20px; line-height: 35px; color: var(--fore-color) !important; } .hr-like { - border: none; - border-top: 1px solid transparent; - background-image: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); - height: 1px; - margin: 1em 0; + border: none; + border-top: 1px solid transparent; + background-image: linear-gradient( + to right, + transparent, + var(--border-color) 20%, + var(--border-color) 80%, + transparent + ); + height: 1px; + margin: 1em 0; } @media screen and (max-width: 1000px) { - footer > p, footer b { + footer > p, + footer b { font-size: small; line-height: 25px; } @@ -181,15 +204,12 @@ footer > p, footer b { #drawer { border: 1rem solid var(--card-border-color); - } #drawer a { font-size: 20px !important; - } - nav { line-height: 0.2rem; border: unset; @@ -206,7 +226,8 @@ nav { margin-bottom: 3rem; } -nav a, nav a:visited { +nav a, +nav a:visited { color: unset; } diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index a2bd121..9f04af0 100644 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -11,27 +11,21 @@ const About: React.FC = () => {


- The one API to rule them all is a project by{" "} + The one API to rule them all is a non-commercial, + open-source project maintained by{" "} Rike {" "} - started during the{" "} + and{" "} - #100DaysOfCode challenge - {" "} - and is brought to you via{" "} - - DigitalOcean + Mateusz - . You have some questions or suggestions? Find me on Twitter ( + , which has been around since 2019. If you have any quick questions or + suggestions, feel free to reach out to Rike on X ( { Express.js {" "} -{" "} + + Azure + {" "} + -{" "} { {" "} and more.

- It could not have been made without the scraping work of Moko Sharma - ( + This project would not have been possible without the invaluable + scraping contributions of Moko Sharma ( { > Kaggle - ) . + ).

@@ -152,7 +154,7 @@ const About: React.FC = () => {

Have a look into some great projects based on this API. You would like to get listed?{" "} - Drop me a line. + Drop Rike a line.