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

* Create a minimalistic toast

Browse source 
* Profile editing (WIP)
This commit is contained in:
Greg Burri 2024-12-04 17:39:56 +01:00
parent 327b2d0a5b
commit 1c79cc890d
25 changed files with 1133 additions and 575 deletions
Download patch file Download diff file Expand all files Collapse all files

159
backend/scss/style.scss Normal file
View file

@ -0,0 +1,159 @@
@use 'toast.scss';
@font-face {
font-family: Fira Code;
font-weight: 200;
src: url(FiraCode-Light.woff2) format("woff2");
}
@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%);
* {
margin: 5px;
padding: 0px;
}
html {
font-size: 80%
}
a {
color: lighten($primary, 40%);
text-decoration: none;
&:hover {
color: lighten($primary, 60%);
}
}
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: rgb(255, 255, 255);
background-color: $background;
margin: 0px;
.recipe-item {
padding: 4px;
}
.recipe-item-current {
padding: 3px;
border: 1px solid white;
}
.header-container {
align-self: center;
}
.footer-container {
align-self: center;
font-size: 0.5em;
}
.main-container {
display: flex;
flex-direction: row;
// .recipes-list {
// text-align: left;
// }
.content {
flex-grow: 1;
background-color: $background-container;
border: 0.1em solid white;
padding: 0.5em;
h1 {
text-align: center;
}
}
form {
display: grid;
grid-template-columns: auto 1fr;
gap: 3px;
input,
button {
background-color: rgb(52, 40, 85);
border-width: 1px;
border-color: white;
color: white;
}
}
// #user-edit {
// .label-name {
// grid-column: 1;
// grid-row: 1;
// }
// .input-name {
// grid-column: 2;
// grid-row: 1;
// }
// .label-password-1 {
// grid-column: 1;
// grid-row: 2;
// }
// .input-password-1 {
// grid-column: 2;
// grid-row: 2;
// }
// .label-password-2 {
// grid-column: 1;
// grid-row: 3;
// }
// .input-password-2 {
// grid-column: 2;
// grid-row: 3;
// }
// .button-save {
// grid-column: 2;
// grid-row: 4;
// width: fit-content;
// justify-self: flex-end;
// }
// }
// #sign-in {
// }
}
img {
border: 0px;
}
}