feat: add theme support and refactor assets
All checks were successful
Build and Deploy Static Site / build (push) Successful in 57s

Introduce support for themes by adding a `theme` parameter to the site generation process and as an argument to the main script. Created separate CSS files for different themes and adjusted the structure to accommodate the style changes. Also, updated the use of assets with new SVG images and logos.

Refactored HTML templates to dynamically select the theme and updated path references to images accordingly. Improved the development experience by adding a default "plain" theme and enhancing command-line argument parsing for theme selection.

Closes #7
This commit is contained in:
Kumi 2024-09-24 08:02:05 +02:00
parent c64a957bea
commit 92238bcfa2
Signed by: kumi
GPG key ID: ECBCC9082395383F
10 changed files with 278 additions and 179 deletions

View file

@ -148,10 +148,6 @@ h5 {
fill: var(--bs-primary-bg-subtle); fill: var(--bs-primary-bg-subtle);
} }
.bg-pride-gradient {
background: linear-gradient(45deg, #FF7878, #FFC898, #FFF89A, #CDF2CA, #A2CDCD, #D1E8E4, #CAB8FF);
}
/* Responsive Styles */ /* Responsive Styles */
@media (max-width: 991px) { @media (max-width: 991px) {
p.text-center.special-header { p.text-center.special-header {

View file

@ -0,0 +1,15 @@
#logoContainer {
background-image: url(../../img/logo-inv_grad.svg);
background-size: contain;
max-width: 400px;
max-height: 400px;
width: 80vh;
height: 80vh;
}
#smallLogoContainer {
background-image: url(../../img/logo-inv_grad.svg);
background-size: contain;
width: 64px;
height: 64px;
}

View file

@ -0,0 +1,19 @@
.bg-primary-gradient {
background: linear-gradient(45deg, #FF7878, #FFC898, #FFF89A, #CDF2CA, #A2CDCD, #D1E8E4, #CAB8FF);
}
#logoContainer {
background-image: url(../../img/logo-white.svg);
background-size: contain;
max-width: 400px;
max-height: 400px;
width: 80vh;
height: 80vh;
}
#smallLogoContainer {
background-image: url(../../img/logo-inv_grad.svg);
background-size: contain;
width: 64px;
height: 64px;
}

68
assets/img/logo-white.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -56,16 +56,18 @@ def render_template_to_file(template_name, output_name, **kwargs):
try: try:
template = env.get_template(template_name) template = env.get_template(template_name)
output_path = output_dir / output_name output_path = output_dir / output_name
kwargs.setdefault("theme", "plain")
with open(output_path, "w", encoding="utf-8") as f: with open(output_path, "w", encoding="utf-8") as f:
f.write(template.render(**kwargs)) f.write(template.render(**kwargs))
except TemplateNotFound: except TemplateNotFound:
print(f"Template {template_name} not found.") print(f"Template {template_name} not found.")
def generate_static_site(development_mode=False): def generate_static_site(development_mode=False, theme="plain"):
# Common context # Common context
kwargs = { kwargs = {
"timestamp": int(datetime.datetime.now().timestamp()), "timestamp": int(datetime.datetime.now().timestamp()),
"theme": theme,
} }
if development_mode: if development_mode:
@ -171,10 +173,13 @@ if __name__ == "__main__":
parser.add_argument( parser.add_argument(
"--port", type=int, default=8000, help="Port to serve the site on" "--port", type=int, default=8000, help="Port to serve the site on"
) )
parser.add_argument(
"--theme", type=str, default="plain", help="Theme to use for the site"
)
args = parser.parse_args() args = parser.parse_args()
generate_static_site(development_mode=args.dev) generate_static_site(development_mode=args.dev, theme=args.theme)
if args.serve: if args.serve:
server = TCPServer(("", args.port), StaticPageHandler) server = TCPServer(("", args.port), StaticPageHandler)

View file

@ -44,10 +44,11 @@
name="twitter:image" name="twitter:image"
content="https://private.coffee/assets/img/logo-inv_grad.png" content="https://private.coffee/assets/img/logo-inv_grad.png"
/> />
<link rel="icon" type="image/png" href="assets/img/logo_inv_grad.png" /> <link rel="icon" type="image/png" href="assets/img/logo-inv_grad.png" />
<title>{% block title %}{% endblock %} - Private.coffee</title> <title>{% block title %}{% endblock %} - Private.coffee</title>
<link rel="stylesheet" href="assets/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="assets/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/base.css?v={{ timestamp }}" /> <link rel="stylesheet" href="assets/css/base.css?v={{ timestamp }}" />
<link rel="stylesheet" href="assets/css/theme/{{ theme }}.css?v={{ timestamp }}" />
</head> </head>
<body> <body>
@ -56,8 +57,7 @@
<div class="row d-lg-flex align-items-lg-center"> <div class="row d-lg-flex align-items-lg-center">
<div class="col p-0"> <div class="col p-0">
<a href="/" <a href="/"
><img src="assets/img/logo-inv_grad.svg" style="height: 60px" ><div id="smallLogoContainer"></div></a>
/></a>
</div> </div>
<div class="col d-flex"> <div class="col d-flex">
<a class="navbar-brand d-flex align-items-center" href="/"> <a class="navbar-brand d-flex align-items-center" href="/">

View file

@ -15,11 +15,7 @@
</p> </p>
</div> </div>
<div class="col-12 col-lg-10 mx-auto justify-content-center d-flex"> <div class="col-12 col-lg-10 mx-auto justify-content-center d-flex">
<img <div id="logoContainer"></div>
class="mx-auto"
src="assets/img/logo-inv_grad.svg"
style="max-width: 400px; width: 80vw"
/>
</div> </div>
</div> </div>
</div> </div>