feat: enhance responsiveness and clean file references

Improved the website's responsiveness by refining the CSS for navigation and general layouts, ensuring a better user experience on devices with a maximum width of 768px. Revised the CSS to introduce clearer sections for general and responsive styles, making the stylesheet easier to navigate and maintain.

Additionally, updated HTML templates to remove query strings from asset references, promoting better caching practices. This change also includes minor text normalization for consistency in presentation, specifically in branding elements.

The alterations aim to provide a more uniform and accessible interface across various device sizes, focusing on mobile-first design principles. By cleaning up asset references, the website's loading times and cacheability are expected to improve, further enhancing user experience.
This commit is contained in:
Kumi 2024-05-24 14:21:26 +02:00
parent f0e60a18ce
commit 39e6ca161e
Signed by: kumi
GPG key ID: ECBCC9082395383F
3 changed files with 155 additions and 62 deletions

View file

@ -3,6 +3,7 @@
For more information, please visit https://private.coffee
*/
/* General styles */
:root,
[data-bs-theme="light"] {
--bs-primary: #f570b9;
@ -60,16 +61,6 @@ h2 .special-header {
font-weight: 900;
}
@media (max-width: 768px) {
h2 .special-header {
font-size: 6rem !important;
}
.special-header {
font-size: 2rem;
}
}
.fancy-text-primary {
background: -webkit-linear-gradient(45deg, #ba77fc, #ff7f8c);
-webkit-background-clip: text;
@ -89,3 +80,60 @@ h5 {
font-weight: 800 !important;
font-size: x-large;
}
/* Responsive Styles */
@media (max-width: 768px) {
.navbar .container {
display: flex;
flex-direction: column;
align-items: center;
}
.navbar .row {
flex-direction: column;
align-items: center;
}
.navbar .col {
text-align: center;
}
.navbar-brand p {
font-size: 0.9rem;
}
.navbar-brand span.fancy-text-primary {
font-size: 1.1rem;
}
.navbar-brand span {
display: block;
}
.navbar-nav {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
padding: 0;
}
.navbar-nav .nav-item {
display: inline-block;
padding: 0.5rem 1rem;
}
.btn.btn-primary {
margin: 1rem auto;
display: block;
width: 80%;
}
h2 .special-header {
font-size: 6rem !important;
}
.special-header {
font-size: 2rem;
}
}

View file

@ -1,64 +1,109 @@
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<!-- This file was created as part of the Private.coffee project
<!-- This file was created as part of the Private.coffee project
It is licensed under the MIT license
For more information, please visit https://private.coffee -->
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<head>
<meta charset="utf8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<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">
</head>
<link rel="stylesheet" href="/assets/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/assets/css/base.css" />
</head>
<body>
<nav class="navbar navbar-expand-md sticky-top navbar-shrink py-3 navbar-light" id="mainNav">
<div class="container">
<div class="row d-lg-flex align-items-lg-center">
<div class="col p-0"><img src="/assets/img/logo-inv_grad.svg?h=6ec231b999bdfb1aeb31c2e7a0099b92" style="height: 60px;"></div>
<div class="col d-flex"><a class="navbar-brand d-flex align-items-center" href="/">
<p class="mb-0" style="line-height: 1.2rem;color: var(--bs-tertiary-color);"><span class="ps-2 fancy-text-primary"><span style="color: rgb(35, 35, 35);">Private.coffee</span></span><br><span class="ps-2">Empowering Privacy with Open Source</span></p>
</a></div>
</div>
<div class="navbar" id="navcol-1">
<ul class="navbar-
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link active" href="/index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="https://status.private.coffee/">Status</a></li>
</ul><a class="btn btn-primary shadow" role="button" href="/membership.html">JOIN &amp; REBEL</a>
</div>
<body>
<nav
class="navbar navbar-expand-md sticky-top navbar-shrink py-3 navbar-light"
id="mainNav"
>
<div class="container">
<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>
<div class="col d-flex">
<a class="navbar-brand d-flex align-items-center" href="/">
<p
class="mb-0"
style="line-height: 1.2rem; color: var(--bs-tertiary-color)"
>
<span class="ps-2 fancy-text-primary"
><span style="color: rgb(35, 35, 35)"
>Private.coffee</span
></span
><br /><span class="ps-2"
>Empowering Privacy with Open Source</span
>
</p>
</a>
</div>
</div>
<div class="navbar" id="navcol-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link active" href="/index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="https://status.private.coffee/">Status</a></li>
</ul><a class="btn btn-primary shadow navbar-btn" role="button" href="/membership.html">JOIN &amp; REBEL</a>
</div>
</nav>
{% block content %}{% endblock %}
<footer class="bg-primary-gradient">
<div class="container py-4 py-lg-5">
<div class="row justify-content-center">
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
<h3 class="fs-6 fw-bold">Legal Stuff</h3>
<ul class="list-unstyled">
<li><a href="/legal.html">Legal Notice</a></li>
<li><a href="/privacy.html">Privacy Notice</a></li>
<li><a href="/terms.html">Terms of Service</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column">
</div>
<div class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last">
<div class="fw-bold d-flex align-items-center mb-2"><span class="bs-icon-sm bs-icon-circle bs-icon-primary d-flex justify-content-center align-items-center bs-icon me-2"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
<path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
<path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
</svg></span><span>Private.coffee</span></div>
<p class="text-muted">Private.coffee is a collection of services that respect your privacy.</p>
</div>
</div>
<hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Made with ❤️ and ☕ by Private.coffee</p>
<div class="container py-4 py-lg-5">
<div class="row justify-content-center">
<div
class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"
>
<h3 class="fs-6 fw-bold">Legal Stuff</h3>
<ul class="list-unstyled">
<li><a href="/legal.html">Legal Notice</a></li>
<li><a href="/privacy.html">Privacy Notice</a></li>
<li><a href="/terms.html">Terms of Service</a></li>
</ul>
</div>
<div
class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"
></div>
<div
class="col-lg-3 text-center text-lg-start d-flex flex-column align-items-center order-first align-items-lg-start order-lg-last"
>
<div class="fw-bold d-flex align-items-center mb-2">
<span
class="bs-icon-sm bs-icon-circle bs-icon-primary d-flex justify-content-center align-items-center bs-icon me-2"
><svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
fill="currentColor"
viewBox="0 0 16 16"
class="bi bi-bezier"
>
<path
fill-rule="evenodd"
d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"
></path>
<path
d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"
></path></svg></span
><span>Private.coffee</span>
</div>
<p class="text-muted">
Private.coffee is a collection of services that respect your
privacy.
</p>
</div>
</div>
<hr />
<div
class="text-muted d-flex justify-content-between align-items-center pt-3"
>
<p class="mb-0">Made with ❤️ and ☕ by Private.coffee</p>
</div>
</div>
</footer>
</body>
</body>
</html>

View file

@ -10,7 +10,7 @@
</div>
<p class="text-center special-header fancy-text-primary mb-0" style="font-weight: 500;">Private.coffee</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?h=6ec231b999bdfb1aeb31c2e7a0099b92" style="max-width: 400px;width: 80vw;"></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>
</div>
</div>
</header>
@ -19,7 +19,7 @@
<div class="row">
<div class="col-md-8 col-xl-6 text-center mx-auto">
<p class="fw-bold mb-2 text-primary">Our self-hosted Services</p>
<h3 class="fw-bold">PRIVATE.COFFEE provides a collection of services that respect your privacy. </h3>
<h3 class="fw-bold">Private.coffee provides a collection of services that respect your privacy. </h3>
</div>
</div>
<div class="py-5 p-lg-5">