linuxposting/tilde-site
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more splash and more banners yay yippee

Browse source
This commit is contained in:
Luna 2025-11-14 21:33:37 -03:00
parent 1a54014e50
commit 08d04f2667
2 changed files with 30 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

24
assets/base.css
View file

@ -65,7 +65,7 @@ li {
/* here are some @media rules to choose when to display ascii art */ /* here are some @media rules to choose when to display ascii art */
.ascii { .ascii, .splash {
font-family: "mono"; font-family: "mono";
color: var(--c-fg); color: var(--c-fg);
white-space: pre; white-space: pre;
@ -73,11 +73,24 @@ li {
} }
@media screen and (min-width: 420px) { @media screen and (min-width: 420px) {
.ascii-1 { .splash-1 {
display: block;
visibility: visible
}
}
@media screen and (min-width: 420px) and (max-width: 649px) {
.ascii-2 {
display: block display: block
} }
} }
@media screen and (min-width: 650px) {
.ascii-1 {
display: block;
}
}
/* styling for the basic border when no js */ /* styling for the basic border when no js */
body > .nojs { body > .nojs {
@ -151,8 +164,7 @@ main {
@keyframes splash { @keyframes splash {
0%, 100% { 0%, 100% {
display: block; visibility: visible;
position: fixed;
color: var(--c-bg); color: var(--c-bg);
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -160,12 +172,14 @@ main {
} }
} }
.ascii { .splash {
animation-duration: 1.5s, 1.5s; animation-duration: 1.5s, 1.5s;
animation-iteration-count: 1, 1; animation-iteration-count: 1, 1;
animation-timing-function: linear, linear; animation-timing-function: linear, linear;
animation-name: appear, splash; animation-name: appear, splash;
animation-delay: 3s, 3s; animation-delay: 3s, 3s;
visibility: hidden;
position: fixed
} }
@keyframes splash-bg { @keyframes splash-bg {

12
index.html
View file

@ -14,9 +14,19 @@
<p>Connecting..</p> <p>Connecting..</p>
<p>Connecting...</p> <p>Connecting...</p>
</div> </div>
<div class="splash splash-1">│. .
│ ├┐ ─┐/┌┐┌┐┌ ├ ├┐┌┐ ─┐/ ─┐ ┌─┐ ╷
││││││ │ ││││└┐│ │││││ │ ││┌┘ ╵ └─┘
└ └┘/└─├┘└┘─┘└─ └┤./└─└┤└─
┘ ┘ </div>
<div class="nojs"><main> <div class="nojs"><main>
<span class="title nojs">Linuxposting Tilde</span> <span class="title nojs">Linuxposting Tilde</span>
<div class="ascii ascii-1">│. . <div class="ascii ascii-1">\ * __ * __ _
\ \ \_ \ \ \| ,_ ,_ \_ \- \ \_ ,-\ \|\ \ _\ / \_/
\_ \ \\ \_\ |\ \_\ \_\ _\ \_ \ \\ \_\ *|\ \_\ \__
\ ._\ __/
</div>
<div class="ascii ascii-2">│. .
│ ├┐ ─┐/┌┐┌┐┌ ├ ├┐┌┐ ─┐/ ─┐ ┌─┐ ╷ │ ├┐ ─┐/┌┐┌┐┌ ├ ├┐┌┐ ─┐/ ─┐ ┌─┐ ╷
││││││ │ ││││└┐│ │││││ │ ││┌┘ ╵ └─┘ ││││││ │ ││││└┐│ │││││ │ ││┌┘ ╵ └─┘
└ └┘/└─├┘└┘─┘└─ └┤./└─└┤└─ └ └┘/└─├┘└┘─┘└─ └┤./└─└┤└─