feat: improve website texts

gitfrosh · Apr 29, 2024 · 9bff1e2 · 9bff1e2
1 parent bb1bc34
commit 9bff1e2
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 97 deletions.
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -6,7 +6,7 @@ const Footer: React.FC = () => {
       <p className="hr-like">
         <br />
         All we have to decide is what to do with the time that is given to us.{" "}
-        <b>Built with &hearts; in {new Date().getFullYear()}</b> <br />
+        <b>Built with &hearts; 2019-{new Date().getFullYear()}</b> <br />
       </p>
     </footer>
   );

diff --git 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,23 +23,21 @@ 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;
   height: unset;
   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,23 +126,23 @@ h2 {
   h2 {
     font-size: 28px;
     line-height: 3.5rem;
-
   }
 }
 
 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,41 +170,46 @@ 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;
   }
 }
 
 #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
@@ -11,27 +11,21 @@ const About: React.FC = () => {
       </Helmet>
       <p>
         <br />
-        The <strong>one API to rule them all</strong> is a project by{" "}
+        The <strong>one API to rule them all</strong> is a non-commercial,
+        open-source project maintained by{" "}
         <a href="https://rike.dev" rel="noopener noreferrer" target="_blank">
           Rike
         </a>{" "}
-        started during the{" "}
+        and{" "}
         <a
-          href="https://www.100daysofcode.com/"
+          href="https://github.com/MateuszKikmunter"
           rel="noopener noreferrer"
           target="_blank"
         >
-          #100DaysOfCode challenge
-        </a>{" "}
-        and is brought to you via{" "}
-        <a
-          href="https://www.digitalocean.com/"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          DigitalOcean
+          Mateusz
         </a>
-        . 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 (
         <a
           href="https://twitter.com/rikecodes"
           rel="noopener noreferrer"
@@ -92,6 +86,14 @@ const About: React.FC = () => {
               Express.js
             </a>{" "}
             -{" "}
+            <a
+              href="https://azure.com/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Azure
+            </a>{" "}
+            -{" "}
             <a
               href="https://www.mongodb.com/de"
               rel="noopener noreferrer"
@@ -125,8 +127,8 @@ const About: React.FC = () => {
             </a>{" "}
             and more.
             <br /> <br />
-            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 (
             <a
               href="https://www.kaggle.com/mokosan/lord-of-the-rings-character-data"
               rel="noopener noreferrer"
@@ -142,7 +144,7 @@ const About: React.FC = () => {
             >
               Kaggle
             </a>
-            ) .
+            ).
           </p>
         </div>
       </div>
@@ -152,7 +154,7 @@ const About: React.FC = () => {
           <p>
             Have a look into some great projects based on this API. You would
             like to get listed?{" "}
-            <a href="mailto:hello@rike.dev">Drop me a line.</a>
+            <a href="mailto:hello@rike.dev">Drop Rike a line.</a>
           </p>
 
           <ul>
@@ -271,6 +273,6 @@ const About: React.FC = () => {
       </div>
     </div>
   );
-}
+};
 
 export default About;