From 9dd2c3762709726cc0f0ac14d7e5937f35dd5ec0 Mon Sep 17 00:00:00 2001 From: Atilla Date: Tue, 5 Mar 2024 19:39:41 +0100 Subject: [PATCH] Gedeeltelijk opgelost --- src/css/style.css | 28 +- src/css/style.css.map | 2 +- src/css/style.scss | 840 ++++-------------------------------------- src/index.html | 7 +- 4 files changed, 85 insertions(+), 792 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index ce37c37..cb20bc2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -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=Afacad:ital,wght@0,400..700;1,400..700&display=swap"); h1, h2, h3, h4, h5 { @@ -103,19 +102,19 @@ body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox canvas { left: 50%; transform: translate(-50%, -50%); } -body .mainContainer .mainBorder #sectie-1 .content { +body .mainContainer .mainBorder .content { display: grid; grid-template-columns: 3fr 1fr 3fr; height: 100%; } -body .mainContainer .mainBorder #sectie-1 .content .kant-links { +body .mainContainer .mainBorder .content .kant-links { grid-column: 1; } -body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten { +body .mainContainer .mainBorder .content .kant-links #planten { width: 100%; 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; width: 10rem; padding: 0.6rem; @@ -129,33 +128,34 @@ body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td artic border-radius: 40px; 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; 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; } -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; } -body .mainContainer .mainBorder #sectie-1 .content .kant-rechts { +body .mainContainer .mainBorder .content .kant-rechts { 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-radius: 40px; } -body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes { +body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes { display: flex; - justify-content: space-evenly; + justify-content: space-between; padding: 0.5rem; padding-bottom: 0; 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; - justify-content: space-around; + justify-content: space-between; + width: 100%; } body .mainContainer .mainBorder .grid-column-2 { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); diff --git a/src/css/style.css.map b/src/css/style.css.map index f4fdac6..e339665 100644 --- a/src/css/style.css.map +++ b/src/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index 1695ea3..dd546ab 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -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); $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; - grid-template-columns: 3fr 1fr 3fr; - height: 100%; - - .kant + &-links { - &-links + grid-column: 1; + + #planten { - grid-column: 1; + width: 100%; + border-collapse: collapse; - #planten + td { - width: 100%; - border-collapse: collapse; - - td + article { - 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; - 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; - } - - + height: 5rem; + width: 5rem; } + + 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; - border-radius: 40px; - - #main-waardes + table { - display: flex; - justify-content: space-evenly; - padding: .5rem; - padding-bottom: 0; - width: 100%; - - table - { - display: flex; - justify-content: space-around; - // width: 100%; - } + display: flex; + justify-content: space-between; + width: 100%; } } } } } } - + .grid-column-2 { @include box-shadow; diff --git a/src/index.html b/src/index.html index 56779ca..5b14b45 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,9 @@
+
+ +
@@ -69,9 +72,9 @@ -
+