PrivateCoffee/privatecoffee-website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update styling for enhanced visual harmony

Browse source 
Revamped the appearance of service boxes by introducing a new border color, increased padding, and an inset shadow, aligning them with a new coffee-themed color scheme. Modified the styling of navigation and footer elements to use the new `.bg-coffee` class, ensuring consistency across the UI. These changes improve the overall aesthetic coherence of the interface and enhance user visual experience.
This commit is contained in:
Kumi 2024-01-17 17:45:42 +01:00
parent 78cee3e7db
commit 911152fe1b
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/css/base.css
View file

@ -9,10 +9,12 @@ footer a {
/* Give service boxes a border */ /* Give service boxes a border */
.service { .service {
border: 1px black solid; border: 1px #6F4E37 solid;
border-radius: 10px; border-radius: 10px;
border-spacing: 10px; border-spacing: 10px;
padding: 10px; padding: 30px;
box-sizing: border-box;
box-shadow: inset 0 0 10px #6F4E37;
} }
/* Limit size of navbar logo */ /* Limit size of navbar logo */
@ -26,3 +28,7 @@ footer a {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.bg-coffee {
background-color: #6F4E37;
}

4
templates/base.html
View file

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <nav class="navbar navbar-expand-sm bg-coffee navbar-dark">
<div class="container"> <div class="container">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<img <img
@ -54,7 +54,7 @@
{% block content %}{% endblock %} {% block content %}{% endblock %}
</section> </section>
<footer class="page-footer font-small bg-dark text-white pt-4"> <footer class="page-footer font-small bg-coffee text-white pt-4">
<div class="container text-center text-md-left"> <div class="container text-center text-md-left">
<div class="row"> <div class="row">
<div class="col-md-6 mt-md-0 mt-3"> <div class="col-md-6 mt-md-0 mt-3">