ruidy/orbital-orbit
1
0
Fork 0
mirror of https://github.com/rjNemo/orbital-orbit synced 2026-06-06 06:56:40 +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="/">Home</a>
<a href="/about">About</a> <a href="/about">About</a>
<a href="/blog">Blog</a> <a href="/blog">Blog</a>

4
src/pages/about.astro
View file

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

5
src/pages/blog.astro
View file

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

4
src/pages/index.astro
View file

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

45
src/styles/global.css
View file

@ -19,3 +19,48 @@ h1 {
margin: 1rem 0; margin: 1rem 0;
font-size: 2.5rem; 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;
}
}