heboba/goodgarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gedeeltelijk opgelost

Browse Source
This commit is contained in:
Atilla
2024-03-05 19:39:41 +01:00
parent 78bc64cc59
commit 9dd2c37627
4 changed files with 85 additions and 792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/css/style.css
View File

@@ -1,4 +1,3 @@
/*default colors*/
@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
@@ -103,19 +102,19 @@ body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox canvas {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
body .mainContainer .mainBorder #sectie-1 .content { body .mainContainer .mainBorder .content {
display: grid; display: grid;
grid-template-columns: 3fr 1fr 3fr; grid-template-columns: 3fr 1fr 3fr;
height: 100%; height: 100%;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-links { body .mainContainer .mainBorder .content .kant-links {
grid-column: 1; grid-column: 1;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten { body .mainContainer .mainBorder .content .kant-links #planten {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article { body .mainContainer .mainBorder .content .kant-links #planten td article {
height: 7rem; height: 7rem;
width: 10rem; width: 10rem;
padding: 0.6rem; padding: 0.6rem;
@@ -129,33 +128,34 @@ body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td artic
border-radius: 40px; border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article #toevoegen { body .mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
height: 5rem; height: 5rem;
width: 5rem; width: 5rem;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article h2 { body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
color: gray; color: gray;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article:hover { body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
background-color: lightgray; background-color: lightgray;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-rechts { body .mainContainer .mainBorder .content .kant-rechts {
grid-column: 3; grid-column: 3;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen { body .mainContainer .mainBorder .content .kant-rechts #metingen {
border: solid 3px rgb(171, 211, 174); border: solid 3px rgb(171, 211, 174);
border-radius: 40px; border-radius: 40px;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes { body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-between;
padding: 0.5rem; padding: 0.5rem;
padding-bottom: 0; padding-bottom: 0;
width: 100%; width: 100%;
} }
body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes table { body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table {
display: flex; display: flex;
justify-content: space-around; justify-content: space-between;
width: 100%;
} }
body .mainContainer .mainBorder .grid-column-2 { body .mainContainer .mainBorder .grid-column-2 {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

2
src/css/style.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}

840
src/css/style.scss
View File

@@ -1,712 +1,3 @@
// /*default colors*/
// $primary-color: rgb(171, 211, 174);
// $secondary-color: rgb(143, 188, 143);
// @import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
// @import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
// $font-titels: "Akaya Kanadaka", system-ui;
// $font-text: "Afacad", sans-serif;
// @mixin flexbox
// {
// display: flex;
// justify-content: space-around;
// }
// @mixin groene-border
// {
// border: solid 2px $primary-color;
// }
// @mixin box-shadow
// {
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
// }
// @mixin border-radius
// {
// border-radius: 40px;
// }
// h1, h2, h3, h4, h5
// {
// font-family: $font-titels;
// margin: 0;
// }
// p, td
// {
// font-family: $font-text;
// }
// body
// {
// // background-image: url("../images/achtergrond.png");
// // background-repeat: no-repeat;
// // background-size: cover;
// // background-position: center;
// // // font-family: $font-text;
// // display: flex;
// // justify-content: center;
// // align-items: center;
// // height: 100vh;
// // margin: 0;
// background-image: url("../images/achtergrond.png");
// background-repeat: no-repeat;
// background-size: cover;
// background-position: center;
// // font-family: $font-text;
// display: flex;
// justify-content: center;
// align-items: center;
// height: 100vh;
// margin: 0;
// .mainContainer
// {
// width: 85vw;
// height: 38rem;
// background-color: rgb(255, 255, 255, 95%);
// border-radius: 40px;
// padding: 2rem;
// .goodgarden-logo
// {
// // z-index: inherit;
// position: absolute;
// width: 10vw;
// left: 50%;
// top: 2.5rem;
// transform: translateX(-50%);
// }
// .informatie-kas-main-container
// {
// display: grid;
// grid-template-columns: 5fr 7fr;
// }
// .mainBorder
// {
// padding: 1rem 0;
// height: 35rem;
// border: solid 5px $primary-color;
// border-radius: 40px;
// .pagina-titel
// {
// font-size: 2rem;
// margin-left: 1.5rem;
// }
// #sectie-1
// {
// display: flex;
// flex-direction: column;
// gap: 1rem;
// padding: 0 2.5rem 0 1rem;
// position: relative;
// // h1
// // {
// // background-color: green;
// // }
// .parent-algemeen-overzicht
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// margin-top: 1rem;
// .algemeen-overzicht
// {
// @include groene-border;
// @include border-radius;
// font-size: 1.25rem;
// padding: .5rem 1rem;
// // background-color: red;
// .table-informatie-kas
// {
// width: 100%;
// .tr-informatie-kas
// {
// display: flex;
// justify-content: space-between;
// text-align: left;
// }
// // .tr-informatie-kas > :last-child
// // {
// // text-align: center; /* Centers the numbers */
// // flex: 1; /* Allows it to expand to fill the space */
// // }
// // }
// }
// }
// .grafiek
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// position: relative;
// .grafiek-innerbox
// {
// @include groene-border;
// // @include inner-border-radius;
// font-size: 1.25rem;
// padding: 0 1rem 2.5rem;
// height: 225px;
// // position: relative;
// h2
// {
// position: absolute;
// left: 50%;
// transform: translateX(-50%);
// }
// canvas
// {
// // Zorgt ervoor dat de grafiek precies in eht midden komt
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
// }
// }
// .content
// {
// display: grid;
// grid-template-columns: 3fr 1fr 3fr;
// height: 100%;
// .kant
// {
// &-links
// {
// grid-column: 1;
// #planten
// {
// width: 100%;
// border-collapse: collapse;
// td
// {
// article
// {
// height: 7rem;
// width: 10rem;
// padding: .6rem;
// margin: .1rem;
// margin-left: 2rem;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// border: solid 3px $primary-color;
// border-radius: 40px;
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// #toevoegen
// {
// height: 5rem;
// width: 5rem;
// }
// h2
// {
// color: gray;
// }
// &:hover
// {
// background-color: lightgray;
// }
// }
// }
// }
// }
// &-rechts
// {
// grid-column: 3;
// // margin-right: 2rem;
// #metingen
// {
// border: solid 3px $primary-color;
// border-radius: 40px;
// #main-waardes
// {
// display: flex;
// justify-content: space-evenly;
// padding: .5rem;
// padding-bottom: 0;
// width: 100%;
// table
// {
// display: flex;
// justify-content: space-around;
// // width: 100%;
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// /* Divider */
// .divider {
// display: flex;
// justify-content: center;
// border: solid 1px $primary-color;
// border-radius: 5px;
// width: 80%;
// margin: 0 auto;
// }
// /* The Modal (background) */
// .modal
// {
// display: none;
// position: fixed;
// z-index: 999;
// left: 50%;
// top: 50%;
// transform: translate(-50%, -50%);
// background: white;
// padding: 20px;
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// width: 30vw;
// height: auto;
// border: solid 2px black;
// border-radius: 10px;
// .close
// {
// color: #aaa;
// float: right;
// font-size: 28px;
// font-weight: bold;
// &:hover,
// &:active
// {
// color: black;
// text-decoration: none;
// cursor: pointer;
// }
// }
// }
/*default colors*/
// $primary-color: rgb(171, 211, 174);
// $secondary-color: rgb(143, 188, 143);
// @import url('https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap');
// @import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
// $font-titels: "Akaya Kanadaka", system-ui;
// $font-text: "Afacad", sans-serif;
// @mixin flexbox
// {
// display: flex;
// justify-content: space-around;
// }
// @mixin groene-border
// {
// border: solid 2px $primary-color;
// }
// @mixin box-shadow
// {
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
// }
// @mixin border-radius
// {
// border-radius: 40px;
// }
// @mixin inner-border-radius
// {
// border-radius: 35px;
// }
// h1, h2, h3, h4, h5
// {
// font-family: $font-titels;
// margin: 0;
// }
// p, td
// {
// font-family: $font-text;
// }
// body
// {
// background-image: url("../images/achtergrond.png");
// background-repeat: no-repeat;
// background-size: cover;
// background-position: center;
// // font-family: $font-text;
// display: flex;
// justify-content: center;
// align-items: center;
// height: 100vh;
// margin: 0;
// .mainContainer
// {
// width: 85vw;
// height: 38rem;
// background-color: rgb(255, 255, 255, 95%);
// border-radius: 40px;
// padding: 2rem;
// .goodgarden-logo
// {
// // z-index: inherit;
// position: absolute;
// width: 10vw;
// left: 50%;
// top: 2.5rem;
// transform: translateX(-50%);
// }
// .informatie-kas-main-container
// {
// display: grid;
// grid-template-columns: 5fr 7fr;
// }
// .mainBorder
// {
// padding: 1.25rem 1.5rem;
// height: 35rem;
// border: solid 5px $primary-color;
// border-radius: 40px;
// .pagina-titel
// {
// font-size: 2rem;
// margin-left: 1.5rem;
// }
// #sectie-1
// {
// display: flex;
// flex-direction: column;
// gap: 1rem;
// padding: 0 2.5rem 0 1rem;
// position: relative;
// .parent-algemeen-overzicht
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// margin-top: 1rem;
// .algemeen-overzicht
// {
// @include groene-border;
// @include inner-border-radius;
// font-size: 1.25rem;
// padding: .5rem 1rem;
// // background-color: red;
// .table-informatie-kas
// {
// width: 100%;
// .tr-informatie-kas
// {
// display: flex;
// justify-content: space-between;
// text-align: left;
// }
// }
// }
// }
// .grafiek
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// position: relative;
// .grafiek-innerbox
// {
// @include groene-border;
// @include inner-border-radius;
// font-size: 1.25rem;
// padding: 0 1rem 2.5rem;
// height: 225px;
// // position: relative;
// h2
// {
// position: absolute;
// left: 50%;
// transform: translateX(-50%);
// }
// canvas
// {
// // Zorgt ervoor dat de grafiek precies in eht midden komt
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
// }
// .content
// {
// display: grid;
// grid-template-columns: 3fr 1fr 3fr;
// height: 100%;
// .kant
// {
// &-links
// {
// grid-column: 1;
// #planten
// {
// width: 100%;
// border-collapse: collapse;
// td
// {
// article
// {
// height: 7rem;
// width: 10rem;
// padding: .6rem;
// margin: .1rem;
// margin-left: 2rem;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// border: solid 3px $primary-color;
// border-radius: 40px;
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// #toevoegen
// {
// height: 5rem;
// width: 5rem;
// }
// h2
// {
// color: gray;
// }
// &:hover
// {
// background-color: lightgray;
// }
// }
// }
// }
// }
// &-rechts
// {
// grid-column: 3;
// // margin-right: 2rem;
// #metingen
// {
// border: solid 3px $primary-color;
// border-radius: 40px;
// #main-waardes
// {
// display: flex;
// justify-content: space-evenly;
// padding: .5rem;
// padding-bottom: 0;
// width: 100%;
// table
// {
// display: flex;
// justify-content: space-around;
// // width: 100%;
// }
// }
// }
// }
// }
// }
// }
// .grid-column-2
// {
// @include box-shadow;
// @include border-radius;
// padding: 1rem;
// margin: 3.25rem 1rem 1.25rem 1rem;
// .grid-2-child
// {
// @include groene-border;
// @include inner-border-radius;
// height: 100%;
// .parent-table
// {
// padding: 1.5rem 2rem;
// display: flex;
// flex-direction: column;
// // align-items: stretch;
// // gap: 2.5rem;
// justify-content: space-around;
// height: 90%;
// table
// {
// tr
// {
// td
// {
// font-size: 1.05rem;
// }
// }
// }
// .kas-table-1
// {
// tr
// {
// td
// {
// font-size: 1.25rem;
// }
// }
// }
// .kas-table-2
// {
// position: relative;
// &::after,
// &::before
// {
// content: "";
// position: absolute;
// left: 0;
// right: 0;
// height: 1px;
// width: 90%;
// background: black;
// }
// &::after
// {
// bottom: -20px;
// }
// &::before
// {
// top: -20px;
// }
// }
// }
// }
// }
// }
// }
// }
// /* Divider */
// .divider {
// display: flex;
// justify-content: center;
// border: solid 1px $primary-color;
// border-radius: 5px;
// width: 80%;
// margin: 0 auto;
// }
// /* The Modal (background) */
// .modal
// {
// display: none;
// position: fixed;
// z-index: 999;
// left: 50%;
// top: 50%;
// transform: translate(-50%, -50%);
// background: white;
// padding: 1.25rem;
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// width: 30vw;
// height: auto;
// border: solid 2px black;
// border-radius: 10px;
// .close
// {
// color: #aaa;
// float: right;
// font-size: 1.75rem;
// font-weight: bold;
// &:hover,
// &:active
// {
// color: black;
// text-decoration: none;
// cursor: pointer;
// }
// }
// }
$primary-color: rgb(171, 211, 174); $primary-color: rgb(171, 211, 174);
$secondary-color: rgb(143, 188, 143); $secondary-color: rgb(143, 188, 143);
@@ -880,96 +171,95 @@ body
} }
} }
} }
}
.content
{
display: grid;
grid-template-columns: 3fr 1fr 3fr;
height: 100%;
.content .kant
{ {
display: grid; &-links
grid-template-columns: 3fr 1fr 3fr;
height: 100%;
.kant
{ {
&-links grid-column: 1;
#planten
{ {
grid-column: 1; width: 100%;
border-collapse: collapse;
#planten td
{ {
width: 100%; article
border-collapse: collapse;
td
{ {
article height: 7rem;
width: 10rem;
padding: .6rem;
margin: .1rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 3px $primary-color;
border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
#toevoegen
{ {
height: 7rem; height: 5rem;
width: 10rem; width: 5rem;
padding: .6rem;
margin: .1rem;
margin-left: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 3px $primary-color;
border-radius: 40px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
#toevoegen
{
height: 5rem;
width: 5rem;
}
h2
{
color: gray;
}
&:hover
{
background-color: lightgray;
}
} }
h2
{
color: gray;
}
&:hover
{
background-color: lightgray;
}
} }
} }
} }
}
&-rechts
{
grid-column: 3;
// margin-right: 2rem;
&-rechts #metingen
{ {
grid-column: 3;
// margin-right: 2rem;
#metingen border: solid 3px $primary-color;
border-radius: 40px;
#main-waardes
{ {
display: flex;
justify-content: space-between;
padding: .5rem;
padding-bottom: 0;
width: 100%;
border: solid 3px $primary-color; table
border-radius: 40px;
#main-waardes
{ {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-between;
padding: .5rem; width: 100%;
padding-bottom: 0;
width: 100%;
table
{
display: flex;
justify-content: space-around;
// width: 100%;
}
} }
} }
} }
} }
} }
} }
.grid-column-2 .grid-column-2
{ {
@include box-shadow; @include box-shadow;

7
src/index.html
View File

@@ -10,6 +10,9 @@
</head> </head>
<body> <body>
<section class="mainContainer"> <section class="mainContainer">
<article>
<img src="../src/images/logo.png" class="goodgarden-logo">
</article>
<section class="mainBorder"> <section class="mainBorder">
<section class="content"> <section class="content">
<section class="kant-links"> <section class="kant-links">
@@ -69,9 +72,9 @@
</article> </article>
</td> </td>
<td> <td>
<article id="modalButton" onclick="openModal()"> <!-- <article id="modalButton" onclick="openModal()">
<img id="toevoegen"src="images/Toevoegen.png" alt=""> <img id="toevoegen"src="images/Toevoegen.png" alt="">
</article> </article> -->
</td> </td>
</tr> </tr>
</table> </table>