hippoz/homepage
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add shutdown notice draft

Browse source
This commit is contained in:
hippoz 2022-11-16 20:29:52 +02:00
parent 6fda2d35b1
commit 79a5c3e46a
Signed by: hippoz
GPG key ID: 7C52899193467641
2 changed files with 70 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
out/legal/shutdown.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hippoz Shutdown Notice">
<title>Hippoz Shutdown Notice</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-container">
<div style="--selected-color: var(--accent)" class="accent-card">
<span class="title-hard">We're in the process of sunsetting hippoz.xyz</span>
</div>
<div style="--selected-color: var(--brand-1)" class="accent-card">
<span class="title">Learn how to archive existing data</span>
<a href="https://www.git-scm.com/docs/git-clone" class="link">-></a>
</div>
<div style="--selected-color: var(--brand-3)" class="accent-card">
<span class="title">Learn why this is happening and how to help</span>
<a href="https://www.patrick-breyer.de/en/cybersecurity-eu-bans-anonymous-internet-sites/" class="link">-></a>
</div>
</div>
</body>
</html>

46
out/legal/style.css
View file

@ -1,14 +1,21 @@
@font-face {
font-family: "Manrope";
src: url("Manrope[wght].woff2") format('woff2');
font-weight: normal;
font-weight: 125 950;
font-stretch: 75% 125%;
font-style: normal;
}
:root {
--background: #ffffff;
--foreground: #000000;
--accent: #512bd8;
--accent: hsl(268, 65%, 60%);
--brand-0: hsl(228, 65%, 60%);
--brand-1: hsl(208, 65%, 60%);
--brand-2: hsl(188, 65%, 60%);
--brand-3: hsl(158, 65%, 40%);
--brand-4: hsl(138, 65%, 40%);
--brand-5: hsl(118, 65%, 40%);
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
@ -81,6 +88,35 @@ a {
font-size: var(--h5);
}
.accent-card {
display: flex;
align-items: center;
padding: 28px;
margin: 18px;
border-radius: 28px;
background-color: var(--selected-color);
color: var(--background);
}
.accent-card .title {
font-size: var(--h3);
font-weight: 300;
}
.accent-card .title-hard {
font-size: var(--h3);
font-weight: 500;
}
.accent-card .link {
color: var(--background);
text-decoration: none;
font-size: var(--h2);
margin: 0;
margin-left: auto;
font-weight: 600;
}
/* scales */
p {
@ -92,7 +128,9 @@ h2,
h3,
h4,
h5 {
margin: 3rem 0 1.38rem;
margin: 0;
padding: 0;
font-weight: 400;
line-height: 1.3;
}
@ -119,6 +157,6 @@ h5 {
}
small,
.text_small {
.text-small {
font-size: var(--small);
}