✨ basic page setup
This commit is contained in:
parent
c083fa81c2
commit
d1857a94a9
Binary file not shown.
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32" height="32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="linearGradient24077" x1="10.087" x2="20.169" y1="26.698" y2="5.4501" gradientTransform="matrix(1.0078 0 0 1.0078 .75404 -.1998)" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#c678dd" offset="0"/>
|
||||
<stop stop-color="#61afef" offset=".21334"/>
|
||||
<stop stop-color="#98c379" offset=".42134"/>
|
||||
<stop stop-color="#dace71" offset=".57901"/>
|
||||
<stop stop-color="#d19a66" offset=".79514"/>
|
||||
<stop stop-color="#e06c75" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="m10.92 26.707c7.3477 2.0872 9.2419-0.54304 8.9227-2.3279-0.69755-2.7541-4.3143-4.4678-6.732-6.2958-2.5415-1.9216-3.758-3.9695 1.1341-7.485m6.8359-5.3056c-7.3477-2.0872-9.2419 0.54304-8.9227 2.3279 0.69755 2.7541 4.3143 4.4678 6.732 6.2958 2.5415 1.9216 3.758 3.9695-1.1341 7.485" fill="none" stroke="url(#linearGradient24077)" stroke-width="3.0234"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
2
meta.php
2
meta.php
|
@ -5,7 +5,9 @@
|
|||
|
||||
// DEPENDENCIES //
|
||||
// used extensions
|
||||
self::$use[] = "lang";
|
||||
self::$use[] = "page";
|
||||
self::$use[] = "file";
|
||||
self::$use[] = "project";
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,74 @@
|
|||
<?php
|
||||
// LANGUAGE MANAGER //
|
||||
// initialize
|
||||
$lang = new Lang(list: ["de", "en"], default: "de");
|
||||
|
||||
// load dict
|
||||
$dict = new Lang_dict($lang);
|
||||
require("./page/strings.php");
|
||||
|
||||
|
||||
// PAGE INIT //
|
||||
Page::start();
|
||||
|
||||
Page::title($dict->get("title"));
|
||||
Page::icon("./asset/logo-256.png");
|
||||
Page::description($dict->get("description"));
|
||||
|
||||
Page::lang($lang->get());
|
||||
Page::viewport(scale: 1, zoom: true);
|
||||
|
||||
Page::robots(index: true, follow: true);
|
||||
Page::author("Kim Endisch");
|
||||
Page::keywords("selbstbestimmungsgesetz-jetzt", "selbstbestimmungsgesetz", "selbstbestimmung", "tsg", "transsexuellengesetz", "roadmap", "timeline", "stand", "trans", "nicht-binär", "non-binary", "deutschland", "gender", "geschlecht", "identität");
|
||||
|
||||
Page::css(__DIR__ . "/style.css");
|
||||
|
||||
Page::font("ubuntu");
|
||||
Page::font("tabler");
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="page-container">
|
||||
<div class="page">
|
||||
<div class="section">
|
||||
<div class="header">
|
||||
<span class="icon ti ti-info-circle"></span>
|
||||
<span class="text">Über</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="box">
|
||||
<span>Content</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<div class="brand">
|
||||
<img src="<?= File::file("./asset/logo-256.png") ?>" alt="logo" />
|
||||
<a href="https://git.tjdev.de/kimendisch/selbstbestimmungsgesetz-jetzt-de" target="_blank"><?= $dict->get("text_sourcecode") ?> <i class="ti ti-external-link"></i></a>
|
||||
<span class="version">v<?= Project::meta_self()["version"] ?></span>
|
||||
</div>
|
||||
|
||||
<div class="lang">
|
||||
<span><i class="ti ti-world"></i></span>
|
||||
<a <?= ($lang->get() === "de" ? "class=\"selected\"" : "") ?> href="?lang=de">DE</a>
|
||||
<span class="delimiter">|</span>
|
||||
<a <?= ($lang->get() === "en" ? "class=\"selected\"" : "") ?> href="?lang=en">EN</a>
|
||||
</div>
|
||||
|
||||
<div class="legal">
|
||||
<span>© 2023 Kim Endisch</span>
|
||||
<span class="delimiter">|</span>
|
||||
<a href="<?= $dict->get("link_imprint") ?>" target="_blank"><?= $dict->get("text_imprint") ?> <i class="ti ti-external-link"></i></a>
|
||||
<span class="delimiter">|</span>
|
||||
<a href="<?= $dict->get("link_privacy_policy") ?>" target="_blank"><?= $dict->get("text_privacy_policy") ?> <i class="ti ti-external-link"></i></a>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,237 @@
|
|||
:root {
|
||||
--color-bg: #21252b;
|
||||
--color-bg-light: #2c313a;
|
||||
|
||||
--color-white: #c5cad3;
|
||||
|
||||
--color-gray: #828997;
|
||||
--color-gray-dark: #5c6370;
|
||||
--color-gray-dark-dark: #454b54;
|
||||
|
||||
--color-red: #e06c75;
|
||||
--color-red-light: #e9969d;
|
||||
--color-red-dark: #cb4d58;
|
||||
|
||||
--color-orange: #d19a66;
|
||||
--color-orange-light: #ddb48d;
|
||||
--color-orange-dark: #b9804b;
|
||||
|
||||
--color-yellow: #dace71;
|
||||
--color-yellow-light: #e5dc9a;
|
||||
--color-yellow-dark: #c4b754;
|
||||
|
||||
--color-green: #98c379;
|
||||
--color-green-light: #b3d39c;
|
||||
--color-green-dark: #7fa762;
|
||||
|
||||
--color-cyan: #71d6bc;
|
||||
--color-cyan-light: #98e1cf;
|
||||
--color-cyan-dark: #55bea4;
|
||||
|
||||
--color-blue: #61afef;
|
||||
--color-blue-light: #90c7f4;
|
||||
--color-blue-dark: #3e97e0;
|
||||
|
||||
--color-purple: #c678dd;
|
||||
--color-purple-light: #d7a1e8;
|
||||
--color-purple-dark: #af5bc8;
|
||||
|
||||
|
||||
|
||||
--theme: var(--color-green);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-size: 0;
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
}
|
||||
span, pre {
|
||||
font-size: 1rem;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* PAGE LAYOUT */
|
||||
.page-container {
|
||||
flex-grow: 1;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
padding: 8rem 4rem;
|
||||
}
|
||||
.page {
|
||||
width: 100000px;
|
||||
max-width: 50vw;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rem;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.page {
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section > .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
|
||||
color: var(--theme);
|
||||
}
|
||||
.section > .header .extra {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
.section > .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* BOX */
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
padding: 2rem;
|
||||
|
||||
border-radius: 2rem;
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
.box.shrink {
|
||||
display: inline-flex;
|
||||
}
|
||||
.box.important {
|
||||
border: 0.5rem solid var(--theme);
|
||||
}
|
||||
|
||||
.box .title {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
color: var(--theme);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
background-color: var(--color-bg-light);
|
||||
}
|
||||
.footer > div {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.footer > div {
|
||||
flex-basis: 100%;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footer > div a {
|
||||
font-size: 1rem;
|
||||
color: var(--theme);
|
||||
}
|
||||
.footer > div a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer .delimiter {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
.footer .brand {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.footer .legal {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.footer .brand img {
|
||||
height: 2rem;
|
||||
}
|
||||
.footer .brand .version {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
.footer .lang .selected {
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
|
@ -0,0 +1,40 @@
|
|||
<?php
|
||||
$dict->define([
|
||||
"title" => [
|
||||
"de" => "Selbstbestimmungsgesetz Jetzt!",
|
||||
"en" => "Self-Determination Act Now!"
|
||||
],
|
||||
|
||||
"description" => [
|
||||
"de" => "Das TSG muss endlich durch ein Selbstbestimmungsgesetz ersetzt werden! Diese Seite verfolgt den Fortschritt der Gesetzgebung.",
|
||||
"en" => "The TSG must be replaced by a Self-Determination Law! This page is tracking the progress of the legislation."
|
||||
],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
"text_sourcecode" => [
|
||||
"de" => "Quellcode",
|
||||
"en" => "Sourcecode"
|
||||
],
|
||||
|
||||
"text_imprint" => [
|
||||
"de" => "Impressum",
|
||||
"en" => "Imprint"
|
||||
],
|
||||
"link_imprint" => [
|
||||
"de" => "https://www.tjdev.de/impressum",
|
||||
"en" => "https://www.tjdev.de/imprint"
|
||||
],
|
||||
|
||||
"text_privacy_policy" => [
|
||||
"de" => "Datenschutz­erklärung",
|
||||
"en" => "Privacy Policy"
|
||||
],
|
||||
"link_privacy_policy" => [
|
||||
"de" => "https://www.tjdev.de/datenschutz",
|
||||
"en" => "https://www.tjdev.de/privacy"
|
||||
]
|
||||
]);
|
||||
?>
|
Loading…
Reference in New Issue