phc
/
website
6
4
Fork 0
Code Issues 6 Pull Requests Projects 1 Releases Wiki Activity

Compare commits

base: phc:70ccf24c6bf08c4de2fe2ba2fa1e21053c82706b
Branches Tags
phc:website-ng
phc:next-astro
phc:next
phc:feat/db
phc:dev
phc:main
...
compare: phc:6c15c6ac7b53ad7d34f6c8857f5091af43996307
Branches Tags
phc:website-ng
phc:next-astro
phc:next
phc:feat/db
phc:dev
phc:main

2 Commits
70ccf24c6b ... 6c15c6ac7b

Author SHA1 Message Date
Antonio De Lucreziis 6c15c6ac7b chore: updated readme 6 months ago
Antonio De Lucreziis eca5d60fd6 add: some styles and more organization 6 months ago
15 changed files with 730 additions and 505 deletions
Show Stats

55
README.md
Unescape Escape View File

@ -1,47 +1,32 @@
# Astro Starter Kit: Minimal # PHC Website
```sh Questo è il repository del sito web del PHC. Il sito è costruito utilizzando Astro, un framework statico per la generazione di siti web.
npm create astro@latest -- --template minimal
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files: ## Installazione
```text ```bash
/ pnpm install
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
``` ```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. ## Sviluppo
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. ```bash
pnpm dev
```
Any static assets, like images, can be placed in the `public/` directory. ## Build
## 🧞 Commands ```bash
pnpm build
```
All commands are run from the root of the project, from a terminal: ## Deploy [TODO]
| Command | Action | Il progetto contiene un `Dockerfile` che viene usato per il deploy (del server prodotto da Astro).
| :------------------------ | :----------------------------------------------- |
| `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? ```bash
docker build -t phc-website .
docker run -p 3000:3000 phc-website
```
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). C'è anche un `.drone.yml` che viene usato per il deploy su un server remoto utilizzando Drone per il CD.

18
astro.config.mjs
Unescape Escape View File

@ -3,19 +3,23 @@ import preact from '@astrojs/preact'
import node from '@astrojs/node' import node from '@astrojs/node'
// https://astro.build/config
export default defineConfig({ export default defineConfig({
output: 'hybrid',
outDir: './out/astro',
build: {
client: './out/astro/client',
server: './out/astro/server',
},
server: { server: {
port: 3000, port: 3000,
}, },
markdown: {
shikiConfig: {
theme: 'github-light',
},
},
integrations: [preact()], integrations: [preact()],
adapter: node({ adapter: node({
mode: 'standalone', mode: 'standalone',
}), }),
output: 'hybrid',
outDir: './out/astro',
build: {
client: './out/astro/client',
server: './out/astro/server',
},
}) })

3
package.json
Unescape Escape View File

@ -21,13 +21,16 @@
"astro": "^4.4.6", "astro": "^4.4.6",
"better-sqlite3": "^9.4.3", "better-sqlite3": "^9.4.3",
"drizzle-orm": "^0.29.4", "drizzle-orm": "^0.29.4",
"katex": "^0.16.9",
"preact": "^10.19.6", "preact": "^10.19.6",
"typescript": "^5.3.3" "typescript": "^5.3.3"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/mdx": "^2.1.1",
"@types/better-sqlite3": "^7.6.9", "@types/better-sqlite3": "^7.6.9",
"drizzle-kit": "^0.20.14", "drizzle-kit": "^0.20.14",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"remark-math": "^6.0.0",
"sass": "^1.71.1", "sass": "^1.71.1",
"tsx": "^4.7.1" "tsx": "^4.7.1"
} }

856
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

13
src/client/Counter.jsx
Unescape Escape View File

@ -0,0 +1,13 @@
import { useState } from 'preact/hooks'
export const Counter = ({}) => {
const [count, setCount] = useState(0)
return (
<div class="counter">
<button onClick={() => setCount(value => value - 1)}>-</button>
<div class="value">{count}</div>
<button onClick={() => setCount(value => value + 1)}>+</button>
</div>
)
}

1
src/components/Footer.astro
Unescape Escape View File

@ -0,0 +1 @@
<footer>&copy; PHC 2023</footer>

12
src/components/Header.astro
Unescape Escape View File

@ -0,0 +1,12 @@
<header>
<a href="/" class="logo">
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
</a>
<div class="links">
<a role="button" href="/users">Utenti</a>
<a role="button" href="/news">Notizie</a>
<a role="button" href="/projects">Progetti</a>
<a role="button" href="/about">About</a>
<a class="primary" role="button" href="/login">Accedi</a>
</div>
</header>

13
src/content/guides/2024-02-29-git-101.md
Unescape Escape View File

@ -1,12 +1,11 @@
--- ---
title: Git 101 title: Git 101 (Esempio)
description: Una guida introduttiva alle basi di Git description: Una guida introduttiva alle basi di Git (Esempio)
slug: git-101-example
author: Copilot author: Copilot
series: git series: git
--- ---
# Git 101 (Guida di esempio)
Benvenuto alla guida introduttiva alle basi di Git. In questa guida imparerai come iniziare a usare Git per il controllo di versione dei tuoi progetti. Benvenuto alla guida introduttiva alle basi di Git. In questa guida imparerai come iniziare a usare Git per il controllo di versione dei tuoi progetti.
## Cos'è Git? ## Cos'è Git?
@ -21,11 +20,15 @@ Per iniziare ad usare Git, devi prima installarlo sul tuo computer. Puoi scarica
Una volta installato Git, puoi inizializzare un nuovo repository in una cartella esistente. Apri il terminale e spostati nella cartella del tuo progetto. Quindi esegui il seguente comando: Una volta installato Git, puoi inizializzare un nuovo repository in una cartella esistente. Apri il terminale e spostati nella cartella del tuo progetto. Quindi esegui il seguente comando:
$$
\int_0^1 x^2 \ dx
$$
```bash ```bash
git init git init
``` ```
Questo creerà un nuovo repository Git nella cartella del tuo progetto. Questo creerà un nuovo repository $1+a+\zeta_7-\xi^2$ Git nella cartella del tuo progetto.
## Aggiunta di file ## Aggiunta di file

13
src/layouts/ArticleLayout.astro
Unescape Escape View File

@ -1,7 +1,14 @@
--- ---
import PageLayout from './PageLayout.astro' import BaseLayout from './BaseLayout.astro'
const { frontmatter } = Astro.props import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
--- ---
<PageLayout {...frontmatter} /> <BaseLayout {...Astro.props}>
<Header />
<main class="text-content">
<slot />
</main>
<Footer />
</BaseLayout>

18
src/layouts/BaseLayout.astro
Unescape Escape View File

@ -1,4 +1,6 @@
--- ---
import 'katex/dist/katex.min.css'
import '@fontsource/open-sans/latin.css' import '@fontsource/open-sans/latin.css'
import '@fontsource/source-sans-pro/latin.css' import '@fontsource/source-sans-pro/latin.css'
import '@fontsource/source-code-pro/latin.css' import '@fontsource/source-code-pro/latin.css'
@ -20,6 +22,22 @@ const { title, description, thumbnail, pageName } = Astro.props
<link rel="icon" type="image/png" sizes="512x512" href="/assets/icon.png" /> <link rel="icon" type="image/png" sizes="512x512" href="/assets/icon.png" />
<script>
import renderMathInElement from 'katex/contrib/auto-render'
document.addEventListener('DOMContentLoaded', function () {
renderMathInElement(document.body, {
delimiters: [
{ left: '$$', right: '$$', display: true },
{ left: '$', right: '$', display: false },
{ left: '\\(', right: '\\)', display: false },
{ left: '\\[', right: '\\]', display: true },
],
throwOnError: false,
})
})
</script>
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class:list={Array.isArray(pageName) ? pageName : [pageName]}> <body class:list={Array.isArray(pageName) ? pageName : [pageName]}>

18
src/layouts/PageLayout.astro
Unescape Escape View File

@ -1,22 +1,14 @@
--- ---
import BaseLayout from './BaseLayout.astro' import BaseLayout from './BaseLayout.astro'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
--- ---
<BaseLayout {...Astro.props}> <BaseLayout {...Astro.props}>
<header> <Header />
<div class="logo">
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
</div>
<div class="links">
<a role="button" href="#">Utenti</a>
<a role="button" href="#">Notizie</a>
<a role="button" href="#">Progetti</a>
<a role="button" href="#">About</a>
<a class="primary" role="button" href="#">Accedi</a>
</div>
</header>
<main> <main>
<slot /> <slot />
</main> </main>
<footer>&copy; PHC 2023</footer> <Footer />
</BaseLayout> </BaseLayout>

14
src/pages/guides/[...slug].astro
Unescape Escape View File

@ -1,7 +1,7 @@
--- ---
import { getCollection } from 'astro:content' import { getCollection } from 'astro:content'
import PageLayout from '../../layouts/PageLayout.astro' import ArticleLayout from '../../layouts/ArticleLayout.astro'
export async function getStaticPaths() { export async function getStaticPaths() {
const blogEntries = await getCollection('guides') const blogEntries = await getCollection('guides')
@ -15,9 +15,11 @@ const { entry } = Astro.props
const { Content } = await entry.render() const { Content } = await entry.render()
--- ---
<h1>{entry.data.title}</h1> <ArticleLayout {...entry.data} pageName={['guide', entry.slug]}>
{entry.data.series && <h2>{entry.data.series}</h2>} <div class="text-content">
<h1>{entry.data.title}</h1>
{entry.data.series && <h2>{entry.data.series}</h2>}
<PageLayout title={entry.data.title} description={entry.data.description} pageName={['guide', entry.slug]}> <Content />
<Content /> </div>
</PageLayout> </ArticleLayout>

119
src/pages/index.astro
Unescape Escape View File

@ -15,24 +15,31 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Cos'è il PHC?</div> <div class="title">Cos'è il PHC?</div>
<div class="content"> <div class="content">
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore reprehenderit atque, voluptate Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore
dolorum excepturi libero pariatur sequi? reprehenderit atque, voluptate dolorum excepturi libero pariatur sequi?
</p> </p>
<p> <p>
Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore autem reiciendis quae rem Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore
excepturi optio? Maiores, hic? autem reiciendis quae rem excepturi optio? Maiores, hic?
</p> </p>
<p> <p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet. Tempora earum nemo eveniet Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet.
aspernatur quam quas, doloribus expedita quisquam dignissimos cupiditate inventore a modi optio harum veritatis, Tempora earum nemo eveniet aspernatur quam quas, doloribus expedita quisquam dignissimos
adipisci ab ullam distinctio odio quod delectus ipsum, rerum animi. cupiditate inventore a modi optio harum veritatis, adipisci ab ullam distinctio odio quod
delectus ipsum, rerum animi.
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<section class="news"> <section class="news">
<div class="zig-zag"> <div class="zig-zag">
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet"> <svg
width="100%"
height="2rem"
viewBox="0 0 1 1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMid meet"
>
<defs> <defs>
<pattern id="zig-zag-1" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse"> <pattern id="zig-zag-1" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
<path fill="#C2A8EB" d="M 0,1 L 1,0 L 2,1 L 0,1"></path> <path fill="#C2A8EB" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
@ -49,13 +56,14 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Lorem ipsum dolor sit.</div> <div class="title">Lorem ipsum dolor sit.</div>
<div class="abstract"> <div class="abstract">
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos, Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
voluptatem pariatur eius! aperiam recusandae exercitationem doloribus, illum commodi voluptatem pariatur eius!
</p> </p>
<p> <p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p> </p>
</div> </div>
</div> </div>
@ -63,21 +71,24 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Tempore provident impedit libero?</div> <div class="title">Tempore provident impedit libero?</div>
<div class="abstract"> <div class="abstract">
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos, Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
voluptatem pariatur eius! aperiam recusandae exercitationem doloribus, illum commodi voluptatem pariatur eius!
</p> </p>
<p> <p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p> </p>
<p> <p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p> </p>
<p> <p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p> </p>
</div> </div>
</div> </div>
@ -85,9 +96,9 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Alias molestias consectetur quam</div> <div class="title">Alias molestias consectetur quam</div>
<div class="abstract"> <div class="abstract">
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos, Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
voluptatem pariatur eius! aperiam recusandae exercitationem doloribus, illum commodi voluptatem pariatur eius!
</p> </p>
</div> </div>
</div> </div>
@ -95,13 +106,14 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Inventore dignissimos sapiente nulla</div> <div class="title">Inventore dignissimos sapiente nulla</div>
<div class="abstract"> <div class="abstract">
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos, Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
voluptatem pariatur eius! aperiam recusandae exercitationem doloribus, illum commodi voluptatem pariatur eius!
</p> </p>
<p> <p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p> </p>
</div> </div>
</div> </div>
@ -111,7 +123,13 @@ import PageLayout from '../layouts/PageLayout.astro'
</section> </section>
<section class="projects"> <section class="projects">
<div class="zig-zag"> <div class="zig-zag">
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet"> <svg
width="100%"
height="2rem"
viewBox="0 0 1 1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMid meet"
>
<defs> <defs>
<pattern id="zig-zag-2" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse"> <pattern id="zig-zag-2" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
<path fill="#f5f2cc" d="M 0,1 L 1,0 L 2,1 L 0,1"></path> <path fill="#f5f2cc" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
@ -124,15 +142,15 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Progetti</div> <div class="title">Progetti</div>
<div class="project-list"> <div class="project-list">
<a href="#"> <a target="_blank" href="https://git.phc.dm.unipi.it/">
<div class="project"> <div class="project" style="--card-bg: #272;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="title">Gitea</div> <div class="title">Gitea</div>
<div class="description"> <div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
accusantium labore explicabo quaerat incidunt. dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
</div> </div>
</div> </div>
</a> </a>
@ -142,29 +160,32 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="title">Zulip</div> <div class="title">Zulip</div>
<div class="description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.</div> <div class="description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.
</div>
</div> </div>
</a> </a>
<a href="#"> <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/">
<div class="project"> <div class="project" style="--card-bg: #75ca75;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="title">Orario</div> <div class="title">Orario</div>
<div class="description"> <div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
accusantium labore explicabo quaerat incidunt. dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
</div> </div>
</div> </div>
</a> </a>
<a href="#"> <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/">
<div class="project"> <div class="project" style="--card-bg: #8d5fac;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="title">Problemi</div> <div class="title">Problemi</div>
<div class="description"> <div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae voluptatem incidunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae
voluptatem incidunt.
</div> </div>
</div> </div>
</a> </a>
@ -175,8 +196,8 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
<div class="title">Cluster "Steffè"</div> <div class="title">Cluster "Steffè"</div>
<div class="description"> <div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
accusantium labore explicabo quaerat incidunt. dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
</div> </div>
</div> </div>
</a> </a>
@ -184,7 +205,13 @@ import PageLayout from '../layouts/PageLayout.astro'
</section> </section>
<section class="wanna-be-macchinista"> <section class="wanna-be-macchinista">
<div class="zig-zag"> <div class="zig-zag">
<svg width="100%" height="2rem" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMid meet"> <svg
width="100%"
height="2rem"
viewBox="0 0 1 1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMid meet"
>
<defs> <defs>
<pattern id="zig-zag-3" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse"> <pattern id="zig-zag-3" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
<path fill="#888" d="M 0,1 L 1,0 L 2,1 L 0,1"></path> <path fill="#888" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>

29
src/styles/main.scss
Unescape Escape View File

@ -1,3 +1,5 @@
@import './typography.scss';
*, *,
*::before, *::before,
*::after { *::after {
@ -17,10 +19,10 @@ body {
color: #222; color: #222;
} }
html { // html {
scroll-snap-type: y proximity; // scroll-snap-type: y proximity;
scroll-padding-top: 4rem; // scroll-padding-top: 4rem;
} // }
img { img {
display: block; display: block;
@ -100,6 +102,7 @@ header {
border-bottom: 4px solid #222; border-bottom: 4px solid #222;
background: #fff; background: #fff;
top: 0;
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -142,7 +145,11 @@ footer {
font-size: 20px; font-size: 20px;
} }
.page-homepage { //
// Custom Page Styles
//
.homepage {
header .logo { header .logo {
visibility: hidden; visibility: hidden;
} }
@ -231,8 +238,8 @@ footer {
img { img {
width: 100%; width: 100%;
filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222) drop-shadow(-4px 0 0 #222) filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222)
drop-shadow(0 -4px 0 #222); drop-shadow(-4px 0 0 #222) drop-shadow(0 -4px 0 #222);
} }
} }
@ -359,9 +366,9 @@ footer {
background: #f8e8b1; background: #f8e8b1;
color: #000d; color: #000d;
&:hover { // &:hover {
// background: #8e5ddd; // // background: #8e5ddd;
} // }
} }
} }
} }
@ -383,7 +390,7 @@ footer {
.project { .project {
// background: #fcddff; // background: #fcddff;
// background: #ffa89c; // background: #ffa89c;
background: #a2d4f3; background: var(--card-bg, #a2d4f3);
color: #000e; color: #000e;
border: 3px solid #222; border: 3px solid #222;

53
src/styles/typography.scss
Unescape Escape View File

@ -0,0 +1,53 @@
.text-content {
$base-font-size: 22px;
$heading-scale: 1.33;
@function pow($number, $exponent) {
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
}
}
@return $value;
}
@for $i from 1 through 5 {
h#{$i} {
$factor: pow($heading-scale, 5 - $i);
font-size: $base-font-size * $factor;
}
}
& > * {
max-width: 100ch;
margin: 0 auto;
}
pre,
code {
background: #f0f0f0 !important;
font-family: 'Source Code Pro', monospace;
font-weight: 400;
}
pre {
margin: 1rem auto;
padding: 0.5rem;
max-width: 90ch;
border-radius: 0.5rem;
box-shadow: 0.25rem 0.25rem 0 0 #777;
}
code {
border-radius: 0.25rem;
padding: 0 0.125rem;
}
}
Write Preview
Loading…
Cancel
Save