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 changed files with 155 additions and 62 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 & 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 & 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>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue