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

feat: enhance responsiveness and clean file references

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

68
assets/css/base.css
View file

@ -3,6 +3,7 @@
For more information, please visit https://private.coffee For more information, please visit https://private.coffee
*/ */
/* General styles */
:root, :root,
[data-bs-theme="light"] { [data-bs-theme="light"] {
--bs-primary: #f570b9; --bs-primary: #f570b9;
@ -60,16 +61,6 @@ h2 .special-header {
font-weight: 900; font-weight: 900;
} }
@media (max-width: 768px) {
h2 .special-header {
font-size: 6rem !important;
}
.special-header {
font-size: 2rem;
}
}
.fancy-text-primary { .fancy-text-primary {
background: -webkit-linear-gradient(45deg, #ba77fc, #ff7f8c); background: -webkit-linear-gradient(45deg, #ba77fc, #ff7f8c);
-webkit-background-clip: text; -webkit-background-clip: text;
@ -89,3 +80,60 @@ h5 {
font-weight: 800 !important; font-weight: 800 !important;
font-size: x-large; 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;
}
}

143
templates/base.html
View file

@ -1,64 +1,109 @@
<!DOCTYPE html> <!DOCTYPE html>
<html data-bs-theme="light" lang="en"> <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 It is licensed under the MIT license
For more information, please visit https://private.coffee --> For more information, please visit https://private.coffee -->
<head> <head>
<meta charset="utf8"> <meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<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"> <link rel="stylesheet" href="/assets/css/base.css" />
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-md sticky-top navbar-shrink py-3 navbar-light" id="mainNav"> <nav
<div class="container"> class="navbar navbar-expand-md sticky-top navbar-shrink py-3 navbar-light"
<div class="row d-lg-flex align-items-lg-center"> id="mainNav"
<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="/"> <div class="container">
<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> <div class="row d-lg-flex align-items-lg-center">
</a></div> <div class="col p-0">
</div> <a href="/"
<div class="navbar" id="navcol-1"> ><img src="/assets/img/logo-inv_grad.svg" style="height: 60px"
<ul class="navbar- /></a>
<ul class="navbar-nav mx-auto"> </div>
<li class="nav-item"><a class="nav-link active" href="/index.html">Home</a></li> <div class="col d-flex">
<li class="nav-item"><a class="nav-link" href="https://status.private.coffee/">Status</a></li> <a class="navbar-brand d-flex align-items-center" href="/">
</ul><a class="btn btn-primary shadow" role="button" href="/membership.html">JOIN &amp; REBEL</a> <p
</div> 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> </div>
</nav> </nav>
{% block content %}{% endblock %} {% block content %}{% endblock %}
<footer class="bg-primary-gradient"> <footer class="bg-primary-gradient">
<div class="container py-4 py-lg-5"> <div class="container py-4 py-lg-5">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"> <div
<h3 class="fs-6 fw-bold">Legal Stuff</h3> class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"
<ul class="list-unstyled"> >
<li><a href="/legal.html">Legal Notice</a></li> <h3 class="fs-6 fw-bold">Legal Stuff</h3>
<li><a href="/privacy.html">Privacy Notice</a></li> <ul class="list-unstyled">
<li><a href="/terms.html">Terms of Service</a></li> <li><a href="/legal.html">Legal Notice</a></li>
</ul> <li><a href="/privacy.html">Privacy Notice</a></li>
</div> <li><a href="/terms.html">Terms of Service</a></li>
<div class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"> </ul>
</div> </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
<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"> class="col-sm-4 col-md-3 text-center text-lg-start d-flex flex-column"
<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> ></div>
<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> <div
</svg></span><span>Private.coffee</span></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"
<p class="text-muted">Private.coffee is a collection of services that respect your privacy.</p> >
</div> <div class="fw-bold d-flex align-items-center mb-2">
</div> <span
<hr> class="bs-icon-sm bs-icon-circle bs-icon-primary d-flex justify-content-center align-items-center bs-icon me-2"
<div class="text-muted d-flex justify-content-between align-items-center pt-3"> ><svg
<p class="mb-0">Made with ❤️ and ☕ by Private.coffee</p> 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> </div>
<p class="text-muted">
Private.coffee is a collection of services that respect your
privacy.
</p>
</div>
</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> </footer>
</body> </body>
</html> </html>

4
templates/index.html
View file

@ -10,7 +10,7 @@
</div> </div>
<p class="text-center special-header fancy-text-primary mb-0" style="font-weight: 500;">Private.coffee</p> <p class="text-center special-header fancy-text-primary mb-0" style="font-weight: 500;">Private.coffee</p>
</div> </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>
</div> </div>
</header> </header>
@ -19,7 +19,7 @@
<div class="row"> <div class="row">
<div class="col-md-8 col-xl-6 text-center mx-auto"> <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> <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> </div>
<div class="py-5 p-lg-5"> <div class="py-5 p-lg-5">