Initial commit
This commit is contained in:
root
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["astro-build.astro-vscode"],
|
||||||
|
"unwantedRecommendations": []
|
||||||
|
}
|
||||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"command": "./node_modules/.bin/astro dev",
|
||||||
|
"name": "Development server",
|
||||||
|
"request": "launch",
|
||||||
|
"type": "node-terminal"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
48
README.md
Normal file
48
README.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# Astro Starter Kit: Basics
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm create astro@latest -- --template basics
|
||||||
|
```
|
||||||
|
|
||||||
|
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||||
|
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||||
|
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||||
|
|
||||||
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 🚀 Project Structure
|
||||||
|
|
||||||
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
||||||
|
```text
|
||||||
|
/
|
||||||
|
├── public/
|
||||||
|
│ └── favicon.svg
|
||||||
|
├── src/
|
||||||
|
│ ├── layouts/
|
||||||
|
│ │ └── Layout.astro
|
||||||
|
│ └── pages/
|
||||||
|
│ └── index.astro
|
||||||
|
└── package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
|
||||||
|
|
||||||
|
## 🧞 Commands
|
||||||
|
|
||||||
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
|
| Command | Action |
|
||||||
|
| :------------------------ | :----------------------------------------------- |
|
||||||
|
| `npm install` | Installs dependencies |
|
||||||
|
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||||
|
| `npm run build` | Build your production site to `./dist/` |
|
||||||
|
| `npm run preview` | Preview your build locally, before deploying |
|
||||||
|
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||||
|
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||||
|
|
||||||
|
## 👀 Want to learn more?
|
||||||
|
|
||||||
|
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||||
48
astro.config.mjs
Normal file
48
astro.config.mjs
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
|
// Environment detection
|
||||||
|
const isProd = process.env.NODE_ENV === 'production';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
output: 'static', // Change to 'server' if you need SSR
|
||||||
|
|
||||||
|
// Development server settings
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
port: 4321,
|
||||||
|
// Only allow local network in dev mode
|
||||||
|
middleware: [
|
||||||
|
// Middleware to check IP addresses
|
||||||
|
(req, res, next) => {
|
||||||
|
// Skip middleware in production
|
||||||
|
if (isProd) return next();
|
||||||
|
|
||||||
|
const clientIP = req.socket.remoteAddress || '';
|
||||||
|
// Allow local IPs and 192.168.1.x
|
||||||
|
if (
|
||||||
|
clientIP === '127.0.0.1' ||
|
||||||
|
clientIP === '::1' ||
|
||||||
|
clientIP.startsWith('192.168.1.')
|
||||||
|
) {
|
||||||
|
next();
|
||||||
|
} else {
|
||||||
|
res.statusCode = 403;
|
||||||
|
res.end('Access denied: Your IP is not in the allowed range (192.168.1.0/24)');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Vite configuration
|
||||||
|
vite: {
|
||||||
|
server: {
|
||||||
|
// Allow domain for production
|
||||||
|
allowedHosts: ['juchatz.com', 'www.juchatz.com'],
|
||||||
|
|
||||||
|
// Production port (different from dev)
|
||||||
|
hmr: {
|
||||||
|
port: isProd ? 8080 : 4321
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
4504
package-lock.json
generated
Normal file
4504
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
14
package.json
Normal file
14
package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "irregular-inclination",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "^5.7.13"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
1
src/assets/astro.svg
Normal file
1
src/assets/astro.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
1
src/assets/background.svg
Normal file
1
src/assets/background.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
210
src/components/Welcome.astro
Normal file
210
src/components/Welcome.astro
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
---
|
||||||
|
import astroLogo from '../assets/astro.svg';
|
||||||
|
import background from '../assets/background.svg';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<img id="background" src={background.src} alt="" fetchpriority="high" />
|
||||||
|
<main>
|
||||||
|
<section id="hero">
|
||||||
|
<a href="https://astro.build"
|
||||||
|
><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
|
||||||
|
>
|
||||||
|
<h1>
|
||||||
|
To get started, open the <code><pre>src/pages</pre></code> directory in your project.
|
||||||
|
</h1>
|
||||||
|
<section id="links">
|
||||||
|
<a class="button" href="https://docs.astro.build">Read our docs</a>
|
||||||
|
<a href="https://astro.build/chat"
|
||||||
|
>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
|
||||||
|
><path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<a href="https://astro.build/blog/astro-5/" id="news" class="box">
|
||||||
|
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
|
||||||
|
fill="#111827"></path></svg
|
||||||
|
>
|
||||||
|
<h2>What's New in Astro 5.0?</h2>
|
||||||
|
<p>
|
||||||
|
From content layers to server islands, click to learn more about the new features and
|
||||||
|
improvements in Astro 5.0
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
filter: blur(100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 22px;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 12px;
|
||||||
|
color: #111827;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a:hover {
|
||||||
|
color: rgb(78, 80, 86);
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a svg {
|
||||||
|
height: 1em;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.button {
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
|
||||||
|
inset 0 -2px 0 rgba(0, 0, 0, 0.24);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.button:hover {
|
||||||
|
color: rgb(230, 230, 230);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family:
|
||||||
|
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
|
||||||
|
monospace;
|
||||||
|
font-weight: normal;
|
||||||
|
background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0 0 1em;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #111827;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #4b5563;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
display: inline-block;
|
||||||
|
background:
|
||||||
|
linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
|
||||||
|
linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 6px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
padding: 16px;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#news {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
right: 16px;
|
||||||
|
max-width: 300px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background 0.2s;
|
||||||
|
backdrop-filter: blur(50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#news:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 368px) {
|
||||||
|
#news {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
display: block;
|
||||||
|
padding-top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links a.button {
|
||||||
|
padding: 14px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#news {
|
||||||
|
right: 16px;
|
||||||
|
left: 16px;
|
||||||
|
bottom: 2.5rem;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
22
src/layouts/Layout.astro
Normal file
22
src/layouts/Layout.astro
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>Astro Basics</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<slot />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
123
src/pages/about.astro
Normal file
123
src/pages/about.astro
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
---
|
||||||
|
import '../styles/styles.css';
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>About - My Website</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul class="main-menu">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li class="has-dropdown">
|
||||||
|
<a href="services.html">Services</a>
|
||||||
|
<ul class="dropdown">
|
||||||
|
<li class="has-submenu">
|
||||||
|
<a href="services.html#networking">Networking</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="services.html#adblocker">Adblocker</a></li>
|
||||||
|
<li><a href="services.html#openwrt">OpenWRT</a></li>
|
||||||
|
<li><a href="services.html#opnsense">OPNsense</a></li>
|
||||||
|
<li><a href="services.html#nas">NAS</a></li>
|
||||||
|
<li><a href="services.html#proxmox">Proxmox</a></li>
|
||||||
|
<li><a href="services.html#wireguard">Wireguard</a></li>
|
||||||
|
<li><a href="services.html#vpn">VPN</a></li>
|
||||||
|
<li><a href="services.html#vps">VPS</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="has-submenu">
|
||||||
|
<a href="services.html#os">OS</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="services.html#remove-telemetry">Remove Windows Telemetry</a></li>
|
||||||
|
<li><a href="services.html#linux-setup">Set Up Linux</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="about.html">About</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
<section class="sidebar-section news">
|
||||||
|
<h2>Latest News</h2>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 19, 2025</div>
|
||||||
|
<div class="news-title">Website Launch</div>
|
||||||
|
<p>Our new website is now live with an improved user experience.</p>
|
||||||
|
</div>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 15, 2025</div>
|
||||||
|
<div class="news-title">New Services Added</div>
|
||||||
|
<p>We've expanded our services to include specialized solutions.</p>
|
||||||
|
</div>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 10, 2025</div>
|
||||||
|
<div class="news-title">Community Event</div>
|
||||||
|
<p>Join us for our upcoming community event on June 1st.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="sidebar-section important-links">
|
||||||
|
<h2>Important Links</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Documentation</a></li>
|
||||||
|
<li><a href="#">Resources</a></li>
|
||||||
|
<li><a href="#">Projects</a></li>
|
||||||
|
<li><a href="#">Downloads</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="main-content">
|
||||||
|
<h1>About Us</h1>
|
||||||
|
<p>Welcome to my personal tech services website! I'm a passionate technology specialist with expertise in networking, system administration, and open-source solutions.</p>
|
||||||
|
|
||||||
|
<h2>My Background</h2>
|
||||||
|
<p>With over [X] years of experience in the IT industry, I've developed a deep understanding of various technologies and methodologies. My journey began with a curiosity about how computers work and has evolved into a comprehensive skill set that allows me to tackle complex technical challenges.</p>
|
||||||
|
|
||||||
|
<p>I hold certifications in [relevant certifications] and continuously update my knowledge to stay current with the rapidly evolving tech landscape.</p>
|
||||||
|
|
||||||
|
<h2>My Approach</h2>
|
||||||
|
<p>I believe in the power of open-source solutions and privacy-focused technologies. My approach combines technical expertise with a commitment to empowering users through knowledge sharing and transparent practices.</p>
|
||||||
|
|
||||||
|
<p>When working on projects, I prioritize:</p>
|
||||||
|
<ul>
|
||||||
|
<li><span class="highlight">Security</span> - Implementing robust security measures to protect your data and systems</li>
|
||||||
|
<li><span class="highlight">Privacy</span> - Respecting and enhancing your digital privacy</li>
|
||||||
|
<li><span class="highlight">Reliability</span> - Building solutions that work consistently and require minimal maintenance</li>
|
||||||
|
<li><span class="highlight">Knowledge Transfer</span> - Ensuring you understand how your systems work</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Why Choose My Services</h2>
|
||||||
|
<p>Unlike large service providers that offer one-size-fits-all solutions, I provide personalized services tailored to your specific needs. I take the time to understand your requirements, preferences, and constraints before recommending and implementing solutions.</p>
|
||||||
|
|
||||||
|
<p>My clients appreciate my:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Attention to detail and thoroughness</li>
|
||||||
|
<li>Clear communication and jargon-free explanations</li>
|
||||||
|
<li>Commitment to finding the right solution, not just the easiest one</li>
|
||||||
|
<li>Ongoing support and availability for questions</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Get in Touch</h2>
|
||||||
|
<p>I'm always happy to discuss potential projects, answer questions, or provide advice. Feel free to reach out using the contact information below:</p>
|
||||||
|
|
||||||
|
<p>Email: <a href="mailto:your-email@example.com">your-email@example.com</a><br>
|
||||||
|
Phone: (123) 456-7890</p>
|
||||||
|
|
||||||
|
<a href="#" class="cta-button">Contact Me</a>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
98
src/pages/index.astro
Normal file
98
src/pages/index.astro
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
---
|
||||||
|
import '../styles/styles.css';
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>My Website</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul class="main-menu">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li class="has-dropdown">
|
||||||
|
<a href="services.html">Services</a>
|
||||||
|
<ul class="dropdown">
|
||||||
|
<li class="has-submenu">
|
||||||
|
<a href="services.html#networking">Networking</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="services.html#adblocker">Adblocker</a></li>
|
||||||
|
<li><a href="services.html#openwrt">OpenWRT</a></li>
|
||||||
|
<li><a href="services.html#opnsense">OPNsense</a></li>
|
||||||
|
<li><a href="services.html#nas">NAS</a></li>
|
||||||
|
<li><a href="services.html#proxmox">Proxmox</a></li>
|
||||||
|
<li><a href="services.html#wireguard">Wireguard</a></li>
|
||||||
|
<li><a href="services.html#vpn">VPN</a></li>
|
||||||
|
<li><a href="services.html#vps">VPS</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="has-submenu">
|
||||||
|
<a href="services.html#os">OS</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="services.html#remove-telemetry">Remove Windows Telemetry</a></li>
|
||||||
|
<li><a href="services.html#linux-setup">Set Up Linux</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="about.html">About</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
<section class="sidebar-section news">
|
||||||
|
<h2>Latest News</h2>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 19, 2025</div>
|
||||||
|
<div class="news-title">Website Launch</div>
|
||||||
|
<p>Our new website is now live with an improved user experience.</p>
|
||||||
|
</div>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 15, 2025</div>
|
||||||
|
<div class="news-title">New Services Added</div>
|
||||||
|
<p>We've expanded our services to include specialized solutions.</p>
|
||||||
|
</div>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 10, 2025</div>
|
||||||
|
<div class="news-title">Community Event</div>
|
||||||
|
<p>Join us for our upcoming community event on June 1st.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="sidebar-section important-links">
|
||||||
|
<h2>Important Links</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Documentation</a></li>
|
||||||
|
<li><a href="#">Resources</a></li>
|
||||||
|
<li><a href="#">Projects</a></li>
|
||||||
|
<li><a href="#">Downloads</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="main-content">
|
||||||
|
<h1>Welcome to My Website</h1>
|
||||||
|
<p>Hello, I'm a <span class="highlight">developer/professional</span> specializing in creating efficient and robust solutions. This website serves as a platform to showcase my work, share insights, and connect with others who share similar interests.</p>
|
||||||
|
|
||||||
|
<p>With over <span class="highlight">X years</span> of experience in the industry, I've developed a deep understanding of various technologies and methodologies that enable me to deliver high-quality results consistently.</p>
|
||||||
|
|
||||||
|
<p>My approach combines technical expertise with creative problem-solving, ensuring that each project not only meets but exceeds expectations. I believe in the power of collaboration and continuous learning, which has been instrumental in my professional journey.</p>
|
||||||
|
|
||||||
|
<p>Whether you're looking for a partner for your next project, seeking technical advice, or just want to connect with like-minded professionals, you've come to the right place.</p>
|
||||||
|
|
||||||
|
<p>Feel free to explore the website to learn more about my services, check out my portfolio, or get in touch to discuss potential collaborations.</p>
|
||||||
|
|
||||||
|
<a href="#" class="cta-button">Get Started</a>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
146
src/pages/services.astro
Normal file
146
src/pages/services.astro
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
---
|
||||||
|
import '../styles/styles.css';
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Services - My Website</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul class="main-menu">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li class="has-dropdown">
|
||||||
|
<a href="services.html">Services</a>
|
||||||
|
<ul class="dropdown">
|
||||||
|
<li class="has-submenu">
|
||||||
|
<a href="#networking">Networking</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="#adblocker">Adblocker</a></li>
|
||||||
|
<li><a href="#openwrt">OpenWRT</a></li>
|
||||||
|
<li><a href="#opnsense">OPNsense</a></li>
|
||||||
|
<li><a href="#nas">NAS</a></li>
|
||||||
|
<li><a href="#proxmox">Proxmox</a></li>
|
||||||
|
<li><a href="#wireguard">Wireguard</a></li>
|
||||||
|
<li><a href="#vpn">VPN</a></li>
|
||||||
|
<li><a href="#vps">VPS</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="has-submenu">
|
||||||
|
<a href="#os">OS</a>
|
||||||
|
<ul class="submenu">
|
||||||
|
<li><a href="#remove-telemetry">Remove Windows Telemetry</a></li>
|
||||||
|
<li><a href="#linux-setup">Set Up Linux</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="about.html">About</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
<section class="sidebar-section news">
|
||||||
|
<h2>Latest News</h2>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 19, 2025</div>
|
||||||
|
<div class="news-title">Website Launch</div>
|
||||||
|
<p>Our new website is now live with an improved user experience.</p>
|
||||||
|
</div>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 15, 2025</div>
|
||||||
|
<div class="news-title">New Services Added</div>
|
||||||
|
<p>We've expanded our services to include specialized solutions.</p>
|
||||||
|
</div>
|
||||||
|
<div class="news-item">
|
||||||
|
<div class="news-date">May 10, 2025</div>
|
||||||
|
<div class="news-title">Community Event</div>
|
||||||
|
<p>Join us for our upcoming community event on June 1st.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="sidebar-section important-links">
|
||||||
|
<h2>Important Links</h2>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Documentation</a></li>
|
||||||
|
<li><a href="#">Resources</a></li>
|
||||||
|
<li><a href="#">Projects</a></li>
|
||||||
|
<li><a href="#">Downloads</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="main-content">
|
||||||
|
<h1>Our Services</h1>
|
||||||
|
<p>We offer a wide range of technical services to help you optimize your digital environment. Below you'll find detailed information about each of our service categories.</p>
|
||||||
|
|
||||||
|
<!-- Networking Section -->
|
||||||
|
<h2 id="networking">Networking Services</h2>
|
||||||
|
<p>Our networking services help you build a secure, efficient, and reliable network infrastructure tailored to your specific needs.</p>
|
||||||
|
|
||||||
|
<div class="service-card" id="adblocker">
|
||||||
|
<h3>Adblocker Setup</h3>
|
||||||
|
<p>Enhance your browsing experience and protect your privacy with our comprehensive ad-blocking solutions. We implement network-wide ad blocking that works across all your devices without requiring individual software installations.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" id="openwrt">
|
||||||
|
<h3>OpenWRT Configuration</h3>
|
||||||
|
<p>Maximize your router's potential with OpenWRT, a powerful open-source firmware that provides enhanced control, security features, and performance improvements. Our experts will configure OpenWRT to optimize your network based on your specific requirements.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" id="opnsense">
|
||||||
|
<h3>OPNsense Implementation</h3>
|
||||||
|
<p>Secure your network with OPNsense, an enterprise-grade firewall and routing platform. We provide complete setup, configuration, and maintenance services to ensure your network remains protected against evolving threats.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" id="nas">
|
||||||
|
<h3>NAS Setup and Optimization</h3>
|
||||||
|
<p>Create a centralized storage solution with our Network Attached Storage (NAS) services. We'll help you select the right hardware, implement the appropriate software, and configure backup routines to keep your data safe and accessible.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" id="proxmox">
|
||||||
|
<h3>Proxmox Virtualization</h3>
|
||||||
|
<p>Leverage the power of Proxmox VE to create an efficient virtualization environment. Our services include installation, configuration, VM setup, and ongoing management to ensure optimal resource utilization and system performance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" id="wireguard">
|
||||||
|
<h3>Wireguard VPN Setup</h3>
|
||||||
|
<p>Implement a modern, secure, and efficient VPN solution with Wireguard. We provide end-to-end setup and configuration services to ensure secure remote access to your network from anywhere in the world.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" id="vpn">
|
||||||
|
<h3>VPN Solutions</h3>
|
||||||
|
<p>Protect your online privacy and secure your data with our comprehensive VPN solutions. We offer setup, configuration, and troubleshooting services for various VPN protocols to meet your specific security requirements.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" id="vps">
|
||||||
|
<h3>VPS Management</h3>
|
||||||
|
<p>Let us handle the setup and management of your Virtual Private Server. From initial configuration to ongoing maintenance and security updates, we ensure your VPS runs smoothly and securely at all times.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- OS Section -->
|
||||||
|
<h2 id="os">Operating System Services</h2>
|
||||||
|
<p>Our OS services help you get the most out of your operating system while ensuring security, privacy, and optimal performance.</p>
|
||||||
|
|
||||||
|
<div class="service-card" id="remove-telemetry">
|
||||||
|
<h3>Remove Windows Telemetry</h3>
|
||||||
|
<p>Enhance your privacy by removing Windows telemetry features that collect and send data to Microsoft. Our service includes identification and disabling of telemetry components while ensuring system stability and functionality.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" id="linux-setup">
|
||||||
|
<h3>Set Up Linux</h3>
|
||||||
|
<p>Make the transition to Linux smooth and hassle-free with our comprehensive setup services. We'll help you select the right distribution, handle the installation process, configure your system, and provide guidance on essential software and daily operations.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
340
src/styles/styles.css
Normal file
340
src/styles/styles.css
Normal file
@@ -0,0 +1,340 @@
|
|||||||
|
:root {
|
||||||
|
--gruvbox-bg: #282828;
|
||||||
|
--gruvbox-bg-soft: #32302f;
|
||||||
|
--gruvbox-bg-alt: #3c3836;
|
||||||
|
--gruvbox-fg: #ebdbb2;
|
||||||
|
--gruvbox-fg-alt: #d5c4a1;
|
||||||
|
--gruvbox-red: #cc241d;
|
||||||
|
--gruvbox-green: #98971a;
|
||||||
|
--gruvbox-yellow: #d79921;
|
||||||
|
--gruvbox-blue: #458588;
|
||||||
|
--gruvbox-purple: #b16286;
|
||||||
|
--gruvbox-aqua: #689d6a;
|
||||||
|
--gruvbox-orange: #d65d0e;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background-color: var(--gruvbox-bg);
|
||||||
|
color: var(--gruvbox-fg);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--gruvbox-blue);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--gruvbox-aqua);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 250px 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"header header"
|
||||||
|
"sidebar main";
|
||||||
|
min-height: 100vh;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header styles */
|
||||||
|
header {
|
||||||
|
grid-area: header;
|
||||||
|
background-color: var(--gruvbox-bg-alt);
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 2px solid var(--gruvbox-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Menu with Dropdowns */
|
||||||
|
.main-menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
list-style: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu > li {
|
||||||
|
margin: 0 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu li a {
|
||||||
|
color: var(--gruvbox-fg);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu > li > a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: var(--gruvbox-yellow);
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu > li > a:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu > li > a:hover {
|
||||||
|
color: var(--gruvbox-yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dropdown menu */
|
||||||
|
.dropdown, .submenu {
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--gruvbox-bg-alt);
|
||||||
|
border: 1px solid var(--gruvbox-bg-soft);
|
||||||
|
min-width: 180px;
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 100;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-dropdown:hover > .dropdown {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li, .submenu > li {
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li > a, .submenu > li > a {
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
border-bottom: 1px solid var(--gruvbox-bg-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li:last-child > a, .submenu > li:last-child > a {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown > li > a:hover, .submenu > li > a:hover {
|
||||||
|
background-color: var(--gruvbox-bg-soft);
|
||||||
|
color: var(--gruvbox-yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Submenu (third level) */
|
||||||
|
.submenu {
|
||||||
|
left: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-submenu:hover > .submenu {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-submenu > a:after {
|
||||||
|
content: '›';
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar styles */
|
||||||
|
.sidebar {
|
||||||
|
grid-area: sidebar;
|
||||||
|
background-color: var(--gruvbox-bg-soft);
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-right: 1px solid var(--gruvbox-bg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section h2 {
|
||||||
|
color: var(--gruvbox-yellow);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 1px solid var(--gruvbox-bg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-item {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 1px dashed var(--gruvbox-bg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-date {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--gruvbox-aqua);
|
||||||
|
}
|
||||||
|
|
||||||
|
.news-title {
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0.3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.important-links ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.important-links ul li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.important-links ul li::before {
|
||||||
|
content: '»';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--gruvbox-orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main content styles */
|
||||||
|
main {
|
||||||
|
grid-area: main;
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: var(--gruvbox-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content h1 {
|
||||||
|
color: var(--gruvbox-green);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content h2 {
|
||||||
|
color: var(--gruvbox-yellow);
|
||||||
|
margin: 1.5rem 0 1rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content h3 {
|
||||||
|
color: var(--gruvbox-blue);
|
||||||
|
margin: 1.2rem 0 0.8rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content ul, .main-content ol {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
color: var(--gruvbox-yellow);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--gruvbox-orange);
|
||||||
|
color: var(--gruvbox-bg);
|
||||||
|
padding: 0.7rem 1.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-button:hover {
|
||||||
|
background-color: var(--gruvbox-red);
|
||||||
|
color: var(--gruvbox-fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
background-color: var(--gruvbox-bg-soft);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-left: 3px solid var(--gruvbox-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card h3 {
|
||||||
|
color: var(--gruvbox-aqua);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"header"
|
||||||
|
"main"
|
||||||
|
"sidebar";
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
border-right: none;
|
||||||
|
border-top: 1px solid var(--gruvbox-bg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile menu adjustments */
|
||||||
|
.main-menu {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu > li {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
position: static;
|
||||||
|
width: 100%;
|
||||||
|
display: none;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-dropdown:hover > .dropdown {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submenu {
|
||||||
|
position: static;
|
||||||
|
width: 100%;
|
||||||
|
display: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-left: 2px solid var(--gruvbox-aqua);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-submenu:hover > .submenu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
5
tsconfig.json
Normal file
5
tsconfig.json
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"include": [".astro/types.d.ts", "**/*"],
|
||||||
|
"exclude": ["dist"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user