Update Front-End

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 
+    .mainContainer 
-{
-    margin: 2rem;
-    height: 38rem;
-    background-color: rgb(255, 255, 255, 95%);
-    border-radius: 40px;
-    padding: 2rem;
-
-    .mainBorder 
     {
-        padding: 1rem 0;
+        width: 85vw;
-        height: 35rem;
+        height: 38rem;
-        border: solid 5px $primary-color;
+        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;
+            grid-template-columns: 5fr 7fr;
-            height: 100%;
+        }
 
-            .kant
+        .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%;
+                        @include groene-border;
-                        border-collapse: collapse;
+                        @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: space-between;
-                                justify-content: center;
+                                text-align: left;
-                                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;
-                                }
-
                             }
+
+                        //     .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;
+                .content
-                        border-radius: 40px;
+                {
+                    display: grid;
+                    grid-template-columns: 3fr 1fr 3fr;
+                    height: 100%;
 
-                        #main-waardes
+                    .kant
+                    {
+                        &-links
                         {
-                        display: flex;
+                            grid-column: 1;
-                        justify-content: space-evenly;
-                        padding: .5rem;
-                        padding-bottom: 0;
-                        width: 100%;
 
-                            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;
+                                justify-content: space-evenly;
-                                // width: 100%;
+                                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;