gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Update CSS (WIP)

Browse source
This commit is contained in:
Greg Burri 2025-01-08 16:13:43 +01:00
parent 7a09e2360e
commit 7226029109
6 changed files with 184 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

144
backend/scss/style.scss
View file

@ -1,49 +1,23 @@
@use 'toast.scss';
@use 'modal-dialog.scss';
@font-face {
font-family: Fira Code;
font-weight: 200;
src: url(FiraCode-Light.woff2) format("woff2");
}
$color-1: #B29B89;
$color-2: #89B29B;
$color-3: #9B89B2;
@font-face {
font-family: Fira Code;
font-weight: 400;
src: url(FiraCode-Regular.woff2) format("woff2");
}
@font-face {
font-family: Fira Code;
font-weight: 600;
src: url(FiraCode-SemiBold.woff2) format("woff2");
}
@font-face {
font-family: Fira Code;
font-weight: 700;
src: url(FiraCode-Bold.woff2) format("woff2");
}
$primary: #182430;
$background: darken($primary, 5%);
$background-container: lighten($primary, 10%);
$text-color: darken($color-1, 30%);
* {
margin: 5px;
padding: 0px;
}
html {
font-size: 80%
}
a {
color: lighten($primary, 40%);
color: darken($color-3, 25%);
text-decoration: none;
&:hover {
color: lighten($primary, 60%);
color: lighten($color-3, 20%);
}
}
@ -51,66 +25,110 @@ body {
display: flex;
flex-direction: column;
font-family: Fira Code, Helvetica Neue, Helvetica, Arial, sans-serif;
text-shadow: 2px 2px 2px rgb(0, 0, 0);
// line-height: 18px;
color: lighten($primary, 60%);
background-color: $background;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: $text-color;
background-color: $color-1;
margin: 0px;
.recipe-item {
padding: 4px;
}
.recipe-item-current {
padding: 3px;
border: 1px solid lighten($primary, 30%);
}
.header-container {
align-self: center;
display: flex;
flex-direction: row;
justify-content: space-between;
.title {
font-size: 180%;
font-style: italic;
.logo {
width: 50px;
height: 50px;
vertical-align: bottom;
margin: 0px 10px 0px 0px;
}
}
.header-menu {
align-self: flex-end;
.create-recipe {
border: 0.1em solid $color-3;
padding: 2px 8px 2px 8px;
border-radius: 0.5em;
}
}
#select-website-language {
padding: 5px;
}
}
.footer-container {
align-self: center;
font-size: 0.5em;
font-size: 0.7em;
}
.drag-handle {
width: 20px;
height: 20px;
background-color: gray;
background-color: blue;
}
img {
border: 0px;
}
.main-container {
display: flex;
flex-direction: row;
// #recipes-list {
// text-align: left;
// }
#recipes-list {
hr {
margin-top: 10px;
margin-bottom: 10px;
height: 1px;
color: $color-3;
background: $color-3;
font-size: 0;
border: 0;
}
.recipe-item {
padding: 4px;
}
.recipe-item-current {
color: lighten($color-3, 30%);
padding: 4px;
background-color: $color-2;
border: 0.1em solid $color-3;
border-radius: 0.5em;
}
}
.content {
flex-grow: 1;
background-color: $background-container;
border: 0.1em solid lighten($primary, 50%);
padding: 0.5em;
background-color: $color-2;
border: 0.1em solid $color-3;
border-radius: 1em;
padding: 0.8em;
h1 {
text-align: center;
}
.group {
border: 0.1em solid lighten($primary, 30%);
border: 0.1em solid lighten($color-3, 30%);
}
.step {
border: 0.1em solid lighten($primary, 30%);
border: 0.1em solid lighten($color-3, 30%);
}
.ingredient {
border: 0.1em solid lighten($primary, 30%);
border: 0.1em solid lighten($color-3, 30%);
}
#hidden-templates {
@ -125,10 +143,10 @@ body {
input,
button {
background-color: rgb(52, 40, 85);
// background-color: rgb(52, 40, 85);
border-width: 1px;
border-color: white;
color: white;
// border-color: white;
// color: white;
}
}
@ -175,8 +193,4 @@ body {
// }
}
img {
border: 0px;
}
}