Slightly change colour style and add round edges to menus

main
trivernis 1 year ago
parent 81440f01aa
commit 1ac084a956
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG Key ID: DFFFCC2C7A02DB45

@ -1,21 +1,22 @@
//// original green // original green
// $background: #86A466; // $background: #86A466;
//
// $highlight: #e97c5e; // $highlight: #e97c5e;
// $secondary: #e97793; // $secondary: #e97793;
//
// $highlight-text: black; // $highlight-text: black;
// $text: black; // $text: black;
// mono green black // mono green black
$background: #82AE9F; $background: #82ae8a;
$highlight: #13140F; $highlight: #292c1d;
// $secondary: #777395;
$secondary: white; $secondary: white;
$highlight-text: white; $highlight-text: white;
$text: black; $text: black;
$inactive-text: lighten($text, 20%);
$highlight-inactive-text: darken($highlight-text, 20%);
// // pastell green // // pastell green
// $background: #7FC6B8; // $background: #7FC6B8;

@ -8,7 +8,7 @@
display: flex; display: flex;
float: left; float: left;
margin: 1em; margin: 1em;
border-radius: 0.25em; border-radius: 0.5em;
box-shadow: 0.5em 0.5em $highlight; box-shadow: 0.5em 0.5em $highlight;
transition-duration: 0.25s; transition-duration: 0.25s;
height: 128px; height: 128px;
@ -18,6 +18,10 @@
&:hover { &:hover {
margin: 0.75em 1.25em 0.75em 0.75em; margin: 0.75em 1.25em 0.75em 0.75em;
box-shadow: 0.75em 0.75em $highlight; box-shadow: 0.75em 0.75em $highlight;
a.plant-link h2.plant-title {
background-color: rgba(0, 0, 0, 0.5);
}
} }
&:active { &:active {
@ -30,19 +34,20 @@
position: relative; position: relative;
img { img {
border-radius: 0.25em; border-radius: 0.5em;
height: 128px; height: 128px;
width: 256px; width: 256px;
} }
h2.plant-title { h2.plant-title {
transition-duration: 0.25s;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
margin: 0; margin: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: white; color: white;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.2);
border-radius: 0.25em 0.25em 0 0; border-radius: 0.5rem;
text-decoration: none; text-decoration: none;
} }
} }

@ -26,8 +26,9 @@ footer.footer {
padding: 0 0.5em; padding: 0 0.5em;
overflow: hidden; overflow: hidden;
background-color: $highlight; background-color: $highlight;
color: grey; color: $highlight-inactive-text;
width: calc(100% - 2em); width: calc(100% - 2em);
border-radius: 0.5em;
.footer-item { .footer-item {
display: block; display: block;
@ -35,7 +36,7 @@ footer.footer {
} }
a { a {
color: grey; color: $highlight-inactive-text;
text-decoration: none; text-decoration: none;
} }
} }
@ -98,6 +99,7 @@ ul.navbar {
overflow: hidden; overflow: hidden;
width: calc(100% - 1em); width: calc(100% - 1em);
color: $highlight-text; color: $highlight-text;
border-radius: 0.5em;
li { li {
display: inline; display: inline;

Loading…
Cancel
Save