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 @@ + + + + + + + + Privacynerd's new home :) + + +

Hey dear stanger!

+

This is privacynerd.de. I'm mostly known as BlueFox and host some services in the internet. I love coding and publish blog posts every know and then.
+ Stay optimistic!

+
+
+
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.
+
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.
+
+
+
+
+
Other services
+
+
+
+ Social & Contact +
+ + Bluefox | + Bluefox | + bluefox4 | + bluefox42 | + bluefox42 +
+
+
+
+
+ Made with ❤️ in Germany | Imprint +
+ + + + 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 @@

This is a test paragraph!

- -
- -

Privacynerd's Gitea

+
+
+ +
+ +

Git with a cup of tea

+
+ + +
+ +

Privacynerd's Blog

+
+
- + +
+ +
+
+ + +
+
+ + Gitea | Bluefox + Codeberg | Bluefox + CrowdIn | bluefox4 + Github | bluefox42 + Docker Hub | bluefox42 +
+ Matrix | @bluefox + Mastodon | bluefox4 + E-Mail | bluefox +
+
+