Skip to content
Snippets Groups Projects
Commit 65a09d21 authored by Jannes Lücht's avatar Jannes Lücht :shark:
Browse files

:tada: Initial commit

parent 9badd4ad
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2428 additions and 283 deletions
.gitlab-ci.yml 0 → 100644
+ 0
− 0
View file @ 65a09d21
astro.config.mjs
+ 6
− 3
View file @ 65a09d21
......@@ -4,8 +4,11 @@ import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind';
// https://astro.build/config
export default defineConfig({
site: 'https://example.com',
integrations: [mdx(), sitemap()],
});
site: 'https://example.com',
output: 'hybrid',
integrations: [mdx(), sitemap(), tailwind()],
});
\ No newline at end of file
lib/directus.ts 0 → 100644
+ 47
− 0
View file @ 65a09d21
import { createDirectus, rest, } from '@directus/sdk';
type Post = {
id: string;
status: string;
sort: string;
user_created: string;
user_updated: string;
date_created: string;
date_updated: string;
title: string;
content: string;
}
type Member = {
id: number;
date_created: number;
name: string;
department: string;
image1: string;
image2: string;
}
type Mottos = {
Motto: string;
Description: string;
}
type Globals_translations = {
id: string;
Languages_code: string;
Introduction: string;
}
type Schema = {
Posts: Post[];
Globals: any;
Globals_translations: Globals_translations[];
Members: Member[];
Mottos: Mottos[]
}
export const CONTENT_URL = "http://content.hai.jannus.gay"
const directus = createDirectus<Schema>(CONTENT_URL).with(rest());
export default directus;
\ No newline at end of file
package-lock.json
+ 1745
− 16
View file @ 65a09d21
This diff is collapsed.
package.json
+ 9
− 2
View file @ 65a09d21
......@@ -10,11 +10,18 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.9.4",
"@astrojs/mdx": "^3.1.9",
"@astrojs/rss": "^4.0.9",
"@astrojs/sitemap": "^3.2.1",
"@astrojs/tailwind": "^5.1.2",
"@directus/sdk": "^18.0.0",
"astro": "^4.16.15",
"@astrojs/check": "^0.9.4",
"typescript": "^5.7.2"
"astro-particles": "^2.10.0",
"flag-icons": "^7.2.3",
"tailwindcss": "^3.4.15",
"tsparticles": "^2.10.0",
"typescript": "^5.7.2",
"typewriter-effect": "^2.21.0"
}
}
src/components/MainPage/Agenda.astro 0 → 100644
+ 14
− 0
View file @ 65a09d21
---
import directus from "../../../lib/directus";
import { readItems, readSingleton, readTranslation } from "@directus/sdk";
// const { Introduction } = (await directus.request(readItems("Globals_translations", {
// filter: {
// Languages_code: {
// _eq: "de"
// }
// }
// })))[0]
---
<!-- <p set:html={Introduction}/> -->
src/components/MainPage/InteractiveMascot.astro 0 → 100644
+ 229
− 0
View file @ 65a09d21
---
// import Particles from "astro-particles";
// import type { ISourceOptions } from "tsparticles-engine";
// const options: ISourceOptions = {
// fullScreen: {
// enable: true,
// zIndex: 0
// },
// fpsLimit: 60,
// particles: {
// number: {
// value: 0
// },
// color: {
// value: "#ff0000",
// animation: {
// enable: true,
// speed: 180,
// sync: true
// }
// },
// shape: {
// type: "heart"
// },
// opacity: {
// value: 1
// },
// size: {
// },
// move: {
// enable: true,
// speed: { min: 10, max: 20 },
// direction: "top",
// random: false,
// straight: false,
// outMode: "destroy",
// gravity: {
// enable: true
// }
// }
// },
// interactivity: {
// detectsOn: "window",
// events: {
// onclick: {
// enable: true,
// mode: "trail"
// },
// resize: true
// },
// modes: {
// trail: {
// delay: 0.1,
// quantity: 1
// }
// }
// },
// retina_detect: true
// };
---
<!-- <script>
//@ts-nocheck :3
import { type Container, type Engine, tsParticles } from "tsparticles-engine";
import { loadFull } from "tsparticles";
// the function name is the parameter passed to the init attribute
// required
// add the function to window is mandatory, it will be searched there
window.particlesInit = async function (engine: Engine) {
await loadFull(engine);
};
// the function name is the parameter passed to the loaded attribute
// optional
// add the function to window is mandatory, it will be searched there
window.particlesLoaded = function (container: Container) {
console.log("particlesLoaded callback");
};
</script>
<Particles id="tsparticles" options={options} init="particlesInit" /> -->
<div id="tsparticles" class="relative">
<svg
width="490"
class="z-10"
height="363"
viewBox="0 0 490 363"
fill="none"
version="1.1"
id="svg24"
>
<g
clip-path="url(#clip0_11_215)"
id="g24"
transform="translate(-478.57389,-321.45718)"
>
<path
d="m 828.026,711.13 c -2.964,0.36 -43.256,2.882 -137.196,-48.197 -4.501,-4.148 -5.014,-23.834 -3.385,-24.719 6.661,-3.621 16.979,10.002 17.059,8.145 0.654,-15.064 2.43,-14.259 3.44,-14.456 5.931,-1.156 13.103,11.253 13.322,9.876 2.219,-13.984 2.184,-14.194 4.758,-15.445 4.155,-2.019 13.945,11.991 14.064,10.926 1.1,-9.805 2.446,-13.853 3.347,-14.342 4.034,-2.188 12.029,10.307 12.462,9.283 0.433,-1.024 2.248,-14.012 3.566,-16.294 1.706,-2.955 10.443,7.961 14.93,10.274 1.592,-1.82 0.439,-13.644 2.186,-15.294 3.249,-3.068 14.866,7.62 13.982,6.693 -19.931,-20.889 -26.965,-22.529 -31.709,-22.52 -3.388,0.007 -8.655,-11.702 -8.907,-11.209 -1.993,3.902 -5.983,7.322 -8.337,6.804 -5.194,-1.144 -9.62,-19.787 -11.586,-19.558 -4.468,0.522 -12.553,14.698 -14.171,13.245 -3.841,-3.449 -6.693,-25.381 -7.439,-23.949 -12.82,24.595 -13.325,24.404 -15.379,24.292 -3.611,-0.198 -14.056,-29.691 -14.52,-28.681 -10.486,22.789 -12.614,25.888 -14.067,25.592 -8.508,-1.729 -18.03,-31.455 -18.959,-29.558 -5.257,10.733 -11.124,31.768 -13.285,30.964 -9.249,-3.44 -19.851,-30.84 -20.287,-28.323 -1.901,10.971 -4.722,35.627 -6.378,35.423 -5.461,-0.671 -21.332,-26.301 -26.558,-37.838 -15.389,-5.937 -19.573,-11.237 -21.082,-13.176 -44.088,-56.659 -79.396,-144.231 -76.432,-149.334 28.889,-49.739 324.481,-60.646 330.575,-55.112 11.658,-0.119 151.28,11.982 254.88,41.905 34.17,-86.986 177.78,-155.056 165.97,-127.958 -46.41,106.507 -6.3,172.407 41.49,179.553 28.23,4.221 232.99,44.227 291.54,59.981 31.22,-34.261 60.93,-54.777 58.14,-32.727 -3.8,30.029 0.84,40.533 7.02,42.03 23.52,5.694 117.22,19.944 168.05,-20.1 132.68,-104.528 255.07,-154.013 365.72,-126.609 40.55,10.044 -219.47,86.608 -225.81,313.068 -3.45,123.357 215.48,267.339 219.5,277.405 11.6,29.001 -232.18,-47.997 -399.66,-151.275 -37.77,-23.293 -89.86,-28.5 -121.97,-27.272 -28.77,1.1 -0.27,35.674 -26.91,27.002 -4.82,-1.57 -18.06,-26.451 -28.91,-25.599 -8.83,0.692 -10.89,26.152 -17.81,24.454 -16.7,-4.103 -20.92,-27.01 -40.31,-27.622 -43.11,-1.362 -139.12,12.667 -154.41,12.266 -24.42,-0.641 -20.22,21.922 29.05,76.503 94.81,90.368 -172.7,-14.259 -217.9,-63.166 -85.85,-7.971 -116.92,-20.417 -148.3,-21.208 -33.151,-0.835 -38.158,3.678 -69.078,59.352 -14.046,25.29 -15.163,-71.633 -41.076,-83.412 -30.506,-13.866 -41.43,-10.936 -93.23,-30.083 z"
fill="#191821"
id="path1"></path>
<path
d="m 833.083,701.839 c -36.156,-1.076 -102.045,-31.251 -121.16,-42.267 31.626,-5.377 68.019,-26.562 91.658,-35.367 8.132,-3.029 39.716,14.999 41.071,4.905 1.165,-8.679 -23.016,-9.429 -40.006,-15.407 -29.105,-10.241 -68.049,-90.442 -224.852,-71.905 -14.77,1.746 -60.66,-75.745 -88.043,-149.256 38.878,-35.386 245.137,-38.48 327.074,-43.952 47.796,38.635 147.408,197.345 14.258,353.249 z"
fill="#9db6cc"
id="path2"></path>
<path
d="M 899.533,544.055 C 723,540.641 687.737,416.549 493.519,393.75 c -15.75,-1.849 40.912,-43.053 325.736,-46.371 60.877,53.142 84.6,138.211 80.278,196.676 z"
fill="#052742"
id="path3"></path>
<path
d="m 812.249,443.848 c 1.392,-17.253 -17.052,-24.856 -32.491,-27.476 -12.876,-2.185 -38.571,0.022 -40.468,17.117 -1.669,15.032 9.038,26.954 33.953,30.092 14.456,1.821 37.811,-4.92 39.006,-19.733 z"
fill="#191821"
id="path4"></path>
<path
d="m 802.883,443.76 c 2.243,-10.874 -13.687,-16.792 -23.297,-18.401 -8.26,-1.383 -29.109,-1.588 -31.238,10.033 -1.995,10.885 10.567,15.723 24.274,18.501 9.126,1.849 28.075,0.467 30.261,-10.133 z"
fill="#fff"
id="path5"></path>
<path
d="m 597.131,452.937 c 1.188,1.663 1.739,5.359 0.448,7.14 -0.809,1.117 -3.386,2.11 -6.234,0.046 -3.228,-2.339 -7.847,-13.278 -9.911,-15.995 -2.444,-3.216 -9.204,-5.353 -9.941,-7.794 -0.651,-2.155 -0.459,-6.301 2.824,-6.561 2.526,-0.2 6.539,0.119 13.185,6.211 2.262,2.073 8.2,12.799 9.629,16.953 z"
fill="#191821"
id="path7"></path>
<path
d="m 787.077,621.611 c -1.724,-1.855 -3.742,-3.505 -6.647,-4.04 -0.272,-0.05 -0.759,7.401 -0.351,7.581 0.7,0.31 5.74,-1.946 6.998,-3.541 z"
fill="#fafafa"
id="path8"></path>
<path
d="m 770.269,630.006 c 0.242,-0.562 -5.22,-6.187 -7.519,-7.287 -0.316,-0.151 -1.763,2.767 -2.07,11.172 -0.016,0.429 6.025,-0.343 9.589,-3.885 z"
fill="#fafafa"
id="path9"></path>
<path
d="m 753.429,637.379 c 0.265,-1.071 -5.577,-6.773 -6.81,-6.736 -0.4,0.012 -2.504,7.494 -1.403,9.483 0.384,0.694 7.88,-1.397 8.213,-2.747 z"
fill="#fafafa"
id="path10"></path>
<path
d="m 738.578,643.029 c -1.035,-3.288 -9.286,-11.397 -10.15,-10.899 -1.349,1.844 -3.082,13.493 -2.209,13.752 3.273,0.972 11.387,-1.894 12.359,-2.853 z"
fill="#fafafa"
id="path11"></path>
<path
d="m 718.44,647.31 c 0.388,-0.919 -2.423,-5.515 -7.885,-9.006 -0.311,-0.199 -1.571,8.465 -1.533,10.95 0.008,0.495 7.057,0.326 9.418,-1.944 z"
fill="#fafafa"
id="path12"></path>
<path
d="m 700.799,650.388 c -2.56,-4.081 -8.712,-6.967 -8.846,-6.243 -1.057,5.716 0.893,9.55 1.473,9.129 2.582,-1.874 6.183,-1.993 7.373,-2.886 z"
fill="#fafafa"
id="path13"></path>
<path
d="m 746.216,580.787 c -1.211,-1.388 -6.38,-3.935 -6.595,-3.766 -1.327,1.043 1.036,7.603 3.041,7.855 1.065,0.133 2.458,-1.016 3.554,-4.089 z"
fill="#fafafa"
id="path14"></path>
<path
d="m 723.469,568.141 c -0.615,-1.24 -6.396,-5.177 -7.761,-3.884 -1.192,1.129 0.096,10.749 1.591,10.979 0.994,0.153 4.333,-2.309 6.17,-7.095 z"
fill="#fafafa"
id="path15"></path>
<path
d="m 703.234,558.675 c -1.753,-2.489 -19.114,-6.106 -19.537,-5.165 -0.45,1.001 7.881,22.655 9.483,23.033 1.694,0.4 8.413,-14.152 10.054,-17.868 z"
fill="#fafafa"
id="path16"></path>
<path
d="m 673.973,552.217 c 0.18,-0.689 -20.639,-3.984 -23.038,-2.467 -1.812,1.146 10.877,26.562 12.662,24.795 3.264,-3.232 8.718,-15.995 10.376,-22.328 z"
fill="#fafafa"
id="path17"></path>
<path
d="m 641.466,549.793 c -8.794,-2.724 -25.959,-2.916 -26.817,-1.324 -1.08,2.006 13.72,26.68 16.196,26.506 2.005,-0.141 8.106,-20.595 10.621,-25.182 z"
fill="#fafafa"
id="path18"></path>
<path
d="m 608.17,548.438 c -4.557,-0.484 -22.849,1.345 -23.448,2.703 -1.506,3.416 16.153,30.273 18.096,30.004 1.268,-0.176 5.222,-29.101 5.352,-32.707 z"
fill="#fafafa"
id="path19"></path>
<path
d="m 830.089,685.717 c -6.039,5.241 -0.26,15.133 2.873,16.347 53.456,20.706 85.943,23.564 96.211,28.846 20.54,10.567 22.625,101.795 33.932,80.006 12.718,-33.073 36.108,-59.805 36.108,-59.805 193.727,30.295 516.187,0.06 535.927,-0.225 13.47,18.305 25.36,34.082 27.53,31.906 8.65,-8.706 8.55,-23.349 18.12,-24.928 9.13,-1.508 22.3,26.162 33.34,25.909 7.4,-7.031 -4.91,-21.156 1.86,-25.203 5.63,-1.517 5.53,-7.145 45.76,-1.968 -19.59,-2.58 -25.89,-15.748 -49.58,-19.027 -21.93,-3.036 -209.88,-44.428 -230.15,-46.603 -305.1,-32.746 -262.73,-4.827 -483.33,-146.908 -9.939,-6.401 -68.601,141.653 -68.601,141.653 z"
fill="#9db6cc"
id="path20"></path>
<path
d="m 811.176,361.132 c 0,0 2.488,-14.188 7.699,-13.689 214.675,20.572 254.835,66.402 259.445,50.035 8.58,-30.442 104.31,-143.325 131.33,-125.117 -47.5,113.927 11.39,169.254 37.16,175.163 25.76,5.909 296.92,51.049 315.28,53.946 19.46,3.072 45.4,-49.651 50.07,-36.123 8.35,24.224 -11.43,44.986 18.54,55.441 13.42,4.68 117.26,16.392 139.34,-1.628 84.68,-69.101 320.17,-192.918 340.85,-151.888 -317.35,211.073 -240.09,399.59 -1.23,548.358 -19.58,39.434 -350.58,-146.647 -376.26,-153.911 -5.39,-1.527 -10.92,-9.029 -76.47,-5.133 -286.95,-59.315 -278.32,-33.119 -343.47,-34.063 -55.64,-0.805 98.92,144.927 90.61,150.3 -8.31,5.372 -233.22,-54.211 -261.26,-181.095 -104.73,-10.418 -204.481,-42.396 -205.542,-58.284 -4.096,-61.355 -51.933,-87.616 -43.31,-96.065 8.624,-8.448 -82.782,-176.247 -82.782,-176.247 z"
fill="#052742"
id="path21"></path>
<path
d="m 876.198,517.471 c -4.68,-7.467 -6.357,-17.737 0.635,-13.92 6.992,3.817 11.332,6.976 13.471,16.516 2.14,9.539 5.099,37.807 4.085,47.804 -1.014,9.997 -8.283,39.558 -11.782,39.592 -3.499,0.033 -9.037,1.026 -10.184,-2.975 -1.148,-4.001 5.738,-6.799 7.715,-18.64 1.978,-11.841 4.925,-29.411 4.055,-39.987 -0.869,-10.576 -7.995,-28.39 -7.995,-28.39 z"
fill="#191821"
id="path22"></path>
<path
d="m 907.314,542.028 c -4.15,-7.595 -5.545,-18.098 0.744,-14.272 6.289,3.826 10.184,7.011 12.006,16.761 1.823,9.75 4.16,38.682 3.12,48.939 -1.04,10.257 -7.987,40.639 -11.157,40.716 -3.171,0.077 -8.201,1.161 -9.192,-2.925 -0.992,-4.086 5.282,-7.037 7.218,-19.195 1.936,-12.159 4.819,-30.2 4.16,-41.027 -0.659,-10.828 -6.899,-28.997 -6.899,-28.997 z"
fill="#191821"
id="path23"></path>
<path
d="m 933.908,564.891 c -3.865,-7.488 -5.125,-17.865 0.771,-14.114 5.895,3.752 9.542,6.881 11.208,16.511 1.666,9.631 3.721,38.223 2.692,48.368 -1.028,10.145 -7.711,40.217 -10.694,40.308 -2.982,0.092 -7.718,1.189 -8.63,-2.846 -0.912,-4.035 5.003,-6.983 6.883,-19.013 1.881,-12.03 4.682,-29.88 4.115,-40.581 -0.566,-10.701 -6.345,-28.633 -6.345,-28.633 z"
fill="#191821"
id="path24"></path>
<path
d="m 775.255,447.677 c -3.544,2.722 -11.118,3.175 -14.948,0.444 -4.696,-3.347 -5.929,-11.381 -1.741,-14.846 4.128,-3.417 14.096,-2.721 18.116,1.065 3.689,3.474 2.504,10.318 -1.427,13.337 z"
fill="#191821"
id="pupil"></path>
</g>
<defs id="defs24">
<clipPath id="clip0_11_215">
<rect
width="970"
height="686"
fill="#ffffff"
transform="matrix(-1,0,0,1,970,0)"
id="rect24"
x="0"
y="0"></rect>
</clipPath>
</defs>
</svg>
</div>
<script defer>
const eye = document.getElementById("pupil");
const clamp = (x, min, max) => Math.max(Math.min(x, max), min);
const bias = (x, pos, neg) => (x > 0 ? x / pos : x / neg);
if (eye) {
document.addEventListener("mousemove", (e) => {
const eyeRect = eye.getBoundingClientRect();
const x = bias(e.pageX - eyeRect.left, 10, 100);
const y = bias(e.pageY - eyeRect.top, 100, 20);
eye.style.transform = `translate(${clamp(x + 3, -10, 25)}px, ${clamp(y, -8, 8)}px)`;
});
}
</script>
src/components/MainPage/Members.astro 0 → 100644
+ 27
− 0
View file @ 65a09d21
---
import directus from "../../../lib/directus";
import { readItems } from "@directus/sdk";
const members = await directus.request(readItems("Members"));
---
<div class="flex flex-wrap justify-center">
{members.map((member) => <div class="w-64 m-4 overflow-hidden rounded-lg shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-105">
<div class="relative aspect-square">
<img
src={"http://content.hai.jannus.gay/assets/" + member.image1}
alt={`${member.name}'s profile`}
class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ease-in-out"
/>
<img
src={"http://content.hai.jannus.gay/assets/" + member.image2}
alt={`${member.name}'s profile (hover)`}
class="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300 ease-in-out hover:opacity-100"
/>
</div>
<div class="px-4 py-3 bg-white">
<h3 class="text-lg font-semibold text-gray-800">{member.name}</h3>
<p class="text-sm text-gray-600">Fachbereich {member.department}</p>
</div>
</div>)}
</div>
src/components/MainPage/Mottos.astro 0 → 100644
+ 36
− 0
View file @ 65a09d21
---
import directus from "../../../lib/directus";
import { readItems } from "@directus/sdk";
const mottos = (await directus.request(readItems("Mottos")))
.map(e => Object.values(e)[0]);
---
<div>
<h1 id="motto" data-mottos={JSON.stringify(mottos)} class="text-4xl md:text-5xl font-bold mb-4 table-cell align-bottom"></h1>
<p class="text-xl mb-6">Deine Mamer mag Apfelkuchen >:3.</p>
<button
class="bg-accent text-white hover:bg-accent-800 font-bold py-2 px-6 rounded-full transition-all hover:scale-105 duration-200"
>
Unser Wahlprogramm
</button>
</div>
<script>
// @ts-ignore: mimimi
import Typewriter from "typewriter-effect/dist/core";
const motto = document.getElementById("motto");
const mottos = JSON.parse(motto!.dataset.mottos ?? "[]");
const typewriter = new Typewriter(motto, {
loop: true,
delay: 75,
});
mottos.reduce(
(t:any, m:string) => t.typeString(m).pauseFor(3000).deleteAll(),
typewriter
).start();
</script>
src/components/MainPage/News.astro 0 → 100644
+ 9
− 0
View file @ 65a09d21
---
import directus from "../../../lib/directus";
import { readItems } from "@directus/sdk";
const posts = (await directus.request(readItems("Posts")))
---
{JSON.stringify(posts)}
src/components/MainPage/TopicCard.astro 0 → 100644
+ 15
− 0
View file @ 65a09d21
---
interface Props {
emoji: string;
header: string;
text: string;
}
const { emoji, header, text } = Astro.props;
---
<div class="bg-secondary p-6 rounded-lg shadow-md backdrop-blur-sm bg-opacity-50 hover:bg-opacity-100 hover:scale-105 transition-all duration-200">
<span class="text-4xl mb-4 me-2">{emoji}</span>
<span class="text-xl font-semibold mb-2">{header}</span>
<p>{text}</p>
</div>
src/components/MainPage/WaveDivider.astro 0 → 100644
+ 18
− 0
View file @ 65a09d21
---
interface Props {
className: string;
}
const { className } = Astro.props;
---
<svg
class={`w-full ${className}`}
viewBox="0 0 1440 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 50L48 43.3C96 36.7 192 23.3 288 26.7C384 30 480 50 576 56.7C672 63.3 768 56.7 864 53.3C960 50 1056 50 1152 46.7C1248 43.3 1344 36.7 1392 33.3L1440 30V100H1392C1344 100 1248 100 1152 100C1056 100 960 100 864 100C768 100 672 100 576 100C480 100 384 100 288 100C192 100 96 100 48 100H0V50Z"
fill="currentColor"></path>
</svg>
src/layouts/BlogPost.astro
+ 1
− 84
View file @ 65a09d21
---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import FormattedDate from '../components/FormattedDate.astro';
type Props = CollectionEntry<'blog'>['data'];
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---
<html lang="en">
<head>
<BaseHead title={title} description={description} />
<style>
main {
width: calc(100% - 2em);
max-width: 100%;
margin: 0;
}
.hero-image {
width: 100%;
}
.hero-image img {
display: block;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--box-shadow);
}
.prose {
width: 720px;
max-width: calc(100% - 2em);
margin: auto;
padding: 1em;
color: rgb(var(--gray-dark));
}
.title {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
line-height: 1;
}
.title h1 {
margin: 0 0 0.5em 0;
}
.date {
margin-bottom: 0.5em;
color: rgb(var(--gray));
}
.last-updated-on {
font-style: italic;
}
</style>
</head>
<body>
<Header />
<main>
<article>
<div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
</div>
<div class="prose">
<div class="title">
<div class="date">
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
Last updated on <FormattedDate date={updatedDate} />
</div>
)
}
</div>
<h1>{title}</h1>
<hr />
</div>
<slot />
</div>
</article>
</main>
<Footer />
</body>
</html>
---
\ No newline at end of file
src/layouts/Layout.astro 0 → 100644
+ 37
− 0
View file @ 65a09d21
---
export interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Shark Party - Swimming Towards a Better Future">
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
<style is:global>
:root {
--accent: 124, 58, 237;
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
}
html {
font-family: system-ui, sans-serif;
background-color: #F6F6F6;
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
</style>
src/pages/blog/[...slug].astro deleted 100644 → 0
+ 0
− 20
View file @ 9badd4ad
---
import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map((post) => ({
params: { slug: post.slug },
props: post,
}));
}
type Props = CollectionEntry<'blog'>;
const post = Astro.props;
const { Content } = await post.render();
---
<BlogPost {...post.data}>
<Content />
</BlogPost>
src/pages/blog/index.astro deleted 100644 → 0
+ 0
− 111
View file @ 9badd4ad
---
import BaseHead from '../../components/BaseHead.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';
const posts = (await getCollection('blog')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
<style>
main {
width: 960px;
}
ul {
display: flex;
flex-wrap: wrap;
gap: 2rem;
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
width: calc(50% - 1rem);
}
ul li * {
text-decoration: none;
transition: 0.2s ease;
}
ul li:first-child {
width: 100%;
margin-bottom: 1rem;
text-align: center;
}
ul li:first-child img {
width: 100%;
}
ul li:first-child .title {
font-size: 2.369rem;
}
ul li img {
margin-bottom: 0.5rem;
border-radius: 12px;
}
ul li a {
display: block;
}
.title {
margin: 0;
color: rgb(var(--black));
line-height: 1;
}
.date {
margin: 0;
color: rgb(var(--gray));
}
ul li a:hover h4,
ul li a:hover .date {
color: rgb(var(--accent));
}
ul a:hover img {
box-shadow: var(--box-shadow);
}
@media (max-width: 720px) {
ul {
gap: 0.5em;
}
ul li {
width: 100%;
text-align: center;
}
ul li:first-child {
margin-bottom: 0;
}
ul li:first-child .title {
font-size: 1.563em;
}
}
</style>
</head>
<body>
<Header />
<main>
<section>
<ul>
{
posts.map((post) => (
<li>
<a href={`/blog/${post.slug}/`}>
<img width={720} height={360} src={post.data.heroImage} alt="" />
<h4 class="title">{post.data.title}</h4>
<p class="date">
<FormattedDate date={post.data.pubDate} />
</p>
</a>
</li>
))
}
</ul>
</section>
</main>
<Footer />
</body>
</html>
src/pages/index.astro
+ 207
− 47
View file @ 65a09d21
---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
import Layout from "../layouts/Layout.astro";
import InteractiveShark from "../components/MainPage/InteractiveMascot.astro";
import WaveDivider from "../components/MainPage/WaveDivider.astro";
import TopicCard from "../components/MainPage/TopicCard.astro";
import Mottos from "../components/MainPage/Mottos.astro";
import Agenda from "../components/MainPage/Agenda.astro";
import Members from "../components/MainPage/Members.astro";
// Get language (defaults to german)
const lang = Astro.url.searchParams.get("lang") ?? "de";
const name = "HAI - Hochschulliste Aktive Informatik";
---
<!doctype html>
<html lang="en">
<head>
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
</head>
<body>
<Header />
<main>
<h1>🧑‍🚀 Hello, Astronaut!</h1>
<p>
Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
template serves as a lightweight, minimally-styled starting point for anyone looking to build
a personal website, blog, or portfolio with Astro.
</p>
<p>
This template comes with a few integrations already configured in your
<code>astro.config.mjs</code> file. You can customize your setup with
<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
React, or Vue to your project.
</p>
<p>Here are a few ideas on how to get started with the template:</p>
<ul>
<li>Edit this page in <code>src/pages/index.astro</code></li>
<li>Edit the site header items in <code>src/components/Header.astro</code></li>
<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
<li>Check out the included blog posts in <code>src/content/blog/</code></li>
<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
</ul>
<p>
Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
>read the docs
</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
</p>
<p>
Looking for a blog template with a bit more personality? Check out <a
href="https://github.com/Charca/astro-blog-template"
>astro-blog-template
</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
</p>
</main>
<Footer />
</body>
</html>
<Layout title="HAI Liste Darmstadt">
<main class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-background text-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex flex-col xl:flex-row justify-between items-center">
<div class="flex items-center space-x-2 justify-center">
<span class="text-2xl font-bold text-center md:text-start">{name}</span>
</div>
<nav class="hidden md:block">
<ul class="flex space-x-6 mt-2 xl:mt-0">
<li>
<a href="agenda" class="hover:text-blue-200 hover:underline"> Wahlprogramm </a>
</li>
<li>
<a href="meetings" class="hover:text-blue-200 hover:underline"> Sitzungen </a>
</li>
<li>
<a href="contact-us" class="hover:text-blue-200 hover:underline"> Kontakt </a>
</li>
<!-- <li>
<a href={`?lang=${lang == "de" ? "en" : "de"}`} class="font-extrabold">
{lang == "de" ? "EN" : "DE"}
</a>
</li> -->
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="bg-background text-white relative overflow-hidden h-[75vh] md:h-[inherit]">
<diov
class="container h-full justify-end min-w-full pt-16 pb-10 flex flex-col md:flex-row items-center"
>
<div class="flex items-center flex-grow ps-8 lg:ps-24 z-10 min-w-[50%]">
<Mottos />
</div>
<div
class="flex-grow-0 md:rotate-0 rotate-90 translate-y-4 translate-x-12 md:translate-x-0 md:translate-y-0"
>
<InteractiveShark />
</div>
</div>
<WaveDivider className="text-primary2 absolute bottom-0 left-0" />
</section>
<!-- Key Values Section -->
<section class="bg-primary2 text-white pt-8 pb-32 relative -mt-px">
<div class="container mx-auto text-xl px-4">
<Agenda />
<h1 class="text-4xl font-bold text-center mb-12">Unsere Werte</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<TopicCard
emoji="💸"
header="Mehr Budget für DEINE Fachschaft!"
text="Die Fachschaftsinteressen im StuPa an ERSTER STELLE"
/>
<TopicCard
emoji="☕️"
header="Glaskasten statt Starbucks"
text="Die günstigen Studicafés erhalten"
/>
<TopicCard
emoji="🪩"
header="Keine Events ohne Kohle!"
text="Das Fördern ALLER Fachschaften an der h_da"
/>
<TopicCard
emoji="🙋"
header="Keine Hilfe ohne Helfer!"
text="Den AStA endlich mit genügend Personal besetzen"
/>
</div>
</div>
<WaveDivider className="text-primary absolute bottom-0 left-0" />
</section>
<!-- About Section -->
<section class="bg-primary text-white pt-8 pb-32 relative -mt-px">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold text-center mb-8">Deine aktiven Haie</h1>
<Members/>
</div>
<WaveDivider className="text-blue-300 absolute bottom-0 left-0" />
</section>
<!-- Get Involved Section -->
<section class="bg-blue-300 text-blue-900 py-16 relative -mt-px">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-8">Get Involved</h2>
<div class="flex flex-wrap justify-center gap-4">
<button
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full"
>
Tritt uns bei
</button>
<button
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full"
>
Spenden (für Jannus) ((für Zizos)) :3
</button>
<button
class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full"
>
Join Our Newsletter
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between">
<div class="w-full md:w-1/3 mb-6 md:mb-0">
<h3 class="text-xl font-semibold mb-4">
HAI - Hochschulliste Aktive Informaik
</h3>
<p class="text-blue-200">
Swimming towards a better future, one vote at a time.
</p>
</div>
<div class="w-full md:w-1/3 mb-6 md:mb-0">
<h3 class="text-xl font-semibold mb-4">Verweise</h3>
<ul class="space-y-2">
<li>
<a href="#" class="text-blue-200 hover:text-white"
>Privacy Policy</a
>
</li>
<li>
<a href="#" class="text-blue-200 hover:text-white"
>Terms of Service</a
>
</li>
<li>
<a href="#" class="text-blue-200 hover:text-white">Contact Us</a
>
</li>
</ul>
</div>
<div class="w-full md:w-1/3">
<h3 class="text-xl font-semibold mb-4">Folge uns</h3>
<div class="flex space-x-4">
<a href="#" class="text-blue-200 hover:text-white">
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
></path></svg
>
</a>
<a href="#" class="text-blue-200 hover:text-white">
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><path
d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"
></path></svg
>
</a>
<a href="#" class="text-blue-200 hover:text-white">
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
></path></svg
>
</a>
</div>
</div>
</div>
<div class="mt-8 text-center text-blue-200">
<p>
&copy; {new Date().getFullYear()} HAI - Hochschulliste Aktive Informatik.
All rights reserved.
</p>
</div>
</div>
</footer>
</main>
</Layout>
<script>
// Add any client-side JavaScript here
</script>
src/pages/news/[...slug].astro 0 → 100644
+ 2
− 0
View file @ 65a09d21
---
---
src/pages/news/index.astro 0 → 100644
+ 2
− 0
View file @ 65a09d21
---
---
\ No newline at end of file
src/styles/global.css
+ 24
− 0
View file @ 65a09d21
......@@ -4,6 +4,8 @@
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
*/
@import "/node_modules/flag-icons/css/flag-icons.min.css";
:root {
--accent: #2337ff;
--accent-dark: #000d8a;
......@@ -29,6 +31,28 @@
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Comic';
src: url('/fonts/ComicHelvetic_Heavy.otf') format('otf');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Comic';
src: url('/fonts/ComicHelvetic_Light.otf') format('otf');
font-weight: lighter;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Comic';
src: url('/fonts/ComicHelvetic_Medium.otf') format('otf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'Atkinson', sans-serif;
margin: 0;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment