Old browsers
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 142 B |
+53
-88
@@ -1,104 +1,69 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Community | Krzak.org</title>
|
<title>Community | Krzak.org</title>
|
||||||
<meta charset="utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<!-- Favicons -->
|
<!-- Favicons -->
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
|
||||||
<link
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
|
||||||
rel="icon"
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
|
||||||
type="image/png"
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48x48.png">
|
||||||
sizes="16x16"
|
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png">
|
||||||
href="/favicons/favicon-16x16.png"
|
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/favicon-192x192.png">
|
||||||
/>
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/favicon-180x180.png">
|
||||||
<link
|
<link rel="shortcut icon" href="/favicons/favicon.ico">
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="32x32"
|
|
||||||
href="/favicons/favicon-32x32.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="48x48"
|
|
||||||
href="/favicons/favicon-48x48.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="96x96"
|
|
||||||
href="/favicons/favicon-96x96.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="192x192"
|
|
||||||
href="/favicons/favicon-192x192.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="180x180"
|
|
||||||
href="/favicons/favicon-180x180.png"
|
|
||||||
/>
|
|
||||||
<link rel="shortcut icon" href="/favicons/favicon.ico" />
|
|
||||||
|
|
||||||
<!-- Android Chrome -->
|
<!-- Android Chrome -->
|
||||||
<link
|
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/favicon-192x192.png">
|
||||||
rel="icon"
|
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/favicon-512x512.png">
|
||||||
type="image/png"
|
|
||||||
sizes="192x192"
|
|
||||||
href="/favicons/favicon-192x192.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="512x512"
|
|
||||||
href="/favicons/favicon-512x512.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- PWA -->
|
<!-- PWA -->
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json">
|
||||||
<meta name="theme-color" content="#2a1a5e" />
|
<meta name="theme-color" content="#2a1a5e">
|
||||||
|
|
||||||
<link rel="stylesheet" href="/styles.css" />
|
<link rel="stylesheet" href="/styles.css?v=2">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container fade-in">
|
<div class="bg-glow">
|
||||||
<h1 class="slide-down">
|
<div class="bg-grid">
|
||||||
<span class="icon">
|
<div class="container">
|
||||||
<img src="/icon.svg" alt="krzak.org" />
|
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin-bottom: 24px;">
|
||||||
</span>
|
<tr>
|
||||||
Krzak.org
|
<td valign="middle" style="padding-right: 16px;">
|
||||||
</h1>
|
<div class="icon">
|
||||||
<p class="slide-down">Join the community on Discord or Matrix</p>
|
<img src="/icon.svg" alt="krzak.org">
|
||||||
<ul>
|
</div>
|
||||||
<li class="slide-up" style="animation-delay: 0.1s">
|
</td>
|
||||||
<a
|
<td valign="middle">
|
||||||
href="https://matrix.to/#/!FQlmqHwYODiSahGeim:krzak.org?via=krzak.org"
|
<h1 style="margin: 0; text-align: center;">Krzak.org</h1>
|
||||||
class="matrix-link"
|
</td>
|
||||||
>
|
</tr>
|
||||||
<strong>chat.krzak.org (Matrix)</strong>
|
</table>
|
||||||
<span>Safespace ULtd.</span>
|
<p>Join the community on Discord or Matrix</p>
|
||||||
</a>
|
<ul class="links">
|
||||||
</li>
|
<li>
|
||||||
<li class="slide-up" style="animation-delay: 0.2s">
|
<a href="https://matrix.to/#/!FQlmqHwYODiSahGeim:krzak.org?via=krzak.org" class="link matrix-link clearfix">
|
||||||
<a
|
<strong>chat.krzak.org (Matrix)</strong>
|
||||||
href="https://discord.gg/CY3Zr6baD7"
|
<span>Safespace ULtd.</span>
|
||||||
class="discord-link"
|
</a>
|
||||||
>
|
</li>
|
||||||
<strong>Discord</strong>
|
<li>
|
||||||
<span>discord.gg/CY3Zr6baD7</span>
|
<a href="https://discord.gg/CY3Zr6baD7" class="link discord-link clearfix">
|
||||||
</a>
|
<strong>Discord</strong>
|
||||||
</li>
|
<span>discord.gg/CY3Zr6baD7</span>
|
||||||
<li class="slide-up" style="animation-delay: 0.15s">
|
</a>
|
||||||
<a href="/">
|
</li>
|
||||||
<strong>Back</strong>
|
<br>
|
||||||
</a>
|
<li>
|
||||||
</li>
|
<a href="/" class="link clearfix">
|
||||||
</ul>
|
<strong>Back</strong>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+58
-58
@@ -1,71 +1,71 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<title>Krzak.org - Contact</title>
|
<title>Krzak.org - Contact</title>
|
||||||
<link rel="stylesheet" href="/styles.css" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="/styles.css?v=2">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container fade-in">
|
<div class="bg-glow">
|
||||||
<h1 class="slide-down">
|
<div class="bg-grid">
|
||||||
<span class="icon">
|
<div class="container">
|
||||||
<img src="/icon.svg" alt="krzak.org" />
|
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin-bottom: 24px;">
|
||||||
</span>
|
<tr>
|
||||||
Krzak.org
|
<td valign="middle" style="padding-right: 16px;">
|
||||||
</h1>
|
<div class="icon">
|
||||||
<ul>
|
<img src="/icon.svg" alt="krzak.org">
|
||||||
<li class="slide-up" style="animation-delay: 0.05s">
|
</div>
|
||||||
<a href="https://matrix.to/#/@n0va:krzak.org">
|
</td>
|
||||||
<strong>Matrix</strong>
|
<td valign="middle">
|
||||||
<span>@n0va:krzak.org</span>
|
<h1 style="margin: 0; text-align: center;">Krzak.org</h1>
|
||||||
</a>
|
</td>
|
||||||
</li>
|
</tr>
|
||||||
<li class="slide-up" style="animation-delay: 0.1s">
|
</table>
|
||||||
<a href="https://fedi.krzak.org/@n0va">
|
|
||||||
<strong>Fediverse</strong>
|
<ul class="links">
|
||||||
<span>@n0va@fedi.krzak.org</span>
|
<li>
|
||||||
</a>
|
<a href="https://matrix.to/#/@n0va:krzak.org" class="link clearfix">
|
||||||
</li>
|
<strong>Matrix</strong>
|
||||||
<li class="slide-up" style="animation-delay: 0.15s">
|
<span>@n0va:krzak.org</span>
|
||||||
<a href="mailto:n0va@krzak.org">
|
</a>
|
||||||
<strong>Mail</strong>
|
</li>
|
||||||
<span>n0va@krzak.org</span>
|
<li>
|
||||||
</a>
|
<a href="https://fedi.krzak.org/@n0va" class="link clearfix">
|
||||||
</li>
|
<strong>Fediverse</strong>
|
||||||
</ul>
|
<span>@n0va@fedi.krzak.org</span>
|
||||||
<ul>
|
</a>
|
||||||
<li class="slide-up support-row" style="animation-delay: 0.3s">
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="mailto:n0va@krzak.org" class="link clearfix">
|
||||||
|
<strong>Mail</strong>
|
||||||
|
<span>n0va@krzak.org</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<div class="support">
|
||||||
<a href="https://liberapay.com/krzak" class="button">
|
<a href="https://liberapay.com/krzak" class="button">
|
||||||
Support Krzak.org
|
Support Krzak.org
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
<br>
|
||||||
<br />
|
<ul class="links">
|
||||||
<ul>
|
<li>
|
||||||
<li class="slide-up" style="animation-delay: 0.35s">
|
<a href="/" class="link clearfix">
|
||||||
<a href="/">
|
<strong>Back</strong>
|
||||||
<strong>Back</strong>
|
</a>
|
||||||
</a>
|
</li>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="librecounter fade-in" style="animation-delay: 0.4s">
|
<div class="librecounter">
|
||||||
<img
|
<img src="https://librecounter.org/counter.svg" width="0" alt="" style="display:none;">
|
||||||
src="https://librecounter.org/counter.svg"
|
<span class="counter">
|
||||||
referrerpolicy="unsafe-url"
|
Indexed by
|
||||||
width="0"
|
<a href="https://librecounter.org/referer/show" target="_blank">LibreCounter</a>
|
||||||
alt=""
|
</span>
|
||||||
/>
|
</div>
|
||||||
<span class="counter">
|
|
||||||
Indexed by
|
|
||||||
<a
|
|
||||||
href="https://librecounter.org/referer/show"
|
|
||||||
target="_blank"
|
|
||||||
>LibreCounter</a
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -0,0 +1,75 @@
|
|||||||
|
from PIL import Image, ImageDraw
|
||||||
|
|
||||||
|
def hex_to_rgb(hex_code):
|
||||||
|
hex_code = hex_code.lstrip('#')
|
||||||
|
return tuple(int(hex_code[i:i+2], 16) for i in (0, 2, 4))
|
||||||
|
|
||||||
|
# 1. Vertical Gradient
|
||||||
|
h = 2000
|
||||||
|
img = Image.new('RGB', (1, h))
|
||||||
|
draw = ImageDraw.Draw(img)
|
||||||
|
|
||||||
|
color_top = hex_to_rgb('#1a1130')
|
||||||
|
color_bottom = hex_to_rgb('#120d22')
|
||||||
|
|
||||||
|
for y in range(h):
|
||||||
|
r = int(color_top[0] + (color_bottom[0] - color_top[0]) * (y / h))
|
||||||
|
g = int(color_top[1] + (color_bottom[1] - color_top[1]) * (y / h))
|
||||||
|
b = int(color_top[2] + (color_bottom[2] - color_top[2]) * (y / h))
|
||||||
|
draw.point((0, y), fill=(r, g, b))
|
||||||
|
|
||||||
|
img.save('bg_gradient.png')
|
||||||
|
|
||||||
|
# 2. Top-Left and Top-Right Glows (Large image, say 2000x800)
|
||||||
|
w_glow, h_glow = 2000, 800
|
||||||
|
img_glow = Image.new('RGBA', (w_glow, h_glow), (0, 0, 0, 0))
|
||||||
|
draw_glow = ImageDraw.Draw(img_glow)
|
||||||
|
|
||||||
|
# Top left glow: #e0a05b 8% opacity, transparent at 28%
|
||||||
|
# Top right glow: #8b4789 18% opacity, transparent at 30%
|
||||||
|
# We'll just approximate it.
|
||||||
|
center_left = (0, 0)
|
||||||
|
radius_left = 600
|
||||||
|
|
||||||
|
center_right = (2000, 0)
|
||||||
|
radius_right = 650
|
||||||
|
|
||||||
|
for y in range(h_glow):
|
||||||
|
for x in range(w_glow):
|
||||||
|
# Left
|
||||||
|
dist_left = ((x - center_left[0])**2 + (y - center_left[1])**2)**0.5
|
||||||
|
alpha_left = 0
|
||||||
|
if dist_left < radius_left:
|
||||||
|
alpha_left = int(255 * 0.08 * (1 - dist_left / radius_left))
|
||||||
|
|
||||||
|
# Right
|
||||||
|
dist_right = ((x - center_right[0])**2 + (y - center_right[1])**2)**0.5
|
||||||
|
alpha_right = 0
|
||||||
|
if dist_right < radius_right:
|
||||||
|
alpha_right = int(255 * 0.18 * (1 - dist_right / radius_right))
|
||||||
|
|
||||||
|
r, g, b, a = 0, 0, 0, 0
|
||||||
|
if alpha_left > alpha_right:
|
||||||
|
r, g, b, a = 224, 160, 91, alpha_left
|
||||||
|
elif alpha_right > 0:
|
||||||
|
r, g, b, a = 139, 71, 137, alpha_right
|
||||||
|
|
||||||
|
if a > 0:
|
||||||
|
draw_glow.point((x, y), fill=(r, g, b, a))
|
||||||
|
|
||||||
|
img_glow.save('bg_glows.png')
|
||||||
|
|
||||||
|
# 3. Button Background (since linear-gradients are not in CSS2)
|
||||||
|
# Button linear-gradient(135deg, #e0a05b, #f1ba77)
|
||||||
|
# Let's just make a small 10x100 vertical gradient for button that can be repeated horizontally
|
||||||
|
img_btn = Image.new('RGB', (1, 100))
|
||||||
|
draw_btn = ImageDraw.Draw(img_btn)
|
||||||
|
c1 = hex_to_rgb('#e0a05b')
|
||||||
|
c2 = hex_to_rgb('#f1ba77')
|
||||||
|
for y in range(100):
|
||||||
|
r = int(c1[0] + (c2[0] - c1[0]) * (y / 100))
|
||||||
|
g = int(c1[1] + (c2[1] - c1[1]) * (y / 100))
|
||||||
|
b = int(c1[2] + (c2[2] - c1[2]) * (y / 100))
|
||||||
|
draw_btn.point((0, y), fill=(r, g, b))
|
||||||
|
img_btn.save('btn_bg.png')
|
||||||
|
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
from PIL import Image, ImageDraw
|
||||||
|
|
||||||
|
# 1. Generate icon_bg.png (56x56)
|
||||||
|
img_icon = Image.new('RGBA', (56, 56), (0, 0, 0, 0))
|
||||||
|
draw = ImageDraw.Draw(img_icon)
|
||||||
|
|
||||||
|
# Fill circle
|
||||||
|
# circle bounding box: [0, 0, 55, 55]
|
||||||
|
# color: rgba(0,0,0, 0.22) => alpha = int(0.22 * 255) = 56
|
||||||
|
draw.ellipse([0, 0, 55, 55], fill=(0, 0, 0, 56))
|
||||||
|
|
||||||
|
# Outline circle
|
||||||
|
# color: rgba(224, 160, 91, 0.45) => alpha = int(0.45 * 255) = 115
|
||||||
|
draw.ellipse([0, 0, 55, 55], outline=(224, 160, 91, 115), width=1)
|
||||||
|
|
||||||
|
img_icon.save('icon_bg.png')
|
||||||
|
|
||||||
|
# 2. Generate grid.png (24x24)
|
||||||
|
# 1px top and left lines, rgba(255, 255, 255, 0.02)
|
||||||
|
# Wait, 0.02 is very faint (alpha = 5). Let's make it alpha=8 for visibility.
|
||||||
|
img_grid = Image.new('RGBA', (24, 24), (0, 0, 0, 0))
|
||||||
|
draw_grid = ImageDraw.Draw(img_grid)
|
||||||
|
|
||||||
|
line_color = (255, 255, 255, 8)
|
||||||
|
# Left line
|
||||||
|
draw_grid.line([(0, 0), (0, 23)], fill=line_color, width=1)
|
||||||
|
# Top line
|
||||||
|
draw_grid.line([(0, 0), (23, 0)], fill=line_color, width=1)
|
||||||
|
|
||||||
|
img_grid.save('grid.png')
|
||||||
|
|
||||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 394 B |
+136
-182
@@ -1,203 +1,157 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Krzak.org</title>
|
<title>Krzak.org</title>
|
||||||
<meta charset="utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<!-- Favicons -->
|
<!-- Favicons -->
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
|
||||||
<link
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
|
||||||
rel="icon"
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
|
||||||
type="image/png"
|
<link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48x48.png">
|
||||||
sizes="16x16"
|
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png">
|
||||||
href="/favicons/favicon-16x16.png"
|
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/favicon-192x192.png">
|
||||||
/>
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/favicon-180x180.png">
|
||||||
<link
|
<link rel="shortcut icon" href="/favicons/favicon.ico">
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="32x32"
|
|
||||||
href="/favicons/favicon-32x32.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="48x48"
|
|
||||||
href="/favicons/favicon-48x48.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="96x96"
|
|
||||||
href="/favicons/favicon-96x96.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="192x192"
|
|
||||||
href="/favicons/favicon-192x192.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="180x180"
|
|
||||||
href="/favicons/favicon-180x180.png"
|
|
||||||
/>
|
|
||||||
<link rel="shortcut icon" href="/favicons/favicon.ico" />
|
|
||||||
|
|
||||||
<!-- Android Chrome -->
|
<!-- Android Chrome -->
|
||||||
<link
|
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/favicon-192x192.png">
|
||||||
rel="icon"
|
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/favicon-512x512.png">
|
||||||
type="image/png"
|
|
||||||
sizes="192x192"
|
|
||||||
href="/favicons/favicon-192x192.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="icon"
|
|
||||||
type="image/png"
|
|
||||||
sizes="512x512"
|
|
||||||
href="/favicons/favicon-512x512.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- PWA -->
|
<!-- PWA -->
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json">
|
||||||
<meta name="theme-color" content="#2a1a5e" />
|
<meta name="theme-color" content="#2a1a5e">
|
||||||
|
|
||||||
<link rel="stylesheet" href="/styles.css?v=1" />
|
<link rel="stylesheet" href="/styles.css?v=2">
|
||||||
|
|
||||||
<link href="https://fedi.krzak.org/@krzak" rel="me" />
|
<link href="https://fedi.krzak.org/@krzak" rel="me">
|
||||||
<link href="https://fedi.krzak.org/@n0va" rel="me" />
|
<link href="https://fedi.krzak.org/@n0va" rel="me">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container homepage">
|
<div class="bg-glow">
|
||||||
<header class="hero">
|
<div class="bg-grid">
|
||||||
<div class="band">
|
<div class="container homepage">
|
||||||
<span class="icon mark">
|
<div class="header hero">
|
||||||
<img src="/icon.svg" alt="krzak.org" />
|
<table class="header-table" border="0" cellpadding="0" cellspacing="0">
|
||||||
</span>
|
<tr>
|
||||||
<div class="copy">
|
<td class="mark-cell" valign="middle">
|
||||||
<h1>Krzak.org</h1>
|
<div class="icon mark">
|
||||||
<p class="lead">Hi, welcome to krzak.org</p>
|
<img src="/icon.svg" alt="krzak.org">
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="copy" valign="middle">
|
||||||
|
<h1>Krzak.org</h1>
|
||||||
|
<p class="lead">Hi, welcome to krzak.org</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section box">
|
||||||
|
<h2>Main services</h2>
|
||||||
|
<ul class="links">
|
||||||
|
<li>
|
||||||
|
<a href="https://git.krzak.org" class="link main clearfix">
|
||||||
|
<strong>Git</strong>
|
||||||
|
<span>Gitea</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://chat.krzak.org" class="link main clearfix">
|
||||||
|
<strong>Chat</strong>
|
||||||
|
<span>chat.krzak.org</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://fedi.krzak.org" class="link clearfix">
|
||||||
|
<strong>Fediverse</strong>
|
||||||
|
<span>Sharkey</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://music.krzak.org" class="link clearfix">
|
||||||
|
<strong>Music</strong>
|
||||||
|
<span>Jellyfin</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section box">
|
||||||
|
<h2>Tools</h2>
|
||||||
|
<ul class="links">
|
||||||
|
<li>
|
||||||
|
<a href="https://auth.krzak.org" class="link auth-link clearfix">
|
||||||
|
<strong>Unified Krzak.org account</strong>
|
||||||
|
<span>Authentik<span class="experimental">experimental</span></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://mail.krzak.org" class="link clearfix">
|
||||||
|
<strong>Mail</strong>
|
||||||
|
<span>Mailu</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://mu.krzak.org" class="link clearfix">
|
||||||
|
<strong>Music Upload</strong>
|
||||||
|
<span>mu.krzak.org</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://paste.krzak.org" class="link clearfix">
|
||||||
|
<strong>Paste</strong>
|
||||||
|
<span>Opengist</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://link.krzak.org" class="link clearfix">
|
||||||
|
<strong>Link Shortener</strong>
|
||||||
|
<span>Shlink</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section box">
|
||||||
|
<h2>Pages</h2>
|
||||||
|
<ul class="links">
|
||||||
|
<li>
|
||||||
|
<a href="/community/" class="link clearfix">
|
||||||
|
<strong>Community</strong>
|
||||||
|
<span>Discord + Matrix</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact.html" class="link clearfix">
|
||||||
|
<strong>Contact</strong>
|
||||||
|
<span>Ways to reach me</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section foot">
|
||||||
|
<p>
|
||||||
|
If you want an account on any of these, want to suggest
|
||||||
|
something new or get a subdomain, just message me
|
||||||
|
</p>
|
||||||
|
<div class="support">
|
||||||
|
<a href="https://liberapay.com/krzak" class="button">
|
||||||
|
Support Krzak.org
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
|
|
||||||
<section class="box">
|
<div class="librecounter">
|
||||||
<h2>Main services</h2>
|
<img src="https://librecounter.org/counter.svg" width="0" alt="" style="display:none;">
|
||||||
<ul class="links">
|
<span class="counter">
|
||||||
<li>
|
Indexed by
|
||||||
<a href="https://git.krzak.org" class="link main">
|
<a href="https://librecounter.org/referer/show" target="_blank">LibreCounter</a>
|
||||||
<strong>Git</strong>
|
</span>
|
||||||
<span>Gitea</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.krzak.org" class="link main">
|
|
||||||
<strong>Chat</strong>
|
|
||||||
<span>chat.krzak.org</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://fedi.krzak.org" class="link">
|
|
||||||
<strong>Fediverse</strong>
|
|
||||||
<span>Sharkey</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://music.krzak.org" class="link">
|
|
||||||
<strong>Music</strong>
|
|
||||||
<span>Jellyfin</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="box">
|
|
||||||
<h2>Tools</h2>
|
|
||||||
<ul class="links">
|
|
||||||
<li>
|
|
||||||
<a href="https://auth.krzak.org" class="link auth-link">
|
|
||||||
<strong>Unified Krzak.org account</strong>
|
|
||||||
<span
|
|
||||||
>Authentik
|
|
||||||
<small class="experimental"
|
|
||||||
>experimental</small
|
|
||||||
></span
|
|
||||||
>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://mail.krzak.org" class="link">
|
|
||||||
<strong>Mail</strong>
|
|
||||||
<span>Mailu</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://mu.krzak.org" class="link">
|
|
||||||
<strong>Music Upload</strong>
|
|
||||||
<span>mu.krzak.org</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://paste.krzak.org" class="link">
|
|
||||||
<strong>Paste</strong>
|
|
||||||
<span>Opengist</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://link.krzak.org" class="link">
|
|
||||||
<strong>Link Shortener</strong>
|
|
||||||
<span>Shlink</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="box">
|
|
||||||
<h2>Pages</h2>
|
|
||||||
<ul class="links">
|
|
||||||
<li>
|
|
||||||
<a href="/community/" class="link">
|
|
||||||
<strong>Community</strong>
|
|
||||||
<span>Discord + Matrix</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/contact.html" class="link">
|
|
||||||
<strong>Contact</strong>
|
|
||||||
<span>Ways to reach me</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="foot">
|
|
||||||
<p>
|
|
||||||
If you want an account on any of these, want to suggest
|
|
||||||
something new or get a subdomain, just message me
|
|
||||||
</p>
|
|
||||||
<div class="support">
|
|
||||||
<a href="https://liberapay.com/krzak" class="button">
|
|
||||||
Support Krzak.org
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<div class="librecounter">
|
|
||||||
<img
|
|
||||||
src="https://librecounter.org/counter.svg"
|
|
||||||
referrerpolicy="unsafe-url"
|
|
||||||
width="0"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<span class="counter">
|
|
||||||
Indexed by
|
|
||||||
<a
|
|
||||||
href="https://librecounter.org/referer/show"
|
|
||||||
target="_blank"
|
|
||||||
>LibreCounter</a
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
+154
-395
@@ -1,67 +1,37 @@
|
|||||||
:root {
|
/* CSS 2 styles for Krzak.org */
|
||||||
--bg: #120d22;
|
|
||||||
--bg-top: #1a1130;
|
|
||||||
--panel: rgba(28, 20, 53, 0.94);
|
|
||||||
--panel-soft: rgba(255, 255, 255, 0.025);
|
|
||||||
--panel-strong: rgba(255, 255, 255, 0.05);
|
|
||||||
--container-bg: var(--panel);
|
|
||||||
--container-border: rgba(105, 80, 164, 0.55);
|
|
||||||
--container-highlight: rgba(255, 255, 255, 0.05);
|
|
||||||
--text-color: #f7ecd6;
|
|
||||||
--text-muted: #c9bc9b;
|
|
||||||
--accent-color: #e0a05b;
|
|
||||||
--accent-glow: rgba(224, 160, 91, 0.2);
|
|
||||||
--link-bg: var(--panel-soft);
|
|
||||||
--link-hover-bg: rgba(224, 160, 91, 0.09);
|
|
||||||
--link-border: rgba(105, 80, 164, 0.45);
|
|
||||||
--link-hover-border: rgba(224, 160, 91, 0.48);
|
|
||||||
--success: #8fc17d;
|
|
||||||
--danger: #ea7a7a;
|
|
||||||
--shadow: rgba(0, 0, 0, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html, body {
|
||||||
scroll-behavior: smooth;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
background-color: #120d22;
|
||||||
min-height: 100vh;
|
background-image: url('bg_gradient.png');
|
||||||
padding: 20px;
|
background-repeat: repeat-x;
|
||||||
display: flex;
|
background-attachment: fixed;
|
||||||
align-items: center;
|
color: #f7ecd6;
|
||||||
justify-content: center;
|
|
||||||
background:
|
|
||||||
radial-gradient(
|
|
||||||
circle at top left,
|
|
||||||
rgba(224, 160, 91, 0.08),
|
|
||||||
transparent 28%
|
|
||||||
),
|
|
||||||
radial-gradient(
|
|
||||||
circle at top right,
|
|
||||||
rgba(139, 71, 137, 0.18),
|
|
||||||
transparent 30%
|
|
||||||
),
|
|
||||||
linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%);
|
|
||||||
color: var(--text-color);
|
|
||||||
font-family: Georgia, "Times New Roman", serif;
|
font-family: Georgia, "Times New Roman", serif;
|
||||||
overflow-x: hidden;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body::before {
|
.bg-glow {
|
||||||
content: "";
|
min-height: 100%;
|
||||||
position: fixed;
|
background-image: url('bg_glows.png');
|
||||||
inset: 0;
|
background-repeat: no-repeat;
|
||||||
pointer-events: none;
|
background-position: top center;
|
||||||
background-image:
|
background-attachment: fixed;
|
||||||
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
}
|
||||||
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
|
||||||
background-size: 24px 24px;
|
.bg-grid {
|
||||||
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
|
min-height: 100%;
|
||||||
|
padding: 20px 0;
|
||||||
|
background-image: url('grid.png');
|
||||||
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@@ -69,222 +39,146 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
max-width: 664px; /* Total 720 with padding */
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 28px;
|
||||||
|
background-color: #1a1130;
|
||||||
|
border: 1px solid #4a3875;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 100%;
|
|
||||||
max-width: 720px;
|
|
||||||
margin: auto;
|
|
||||||
padding: 28px;
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
rgba(29, 21, 55, 0.96),
|
|
||||||
rgba(18, 13, 35, 0.98)
|
|
||||||
);
|
|
||||||
border: 1px solid var(--container-border);
|
|
||||||
box-shadow:
|
|
||||||
0 18px 45px var(--shadow),
|
|
||||||
inset 0 1px 0 var(--container-highlight);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.homepage {
|
/* Header layout using tables */
|
||||||
max-width: 760px;
|
table.header-table {
|
||||||
background:
|
width: 100%;
|
||||||
radial-gradient(
|
margin-bottom: 24px;
|
||||||
circle at top left,
|
border-collapse: collapse;
|
||||||
rgba(224, 160, 91, 0.1),
|
}
|
||||||
transparent 34%
|
|
||||||
),
|
table.header-table td {
|
||||||
linear-gradient(180deg, rgba(29, 21, 55, 0.96), rgba(18, 13, 35, 0.98));
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.mark-cell {
|
||||||
|
width: 76px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon img {
|
||||||
|
height: 56px;
|
||||||
|
width: auto;
|
||||||
|
border: 0;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.copy {
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0 0 18px;
|
margin: 0 0 10px;
|
||||||
display: flex;
|
color: #f7ecd6;
|
||||||
align-items: center;
|
font-size: 2.8em;
|
||||||
justify-content: center;
|
|
||||||
gap: 16px;
|
|
||||||
color: var(--text-color);
|
|
||||||
font-size: clamp(2rem, 5vw, 2.8rem);
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.05;
|
line-height: 1.05;
|
||||||
text-align: center;
|
text-align: left;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0 0 14px;
|
margin: 0 0 14px;
|
||||||
color: var(--accent-color);
|
color: #e0a05b;
|
||||||
font-size: 1rem;
|
font-size: 1em;
|
||||||
font-family: "Courier New", Courier, monospace;
|
font-family: "Courier New", Courier, monospace;
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3,
|
|
||||||
h4 {
|
|
||||||
margin: 0 0 10px;
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
color: var(--text-muted);
|
color: #c9bc9b;
|
||||||
font-size: 1rem;
|
font-size: 1em;
|
||||||
line-height: 1.65;
|
line-height: 1.65;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol,
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
display: grid;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 15px 18px;
|
|
||||||
color: var(--text-color);
|
|
||||||
text-decoration: none;
|
|
||||||
background: var(--link-bg);
|
|
||||||
border: 1px solid var(--link-border);
|
|
||||||
transition:
|
|
||||||
transform 0.2s ease,
|
|
||||||
border-color 0.2s ease,
|
|
||||||
background 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
li a:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
background: var(--link-hover-bg);
|
|
||||||
border-color: var(--link-hover-border);
|
|
||||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
|
|
||||||
}
|
|
||||||
|
|
||||||
li a strong {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
li a span {
|
|
||||||
display: block;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.92rem;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
padding: 8px;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgba(0, 0, 0, 0.22);
|
|
||||||
border: 1px solid rgba(224, 160, 91, 0.45);
|
|
||||||
box-shadow: 0 0 28px rgba(224, 160, 91, 0.14);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in,
|
|
||||||
.slide-down,
|
|
||||||
.slide-up {
|
|
||||||
animation: none;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homepage .icon {
|
|
||||||
box-shadow: 0 0 28px rgba(224, 160, 91, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.band {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 76px minmax(0, 1fr);
|
|
||||||
gap: 18px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mark {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homepage h1 {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
justify-content: flex-start;
|
|
||||||
text-align: left;
|
|
||||||
font-size: clamp(2.3rem, 5vw, 3.9rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
max-width: 42rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
border: 1px solid var(--container-border);
|
border: 1px solid #4a3875;
|
||||||
background: rgba(255, 255, 255, 0.02);
|
background-color: #1c1435;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links {
|
ul.links {
|
||||||
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.links li {
|
ul.links li {
|
||||||
margin: 0;
|
margin: 0 0 10px 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
a.link {
|
||||||
border-color: var(--link-border);
|
display: block;
|
||||||
background: var(--link-bg);
|
padding: 15px 18px;
|
||||||
|
color: #f7ecd6;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #20173d;
|
||||||
|
border: 1px solid #4a3875;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link.main {
|
a.link:hover {
|
||||||
background:
|
background-color: #271a3d;
|
||||||
linear-gradient(135deg, rgba(224, 160, 91, 0.12), transparent 68%),
|
border-color: #70502e;
|
||||||
var(--link-bg);
|
|
||||||
border-color: rgba(224, 160, 91, 0.32);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.link.main {
|
||||||
|
background-color: #2e1d32;
|
||||||
|
border-color: #70502e;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.link strong {
|
||||||
|
font-size: 1.05em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.link span {
|
||||||
|
float: right;
|
||||||
|
color: #c9bc9b;
|
||||||
|
font-size: 0.92em;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
content: ".";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* * html hack for IE6 clearfix */
|
||||||
|
* html .clearfix { height: 1%; }
|
||||||
|
|
||||||
.foot {
|
.foot {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
padding-top: 18px;
|
padding-top: 18px;
|
||||||
border-top: 1px solid rgba(224, 160, 91, 0.22);
|
border-top: 1px solid #4a3875;
|
||||||
}
|
}
|
||||||
|
|
||||||
.foot p {
|
.foot p {
|
||||||
@@ -292,130 +186,43 @@ li a span {
|
|||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.support,
|
.support {
|
||||||
.support-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.support-row {
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 220px;
|
|
||||||
padding: 14px 22px;
|
|
||||||
color: #221433;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 700;
|
|
||||||
background: linear-gradient(135deg, #e0a05b, #f1ba77);
|
|
||||||
border: 1px solid rgba(255, 245, 228, 0.4);
|
|
||||||
box-shadow:
|
|
||||||
0 10px 24px rgba(0, 0, 0, 0.25),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
|
||||||
transition:
|
|
||||||
transform 0.2s ease,
|
|
||||||
box-shadow 0.2s ease,
|
|
||||||
filter 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
filter: brightness(1.04);
|
|
||||||
box-shadow:
|
|
||||||
0 14px 28px rgba(0, 0, 0, 0.3),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
li.support-row a.button,
|
|
||||||
.support a.button {
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(135deg, #e0a05b, #f1ba77) !important;
|
|
||||||
border: 1px solid rgba(255, 245, 228, 0.4) !important;
|
|
||||||
color: #221433 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.matrix-link {
|
|
||||||
background:
|
|
||||||
linear-gradient(135deg, rgba(143, 193, 125, 0.12), transparent 70%),
|
|
||||||
var(--link-bg) !important;
|
|
||||||
border-color: rgba(143, 193, 125, 0.35) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.discord-link {
|
|
||||||
background:
|
|
||||||
linear-gradient(135deg, rgba(114, 137, 218, 0.14), transparent 70%),
|
|
||||||
var(--link-bg) !important;
|
|
||||||
border-color: rgba(114, 137, 218, 0.35) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-gallery {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
||||||
gap: 14px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 14px 22px;
|
||||||
|
color: #221433 !important;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--text-color);
|
font-weight: bold;
|
||||||
background: var(--link-bg);
|
background-image: url('btn_bg.png');
|
||||||
border: 1px solid var(--link-border);
|
background-repeat: repeat-x;
|
||||||
transition:
|
background-color: #e0a05b;
|
||||||
transform 0.2s ease,
|
border: 1px solid #fff5e4;
|
||||||
border-color 0.2s ease,
|
|
||||||
background 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-card:hover {
|
a.button:hover {
|
||||||
transform: translateY(-2px);
|
background-color: #f1ba77;
|
||||||
background: var(--link-hover-bg);
|
background-position: 0 -10px;
|
||||||
border-color: var(--link-hover-border);
|
|
||||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-card.highlighted {
|
|
||||||
border-color: rgba(224, 160, 91, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-icon {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
object-fit: contain;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-card p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.92rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.librecounter {
|
.librecounter {
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
border-top: 1px solid #33264d;
|
||||||
display: flex;
|
text-align: center;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.counter {
|
.counter {
|
||||||
color: var(--text-muted);
|
color: #c9bc9b;
|
||||||
font-size: 0.86rem;
|
font-size: 0.86em;
|
||||||
|
display: block;
|
||||||
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.counter a {
|
.counter a {
|
||||||
color: var(--accent-color);
|
color: #e0a05b;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -423,75 +230,27 @@ li.support-row a.button,
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.experimental {
|
a.link span.experimental {
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
font-weight: 600;
|
font-weight: bold;
|
||||||
letter-spacing: 0.05em;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--accent-color);
|
color: #e0a05b;
|
||||||
vertical-align: middle;
|
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
|
float: none;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.matrix-link {
|
||||||
|
background-color: #19271c !important;
|
||||||
|
border-color: #3b5032 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discord-link {
|
||||||
|
background-color: #191c30 !important;
|
||||||
|
border-color: #2d3655 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.librecounter img {
|
.librecounter img {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
opacity: 0.9;
|
border: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.librecounter img[width="0"] {
|
|
||||||
display: block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-to-top,
|
|
||||||
.ai-chat {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
body {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
padding: 20px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li a,
|
|
||||||
.link {
|
|
||||||
display: grid;
|
|
||||||
justify-content: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
li a span,
|
|
||||||
.link span {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.band {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mark {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.homepage h1,
|
|
||||||
.lead,
|
|
||||||
.foot p {
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-gallery {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user