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 |
+41
-76
@@ -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">
|
||||
<head>
|
||||
<title>Community | Krzak.org</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/favicons/favicon-16x16.png"
|
||||
/>
|
||||
<link
|
||||
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" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
|
||||
<link 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 -->
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="192x192"
|
||||
href="/favicons/favicon-192x192.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="512x512"
|
||||
href="/favicons/favicon-512x512.png"
|
||||
/>
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/favicon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/favicon-512x512.png">
|
||||
|
||||
<!-- PWA -->
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="theme-color" content="#2a1a5e" />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="theme-color" content="#2a1a5e">
|
||||
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<link rel="stylesheet" href="/styles.css?v=2">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container fade-in">
|
||||
<h1 class="slide-down">
|
||||
<span class="icon">
|
||||
<img src="/icon.svg" alt="krzak.org" />
|
||||
</span>
|
||||
Krzak.org
|
||||
</h1>
|
||||
<p class="slide-down">Join the community on Discord or Matrix</p>
|
||||
<ul>
|
||||
<li class="slide-up" style="animation-delay: 0.1s">
|
||||
<a
|
||||
href="https://matrix.to/#/!FQlmqHwYODiSahGeim:krzak.org?via=krzak.org"
|
||||
class="matrix-link"
|
||||
>
|
||||
<div class="bg-glow">
|
||||
<div class="bg-grid">
|
||||
<div class="container">
|
||||
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin-bottom: 24px;">
|
||||
<tr>
|
||||
<td valign="middle" style="padding-right: 16px;">
|
||||
<div class="icon">
|
||||
<img src="/icon.svg" alt="krzak.org">
|
||||
</div>
|
||||
</td>
|
||||
<td valign="middle">
|
||||
<h1 style="margin: 0; text-align: center;">Krzak.org</h1>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>Join the community on Discord or Matrix</p>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="https://matrix.to/#/!FQlmqHwYODiSahGeim:krzak.org?via=krzak.org" class="link matrix-link clearfix">
|
||||
<strong>chat.krzak.org (Matrix)</strong>
|
||||
<span>Safespace ULtd.</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="slide-up" style="animation-delay: 0.2s">
|
||||
<a
|
||||
href="https://discord.gg/CY3Zr6baD7"
|
||||
class="discord-link"
|
||||
>
|
||||
<li>
|
||||
<a href="https://discord.gg/CY3Zr6baD7" class="link discord-link clearfix">
|
||||
<strong>Discord</strong>
|
||||
<span>discord.gg/CY3Zr6baD7</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="slide-up" style="animation-delay: 0.15s">
|
||||
<a href="/">
|
||||
<br>
|
||||
<li>
|
||||
<a href="/" class="link clearfix">
|
||||
<strong>Back</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+38
-38
@@ -1,72 +1,72 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div class="container fade-in">
|
||||
<h1 class="slide-down">
|
||||
<span class="icon">
|
||||
<img src="/icon.svg" alt="krzak.org" />
|
||||
</span>
|
||||
Krzak.org
|
||||
</h1>
|
||||
<ul>
|
||||
<li class="slide-up" style="animation-delay: 0.05s">
|
||||
<a href="https://matrix.to/#/@n0va:krzak.org">
|
||||
<div class="bg-glow">
|
||||
<div class="bg-grid">
|
||||
<div class="container">
|
||||
<table border="0" cellpadding="0" cellspacing="0" align="center" style="margin-bottom: 24px;">
|
||||
<tr>
|
||||
<td valign="middle" style="padding-right: 16px;">
|
||||
<div class="icon">
|
||||
<img src="/icon.svg" alt="krzak.org">
|
||||
</div>
|
||||
</td>
|
||||
<td valign="middle">
|
||||
<h1 style="margin: 0; text-align: center;">Krzak.org</h1>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="https://matrix.to/#/@n0va:krzak.org" class="link clearfix">
|
||||
<strong>Matrix</strong>
|
||||
<span>@n0va:krzak.org</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="slide-up" style="animation-delay: 0.1s">
|
||||
<a href="https://fedi.krzak.org/@n0va">
|
||||
<li>
|
||||
<a href="https://fedi.krzak.org/@n0va" class="link clearfix">
|
||||
<strong>Fediverse</strong>
|
||||
<span>@n0va@fedi.krzak.org</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="slide-up" style="animation-delay: 0.15s">
|
||||
<a href="mailto:n0va@krzak.org">
|
||||
<li>
|
||||
<a href="mailto:n0va@krzak.org" class="link clearfix">
|
||||
<strong>Mail</strong>
|
||||
<span>n0va@krzak.org</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="slide-up support-row" style="animation-delay: 0.3s">
|
||||
<br>
|
||||
<div class="support">
|
||||
<a href="https://liberapay.com/krzak" class="button">
|
||||
Support Krzak.org
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<ul>
|
||||
<li class="slide-up" style="animation-delay: 0.35s">
|
||||
<a href="/">
|
||||
</div>
|
||||
<br>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="/" class="link clearfix">
|
||||
<strong>Back</strong>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="librecounter fade-in" style="animation-delay: 0.4s">
|
||||
<img
|
||||
src="https://librecounter.org/counter.svg"
|
||||
referrerpolicy="unsafe-url"
|
||||
width="0"
|
||||
alt=""
|
||||
/>
|
||||
<div class="librecounter">
|
||||
<img src="https://librecounter.org/counter.svg" width="0" alt="" style="display:none;">
|
||||
<span class="counter">
|
||||
Indexed by
|
||||
<a
|
||||
href="https://librecounter.org/referer/show"
|
||||
target="_blank"
|
||||
>LibreCounter</a
|
||||
>
|
||||
<a href="https://librecounter.org/referer/show" target="_blank">LibreCounter</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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 |
+55
-101
@@ -1,177 +1,139 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Krzak.org</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/favicons/favicon-16x16.png"
|
||||
/>
|
||||
<link
|
||||
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" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
|
||||
<link 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 -->
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="192x192"
|
||||
href="/favicons/favicon-192x192.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="512x512"
|
||||
href="/favicons/favicon-512x512.png"
|
||||
/>
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/favicon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/favicon-512x512.png">
|
||||
|
||||
<!-- PWA -->
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="theme-color" content="#2a1a5e" />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<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/@n0va" rel="me" />
|
||||
<link href="https://fedi.krzak.org/@krzak" rel="me">
|
||||
<link href="https://fedi.krzak.org/@n0va" rel="me">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="bg-glow">
|
||||
<div class="bg-grid">
|
||||
<div class="container homepage">
|
||||
<header class="hero">
|
||||
<div class="band">
|
||||
<span class="icon mark">
|
||||
<img src="/icon.svg" alt="krzak.org" />
|
||||
</span>
|
||||
<div class="copy">
|
||||
<div class="header hero">
|
||||
<table class="header-table" border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td class="mark-cell" valign="middle">
|
||||
<div class="icon mark">
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<section class="box">
|
||||
<div class="section box">
|
||||
<h2>Main services</h2>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="https://git.krzak.org" class="link main">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<a href="https://music.krzak.org" class="link clearfix">
|
||||
<strong>Music</strong>
|
||||
<span>Jellyfin</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="box">
|
||||
<div class="section box">
|
||||
<h2>Tools</h2>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="https://auth.krzak.org" class="link auth-link">
|
||||
<a href="https://auth.krzak.org" class="link auth-link clearfix">
|
||||
<strong>Unified Krzak.org account</strong>
|
||||
<span
|
||||
>Authentik
|
||||
<small class="experimental"
|
||||
>experimental</small
|
||||
></span
|
||||
>
|
||||
<span>Authentik<span class="experimental">experimental</span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://mail.krzak.org" class="link">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<a href="https://link.krzak.org" class="link clearfix">
|
||||
<strong>Link Shortener</strong>
|
||||
<span>Shlink</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="box">
|
||||
<div class="section box">
|
||||
<h2>Pages</h2>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="/community/" class="link">
|
||||
<a href="/community/" class="link clearfix">
|
||||
<strong>Community</strong>
|
||||
<span>Discord + Matrix</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact.html" class="link">
|
||||
<a href="/contact.html" class="link clearfix">
|
||||
<strong>Contact</strong>
|
||||
<span>Ways to reach me</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="foot">
|
||||
<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
|
||||
@@ -181,24 +143,16 @@
|
||||
Support Krzak.org
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="librecounter">
|
||||
<img
|
||||
src="https://librecounter.org/counter.svg"
|
||||
referrerpolicy="unsafe-url"
|
||||
width="0"
|
||||
alt=""
|
||||
/>
|
||||
<img src="https://librecounter.org/counter.svg" width="0" alt="" style="display:none;">
|
||||
<span class="counter">
|
||||
Indexed by
|
||||
<a
|
||||
href="https://librecounter.org/referer/show"
|
||||
target="_blank"
|
||||
>LibreCounter</a
|
||||
>
|
||||
<a href="https://librecounter.org/referer/show" target="_blank">LibreCounter</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+154
-395
@@ -1,67 +1,37 @@
|
||||
:root {
|
||||
--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);
|
||||
}
|
||||
/* CSS 2 styles for Krzak.org */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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);
|
||||
background-color: #120d22;
|
||||
background-image: url('bg_gradient.png');
|
||||
background-repeat: repeat-x;
|
||||
background-attachment: fixed;
|
||||
color: #f7ecd6;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
overflow-x: hidden;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
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;
|
||||
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
|
||||
.bg-glow {
|
||||
min-height: 100%;
|
||||
background-image: url('bg_glows.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.bg-grid {
|
||||
min-height: 100%;
|
||||
padding: 20px 0;
|
||||
background-image: url('grid.png');
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -69,222 +39,146 @@ a {
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 664px; /* Total 720 with padding */
|
||||
margin: 0 auto;
|
||||
padding: 28px;
|
||||
background-color: #1a1130;
|
||||
border: 1px solid #4a3875;
|
||||
position: relative;
|
||||
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 {
|
||||
max-width: 760px;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at top left,
|
||||
rgba(224, 160, 91, 0.1),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(180deg, rgba(29, 21, 55, 0.96), rgba(18, 13, 35, 0.98));
|
||||
/* Header layout using tables */
|
||||
table.header-table {
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.header-table td {
|
||||
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 {
|
||||
margin: 0 0 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
color: var(--text-color);
|
||||
font-size: clamp(2rem, 5vw, 2.8rem);
|
||||
margin: 0 0 10px;
|
||||
color: #f7ecd6;
|
||||
font-size: 2.8em;
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
text-align: center;
|
||||
text-align: left;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 14px;
|
||||
color: var(--accent-color);
|
||||
font-size: 1rem;
|
||||
color: #e0a05b;
|
||||
font-size: 1em;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0 0 10px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
color: #c9bc9b;
|
||||
font-size: 1em;
|
||||
line-height: 1.65;
|
||||
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 {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin-top: 18px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--container-border);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid #4a3875;
|
||||
background-color: #1c1435;
|
||||
}
|
||||
|
||||
.links {
|
||||
ul.links {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.links li {
|
||||
margin: 0;
|
||||
ul.links li {
|
||||
margin: 0 0 10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
border-color: var(--link-border);
|
||||
background: var(--link-bg);
|
||||
a.link {
|
||||
display: block;
|
||||
padding: 15px 18px;
|
||||
color: #f7ecd6;
|
||||
text-decoration: none;
|
||||
background-color: #20173d;
|
||||
border: 1px solid #4a3875;
|
||||
}
|
||||
|
||||
.link.main {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(224, 160, 91, 0.12), transparent 68%),
|
||||
var(--link-bg);
|
||||
border-color: rgba(224, 160, 91, 0.32);
|
||||
a.link:hover {
|
||||
background-color: #271a3d;
|
||||
border-color: #70502e;
|
||||
}
|
||||
|
||||
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 {
|
||||
margin-top: 20px;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid rgba(224, 160, 91, 0.22);
|
||||
border-top: 1px solid #4a3875;
|
||||
}
|
||||
|
||||
.foot p {
|
||||
@@ -292,130 +186,43 @@ li a span {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.support {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.button {
|
||||
display: inline-block;
|
||||
padding: 14px 22px;
|
||||
color: #221433 !important;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
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;
|
||||
font-weight: bold;
|
||||
background-image: url('btn_bg.png');
|
||||
background-repeat: repeat-x;
|
||||
background-color: #e0a05b;
|
||||
border: 1px solid #fff5e4;
|
||||
}
|
||||
|
||||
.app-card: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);
|
||||
}
|
||||
|
||||
.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;
|
||||
a.button:hover {
|
||||
background-color: #f1ba77;
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
.librecounter {
|
||||
margin-top: 18px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
border-top: 1px solid #33264d;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.counter {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.86rem;
|
||||
color: #c9bc9b;
|
||||
font-size: 0.86em;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.counter a {
|
||||
color: var(--accent-color);
|
||||
color: #e0a05b;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -423,75 +230,27 @@ li.support-row a.button,
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.experimental {
|
||||
display: inline-block;
|
||||
a.link span.experimental {
|
||||
font-size: 0.7em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-color);
|
||||
vertical-align: middle;
|
||||
color: #e0a05b;
|
||||
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 {
|
||||
height: 44px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
border: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user