fixed index; addes privacy and about grundgerüst

This commit is contained in:
Max Hohlfeld 2021-07-29 23:05:44 +02:00
parent 735c684260
commit 0fa7b92a92
6 changed files with 90 additions and 34 deletions

0
public/about/index.html Normal file
View File

View File

@ -13,6 +13,10 @@
tfld.de tfld.de
</a> </a>
</div> </div>
<div class="navbar-end">
<a class="navbar-item" href="https://tfld.de/about/">Über</a>
<a class="navbar-item" href="https://tfld.de/privacy/">Datenschutz</a>
</div>
</nav> </nav>
<section class="hero is-fullheight-with-navbar"> <section class="hero is-fullheight-with-navbar">
@ -34,43 +38,49 @@
<div class="tile is-ancestor"> <div class="tile is-ancestor">
<div class="tile is-parent"> <div class="tile is-parent">
<div class="card tile is-child is-flex has-text-centered is-flex-direction-column"> <a href="https://max-hohlfeld.de/blog/xmpp/" target="_blank">
<div class="card-image"> <div class="card tile is-child is-flex has-text-centered is-flex-direction-column">
<img class="logo-image" src="./images/xmpp_logo.svg"/> <div class="card-image">
<img class="logo-image" src="./images/xmpp_logo.svg"/>
</div>
<div class="card-content">
<h5 class="title is-5">
XMPP
</h5>
XMPP ist ein quelloffenes Kommunikationsprotokoll welches sich hervorragend als datenschutzfreundlicher Whatsapp-Ersatz eignet.
</div>
</div> </div>
<div class="card-content"> </a>
<h5 class="title is-5">
XMPP
</h5>
XMPP ist ein quelloffenes Kommunikationsprotokoll welches sich hervorragend als datenschutzfreundlicher Whatsapp-Ersatz eignet.
</div>
</div>
</div> </div>
<div class="tile is-parent"> <div class="tile is-parent">
<div class="card tile is-child is-flex has-text-centered is-flex-direction-column"> <a href="https://git.tfld.de/" target="_blank">
<div class="card-image"> <div class="card tile is-child is-flex has-text-centered is-flex-direction-column">
<img class="logo-image" src="./images/gitea_logo.svg"/> <div class="card-image">
<img class="logo-image" src="./images/gitea_logo.svg"/>
</div>
<div class="card-content">
<h5 class="title is-5">
Gitea
</h5>
Ein einfacher, selbst gehosteter Git-Service.
</div>
</div> </div>
<div class="card-content"> </a>
<h5 class="title is-5">
Gitea
</h5>
Ein einfacher, selbst gehosteter Git-Service.
</div>
</div>
</div> </div>
<div class="tile is-parent"> <div class="tile is-parent">
<div class="card tile is-child is-flex has-text-centered is-flex-direction-column"> <a href="mumble://voice.tfld.de/?version=1.3.4" target="_blank">
<div class="card-image"> <div class="card tile is-child is-flex has-text-centered is-flex-direction-column">
<img class="logo-image" src="./images/mumble_logo.svg"/> <div class="card-image">
<img class="logo-image" src="./images/mumble_logo.svg"/>
</div>
<div class="card-content">
<h5 class="title is-5">
Mumble
</h5>
Mumble ist eine freie Sprachkonferenzsoftware ähnlich wie Teamspeak.
</div>
</div> </div>
<div class="card-content"> </a>
<h5 class="title is-5">
Mumble
</h5>
Mumble ist eine freie Sprachkonferenzsoftware ähnlich wie Teamspeak.
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -79,7 +89,7 @@
<footer class="footer"> <footer class="footer">
<div class="content has-text-centered"> <div class="content has-text-centered">
<p> <p>
<strong>tfld.de</strong> made by <a href="https://max-hohlfeld.de">Max Hohlfeld</a> with <a href="https://bulma.io">Bulma</a>. <strong>tfld.de</strong> made by <a href="https://max-hohlfeld.de" target="_blank">Max Hohlfeld</a> with <a href="https://bulma.io">Bulma</a>.
</p> </p>
</div> </div>
</footer> </footer>

View File

@ -13,6 +13,10 @@
width: auto; width: auto;
} }
.card {
height: 450px;
}
/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */ /*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */
/* Bulma Utilities */ /* Bulma Utilities */
.pagination-previous, .pagination-previous,
@ -5125,7 +5129,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
.navbar-link:focus-within, .navbar-link:focus-within,
.navbar-link:hover, .navbar-link:hover,
.navbar-link.is-active { .navbar-link.is-active {
background-color: #fafafa; background-color: #3D3D3D;
color: #82CD7B; color: #82CD7B;
} }
@ -5438,7 +5442,7 @@ body.has-spaced-navbar-fixed-bottom {
} }
.navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link { .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link {
background-color: #fafafa; background-color: #3D3D3D;
} }
} }
.hero.is-fullheight-with-navbar { .hero.is-fullheight-with-navbar {

File diff suppressed because one or more lines are too long

37
public/privacy/index.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tfld.de</title>
<link rel="stylesheet" href="../mystyle.css">
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://tfld.de/">
tfld.de
</a>
</div>
<div class="navbar-end">
<a class="navbar-item" href="https://tfld.de/about/">Über</a>
<a class="navbar-item" href="#">Datenschutz</a>
</div>
</nav>
<section class="section">
<div class="container">
<h1 class="title is-1">tfld.de</h1>
<h3 class="title is-3">Datenschutzerklärung</h3>
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>tfld.de</strong> made by <a href="https://max-hohlfeld.de" target="_blank">Max Hohlfeld</a> with <a href="https://bulma.io">Bulma</a>.
</p>
</div>
</footer>
</body>
</html>

View File

@ -25,6 +25,7 @@ $card-header-color: #3D3D3D;
$navbar-background-color: #3D3D3D; $navbar-background-color: #3D3D3D;
$navbar-item-color: $white; $navbar-item-color: $white;
$navbar-item-hover-background-color: #3D3D3D;
$footer-background-color: #3D3D3D; $footer-background-color: #3D3D3D;
@ -43,6 +44,10 @@ $footer-background-color: #3D3D3D;
width: auto; width: auto;
} }
.card {
height: 450px;
}
// Import only what you need from Bulma // Import only what you need from Bulma
// @import "./bulma/sass/utilities/_all.sass"; // @import "./bulma/sass/utilities/_all.sass";
// @import "./bulma/sass/base/_all.sass"; // @import "./bulma/sass/base/_all.sass";