From 11473a6b53cfa15056c1510ca15ef33108f15926 Mon Sep 17 00:00:00 2001 From: aleidk Date: Sun, 13 Aug 2023 12:32:28 -0400 Subject: [PATCH] create basic components for index - Updated layout - Include CSS reset - Include Catppuccin color variables - Add basic styling - Create navbar component --- README.md | 13 +++++- src/assets/style/global.css | 61 +++++++++++++++++++++++++++ src/assets/style/themes.css | 13 ++++++ src/assets/style/utils.css | 9 ++++ src/components/Navbar.astro | 31 ++++++++++++++ src/layouts/Layout.astro | 23 ++++------ src/pages/index.astro | 84 ++++++++----------------------------- 7 files changed, 152 insertions(+), 82 deletions(-) create mode 100644 src/assets/style/global.css create mode 100644 src/assets/style/themes.css create mode 100644 src/assets/style/utils.css create mode 100644 src/components/Navbar.astro diff --git a/README.md b/README.md index 43c1d6d..d8069f9 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,15 @@ +# Personal Webpage + +## Packages usage + +- Astro Website framework +- ReactJS for interactive components +- [Gardevoir](https://github.com/krshoss/gardevoir) for CSS reset and normalization + +Themes: + +- [Catppuccin](https://github.com/catppuccin/catppuccin) + # Astro Starter Kit: Basics ``` @@ -12,7 +24,6 @@ npm create astro@latest -- --template basics ![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png) - ## 🚀 Project Structure Inside of your Astro project, you'll see the following folders and files: diff --git a/src/assets/style/global.css b/src/assets/style/global.css new file mode 100644 index 0000000..fcb1ae4 --- /dev/null +++ b/src/assets/style/global.css @@ -0,0 +1,61 @@ +@import url('./themes.css'); +@import url('./utils.css'); + +html { + background-color: var(--prj-bg); + color: var(--prj-text); +} + +body { + max-width: 95vw; /* leave some space in the end by default */ + margin: auto; +} + +/* TODO: Optimize, clean and realocate where it belogns the links styles */ +a { + --boder-color: transparent; + color: var(--prj-link-text); + border: 1px solid var(--boder-color); + border-radius: 4px; + + transition: background-color 200ms, color 200ms; +} + +a.active { + border: 1px solid var(--prj-accent-bg); +} + +a:hover { + --border-color: var(--prj-accent-bg); + background-color: var(--prj-accent-bg); + color: var(--prj-accent-text); + border: 1px solid var(--border-color); +} + +/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */ + +@media screen and (min-width: 640px) { + body { + min-width: 640px; + } +} +@media screen and (min-width: 768px) { + body { + min-width: 768px; + } +} +@media screen and (min-width: 1024px) { + body { + min-width: 1024px; + } +} +@media screen and (min-width: 1280px) { + body { + min-width: 1280px; + } +} +@media screen and (min-width: 1536px) { + body { + max-width: 1536px; + } +} diff --git a/src/assets/style/themes.css b/src/assets/style/themes.css new file mode 100644 index 0000000..84a5918 --- /dev/null +++ b/src/assets/style/themes.css @@ -0,0 +1,13 @@ +/* Reference: https://github.com/catppuccin/palette/blob/main/css/catppuccin.css */ +@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css'); + +/* Variables prefixed with prj to avoid collisions */ +:root { + /* Using catppuccin for now, make a theme switcher later */ + --prj-bg: var(--ctp-macchiato-base); + --prj-text: var(--ctp-macchiato-text); + --prj-link-text: var(--ctp-macchiato-teal); + + --prj-accent-bg: var(--ctp-macchiato-teal); + --prj-accent-text: var(--ctp-macchiato-base); +} diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css new file mode 100644 index 0000000..e0d178c --- /dev/null +++ b/src/assets/style/utils.css @@ -0,0 +1,9 @@ +.hstack { + display: flex; + gap: 1rem; + align-items: center; +} + +.list-unstyle { + list-style: none; +} diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro new file mode 100644 index 0000000..5f341df --- /dev/null +++ b/src/components/Navbar.astro @@ -0,0 +1,31 @@ +--- +interface Props { + links: { href: string, text: string }[]; +} + +const { links } = Astro.props; +--- + + + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7479f9c..2deba77 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -4,6 +4,7 @@ export interface Props { } const { title } = Astro.props; +import "../assets/style/global.css"; --- @@ -15,22 +16,14 @@ const { title } = Astro.props; {title} + + + + - +
+ +
- diff --git a/src/pages/index.astro b/src/pages/index.astro index 0e81cb6..bdb70c7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,81 +1,33 @@ --- import Layout from '../layouts/Layout.astro'; import Card from '../components/Card.astro'; +import Navbar from '../components/Navbar.astro'; + +const navbarLinks = [ + { href: "/", text: "Home" }, + { href: "/blog", text: "Blog" }, + { href: "/portafolio", text: "Portafolio" }, + { href: "/curriculum", text: "Curriculum" }, + { href: "/contact", text: "Contact" }, +] --- -
+
+ +
+ + +

Welcome to My Page :D

To get started, open the directory src/pages in your project.
Code Challenge: Tweak the "Welcome to Astro" message above.

-
    - - - - -
-