Added another test with css grids
This commit is contained in:
parent
387d13809a
commit
d6c0fbe231
GPG Key ID:
327233DA85435270
178
new_site/src/griddy.css
Normal file
178
new_site/src/griddy.css
Normal file
@ -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%; }
|
||||
}
|
||||
48
new_site/src/griddy.html
Normal file
48
new_site/src/griddy.html
Normal file
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user