diff --git a/Makefile b/Makefile
index d077ff9..d08d098 100644
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,9 @@
FONTS = $(shell find fonts -type f)
CSS = style.css
PAGES = index.html
-IMAGES = mlem.gif icon.png star_small.png
+IMAGES = \
+ mlem.gif icon.png niss_uwu_bg.png \
+ star_small.png sparkles_large.png
BUILDDIR ?= _build
TMPDIR ?= _tmp
diff --git a/icon.png b/icon.png
index 7e0ae27..88652e7 100644
Binary files a/icon.png and b/icon.png differ
diff --git a/index.html b/index.html
index e0557f0..d0abff9 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
“mlem also”
-
+
a
big one
@@ -50,6 +50,10 @@
where to find gecs
+ - gallery
+
- coming soon?
+
- code
+
- gitea
- masto
- g@cybre.space
g@snouts.online
diff --git a/niss_uwu_bg.png b/niss_uwu_bg.png
new file mode 100644
index 0000000..04b0f65
Binary files /dev/null and b/niss_uwu_bg.png differ
diff --git a/sparkles.svg b/sparkles.svg
new file mode 100644
index 0000000..030419b
--- /dev/null
+++ b/sparkles.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/star.svg b/star.svg
new file mode 100644
index 0000000..15d193b
--- /dev/null
+++ b/star.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/style.css b/style.css
index 0f6806d..6ca7440 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,6 @@
@import url(fonts/muller/muller.css);
-body {
+html {
background:
linear-gradient(to bottom,
hsl(42deg, 92%, 70%) 0%,
@@ -9,10 +9,14 @@ body {
hsl(234deg, 100%, 76%) 80% 85%,
hsl(195deg, 100%, 67%) 98% 100%
)
- fixed;
+ fixed,
+ url(niss_uwu_bg.png) top center fixed;
+ background-blend-mode: hard-light;
+}
+body {
font-family: 'Muller';
- font-size: x-large;
+ font-size: 1.75rem;
font-weight: 500;
color: white;
text-shadow:
@@ -20,11 +24,19 @@ body {
-1px 1px 0 black,
1px -1px 0 black,
-1px -1px 0 black,
- 4px 4px 4px hsla(0, 0%, 0%, 60%);
+ 4px 4px 4px hsla(0, 0%, 0%, 70%);
text-align: center;
+ margin: 2em 0 3em;
+}
- max-width: 50em;
- margin: 24px auto 36px;
+main {
+ max-width: 35em;
+ padding: 1em;
+
+ background: hsla(0, 0%, 100%, 40%);
+ border-radius: 2em;
+ border: 3px solid hsla(0, 0%, 100%, 30%);
+ margin: 0 auto 1em;
}
h1, h2, h3, h4, h5, h6 {
@@ -41,41 +53,41 @@ h1 {
position: relative;
height: 219px;
width: 420px;
+ z-index: 1;
}
.mlem-text {
position: absolute;
- font-size: 24px;
font-weight: 700;
+ margin: 0;
}
-.niss {
- top: -55px; left: 20px;
-}
-.nisse {
- top: -22px; right: 0;
+.niss { bottom: 100%; left: 20px; }
+.nisse { bottom: 85%; right: 0; }
+#mlem img {
+ filter: drop-shadow(0 0 30px hsla(52deg, 85%, 95%, 75%));
+ z-index: 0;
}
-#big-little {
+header {
margin: -20pt 0 0 0;
ruby-position: under;
}
-#big-little rt {
+header rt {
font-size: 60%;
font-style: italic;
}
-#big-little rt::before, #big-little rt::after {
+header rt::before, header rt::after {
content: url(star_small.png);
mix-blend-mode: overlay;
height: 1em;
padding: 0 0.25em;
- vertical-align: text-bottom;
+ vertical-align: middle;
}
hr {
- height: 3px;
- width: 60%;
- border: 1px solid black;
- box-shadow: 4px 4px 2px rgba(0, 0, 0, 25%);
- background-color: white;
+ height: 2px;
+ width: 75%;
+ background-color: hsla(0, 0%, 100%, 75%);
+ mix-blend-mode: screen;
text-shadow: none;
margin: 20px auto;
}
@@ -103,6 +115,13 @@ dd {
a {
color: hsl(196deg, 100%, 85%);
- font-weight: 700;
+ font-weight: bolder;
text-decoration: none;
}
+
+main h2::before, main h2::after {
+ content: url(sparkles_large.png);
+ vertical-align: middle;
+ padding: 0 0.25em;
+ mix-blend-mode: overlay;
+}