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:
parent
f0e60a18ce
commit
39e6ca161e
GPG key ID:
ECBCC9082395383F
|
|
@ -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;
|
||||||
|
|
@ -88,4 +79,61 @@ h5 {
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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 & 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 & 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>
|
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue