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

:construction: Update content abouts integration

parent a6b2abc4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lib/directus.ts
+ 19
− 1
View file @ 405af8c1
...@@ -33,12 +33,30 @@ type Globals_translations = { ...@@ -33,12 +33,30 @@ type Globals_translations = {
Introduction: string; Introduction: string;
} }
type Abouts = {
link: string;
id: number;
sort: number;
translations: number[];
}
export type Abouts_translations = {
id: string;
Abouts_id: number;
Languages_code: string;
title: string;
content: string;
}
type Schema = { type Schema = {
Posts: Post[]; Posts: Post[];
Globals: any; Globals: any;
Globals_translations: Globals_translations[]; Globals_translations: Globals_translations[];
Members: Member[]; Members: Member[];
Mottos: Mottos[] Mottos: Mottos[];
Abouts: Abouts[];
Abouts_translations: Abouts_translations[];
} }
export const CONTENT_URL = "https://content.hai-liste.de" export const CONTENT_URL = "https://content.hai-liste.de"
......
public/favicon.svg
+ 64
− 8
View file @ 405af8c1
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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" /> <svg
<style> width="490"
path { fill: #000; } height="363"
@media (prefers-color-scheme: dark) { viewBox="0 0 490 363"
path { fill: #FFF; } fill="none"
} version="1.1"
</style> id="svg24"
sodipodi:docname="hai-cropped-white.svg"
inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview24"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showguides="true"
inkscape:document-units="px"
inkscape:zoom="0.5537285"
inkscape:cx="220.32458"
inkscape:cy="220.32458"
inkscape:window-width="1512"
inkscape:window-height="849"
inkscape:window-x="0"
inkscape:window-y="38"
inkscape:window-maximized="0"
inkscape:current-layer="g24">
<sodipodi:guide
position="922.83493,540.78798"
orientation="0,-1"
id="guide24"
inkscape:locked="false" />
</sodipodi:namedview>
<g
clip-path="url(#clip0_11_215)"
id="g24"
transform="matrix(-0.91447594,0,0,0.91447594,888.65352,-262.78768)">
<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"
style="fill:#ffffff" />
</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" />
</clipPath>
</defs>
</svg> </svg>
src/components/Footer.astro
+ 54
− 59
View file @ 405af8c1
--- ---
const today = new Date();
--- ---
<footer> <!-- Footer -->
&copy; {today.getFullYear()} Your name here. All rights reserved. <footer class="bg-dark text-white py-8 w-full">
<div class="social-links"> <div class="container mx-auto px-4">
<a href="https://m.webtoo.ls/@astro" target="_blank"> <div class="flex flex-wrap justify-between">
<span class="sr-only">Follow Astro on Mastodon</span> <div class="w-full md:w-1/3 mb-6 md:mb-0">
<svg <h3 class="text-xl font-semibold mb-4">
viewBox="0 0 16 16" HAI - Hochschulliste Aktive Informatik
aria-hidden="true" </h3>
width="32" <p class="text-blue-200">
height="32" Active politics since 2024.
astro-icon="social/mastodon" </p>
><path </div>
fill="currentColor" <div class="w-full md:w-1/3 mb-6 md:mb-0">
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" <!-- <h3 class="text-xl font-semibold mb-4">Verweise</h3>
></path></svg <ul class="space-y-2">
> <li>
</a> <a href="https://h-da.de" class="text-blue-200 hover:text-white"
<a href="https://twitter.com/astrodotbuild" target="_blank"> >Hochschule Darmstadt</a
<span class="sr-only">Follow Astro on Twitter</span> >
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter" </li>
><path <li>
fill="currentColor" <a href="#" class="text-blue-200 hover:text-white"
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" >Terms of Service</a
></path></svg >
> </li>
</a> <li>
<a href="https://github.com/withastro/astro" target="_blank"> <a href="mailto:hello@hai-liste.de" class="text-blue-200 hover:text-white">Contact Us</a
<span class="sr-only">Go to Astro's GitHub repo</span> >
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github" </li>
><path </ul> -->
fill="currentColor" </div>
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" <div class="w-full md:w-1/3 mb-8">
></path></svg <h3 class="text-xl font-semibold mb-4">Folge uns</h3>
> <div class="flex space-x-4">
</a> <a href="https://discord.gg/HFpGB9dQAh" class="text-blue-200 hover:text-white">
</div> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-discord"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3" /><path d="M7 16.5c3.5 1 6.5 1 10 0" /></svg>
</footer> </a>
<style> <a href="https://www.instagram.com/hai_hda/" class="text-blue-200 hover:text-white">
footer { <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-instagram"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /><path d="M16.5 7.5v.01" /></svg>
padding: 2em 1em 6em 1em; </a>
background: linear-gradient(var(--gray-gradient)) no-repeat; <a href="#" class="text-blue-200 hover:text-white">
color: rgb(var(--gray)); <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-matrix"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 3h-1v18h1" /><path d="M20 21h1v-18h-1" /><path d="M7 9v6" /><path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" /><path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" /></svg>
text-align: center; </a>
} </div>
.social-links { </div>
display: flex; </div>
justify-content: center; <div class="mt-8 text-center text-blue-200">
gap: 1em; <p>
margin-top: 1em; &copy; {new Date().getFullYear()} HAI - Hochschulliste Aktive Informatik.
} All rights reserved.
.social-links a { </p>
text-decoration: none; </div>
color: rgb(var(--gray)); </div>
} </footer>
.social-links a:hover {
color: rgb(var(--gray-dark));
}
</style>
src/components/Header.astro
+ 31
− 81
View file @ 405af8c1
--- ---
import HeaderLink from './HeaderLink.astro'; const name = "HAI - Hochschulliste Aktive Informatik";
import { SITE_TITLE } from '../consts';
--- ---
<header> <header class="bg-background w-full text-white shadow-sm">
<nav> <div
<h2><a href="/">{SITE_TITLE}</a></h2> class="container mx-auto px-4 py-4 flex flex-col xl:flex-row justify-between items-center"
<div class="internal-links"> >
<HeaderLink href="/">Home</HeaderLink> <div class="flex items-center space-x-2 justify-center">
<HeaderLink href="/blog">Blog</HeaderLink> <a href="/" class="text-2xl font-bold text-center md:text-start">{name}</a>
<HeaderLink href="/about">About</HeaderLink> </div>
</div> <nav class="hidden md:block">
<div class="social-links"> <ul class="flex space-x-6 mt-2 xl:mt-0">
<a href="https://m.webtoo.ls/@astro" target="_blank"> <li>
<span class="sr-only">Follow Astro on Mastodon</span> <a href="about" class="hover:text-blue-200 hover:underline">
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" Wahlprogramm
><path </a>
fill="currentColor" </li>
d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" <li>
></path></svg <a href="meetings" class="hover:text-blue-200 hover:underline">
> Sitzungen
</a> </a>
<a href="https://twitter.com/astrodotbuild" target="_blank"> </li>
<span class="sr-only">Follow Astro on Twitter</span> <li>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" <a
><path href="mailto:hello@hai-liste.de"
fill="currentColor" class="hover:text-blue-200 hover:underline"
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" >
></path></svg Kontakt
> </a>
</a> </li>
<a href="https://github.com/withastro/astro" target="_blank"> </ul>
<span class="sr-only">Go to Astro's GitHub repo</span> </nav>
<svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" </div>
><path
fill="currentColor"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path></svg
>
</a>
</div>
</nav>
</header> </header>
<style>
header {
margin: 0;
padding: 0 1em;
background: white;
box-shadow: 0 2px 8px rgba(var(--black), 5%);
}
h2 {
margin: 0;
font-size: 1em;
}
h2 a,
h2 a.active {
text-decoration: none;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
nav a {
padding: 1em 0.5em;
color: var(--black);
border-bottom: 4px solid transparent;
text-decoration: none;
}
nav a.active {
text-decoration: none;
border-bottom-color: var(--accent);
}
.social-links,
.social-links a {
display: flex;
}
@media (max-width: 720px) {
.social-links {
display: none;
}
}
</style>
src/components/MainPage/Mottos.astro
+ 5
− 4
View file @ 405af8c1
...@@ -8,12 +8,13 @@ const mottos = (await directus.request(readItems("Mottos"))) ...@@ -8,12 +8,13 @@ const mottos = (await directus.request(readItems("Mottos")))
<div> <div>
<h1 id="motto" data-mottos={JSON.stringify(mottos)} class="text-4xl md:text-5xl font-bold mb-4 table-cell align-bottom"></h1> <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> <p class="text-xl mt-2 mb-6">Ab dem 27.1. HAI wählen!</p>
<button <a
class="bg-accent text-white hover:bg-accent-800 font-bold py-2 px-6 rounded-full transition-all hover:scale-105 duration-200" class="bg-accent text-white hover:bg-accent-800 font-bold py-2 px-6 rounded-full transition-all hover:scale-105 duration-200"
href="about"
> >
Unser Wahlprogramm Learn more
</button> </a>
</div> </div>
<script> <script>
......
src/layouts/Layout.astro
+ 5
− 1
View file @ 405af8c1
...@@ -16,7 +16,11 @@ const { title } = Astro.props; ...@@ -16,7 +16,11 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body class="overflow-x-hidden">
<!-- dont ask - hate tailwind css -->
<div class="hidden text-background"></div>
<div class="hidden text-primary2"></div>
<div class="hidden text-primary"></div>
<slot /> <slot />
</body> </body>
</html> </html>
......
src/pages/about.astro
+ 66
− 58
View file @ 405af8c1
--- ---
import Layout from '../layouts/BlogPost.astro'; import Footer from "../components/Footer.astro";
import WaveDivider from "../components/MainPage/WaveDivider.astro";
import Layout from "../layouts/Layout.astro";
import directus from "../../lib/directus";
import { readItems, readSingleton } from "@directus/sdk";
import type { Abouts_translations } from "../../lib/directus"
import { number } from "astro:schema";
import Header from "../components/Header.astro";
const about = (await directus.request(readItems("Abouts")))
const trans = Object.values((await directus.request(readItems("Abouts_translations")))
.reduce((p,c) => ({
...p,
[c.Abouts_id]: [
...(p[c.Abouts_id] ?? []),
c
]}), {} as {[key: number]: Abouts_translations[]}))
.sort((a,b) =>
(about.find(e => e.id == a[0].Abouts_id)?.sort ?? 0)
< (about.find(e => e.id == b[0].Abouts_id)?.sort ?? 0)
? -1
: 1
)
const getLang = (t: Abouts_translations[], lang: string) =>
t.find(e => e.Languages_code == lang)
const colors = [...(function*() {
const shades = ["background", "primary2", "primary"];
while (true) {
for (let i = 0; i < shades.length; i++) yield shades[i]
for (let i = shades.length - 2; i > 0; i--) yield shades[i]
}
})().take(Object.keys(trans).length)]
--- ---
<Layout <Layout title="HAI · Über uns :3">
title="About Me" <main class="min-h-screen max-w-[100vw] flex flex-col">
description="Lorem ipsum dolor sit amet" <!-- Header -->
pubDate={new Date('August 08 2021')} <Header></Header>
heroImage="/blog-placeholder-about.jpg"
> <div class="h-8 grow bg-background"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo {trans.map((a, index) =>
viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam <section id={about.find(e => e.id === a[0].Abouts_id)!.link} class={`bg-${colors.at(index)} text-white pt-8 pb-32 relative w-full -mt-px`}>
adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus <div class="grow flex-col md:flex-row flex mx-auto container">
et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus <div class="px-8 pb-8 w-full md:w-[50%] text-white text-lg text-justify" >
vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque <h1 class="text-4xl text-center w-full font-bold mb-6">{getLang(a, "de")?.title}</h1>
sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. <p class="" set:html={getLang(a, "de")?.content}></p>
</p> </div>
<div class="px-8 pb-8 w-full md:w-[50%] text-white text-lg text-justify" >
<p> <h1 class="text-4xl text-center w-full font-bold mb-6">{getLang(a, "en")?.title}</h1>
Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non <p class="text-sm" set:html={getLang(a, "en")?.content}></p>
tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non </div>
blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna </div>
porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis <WaveDivider className={`-mb-px absolute bottom-0 left-0 text-${index == colors.length - 1 ? "dark" : colors.at(index + 1)}`}></WaveDivider>
massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. </section>
Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis )}
bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
massa massa ultricies mi. <Footer></Footer>
</p>
</main>
<p>
Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
</p>
<p>
Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
cursus metus aliquam eleifend mi.
</p>
<p>
Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
</p>
</Layout> </Layout>
src/pages/index.astro
+ 9
− 93
View file @ 405af8c1
...@@ -6,6 +6,7 @@ import TopicCard from "../components/MainPage/TopicCard.astro"; ...@@ -6,6 +6,7 @@ import TopicCard from "../components/MainPage/TopicCard.astro";
import Mottos from "../components/MainPage/Mottos.astro"; import Mottos from "../components/MainPage/Mottos.astro";
import Agenda from "../components/MainPage/Agenda.astro"; import Agenda from "../components/MainPage/Agenda.astro";
import Members from "../components/MainPage/Members.astro"; import Members from "../components/MainPage/Members.astro";
import Footer from "../components/Footer.astro";
// Get language (defaults to german) // Get language (defaults to german)
const lang = Astro.url.searchParams.get("lang") ?? "de"; const lang = Astro.url.searchParams.get("lang") ?? "de";
...@@ -24,19 +25,14 @@ const name = "HAI - Hochschulliste Aktive Informatik"; ...@@ -24,19 +25,14 @@ const name = "HAI - Hochschulliste Aktive Informatik";
<nav class="hidden md:block"> <nav class="hidden md:block">
<ul class="flex space-x-6 mt-2 xl:mt-0"> <ul class="flex space-x-6 mt-2 xl:mt-0">
<li> <li>
<a href="agenda" class="hover:text-blue-200 hover:underline"> Wahlprogramm </a> <a href="about" class="hover:text-blue-200 hover:underline"> Wahlprogramm </a>
</li> </li>
<li> <li>
<a href="meetings" class="hover:text-blue-200 hover:underline"> Sitzungen </a> <a href="meetings" class="hover:text-blue-200 hover:underline"> Sitzungen </a>
</li> </li>
<li> <li>
<a href="contact-us" class="hover:text-blue-200 hover:underline"> Kontakt </a> <a href="mailto:hello@hai-liste.de" class="hover:text-blue-200 hover:underline"> Kontakt </a>
</li> </li>
<!-- <li>
<a href={`?lang=${lang == "de" ? "en" : "de"}`} class="font-extrabold">
{lang == "de" ? "EN" : "DE"}
</a>
</li> -->
</ul> </ul>
</nav> </nav>
</div> </div>
...@@ -44,14 +40,14 @@ const name = "HAI - Hochschulliste Aktive Informatik"; ...@@ -44,14 +40,14 @@ const name = "HAI - Hochschulliste Aktive Informatik";
<!-- Hero Section --> <!-- Hero Section -->
<section class="bg-background text-white relative overflow-hidden h-[75vh] md:h-[inherit]"> <section class="bg-background text-white relative overflow-hidden h-[75vh] md:h-[inherit]">
<diov <div
class="container h-full justify-end min-w-full pt-16 pb-10 flex flex-col md:flex-row items-center" 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%]"> <div class="flex items-center flex-grow ps-8 lg:ps-24 z-10 min-w-[50%]">
<Mottos /> <Mottos />
</div> </div>
<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" class="flex-grow-0 md:rotate-0 rotate-[75deg] translate-y-32 translate-x-0 md:translate-x-0 md:translate-y-0"
> >
<InteractiveShark /> <InteractiveShark />
</div> </div>
...@@ -97,11 +93,11 @@ const name = "HAI - Hochschulliste Aktive Informatik"; ...@@ -97,11 +93,11 @@ const name = "HAI - Hochschulliste Aktive Informatik";
<h1 class="text-4xl font-bold text-center mb-8">Deine aktiven Haie</h1> <h1 class="text-4xl font-bold text-center mb-8">Deine aktiven Haie</h1>
<Members/> <Members/>
</div> </div>
<WaveDivider className="text-blue-300 absolute bottom-0 left-0" /> <WaveDivider className="-mb-px text-dark absolute bottom-0 left-0" />
</section> </section>
<!-- Get Involved Section --> <!-- Get Involved Section -->
<section class="bg-blue-300 text-blue-900 py-16 relative -mt-px"> <!-- <section class="bg-blue-300 text-blue-900 py-16 relative -mt-px">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-8">Get Involved</h2> <h2 class="text-3xl font-bold text-center mb-8">Get Involved</h2>
<div class="flex flex-wrap justify-center gap-4"> <div class="flex flex-wrap justify-center gap-4">
...@@ -122,89 +118,9 @@ const name = "HAI - Hochschulliste Aktive Informatik"; ...@@ -122,89 +118,9 @@ const name = "HAI - Hochschulliste Aktive Informatik";
</button> </button>
</div> </div>
</div> </div>
</section> </section> -->
<!-- Footer --> <!-- Footer -->
<footer class="bg-dark text-white py-8"> <Footer></Footer>
<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> </main>
</Layout> </Layout>
<script>
// Add any client-side JavaScript here
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment