ruidy/orbital-orbit
1
0
Fork 0
mirror of https://github.com/rjNemo/orbital-orbit synced 2026-06-06 05:26:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: Header components with styles

Browse source
This commit is contained in:
Ruidy 2024-12-31 09:31:35 +01:00
parent e25d4c5d14
commit 7e01b7e81f
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
6 changed files with 60 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Header.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Navigation from "./Navigation.astro";
---
<header>
<Navigation />
</header>

2
src/components/Navigation.astro
View file

@ -1,7 +1,7 @@
---
---
<nav>
<nav class="nav-links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/blog">Blog</a>

4
src/pages/about.astro
View file

@ -1,6 +1,6 @@
---
import "../styles/global.css"
import Navigation from "../components/Navigation.astro"
import Header from "../components/Header.astro"
import Footer from "../components/Footer.astro"
const pageTitle = "About Me"
@ -49,7 +49,7 @@ const skillColor = "navy"
</style>
</head>
<body>
<Navigation />
<Header />
<h1>{pageTitle}</h1>
<h2>... and my new website!</h2>

5
src/pages/blog.astro
View file

@ -1,6 +1,6 @@
---
import "../styles/global.css"
import Navigation from "../components/Navigation.astro"
import Header from "../components/Header.astro"
import Footer from "../components/Footer.astro"
const pageTitle = "Blog posts"
@ -16,7 +16,7 @@ const pageTitle = "Blog posts"
<title>{pageTitle}</title>
</head>
<body>
<Navigation />
<Header />
<h1>{pageTitle}</h1>
<p>This is a list of my blog posts.</p>
@ -26,6 +26,7 @@ const pageTitle = "Blog posts"
<li><a href="/posts/post-2">My second blog post</a></li>
<li><a href="/posts/post-3">My third blog post</a></li>
</ul>
<Footer/>
</body>
</html>

4
src/pages/index.astro
View file

@ -1,7 +1,7 @@
---
import "../styles/global.css"
import Navigation from "../components/Navigation.astro"
import Footer from "../components/Footer.astro"
import Header from "../components/Header.astro"
const pageTitle = "Orbital Orbit"
---
@ -15,7 +15,7 @@ const pageTitle = "Orbital Orbit"
<title>{pageTitle}</title>
</head>
<body>
<Navigation />
<Header />
<h1>{pageTitle}</h1>
<Footer/>

45
src/styles/global.css
View file

@ -19,3 +19,48 @@ h1 {
margin: 1rem 0;
font-size: 2.5rem;
}
/* nav styles */
.nav-links {
width: 100%;
top: 5rem;
left: 48px;
background-color: #ff9776;
display: none;
margin: 0;
}
.nav-links a {
display: block;
text-align: center;
padding: 10px 0;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a:focus {
background-color: #ff9776;
}
.expanded {
display: unset;
}
@media screen and (min-width: 636px) {
.nav-links {
margin-left: 5em;
display: block;
position: static;
width: auto;
background: none;
}
.nav-links a {
display: inline-block;
padding: 15px 20px;
}
}