basic page setup

This commit is contained in:
DrMaxNix 2023-04-22 19:29:49 +02:00
parent c083fa81c2
commit d1857a94a9
9 changed files with 367 additions and 0 deletions

BIN
asset/logo-1024.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
asset/logo-2048.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 189 KiB

BIN
asset/logo-256.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
asset/logo-512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

14
asset/logo.svg Normal file
View File

@ -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

View File

@ -5,7 +5,9 @@
// DEPENDENCIES //
// used extensions
self::$use[] = "lang";
self::$use[] = "page";
self::$use[] = "file";
self::$use[] = "project";

74
page/start/index.php Normal file
View File

@ -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>&copy; 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>

237
page/start/style.css Normal file
View File

@ -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;
}

40
page/strings.php Normal file
View File

@ -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&shy;erklärung",
"en" => "Privacy Policy"
],
"link_privacy_policy" => [
"de" => "https://www.tjdev.de/datenschutz",
"en" => "https://www.tjdev.de/privacy"
]
]);
?>