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;
}
}

44
backend/scss/toast.scss Normal file
View file

@ -0,0 +1,44 @@
#toast {
visibility: hidden;
max-width: 300px;
margin-left: -125px;
background-color: black;
text-align: center;
border-radius: 2px;
padding: 16px; // TODO: 'rem' better?
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
}
#toast.show {
visibility: visible;
animation: fadein 0.5s, fadeout 0.5s 3.6s;
animation-iteration-count: 1;
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}