privatecoffee-website/assets/css/base.css
Kumi f0e60a18ce
feat(css): Enhance mobile responsiveness and theme styling
This update introduces improved responsiveness for mobile devices, scaling down font sizes for the '.special-header' within 'h2' elements and the standalone '.special-header' class. The adjustments ensure better readability and experience on smaller screens. Alongside, the commit revamps the primary button and text styles in the CSS, aligning with the theme's aesthetic enhancements. These changes contribute to a more cohesive visual identity and improved user interaction across various device types.

In addition, minor HTML tweaks enhance navigability and accessibility. Specifically, the Matrix link in 'index.html' is now clickable, directing users to the relevant chat platform, thus improving user engagement and connectivity. A missed update in the 'base.html' introduces a potential placeholder for additional navigation elements, suggesting a direction for future UI/UX improvements.
2024-05-24 13:40:40 +02:00

91 lines
No EOL
2.1 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
*/
: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;
}
@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;
-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;
}