From 0e7305c739bd670f6794fc60671d1e1601164ae6 Mon Sep 17 00:00:00 2001 From: Renzo <6025850@mborijnland.nl> Date: Fri, 1 Mar 2024 11:06:49 +0100 Subject: [PATCH 1/2] lalalal --- src/css/style.css | 2 +- src/css/style.css.map | 2 +- src/css/style.scss | 4 +--- src/index.html | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index d4e140e..725e7df 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -11,7 +11,7 @@ body { .mainContainer { margin: 2rem; - height: 37rem; + height: 38rem; background-color: rgba(255, 255, 255, 0.95); border-radius: 40px; padding: 2rem; diff --git a/src/css/style.css.map b/src/css/style.css.map index ae223fa..2c7e3fc 100644 --- a/src/css/style.css.map +++ b/src/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,iBAAA;AAKQ,mFAAA;AACA,2GAAA;AAMR,iCAAA;AACA;EAEI,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,iCARQ;ACDZ;;ADYA;EAEI,YAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACVJ;ADYI;EAEI,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;ACXR;ADaQ;EAEI,aAAA;EACA,kCAAA;EACA,YAAA;ACZZ;ADgBgB;EAEI,cAAA;ACfpB;ADiBoB;EAEI,WAAA;EACA,yBAAA;AChBxB;ADoB4B;EAEI,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;ACnBhC;ADqBgC;EAEI,YAAA;EACA,WAAA;ACpBpC;ADuBgC;EAEI,WAAA;ACtBpC;ADyBgC;EAEI,2BAAA;ACxBpC;ADgCgB;EAEI,cAAA;EACA,kBAAA;AC/BpB;ADiCoB;EAGI,oCAAA;EACA,mBAAA;ACjCxB;ADmCwB;EAEA,aAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;AClCxB;ADoC4B;EAEI,aAAA;EACA,6BAAA;ACnChC;;AD8CA,YAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;AC3CJ;;AD8CA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;AC7CJ;AD+CI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;AC9CR;ADgDQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;AChDZ","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,iBAAA;AAKQ,mFAAA;AACA,2GAAA;AAMR,iCAAA;AACA;EAEI,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,iCARQ;ACDZ;;ADYA;EAEI,YAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACVJ;ADYI;EAEI,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;ACXR;ADaQ;EAEI,aAAA;EACA,kCAAA;EACA,YAAA;ACZZ;ADgBgB;EAEI,cAAA;ACfpB;ADiBoB;EAEI,WAAA;EACA,yBAAA;AChBxB;ADoB4B;EAEI,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;ACnBhC;ADqBgC;EAEI,YAAA;EACA,WAAA;ACpBpC;ADuBgC;EAEI,WAAA;ACtBpC;ADyBgC;EAEI,2BAAA;ACxBpC;AD+BgB;EAEI,cAAA;EACA,kBAAA;AC9BpB;ADgCoB;EAGI,oCAAA;EACA,mBAAA;AChCxB;ADkCwB;EAEA,aAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;ACjCxB;ADmC4B;EAEI,aAAA;EACA,6BAAA;AClChC;;AD6CA,YAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;AC1CJ;;AD6CA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;AC5CJ;AD8CI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;AC7CR;AD+CQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;AC/CZ","file":"style.css"} \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index 3655136..24829ef 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -7,7 +7,6 @@ $secondary-color: rgb(143, 188, 143); @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; /* The Main container and border*/ @@ -22,7 +21,7 @@ body .mainContainer { margin: 2rem; - height: 37rem; + height: 38rem; background-color: rgb(255, 255, 255, 95%); border-radius: 40px; padding: 2rem; @@ -84,7 +83,6 @@ body background-color: lightgray; } - } } } diff --git a/src/index.html b/src/index.html index c0b0297..2e3c628 100644 --- a/src/index.html +++ b/src/index.html @@ -16,7 +16,7 @@
-
+

Tomaat

From 04af341917e67ad335d3d2d7a815d9b843f90948 Mon Sep 17 00:00:00 2001 From: Renzo <6025850@mborijnland.nl> Date: Tue, 5 Mar 2024 10:49:25 +0100 Subject: [PATCH 2/2] Update Front-End --- src/css/style.scss | 241 +++++++++++++++++++++++++++++++-------------- 1 file changed, 167 insertions(+), 74 deletions(-) diff --git a/src/css/style.scss b/src/css/style.scss index 24829ef..1e5b432 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -9,108 +9,201 @@ $secondary-color: rgb(143, 188, 143); $font-titels: "Akaya Kanadaka", system-ui; $font-text: "Afacad", sans-serif; -/* The Main container and border*/ +@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; - font-family: $font-text; -} + background-position: center; + // font-family: $font-text; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; -.mainContainer -{ - margin: 2rem; - height: 38rem; - background-color: rgb(255, 255, 255, 95%); - border-radius: 40px; - padding: 2rem; - - .mainBorder + .mainContainer { - padding: 1rem 0; - height: 35rem; - border: solid 5px $primary-color; + width: 85vw; + height: 38rem; + background-color: rgb(255, 255, 255, 95%); border-radius: 40px; + padding: 2rem; - .content + .informatie-kas-main-container { display: grid; - grid-template-columns: 3fr 1fr 3fr; - height: 100%; - - .kant + grid-template-columns: 5fr 7fr; + } + + .mainBorder + { + padding: 1rem 0; + height: 35rem; + border: solid 5px $primary-color; + border-radius: 40px; + + #sectie-1 { - &-links + h1 { - grid-column: 1; + background-color: green; + } - #planten + .parent-algemeen-overzicht + { + @include box-shadow; + @include border-radius; + padding: 1rem; + + .algemeen-overzicht { - width: 100%; - border-collapse: collapse; + @include groene-border; + @include border-radius; + font-size: 1.25rem; + padding: 1rem; + background-color: red; - td + .table-informatie-kas { - article + width: 100%; + + .tr-informatie-kas { - 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; - } - + 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 */ + // } + // } } } - } - &-rechts - { - grid-column: 3; - margin-right: 2rem; - - #metingen + + .grafiek { + // background-color: blue; + } + } - border: solid 3px $primary-color; - border-radius: 40px; + .content + { + display: grid; + grid-template-columns: 3fr 1fr 3fr; + height: 100%; - #main-waardes + .kant + { + &-links { - display: flex; - justify-content: space-evenly; - padding: .5rem; - padding-bottom: 0; - width: 100%; + grid-column: 1; - table + #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-around; - // width: 100%; + justify-content: space-evenly; + padding: .5rem; + padding-bottom: 0; + width: 100%; + + table + { + display: flex; + justify-content: space-around; + // width: 100%; + } + } } } } @@ -120,7 +213,7 @@ body } } -/* Divider */ + /* Divider */ .divider { display: flex; justify-content: center;