sorogon/StaticGalleryBuilder
1
0
Fork 0
mirror of https://github.com/greflm13/StaticGalleryBuilder.git synced 2026-02-05 02:59:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

added support for dynamic icon creation from jimja template with cairosvg

Browse Source
This commit is contained in:
Flo Greistorfer
2024-07-10 11:34:33 +02:00
committed by Flo Greistorfer
parent 3e6460d8ba
commit bb10482bab
13 changed files with 296 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -17,6 +17,7 @@
- **Ignore Other Files:** Option to ignore files other than those specified by the included extensions.
- **Info Tooltips:** Display additional information as tooltips for images if an `info` file is present in the directory.
- **Generate Web Manifest:** Ability to generate a web manifest file for PWA (Progressive Web App) support.
- **Generate on the fly icons:** If `cairosvg` is installed the script will generate icons from the css theme colors automatically.
## Requirements

4
StaticGalleryBuilder.code-workspace
View File

@@ -36,6 +36,7 @@
"--use-fancy-folders",
"--web-manifest",
"-n",
"-m",
"-r"
],
"console": "integratedTerminal",
@@ -54,10 +55,11 @@
"-t",
"Pictures",
"--theme",
"themes/ivy.css",
"themes/rainbow.css",
"--use-fancy-folders",
"--web-manifest",
"-n",
"-m",
"-r",
],
"console": "integratedTerminal",

42
builder.py
View File

@@ -5,6 +5,7 @@ import urllib.parse
import shutil
import fnmatch
import json
import re
from multiprocessing import Pool
from pathlib import Path
from typing import Any, Dict, List, Optional, Tuple
@@ -31,7 +32,7 @@ FAVICON_PATH = ".static/favicon.ico"
GLOBAL_CSS_PATH = ".static/global.css"
DEFAULT_THEME_PATH = os.path.join(os.path.abspath(os.path.dirname(__file__)), "themes", "default.css")
DEFAULT_AUTHOR = "Author"
VERSION = "1.9.14"
VERSION = "1.10.0"
RAW_EXTENSIONS = [".3fr", ".ari", ".arw", ".bay", ".braw", ".crw", ".cr2", ".cr3", ".cap", ".data", ".dcs", ".dcr", ".dng", ".drf", ".eip", ".erf", ".fff", ".gpr", ".iiq", ".k25", ".kdc", ".mdc", ".mef", ".mos", ".mrw", ".nef", ".nrw", ".obm", ".orf", ".pef", ".ptx", ".pxn", ".r3d", ".raf", ".raw", ".rwl", ".rw2", ".rwz", ".sr2", ".srf", ".srw", ".tif", ".tiff", ".x3f"]
IMG_EXTENSIONS = [".jpg", ".jpeg"]
EXCLUDES = [".lock", "index.html", "manifest.json", ".sizelist.json", ".thumbnails", ".static"]
@@ -129,9 +130,35 @@ def copy_static_files(_args: Args) -> None:
shutil.copyfile(_args.theme_path, os.path.join(_args.root_directory, ".static", "theme.css"))
def icons(_args: Args) -> None:
pattern = r"--color([1-4]):\s*(#[0-9a-f]+);"
colorscheme = {}
iconspath = os.path.join(_args.root_directory, ".static", "icons")
with open(_args.theme_path, "r") as f:
filecontent = f.read()
matches = re.findall(pattern, filecontent)
for match in matches:
colorscheme["color" + match[0]] = match[1]
svg = env.get_template("icon.svg.j2")
content = svg.render(colorscheme=colorscheme)
with open(os.path.join(iconspath, "icon.svg"), "w+") as f:
f.write(content)
if not SVGSUPPORT:
print("Please install cairosvg to generate favicon from svg icon.")
return
tmpimg = BytesIO()
cairosvg.svg2png(bytestring=content, write_to=tmpimg)
with Image.open(tmpimg) as iconfile:
iconfile.save(os.path.join(iconspath, "icon.png"))
if shutil.which("magick"):
os.system(f'magick {os.path.join(iconspath, "icon.png")} -define icon:auto-resize=16,32,48,64,72,96,144,192 {os.path.join(_args.root_directory, ".static", "favicon.ico")}')
else:
os.system(f"convert {os.path.join(iconspath, "icon.png")} -define icon:auto-resize=16,32,48,64,72,96,144,192 {os.path.join(_args.root_directory, ".static", "favicon.ico")}")
def webmanifest(_args: Args) -> None:
icons: List[Icon] = []
files = os.listdir(os.path.join(STATIC_FILES_DIR, "icons"))
files = os.listdir(os.path.join(_args.root_directory, ".static", "icons"))
if SVGSUPPORT and any(file.endswith(".svg") for file in files):
svg = [file for file in files if file.endswith(".svg")][0]
icons.append(
@@ -143,7 +170,7 @@ def webmanifest(_args: Args) -> None:
sizes = size.split("x")
iconpath = os.path.join(_args.root_directory, ".static", "icons", os.path.splitext(svg)[0] + "-" + size + ".png")
cairosvg.svg2png(
url=os.path.join(STATIC_FILES_DIR, "icons", svg),
url=os.path.join(_args.root_directory, ".static", "icons", svg),
write_to=tmpimg,
output_width=int(sizes[0]),
output_height=int(sizes[1]),
@@ -261,7 +288,10 @@ def list_folder(folder: str, title: str, _args: Args, raw: list[str]) -> None:
for item in items:
if item not in EXCLUDES:
if os.path.isdir(os.path.join(folder, item)):
subfolder = {"url": f"{_args.web_root_url}{baseurl}{urllib.parse.quote(item)}", "name": item}
if _args.web_root_url.startswith("file://"):
subfolder = {"url": f"{_args.web_root_url}{baseurl}{urllib.parse.quote(item)}/index.html", "name": item}
else:
subfolder = {"url": f"{_args.web_root_url}{baseurl}{urllib.parse.quote(item)}", "name": item}
subfolders.append(subfolder)
if item not in _args.exclude_folders:
skip = False
@@ -335,6 +365,8 @@ def list_folder(folder: str, title: str, _args: Args, raw: list[str]) -> None:
if not foldername
else f"{_args.web_root_url}{urllib.parse.quote(foldername.removesuffix(folder.split('/')[-1] + '/'))}"
)
if parent and _args.web_root_url.startswith("file://"):
parent += "index.html"
license_info: cclicense.License = (
{
"project": _args.site_title,
@@ -393,6 +425,8 @@ def main() -> None:
copy_static_files(args)
icons(args)
if args.generate_webmanifest:
print("Generating webmanifest...")
webmanifest(args)

25
templates/icon.svg.j2 Normal file
View File

@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="512" height="512" viewBox="0 0 512 512" version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g id="g0" transform="matrix(5.8227235,0,0,5.8227235,69.672843,69.672843)">
<g id="g1">
<rect x="6" y="6" width="24" height="24" rx="4" ry="4" fill="{{ colorscheme.color1 }}" id="rect1" />
<path d="m 10,20 6,-6 4,4 2,-2 4,4" stroke="#ffffff" stroke-width="2" fill="none" id="path1" />
<circle cx="13" cy="11" r="2" fill="#ffffff" id="circle1" />
</g>
<g id="g2">
<rect x="34" y="6" width="24" height="24" rx="4" ry="4" fill="{{ colorscheme.color2 }}" id="rect2" />
<path d="m 38,20 6,-6 4,4 2,-2 4,4" stroke="#ffffff" stroke-width="2" fill="none" id="path2" />
<circle cx="41" cy="11" r="2" fill="#ffffff" id="circle2" />
</g>
<g id="g3">
<rect x="6" y="34" width="24" height="24" rx="4" ry="4" fill="{{ colorscheme.color3 }}" id="rect3" />
<path d="m 10,48 6,-6 4,4 2,-2 4,4" stroke="#ffffff" stroke-width="2" fill="none" id="path3" />
<circle cx="13" cy="39" r="2" fill="#ffffff" id="circle3" />
</g>
<g id="g4">
<rect x="34" y="34" width="24" height="24" rx="4" ry="4" fill="{{ colorscheme.color4 }}" id="rect4" />
<path d="m 38,48 6,-6 4,4 2,-2 4,4" stroke="#ffffff" stroke-width="2" fill="none" id="path4" />
<circle cx="41" cy="39" r="2" fill="#ffffff" id="circle4" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

39
themes/carnation.css
View File

@@ -1,31 +1,42 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
--color1: #8b0000;
--color2: #b22222;
--color3: #ff4500;
--color4: #6e0000;
--bcolor1: #ebebeb;
--bcolor2: #191919;
--bcolor3: #171717;
--bcolor4: #0a0a0a;
}
.navbar {
font-weight: bold;
color: #ebebeb;
background-color: #8B0000;
color: var(--bcolor1);
background-color: var(--color1);
font-weight: 900;
}
.navbar li a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
text-decoration: none;
background-color: #B22222;
background-color: var(--color2);
}
.footer {
color: #ebebeb;
background-color: #FF4500;
color: var(--bcolor1);
background-color: var(--color3);
font-weight: 700;
}
.footer a {
color: #8B0000;
color: var(--color4);
text-decoration: none;
}
@@ -35,12 +46,12 @@
.folders img {
content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%238B0000' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23B22222' /%3E%3C/g%3E%3C/svg%3E");
fill: #8B0000;
fill: var(--color1);
}
.folders a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
text-decoration: none;
}
@@ -50,7 +61,7 @@
.row a {
font-weight: 800;
color: #B22222;
color: var(--color2);
text-decoration: none;
}
@@ -60,16 +71,16 @@
.tooltiptext {
font-weight: 600;
background-color: #191313;
background-color: var(--bcolor2);
}
.column img {
background-color: #0a0a0a;
background-color: var(--bcolor4);
}
body {
color: #ebebeb;
background-color: #171717;
color: var(--bcolor1);
background-color: var(--bcolor3);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;

41
themes/cornflower.css
View File

@@ -1,31 +1,42 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
--color1: #6495ed;
--color2: #1346a4;
--color3: #0e3377;
--color4: #3674e7;
--bcolor1: #ebebeb;
--bcolor2: #191919;
--bcolor3: #171717;
--bcolor4: #0a0a0a;
}
.navbar {
font-weight: bold;
color: #ebebeb;
background-color: #3674e7;
color: var(--bcolor1);
background-color: var(--color1);
font-weight: 900;
}
.navbar li a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
text-decoration: none;
background-color: #1346a4;
background-color: var(--color2);
}
.footer {
color: #ebebeb;
background-color: #0e3377;
color: var(--bcolor1);
background-color: var(--color3);
font-weight: 700;
}
.footer a {
color: cornflowerblue;
color: var(--color4);
text-decoration: none;
}
@@ -35,12 +46,12 @@
.folders img {
content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%233674e7' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%236495ed' /%3E%3C/g%3E%3C/svg%3E");
fill: cornflowerblue;
fill: var(--color1);
}
.folders a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
text-decoration: none;
}
@@ -50,7 +61,7 @@
.row a {
font-weight: 800;
color: cornflowerblue;
color: var(--color2);
text-decoration: none;
}
@@ -60,18 +71,16 @@
.tooltiptext {
font-weight: 600;
background-color: #191313;
background-color: var(--bcolor2);
}
.column img {
background-color: #0a0a0a;
background-color: var(--bcolor4);
}
body {
color: #ebebeb;
background-color: #171717;
color: var(--bcolor1);
background-color: var(--bcolor3);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;

36
themes/default-dark.css
View File

@@ -1,29 +1,39 @@
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
* {
--color1: #262a2b;
--color2: #0d0e0e;
--color3: #313537;
--color4: #181a1b;
--color5: #5483ef;
--bcolor1: #e8e6e3;
--bcolor2: #0c0d0e;
}
.navbar {
font-weight: bold;
color: #e8e6e3;
background-color: #262a2b;
color: var(--bcolor1);
background-color: var(--color1);
}
.navbar li a {
font-weight: bold;
color: #e8e6e3;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
background-color: #0d0e0e;
background-color: var(--color2);
}
.footer {
color: #e8e6e3;
background-color: #313537;
color: var(--bcolor1);
background-color: var(--color3);
font-weight: 500;
}
.footer a {
color: #5483ef;
color: var(--color5);
text-decoration: none;
}
@@ -33,23 +43,23 @@
.folders a {
font-weight: 700;
color: #5483ef;
color: var(--color5);
text-decoration: none;
}
.tooltiptext {
font-weight: 400;
background-color: #313537;
background-color: var(--color3);
}
.column img {
background-color: #0c0d0e;
background-color: var(--bcolor2);
}
body {
color: #e8e6e3;
background-color: #181a1b;
color: var(--bcolor1);
background-color: var(--color4);
font-family: "Ubuntu", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
@@ -58,6 +68,6 @@ body {
body a {
font-weight: 400;
color: #5483ef;
color: var(--color5);
text-decoration: none;
}

36
themes/default.css
View File

@@ -1,29 +1,39 @@
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
* {
--color1: #333333;
--color2: #888888;
--color3: #dddddd;
--color4: #111111;
--color5: #0055ff;
--bcolor1: #ffffff;
--bcolor2: #000000;
}
.navbar {
font-weight: bold;
color: #fff;
background-color: #333;
color: var(--bcolor1);
background-color: var(--color1);
}
.navbar li a {
font-weight: 700;
color: #fff;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
background-color: #111;
background-color: var(--color4);
}
.footer {
color: #000;
background-color: #ddd;
color: var(--bcolor2);
background-color: var(--color3);
font-weight: 500;
}
.footer a {
color: #0055ff;
color: var(--color5);
text-decoration: none;
}
@@ -33,23 +43,23 @@
.folders a {
font-weight: 700;
color: #0055ff;
color: var(--color5);
text-decoration: none;
}
.tooltiptext {
font-weight: 400;
background-color: #ddd;
background-color: var(--color3);
}
.column img {
background-color: #888;
background-color: var(--color2);
}
body {
color: #000;
background-color: #fff;
color: var(--bcolor2);
background-color: var(--bcolor1);
font-family: "Ubuntu", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
@@ -58,6 +68,6 @@ body {
body a {
font-weight: 400;
color: #0055ff;
color: var(--color5);
text-decoration: none;
}

39
themes/ivy.css
View File

@@ -1,31 +1,42 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
--color1: #006400;
--color2: #008000;
--color3: #32cd32;
--color4: #004300;
--bcolor1: #ebebeb;
--bcolor2: #191919;
--bcolor3: #171717;
--bcolor4: #0a0a0a;
}
.navbar {
font-weight: bold;
color: #ebebeb;
background-color: #006400;
color: var(--bcolor1);
background-color: var(--color1);
font-weight: 900;
}
.navbar li a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
text-decoration: none;
background-color: #008000;
background-color: var(--color2);
}
.footer {
color: #ebebeb;
background-color: #32CD32;
color: var(--bcolor1);
background-color: var(--color3);
font-weight: 700;
}
.footer a {
color: #006400;
color: var(--color4);
text-decoration: none;
}
@@ -35,12 +46,12 @@
.folders img {
content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23006400' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23008000' /%3E%3C/g%3E%3C/svg%3E");
fill: #006400;
fill: var(--color1);
}
.folders a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
text-decoration: none;
}
@@ -50,7 +61,7 @@
.row a {
font-weight: 800;
color: #008000;
color: var(--color2);
text-decoration: none;
}
@@ -60,16 +71,16 @@
.tooltiptext {
font-weight: 600;
background-color: #191313;
background-color: var(--bcolor2);
}
.column img {
background-color: #0a0a0a;
background-color: var(--bcolor4);
}
body {
color: #ebebeb;
background-color: #171717;
color: var(--bcolor1);
background-color: var(--bcolor3);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;

37
themes/kjoe.css
View File

@@ -1,31 +1,41 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
--color1: #260000;
--color2: #470000;
--color3: #191313;
--color4: #ff2727;
--bcolor1: #ebebeb;
--bcolor2: #171717;
--bcolor3: #0a0a0a;
}
.navbar {
font-weight: bold;
color: #ebebeb;
background-color: #260000;
color: var(--bcolor1);
background-color: var(--color1);
font-weight: 900;
}
.navbar li a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
text-decoration: none;
background-color: #470000;
background-color: var(--color2);
}
.footer {
color: #ebebeb;
background-color: #191313;
color: var(--bcolor1);
background-color: var(--color3);
font-weight: 700;
}
.footer a {
color: #ff2727;
color: var(--color4);
text-decoration: none;
}
@@ -35,12 +45,11 @@
.folders img {
content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%238e0000' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FF2727' /%3E%3C/g%3E%3C/svg%3E");
fill: #f00f0f;
}
.folders a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
text-decoration: none;
}
@@ -50,7 +59,7 @@
.row a {
font-weight: 800;
color: #ff2727;
color: var(--color4);
text-decoration: none;
}
@@ -60,17 +69,17 @@
.tooltiptext {
font-weight: 600;
background-color: #191313;
background-color: var(--color3);
}
.column img {
background-color: #0a0a0a;
background-color: var(--bcolor3);
}
body {
color: #ebebeb;
background-color: #171717;
color: var(--bcolor1);
background-color: var(--bcolor2);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;

38
themes/monokai-vibrant.css
View File

@@ -1,30 +1,42 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
--color1: #81f900;
--color2: #e542ff;
--color3: #ffd945;
--color4: #528bff;
--bcolor1: #f6f6f6;
--bcolor2: #2c313a;
--bcolor3: #191b20;
--bcolor4: #16171d;
--bcolor5: #0b0c0f;
}
.navbar {
font-weight: bold;
color: #f6f6f6;
background-color: #191b20;
color: var(--bcolor1);
background-color: var(--bcolor3);
font-weight: 900;
}
.navbar li a {
font-weight: 900;
color: #f6f6f6;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
background-color: #2c313a;
background-color: var(--bcolor2);
}
.footer {
color: #f6f6f6;
background-color: #2c313a;
color: var(--bcolor1);
background-color: var(--bcolor2);
font-weight: 700;
}
.footer a {
color: #528bff;
color: var(--color4);
text-decoration: none;
}
@@ -34,23 +46,23 @@
.folders a {
font-weight: 900;
color: #ffd945;
color: var(--color3);
text-decoration: none;
}
.tooltiptext {
font-weight: 600;
background-color: #2c313a;
background-color: var(--bcolor2);
}
.column img {
background-color: #0b0c0f;
background-color: var(--bcolor5);
}
body {
color: #f6f6f6;
background-color: #16171d;
color: var(--bcolor1);
background-color: var(--bcolor4);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 800;
@@ -59,6 +71,6 @@ body {
body a {
font-weight: 900;
color: #e542ff;
color: var(--color2);
text-decoration: none;
}

43
themes/rainbow.css
View File

@@ -1,31 +1,44 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
--color1: #e50000;
--color2: #ff8d00;
--color3: #ffee00;
--color4: #028121;
--color5: #004cff;
--color6: #770088;
--bcolor1: #ebebeb;
--bcolor2: #191919;
--bcolor3: #171717;
--bcolor4: #0a0a0a;
}
.navbar {
font-weight: bold;
color: #ebebeb;
background-color: #FF0000;
color: var(--bcolor1);
background-color: var(--color1);
font-weight: 900;
}
.navbar li a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
text-decoration: none;
background-color: #FF7F00;
background-color: var(--color2);
}
.footer {
color: #ebebeb;
background-color: #0000FF;
color: var(--bcolor2);
background-color: var(--color3);
font-weight: 700;
}
.footer a {
color: #9500ff;
color: var(--color4);
text-decoration: none;
}
@@ -34,13 +47,13 @@
}
.folders img {
content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FF0000' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FF7F00' /%3E%3C/g%3E%3C/svg%3E");
fill: #FF0000;
content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23770088' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23004CFF' /%3E%3C/g%3E%3C/svg%3E");
fill: var(--color5);
}
.folders a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
text-decoration: none;
}
@@ -50,7 +63,7 @@
.row a {
font-weight: 800;
color: #32CD32;
color: var(--color4);
text-decoration: none;
}
@@ -60,16 +73,16 @@
.tooltiptext {
font-weight: 600;
background-color: #191313;
background-color: var(--bcolor2);
}
.column img {
background-color: #0a0a0a;
background-color: var(--bcolor4);
}
body {
color: #ebebeb;
background-color: #171717;
color: var(--bcolor1);
background-color: var(--bcolor3);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;

39
themes/sunflower.css
View File

@@ -1,31 +1,42 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
--color1: #ffb000;
--color2: #ffd700;
--color3: #ffe135;
--color4: #ce8c00;
--bcolor1: #ebebeb;
--bcolor2: #191919;
--bcolor3: #171717;
--bcolor4: #0a0a0a;
}
.navbar {
font-weight: bold;
color: #222222;
background-color: #FFB000;
color: var(--bcolor1);
background-color: var(--color1);
font-weight: 900;
}
.navbar li a {
font-weight: 800;
color: #222222;
color: var(--bcolor1);
}
/* Change the link color on hover */
.navbar li a:hover {
text-decoration: none;
background-color: #FFD700;
background-color: var(--color2);
}
.footer {
color: #222222;
background-color: #FFE135;
color: var(--bcolor1);
background-color: var(--color3);
font-weight: 700;
}
.footer a {
color: #FFB000;
color: var(--color4);
text-decoration: none;
}
@@ -35,12 +46,12 @@
.folders img {
content: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0' /%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M853.333333 256H469.333333l-85.333333-85.333333H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v170.666667h853.333334v-85.333334c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFB000' /%3E%3Cpath d='M853.333333 256H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v426.666667c0 46.933333 38.4 85.333333 85.333334 85.333333h682.666666c46.933333 0 85.333333-38.4 85.333334-85.333333V341.333333c0-46.933333-38.4-85.333333-85.333334-85.333333z' fill='%23FFD700' /%3E%3C/g%3E%3C/svg%3E");
fill: #FFB000;
fill: var(--color1);
}
.folders a {
font-weight: 800;
color: #ebebeb;
color: var(--bcolor1);
text-decoration: none;
}
@@ -50,7 +61,7 @@
.row a {
font-weight: 800;
color: #FFD700;
color: var(--color2);
text-decoration: none;
}
@@ -60,16 +71,16 @@
.tooltiptext {
font-weight: 600;
background-color: #191313;
background-color: var(--bcolor2);
}
.column img {
background-color: #0a0a0a;
background-color: var(--bcolor4);
}
body {
color: #ebebeb;
background-color: #171717;
color: var(--bcolor1);
background-color: var(--bcolor3);
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 700;