privatecoffee-website/assets/css/base.css
Kumi 39e6ca161e
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.
2024-05-24 14:21:26 +02:00

139 lines
No EOL
2.8 KiB
CSS

/* 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
*/
/* General styles */
:root,
[data-bs-theme="light"] {
--bs-primary: #f570b9;
--bs-primary-rgb: 245, 112, 185;
--bs-primary-text-emphasis: #622d4a;
--bs-primary-bg-subtle: #fde2f1;
--bs-primary-border-subtle: #fbc6e3;
--bs-body-color: #232323;
--bs-body-color-rgb: 35, 35, 35;
--bs-secondary-color: rgba(35, 35, 35, 0.75);
--bs-secondary-color-rgb: 35, 35, 35, 0.75;
--bs-tertiary-color: rgba(35, 35, 35, 0.5);
--bs-tertiary-color-rgb: 35, 35, 35, 0.5;
--bs-body-font-family: Inconsolata, monospace;
}
.btn-primary {
--bs-btn-color: #000000;
--bs-btn-bg: #f570b9;
--bs-btn-border-color: #f570b9;
--bs-btn-hover-color: #000000;
--bs-btn-hover-bg: #f785c4;
--bs-btn-hover-border-color: #f67ec0;
--bs-btn-focus-shadow-rgb: 37, 17, 28;
--bs-btn-active-color: #000000;
--bs-btn-active-bg: #f78dc7;
--bs-btn-active-border-color: #f67ec0;
--bs-btn-disabled-color: #000000;
--bs-btn-disabled-bg: #f570b9;
--bs-btn-disabled-border-color: #f570b9;
color: #fff;
}
.btn-outline-primary {
--bs-btn-color: #f570b9;
--bs-btn-border-color: #f570b9;
--bs-btn-focus-shadow-rgb: 245, 112, 185;
--bs-btn-hover-color: #000000;
--bs-btn-hover-bg: #f570b9;
--bs-btn-hover-border-color: #f570b9;
--bs-btn-active-color: #000000;
--bs-btn-active-bg: #f570b9;
--bs-btn-active-border-color: #f570b9;
--bs-btn-disabled-color: #f570b9;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #f570b9;
}
h2 .special-header {
font-size: 10rem !important;
}
.special-header {
font-size: 4rem;
font-weight: 900;
}
.fancy-text-primary {
background: -webkit-linear-gradient(45deg, #ba77fc, #ff7f8c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
letter-spacing: 0.03rem;
font-size: 1.1rem;
}
h5 {
letter-spacing: 0.05rem;
}
.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;
}
}