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
|
@ -148,10 +148,6 @@ h5 {
|
|||
fill: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
|
||||
.bg-pride-gradient {
|
||||
background: linear-gradient(45deg, #FF7878, #FFC898, #FFF89A, #CDF2CA, #A2CDCD, #D1E8E4, #CAB8FF);
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 991px) {
|
||||
p.text-center.special-header {
|
||||
|
|
15
assets/css/theme/plain.css
Normal 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
|
@ -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;
|
||||
}
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
68
assets/img/logo-white.svg
Normal file
After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
9
main.py
|
@ -56,16 +56,18 @@ def render_template_to_file(template_name, output_name, **kwargs):
|
|||
try:
|
||||
template = env.get_template(template_name)
|
||||
output_path = output_dir / output_name
|
||||
kwargs.setdefault("theme", "plain")
|
||||
with open(output_path, "w", encoding="utf-8") as f:
|
||||
f.write(template.render(**kwargs))
|
||||
except TemplateNotFound:
|
||||
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
|
||||
kwargs = {
|
||||
"timestamp": int(datetime.datetime.now().timestamp()),
|
||||
"theme": theme,
|
||||
}
|
||||
|
||||
if development_mode:
|
||||
|
@ -171,10 +173,13 @@ if __name__ == "__main__":
|
|||
parser.add_argument(
|
||||
"--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()
|
||||
|
||||
generate_static_site(development_mode=args.dev)
|
||||
generate_static_site(development_mode=args.dev, theme=args.theme)
|
||||
|
||||
if args.serve:
|
||||
server = TCPServer(("", args.port), StaticPageHandler)
|
||||
|
|
|
@ -44,10 +44,11 @@
|
|||
name="twitter:image"
|
||||
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>
|
||||
<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/theme/{{ theme }}.css?v={{ timestamp }}" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -56,8 +57,7 @@
|
|||
<div class="row d-lg-flex align-items-lg-center">
|
||||
<div class="col p-0">
|
||||
<a href="/"
|
||||
><img src="assets/img/logo-inv_grad.svg" style="height: 60px"
|
||||
/></a>
|
||||
><div id="smallLogoContainer"></div></a>
|
||||
</div>
|
||||
<div class="col d-flex">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||||
|
|
|
@ -15,11 +15,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="col-12 col-lg-10 mx-auto justify-content-center d-flex">
|
||||
<img
|
||||
class="mx-auto"
|
||||
src="assets/img/logo-inv_grad.svg"
|
||||
style="max-width: 400px; width: 80vw"
|
||||
/>
|
||||
<div id="logoContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|