From d6c0fbe231b3579822b185e6d939f962da148546 Mon Sep 17 00:00:00 2001
From: BlueFox <bluefox@privacynerd.de>
Date: Wed, 19 Feb 2025 21:16:08 +0100
Subject: [PATCH] Added another test with css grids
---
new_site/src/griddy.css | 178 +++++++++++++++++++++++++++++++++++++++
new_site/src/griddy.html | 48 +++++++++++
new_site/src/test.css | 15 +++-
new_site/src/test.html | 44 ++++++++--
4 files changed, 278 insertions(+), 7 deletions(-)
create mode 100644 new_site/src/griddy.css
create mode 100644 new_site/src/griddy.html
diff --git a/new_site/src/griddy.css b/new_site/src/griddy.css
new file mode 100644
index 0000000..bde07cc
--- /dev/null
+++ b/new_site/src/griddy.css
@@ -0,0 +1,178 @@
+/* Prevents Padding or borders from changing box size */
+html { box-sizing: border-box; }
+*,
+*:before,
+*:after { box-sizing: inherit; }
+
+:root {
+ --bg-color: #ffffff;
+ --fg-color: #000000;
+ --selection-bg-color: #bbffbb;
+ --selection-fg-color: #000000;
+ --accent: #96ff96;
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg-color: #000000;
+ --fg-color: #ffffff;
+ --selection-bg-color: var(--accent);
+ --selection-fg-color: #000000;
+ }
+}
+body {
+ background-color: var(--bg-color);
+ color: var(--fg-color);
+ font-family: sans-serif;
+}
+::-moz-selection { /* Code for Firefox */
+ color: var(--selection-fg-color);
+ background: var(--selection-bg-color);
+}
+::selection {
+ color: var(--selection-fg-color);
+ background: var(--selection-bg-color);
+}
+
+h1 {
+ text-align: center;
+}
+
+/* Blinking cursor */
+@keyframes cursor-blink {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+h1::after {
+ content: "";
+ width: 5px;
+ height: 0.9em;
+ background: #00ff00;
+ margin-left: 3px;
+ display: inline-block;
+ animation: cursor-blink 900ms ease-in-out infinite;
+}
+
+a {
+ color: inherit;
+ text-decoration: underline;
+ text-decoration-thickness: 2px;
+ text-decoration-color: var(--bg-color);
+ transition: all 200ms ease-in-out;
+}
+a:hover {
+ text-decoration-color: var(--accent);
+}
+
+p {
+ text-align: center;
+ width: 70%;
+ margin: 0 auto;
+}
+@media (min-width: 992px) {
+ p {
+ max-width: 40%;
+ }
+}
+
+br {
+ margin-bottom: 10px;
+}
+
+code {
+ border: 1px solid var(--fg-color);
+ border-radius: 5px;
+ padding: 2px;
+ margin: 1px;
+ font-family: serif;
+}
+
+.row {
+ width: 70%;
+ margin: 0 auto;
+}
+
+/* Large Devices */
+@media (min-width: 992px) {
+ .row {
+ max-width: 40%;
+ }
+}
+
+/* Do a clearfix */
+.row::after {
+ content: "";
+ display: block;
+ clear: both;
+}
+
+/* Columns */
+.col {
+ width: 100%;
+ float: left;
+ padding: 5px;
+}
+
+
+.badge {
+ padding: 3px 5px;
+ border: 2px solid var(--accent);
+ border-radius: 0px;
+}
+
+
+hr {
+ --hr-color: var(--accent);
+
+ width: 40%;
+ height: 3px;
+ margin: 2em auto;
+ border-width: 0;
+ color: var(--hr-color);
+ background-color: var(--hr-color);
+}
+
+.align-left {
+ text-align: left;
+ margin-left: 0;
+}
+
+.footer {
+ text-align: center;
+ margin: 0 auto;
+}
+
+
+/* Small Devices */
+@media (min-width: 576px) {
+ .sm-1 { width: 10%; }
+ .sm-2 { width: 20%; }
+ .sm-3 { width: 30%; }
+ .sm-4 { width: 40%; }
+ .sm-5 { width: 50%; }
+ .sm-6 { width: 60%; }
+ .sm-7 { width: 70%; }
+ .sm-8 { width: 80%; }
+ .sm-9 { width: 90%; }
+ .sm-10 { width: 100%; }
+}
+
+/* Medium Devices */
+@media (min-width: 768px) {
+ .md-1 { width: 10%; }
+ .md-2 { width: 20%; }
+ .md-3 { width: 30%; }
+ .md-4 { width: 40%; }
+ .md-5 { width: 50%; }
+ .md-6 { width: 60%; }
+ .md-7 { width: 70%; }
+ .md-8 { width: 80%; }
+ .md-9 { width: 90%; }
+ .md-10 { width: 100%; }
+}
\ No newline at end of file
diff --git a/new_site/src/griddy.html b/new_site/src/griddy.html
new file mode 100644
index 0000000..3e05298
--- /dev/null
+++ b/new_site/src/griddy.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="color-scheme" content="light dark">
+ <link href="./griddy.css" rel="stylesheet">
+ <title>Privacynerd's new home :)</title>
+ </head>
+ <body>
+ <h1 id="headline">Hey dear stanger!</h1>
+ <p>This is <a href="https://privacynerd.de/"><code>privacynerd.de</code></a>. I'm mostly known as BlueFox and host some services in the internet. I love coding and publish blog posts every know and then. <br />
+ <i>Stay optimistic!</i></p>
+ <hr>
+ <div class="row">
+ <div class="col sm-10 md-5">1 - Lorem ipsum dolor sit amet consectetur, adipisicing elit. At animi blanditiis, necessitatibus, unde ut, odit dolore deserunt quos nemo tenetur veritatis non dolorum ullam. Obcaecati, tempora. Quam totam atque earum.</div>
+ <div class="col sm-10 md-5">2 - Lorem ipsum dolor sit amet consectetur, adipisicing elit. At animi blanditiis, necessitatibus, unde ut, odit dolore deserunt quos nemo tenetur veritatis non dolorum ullam. Obcaecati, tempora. Quam totam atque earum.</div>
+ </div>
+ <hr>
+ <div class="row">
+ <div class="col sm-10 md-5">
+ <div class="badge">Other services</div>
+ </div>
+ <div class="col sm-10 md-5">
+ <div class="badge">
+ Social & Contact
+ <hr class="align-left">
+
+ <a href="https://git.privacynerd.de/BlueFox">Bluefox</a> |
+ <a href="https://codeberg.org/BlueFox">Bluefox</a> |
+ <a href="https://crowdin.com/profile/bluefox4">bluefox4</a> |
+ <a href="https://github.com/bluefox42">bluefox42</a> |
+ <a href="https://hub.docker.com/u/bluefox42">bluefox42</a>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div class="footer">
+ Made with ❤️ in Germany | <a href="https://privacynerd.de/impressum?referrer=http://127.0.0.1:8000/griddy.html">Imprint</a>
+ </div>
+ <script>
+ const greetings = ["What's up?", "Hey dear stranger!", "Hello you!", "G'day m'ae", "Greetings!", "Nice to hear from you!"];
+ headline = document.getElementById("headline");
+ headline.innerText = greetings[Math.floor(Math.random() * greetings.length)];
+ </script>
+ </body>
+</html>
+
diff --git a/new_site/src/test.css b/new_site/src/test.css
index 17bfc66..e0217d0 100644
--- a/new_site/src/test.css
+++ b/new_site/src/test.css
@@ -27,6 +27,8 @@ body {
color: var(--color-fg);
font-family: var(--font-sans);
text-decoration-color: var(--color-decoration);
+ max-width: 90%;
+ margin: 0 auto;
}
div {
@@ -58,12 +60,19 @@ p {
margin-bottom: calc(var(--spacing)*10);
}
+.main-services {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 1fr);
+ grid-gap: 1rem;
+}
+
.badge {
margin-left: auto;
margin-right: auto;
padding: calc(var(--spacing)*1);
- max-width: max-content;
+ /*max-width: max-content;*/
max-height: max-content;
+ min-width: fit-content;
display: block;
border-radius: 16px;
user-select: none; -ms-user-select: none; -moz-user-select: none; -ms-touch-select: none; -webkit-user-select: none;
@@ -77,6 +86,10 @@ p {
border-radius: 12px;
padding: calc(var(--spacing)*2) calc(var(--spacing)*3);
display: flex;
+ min-width: 100%;
+ min-height: 100%;
+ max-width: 100%;
+ max-height: 100%;
flex-direction: row;
}
diff --git a/new_site/src/test.html b/new_site/src/test.html
index c3c6807..c736ef4 100644
--- a/new_site/src/test.html
+++ b/new_site/src/test.html
@@ -16,13 +16,45 @@
<p>This is a test paragraph!</p>
</div>
- <a href="https://git.privacynerd.de" target="_blank"
- class="badge" draggable="false">
- <div>
- <img src="img/logos/gitea.svg" />
- <p>Privacynerd's Gitea</p>
+ <div>
+ <div class="main-services">
+ <a href="https://git.privacynerd.de" target="_blank"
+ class="badge" draggable="false">
+ <div>
+ <img src="img/logos/gitea.svg" />
+ <p>Git with a cup of tea</p>
+ </div>
+ </a>
+ <a href="https://blog.privacynerd.de" target="_blank"
+ class="badge" draggable="false">
+ <div>
+ <img src="img/logos/blog.svg" />
+ <p>Privacynerd's Blog</p>
+ </div>
+ </a>
</div>
- </a>
+
+ <hr>
+
+ <div class="other-services">
+ <div class="card">
+ <!-- Other services go here (except the main ones, blog and gitea) -->
+ <a href=""></a>
+ </div>
+ <div class="card">
+ <!-- Social/Contact info goes here -->
+ <a href="https://git.privacynerd.de/BlueFox">Gitea | Bluefox</a>
+ <a href="https://codeberg.org/BlueFox">Codeberg | Bluefox</a>
+ <a href="https://crowdin.com/profile/bluefox4">CrowdIn | bluefox4</a>
+ <a href="https://github.com/bluefox42">Github | bluefox42</a>
+ <a href="https://hub.docker.com/u/bluefox42">Docker Hub | bluefox42</a>
+ <hr>
+ <a href="@bluefox:privacynerd.de">Matrix | @bluefox</a>
+ <a href="@bluefox4@mastodon.org">Mastodon | bluefox4</a>
+ <a href="mailto:bluefox@privacynerd.de">E-Mail | bluefox</a>
+ </div>
+ </div>
+ </div>
</body>