From 39e6ca161e419a364864de270f053f1740971c37 Mon Sep 17 00:00:00 2001 From: Kumi Date: Fri, 24 May 2024 14:21:26 +0200 Subject: [PATCH] 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. --- assets/css/base.css | 68 +++++++++++++++++--- templates/base.html | 145 ++++++++++++++++++++++++++++--------------- templates/index.html | 4 +- 3 files changed, 155 insertions(+), 62 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index 3a03109..e4073b0 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -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; @@ -88,4 +79,61 @@ h5 { .navbar-brand { 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; + } } \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index a9763e8..547c484 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,64 +1,109 @@ - - - - - + + + {% block title %}{% endblock %} - Private.coffee - - - + + + - -