anton/pantosite
1
0
Fork 0
mirror of https://github.com/Pantonius/pantosite-astro.git synced 2026-04-26 09:24:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated styling

Browse Source
This commit is contained in:
Anton Pogrebnjak
2025-02-16 17:25:40 +01:00
parent 810280fd33
commit 9e02d262be
10 changed files with 152 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Footer.astro
View File

@@ -23,7 +23,7 @@ const today = new Date();
</footer>
<style>
footer {
background-color: var(--background);
background-color: var(--background-soft);
padding: 1rem 1rem 2rem;
width: 100%;
}

27
src/components/Header.astro
View File

@@ -5,7 +5,9 @@ import HeaderLink from "./HeaderLink.astro";
<header>
<nav>
<a class="logo" href="/"><img src="/logo.png" alt="ಠ_ಠ" /></a>
<a class="logo" href="/">
<img src="/logo.svg" alt="ಠ_ಠ" />
</a>
<div class="internal-links">
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/projects">Projects</HeaderLink>
@@ -36,8 +38,7 @@ import HeaderLink from "./HeaderLink.astro";
margin: 0;
padding: 0 1em;
width: 100%;
background: var(--background);
box-shadow: var(--standard-box-shadow);
background-color: var(--background-soft);
}
header .logo {
@@ -50,8 +51,7 @@ import HeaderLink from "./HeaderLink.astro";
}
header .logo img {
width: 96px;
height: 96px;
height: 24pt;
}
nav {
@@ -61,7 +61,7 @@ import HeaderLink from "./HeaderLink.astro";
}
nav a {
padding: 1em 0.5em;
padding: .4em 0.5em;
color: var(--text);
border-bottom: 4px solid transparent;
text-decoration: none;
@@ -76,13 +76,14 @@ import HeaderLink from "./HeaderLink.astro";
.social-links a {
display: flex;
}
@media (max-width: 720px) {
.logo {
display: none;
}
.logo img {
display: none;
}
@media (max-width: 720px) {
header .logo img {
height: 18pt;
}
nav {
font-size: 16px;
}
}
</style>

72
src/components/Main.astro Normal file
View File

@@ -0,0 +1,72 @@
---
import { ClientRouter } from "astro:transitions";
---
<canvas id="dotted-background" transition:persist></canvas>
<main transition:name="main" transition:animate="slide">
<slot />
</main>
<style>
canvas#dotted-background {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
<script type="module" transition:persist>
let canvas = document.getElementById("dotted-background");
let ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let gap = 20;
let mouse = { x: canvas.width / 2, y: canvas.height / 2 };
document.addEventListener("mousemove", (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
let distanceThreshold = .2;
let baseOpacity = .05;
let baseRadius = 1;
const draw = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let x = gap; x < canvas.width; x += gap) {
for (let y = gap; y < canvas.height; y += gap) {
// mouse distance
const mouseDistance = Math.sqrt(
Math.pow(mouse.x - x, 2) +
Math.pow(mouse.y - y, 2)
);
// normalized mouse distance
const normalizedMouseDistance = mouseDistance / Math.sqrt(
Math.pow(canvas.width, 2) +
Math.pow(canvas.height, 2)
);
const opacity = Math.max(baseOpacity, .4 - normalizedMouseDistance / distanceThreshold);
const radius = baseRadius + Math.max(0, 1 - normalizedMouseDistance / distanceThreshold);
// draw dots
ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
}
};
setInterval(() => {
draw();
}, 1000 / 60);
</script>

5
src/layouts/BlogPost.astro
View File

@@ -2,6 +2,7 @@
import type { CollectionEntry } from "astro:content";
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Main from "../components/Main.astro";
import Footer from "../components/Footer.astro";
import FormattedDate from "../components/FormattedDate.astro";
@@ -100,7 +101,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<body>
<Header />
<main>
<Main>
<article>
<div class="hero-image">
{
@@ -132,7 +133,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<slot />
</div>
</article>
</main>
</Main>
<Footer />
</body>
</html>

5
src/pages/about.astro
View File

@@ -1,6 +1,7 @@
---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Main from "../components/Main.astro";
import Footer from "../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
---
@@ -12,13 +13,13 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
</head>
<body>
<Header />
<main>
<Main>
<h1>Anton Pogrebnjak</h1>
<p>
Really, I don't have much to tell you about myself. Just look at the amazing stuff I've done and written about. That should suffice.
</p>
<p style="float: right; text-align: end;">Kind regards,<br>Anton</p>
</main>
</Main>
<Footer />
</body>

5
src/pages/blog/index.astro
View File

@@ -1,6 +1,7 @@
---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Main from '../../components/Main.astro';
import Footer from '../../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
@@ -19,13 +20,13 @@ const posts: Post[] = (await getCollection('blog')).map(convertPost).sort(
</head>
<body>
<Header />
<main>
<Main>
{posts.length === 0 ? (
<h1 style="opacity: .5; user-select: none;">No posts yet &#128539;</h1>
) : (
<Showcase collection="blog" posts={posts} />
)}
</main>
</Main>
<Footer />
</body>
</html>

39
src/pages/index.astro
View File

@@ -1,6 +1,7 @@
---
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Main from "../components/Main.astro";
import Footer from "../components/Footer.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
import Showcase from "../components/Showcase.astro";
@@ -19,7 +20,7 @@ const posts: Post[] = (await getCollection("projects"))
</head>
<body>
<Header />
<main>
<Main>
<section id="welcome">
<h1>Hi &#128075;, my name is <a href="/about">Anton</a></h1>
<h2 class="typeout">
@@ -34,9 +35,9 @@ const posts: Post[] = (await getCollection("projects"))
</section>
<section id="projects">
<Showcase color="black" collection="projects" posts={posts} />
<Showcase color="var(--text)" collection="projects" posts={posts} />
</section>
</main>
</Main>
<Footer />
</body><script>
const typeout = document.querySelectorAll(".typeout");
@@ -58,13 +59,6 @@ const posts: Post[] = (await getCollection("projects"))
</script>
<style>
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
section {
padding: 2rem;
border-radius: .75em;
@@ -82,12 +76,9 @@ const posts: Post[] = (await getCollection("projects"))
}
#projects {
background-color: var(--primary);
color: var(--background);
}
#projects .title {
color: var(--background);
border: 2px solid var(--primary);
border-radius: .75em;
color: var(--text);
}
.buttons {
@@ -110,5 +101,21 @@ const posts: Post[] = (await getCollection("projects"))
background-color: var(--accent);
transition: background-color 0.2s;
}
@media (max-width: 720px) {
max-width: 100%;
section {
padding: 1rem;
}
#welcome h1 {
font-size: 1.5rem;
}
#welcome h2 {
font-size: 1rem;
}
}
</style>
</html>

5
src/pages/projects/index.astro
View File

@@ -1,6 +1,7 @@
---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Main from '../../components/Main.astro';
import Footer from '../../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
@@ -19,13 +20,13 @@ const posts: Post[] = (await getCollection('projects')).map(convertPost).sort(
</head>
<body>
<Header />
<main>
<Main>
{posts.length === 0 ? (
<h1 style="opacity: .5; user-select: none;">No posts yet &#128539;</h1>
) : (
<Showcase collection="projects" posts={posts} />
)}
</main>
</Main>
<Footer />
</body>
</html>

32
src/styles/global.css
View File

@@ -28,6 +28,7 @@
--text: #ffffff;
--text-soft: #ddd;
--background: #121212;
--background-soft: #212121;
--primary: #2df598;
--primary-soft: #22cf7e;
--secondary: #222021;
@@ -69,16 +70,6 @@ b {
font-weight: 700;
}
a.more {
display: block;
margin-top: 2em;
font-weight: bold;
}
.indent {
margin-left: 2em;
}
i {
font-size: 2rem;
color: #ffffff;
@@ -87,6 +78,10 @@ i {
main {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 60vw;
}
@@ -142,16 +137,6 @@ code {
color: var(--accent);
}
.wink::after {
content: "ಠ_ಠ";
font-family: "Ubuntu";
}
.wink:hover::after {
content: "ಠ‿↼";
font-family: "Ubuntu";
}
textarea {
width: 100%;
font-size: 16px;
@@ -207,9 +192,14 @@ hr {
body {
font-size: 18px;
}
.logo img {
height: 18px;
}
main {
width: 100vw;
padding: 1em;
padding: 8px;
}
header .logo {