From e5716d8629a0804d55a2c7668840d485c6271b2b Mon Sep 17 00:00:00 2001 From: "N0\\A" Date: Fri, 7 Aug 2026 19:17:14 +0200 Subject: [PATCH] Berries --- index.html | 156 ++++++++++++++++++------------------------ styles.css | 197 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 264 insertions(+), 89 deletions(-) diff --git a/index.html b/index.html index cf82025..25f6880 100755 --- a/index.html +++ b/index.html @@ -9,107 +9,85 @@ - +
-
- - - - - -
-
- krzak.org -
- 		-

Krzak.org

-

Hi, welcome to krzak.org

-
-
+
+

Krzak.org

+

Hi, welcome to krzak.org

+
-
-

Main services

- -
+
+ -
-

Other

- -
+ + Git + -
-

- If you want an account on any of these, want to suggest - something new or get a subdomain, just message me -

-
- - Support Krzak.org + + Chat + + + + Music + + + + Mail + + + + Auth
-
-
- - - Indexed by - LibreCounter - +
+

Other

+ +
+ +
+

+ If you want an account on any of these, want to suggest + something new or get a subdomain, just message me +

+
+ + Support Krzak.org + +
+
+ +
+ + + Indexed by + LibreCounter + +
diff --git a/styles.css b/styles.css index 66f361d..9c2e679 100644 --- a/styles.css +++ b/styles.css @@ -112,6 +112,110 @@ p { text-align: left; } +.homepage-header { + margin-bottom: 12px; + text-align: center; +} + +.homepage-header h1, +.homepage-header .lead { + text-align: center; +} + +.homepage-header .lead { + color: #c9bc9b; +} + +.bush { + width: 560px; + height: 476px; + max-width: 100%; + margin: 0 auto 26px auto; + position: relative; +} + +.bush-art { + display: block; + position: absolute; + top: 0; + left: 0; + width: 560px; + height: 476px; + border: 0; +} + +.berry-service { + display: block; + position: absolute; + color: #241530; + text-decoration: none; + text-align: center; + font-family: "Courier New", Courier, monospace; + font-weight: bold; + line-height: 1; + z-index: 2; +} + +.berry-service span { + display: block; + position: absolute; + left: 0; + top: 50%; + width: 100%; + margin-top: -0.55em; +} + +.berry-service:hover span, +.berry-service:focus span { + text-decoration: underline; +} + +.berry-git { + left: 32.5%; + top: 2.7%; + width: 30%; + height: 35.3%; + font-size: 1.45em; +} + +.berry-chat { + left: 75.6%; + top: 18.8%; + width: 22.1%; + height: 26%; + font-size: 1.05em; +} + +.berry-music { + left: 31.2%; + top: 58.8%; + width: 32.8%; + height: 38.5%; + font-size: 1.4em; +} + +.berry-mail { + left: 2.3%; + top: 23%; + width: 27%; + height: 47%; + color: #fff2dd; + font-size: 1.15em; + -moz-transform: rotate(43deg); + transform: rotate(43deg); +} + +.berry-auth { + left: 59.5%; + top: 43%; + width: 34%; + height: 30%; + color: #fff2dd; + font-size: 1.15em; + -moz-transform: rotate(21deg); + transform: rotate(21deg); +} + .box { margin-top: 18px; padding: 14px; @@ -119,6 +223,10 @@ p { background-color: #1c1435; } +.homepage .box { + margin-top: 0; +} + ul.links { list-style: none; margin: 0; @@ -130,6 +238,10 @@ ul.links li { padding: 0; } +ul.links li:last-child { + margin-bottom: 0; +} + a.link { display: block; padding: 15px 18px; @@ -240,3 +352,88 @@ a.button:hover { height: 44px; border: 0; } + +@media screen and (max-width: 620px) { + .container { + margin-left: 12px; + margin-right: 12px; + padding: 20px; + } + + .bush, + .bush-art { + width: 420px; + height: 357px; + } + + .berry-git { + font-size: 1.2em; + } + + .berry-chat { + font-size: 0.9em; + } + + .berry-music { + font-size: 1.15em; + } + + .berry-mail, + .berry-auth { + font-size: 1em; + } +} + +@media screen and (max-width: 470px) { + .bg-grid { + padding-top: 10px; + padding-bottom: 10px; + } + + .container { + margin-left: 6px; + margin-right: 6px; + padding: 14px; + } + + h1 { + font-size: 2.25em; + } + + .bush, + .bush-art { + width: 280px; + height: 238px; + } + + .bush { + margin-bottom: 18px; + } + + .bush-git { + font-size: 0.95em; + } + + .bush-chat { + font-size: 0.7em; + } + + .bush-music { + font-size: 0.9em; + } + + .bush-mail, + .bush-auth { + font-size: 0.78em; + } + + a.link { + padding: 13px 12px; + } + + a.link span { + float: none; + display: block; + margin-top: 4px; + } +}