create basic components for index
- Updated layout - Include CSS reset - Include Catppuccin color variables - Add basic styling - Create navbar component
This commit is contained in:
parent
894baef9c8
commit
11473a6b53
7 changed files with 152 additions and 82 deletions
13
README.md
13
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
|
|||
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
|
|
|||
61
src/assets/style/global.css
Normal file
61
src/assets/style/global.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
13
src/assets/style/themes.css
Normal file
13
src/assets/style/themes.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
9
src/assets/style/utils.css
Normal file
9
src/assets/style/utils.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.hstack {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-unstyle {
|
||||
list-style: none;
|
||||
}
|
||||
31
src/components/Navbar.astro
Normal file
31
src/components/Navbar.astro
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
interface Props {
|
||||
links: { href: string, text: string }[];
|
||||
}
|
||||
|
||||
const { links } = Astro.props;
|
||||
---
|
||||
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<ul class="list-unstyle hstack">
|
||||
{links.map(link =>(
|
||||
<li class="nav-item">
|
||||
<a class:list={"nav-link", { active: Astro.url.pathname === link.href}} href={link.href}>{link.text}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
li > a {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,6 +4,7 @@ export interface Props {
|
|||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
import "../assets/style/global.css";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -15,22 +16,14 @@ const { title } = Astro.props;
|
|||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
|
||||
<!-- Reset and normilize styles -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
:root {
|
||||
--accent: 124, 58, 237;
|
||||
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
code {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
]
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main>
|
||||
<header>
|
||||
<Navbar links={navbarLinks}/>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<h1>Welcome to <span class="text-gradient">My Page :D</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(var(--accent), 25%);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent), 12%);
|
||||
color: rgb(var(--accent));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.45em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
header > :global(*) {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue