Refactor font sizes across components to use CSS variables for consistency and improved readability

Author: Vianpyro

src/components/Footer.astro

@@ -56,7 +56,7 @@ const yearString = currentYear === baseYear ? baseYear.toString() : `${baseYear}
     @media screen and (width<=850px) {
         footer > div {
             flex-direction: column;
-            font-size: 1rem;
+            font-size: var(--font-size-small);
             gap: 0;
         }
     }

src/components/Header.astro

@@ -25,6 +25,7 @@ const { canSearch = false } = Astro.props || {}
 
 <style>
     h1 {
+        font-size: var(--font-size-title);
         text-wrap: nowrap;
     }
 
@@ -77,10 +78,6 @@ const { canSearch = false } = Astro.props || {}
             margin: 0;
         }
 
-        h1 {
-            font-size: 1.75rem;
-        }
-
         svg {
             width: calc(1.5 * var(--spacing-medium));
             height: calc(1.5 * var(--spacing-medium));

src/components/RecipeCard.astro

@@ -30,7 +30,7 @@ function randint(min: number, max: number) {
 
 <style>
     h1 {
-        font-size: calc(1.5 * var(--spacing-medium));
+        font-size: var(--font-size-title);
     }
 
     .recipe-polaroid {

src/components/SearchBar.astro

@@ -18,7 +18,7 @@ const { placeholder } = Astro.props
         border: none;
         border-bottom: 2px solid var(--color-primary);
         flex: 1;
-        font-size: 1.5rem;
+        font-size: var(--font-size-body);
         outline: none;
     }
 

src/content/privacy-policy.md

@@ -0,0 +1,70 @@
+# Privacy Policy
+
+_Effective Date: April 6, 2025_
+
+## Introduction
+
+Welcome to **Smart Cooking ©**!
+
+Your privacy is important to us.
+This Privacy Policy explains what information we collect when you use our site, how we use it, and how we keep it safe.
+
+## Information We Collect
+
+We collect and process the following types of information:
+
+### Account Information
+
+- You can create an account directly on our platform.
+- We manage login and sign-up ourselves, without using services like Google or Facebook.
+
+### Login and Session Information
+
+- We use small files (called cookies) to help keep you signed in and remember your session while you're using our site.
+
+### IP Addresses (for Security)
+
+- We record your internet address (IP) to help protect our site from spam or abuse.
+- This information is kept for up to **90 days** and then deleted.
+
+## How We Use Your Information
+
+We use the information we collect to:
+
+- Keep your account safe and make sure you stay logged in.
+- Protect the site from misuse or attacks.
+
+## Cookies
+
+### Essential Cookies
+
+- These are required for the site to work properly, such as staying logged in.
+- We do **not** use cookies to track you on other sites.
+
+### Language Preference
+
+- We may remember your preferred language to show the site in the language you like.
+- If you'd rather not store this, you can block cookies through your browser settings.
+
+## How We Protect Your Information
+
+- We **do not** sell, share, or rent your personal information to anyone.
+- We only collect what is necessary for login and security.
+- We use modern security practices to protect your information from unauthorized access.
+
+## Your Rights and Choices
+
+- Our code is **open-source and [available on GitHub](https://github.com/TheSmartCooking)**, so anyone can see how we handle data.
+- You can ask to see or delete your data at any time by contacting us or opening a GitHub issue.
+
+## In Case of a Security Issue
+
+If something goes wrong and your information might be at risk, we will notify you as soon as we can.
+
+## Changes to This Policy
+
+We may update this policy occasionally. The most recent version will always be available on our site.
+
+## Contact
+
+If you have any questions about this Privacy Policy, feel free to reach out to us.

src/pages/authentication.astro

@@ -51,7 +51,7 @@ import PasswordRequirements from '../components/PasswordRequirements.astro'
         background-color: var(--color-secondary);
         border: none;
         border-radius: var(--border-radius-large);
-        font-size: 1rem;
+        font-size: var(--font-size-small);
         padding: 1rem 2rem;
     }
 

src/pages/privacy.astro

@@ -1,5 +1,19 @@
 ---
+// src/pages/privacy.astro
 import Main from '../layouts/Main.astro'
+import PrivacyPolicy from '../content/privacy-policy.md'
+import '../styles/markdown.css'
 ---
 
-<Main title="Privacy Policy" />
+<Main title="Privacy Policy">
+    <div class="markdown"><PrivacyPolicy /></div>
+</Main>
+
+<style>
+    /* div {
+        display: flex;
+        flex-direction: column;
+        width: 80%;
+        justify-self: center;
+    } */
+</style>

src/styles/form_field.css

@@ -18,7 +18,7 @@
     top: 1rem;
     left: 0.75rem;
     color: #888;
-    font-size: 1rem;
+    font-size: var(--font-size-small);
     pointer-events: none;
     transition: 0.2s ease all;
 }
@@ -27,7 +27,7 @@
 .form-field input.filled + label {
     top: -0.5rem;
     left: 0.5rem;
-    font-size: 0.75rem;
+    font-size: var(--font-size-tiny);
     color: var(--color-secondary);
 }
 

src/styles/global.css

@@ -26,6 +26,16 @@
     --border-radius-medium: 16px;
     --border-radius-large: 32px;
 
+    /* 
+    Define font sizes for headings and body text.
+    Use these to ensure a clear hierarchy and readability in the text.
+     */
+    --font-size-heading: 2.4rem;
+    --font-size-title: 2rem;
+    --font-size-body: 1.5rem;
+    --font-size-small: 1rem;
+    --font-size-tiny: 0.75rem;
+
     /*
     Define a polaroid informations.
     Use these to create a consistent look and feel for the recipe cards.
@@ -63,5 +73,11 @@ svg {
 @media screen and (width <=320px) {
     :root {
         --polaroid-width: 100svw;
+
+        --font-size-heading: 1.75rem;
+        --font-size-title: 1.5rem;
+        --font-size-body: 1.25rem;
+        --font-size-small: 0.75rem;
+        --font-size-tiny: 0.5rem;
     }
 }

src/styles/markdown.css

@@ -0,0 +1,52 @@
+:root {
+    --highlight-color: light-dark(#161616, #e9e9e9);
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+    border-bottom: 1px solid var(--highlight-color);
+    padding-bottom: var(--spacing-small);
+    font-size: var(--font-size-body);
+    font-weight: bold;
+    margin-bottom: var(--spacing-small);
+    margin-top: var(--spacing-medium);
+}
+
+.markdown h1 {
+    font-size: var(--font-size-heading);
+    text-align: center;
+}
+
+.markdown h2 {
+    font-size: var(--font-size-title);
+}
+
+.markdown ul {
+    margin-left: var(--spacing-medium);
+}
+
+.markdown strong {
+    text-decoration: underline;
+}
+
+pre {
+    border: 1px solid var(--highlight-color);
+    border-radius: var(--border-radius-small);
+    overflow-x: auto;
+    padding: var(--spacing-small);
+    background-color: var(--polaroid-color);
+}
+
+pre code {
+    color: #888;
+}
+
+code:not(pre code) {
+    border-radius: var(--border-radius-small);
+    padding: 0 var(--spacing-small);
+    background-color: var(--polaroid-color);
+}