PrivateCoffee/privatecoffee-website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/css/base.css
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 {

15
assets/css/theme/plain.css Normal file
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;
}

19
assets/css/theme/pride.css Normal file
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;
}

70
assets/img/logo-inv.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

190
assets/img/logo-inv_grad.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

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

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

70
assets/img/logo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

9
main.py
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)

6
templates/base.html
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="/">

6
templates/index.html
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>