From 0702d13263bf501c1db074ce1544e60b95161210 Mon Sep 17 00:00:00 2001
From: "bozo.kopic" <bozo@kopic.xyz>
Date: Sun, 7 Nov 2021 15:52:44 +0100
Subject: major rewrite

---
 src_scss/_color.scss            |  11 ++
 src_scss/_grid.scss             |  53 +++++++
 src_scss/_shadow.scss           |  23 +++
 src_scss/color.scss             |  11 --
 src_scss/fonts/_font.scss       |   9 --
 src_scss/fonts/fontawesome.scss |   9 +-
 src_scss/fonts/inter.scss       |   8 ++
 src_scss/fonts/roboto.scss      |  15 --
 src_scss/grid.scss              |  53 -------
 src_scss/main.scss              | 303 ++++++++++++++++++++++------------------
 src_scss/shadow.scss            |  23 ---
 11 files changed, 268 insertions(+), 250 deletions(-)
 create mode 100644 src_scss/_color.scss
 create mode 100644 src_scss/_grid.scss
 create mode 100644 src_scss/_shadow.scss
 delete mode 100644 src_scss/color.scss
 delete mode 100644 src_scss/fonts/_font.scss
 create mode 100644 src_scss/fonts/inter.scss
 delete mode 100644 src_scss/fonts/roboto.scss
 delete mode 100644 src_scss/grid.scss
 delete mode 100644 src_scss/shadow.scss

(limited to 'src_scss')

diff --git a/src_scss/_color.scss b/src_scss/_color.scss
new file mode 100644
index 0000000..9e4b539
--- /dev/null
+++ b/src_scss/_color.scss
@@ -0,0 +1,11 @@
+
+$color-grey-50: rgb(250, 250, 250);
+$color-grey-100: rgb(245, 245, 245);
+$color-grey-200: rgb(238, 238, 238);
+$color-grey-300: rgb(224, 224, 224);
+$color-grey-400: rgb(189, 189, 189);
+$color-grey-500: rgb(158, 158, 158);
+$color-grey-600: rgb(117, 117, 117);
+$color-grey-700: rgb(97, 97, 97);
+$color-grey-800: rgb(66, 66, 66);
+$color-grey-900: rgb(33, 33, 33);
diff --git a/src_scss/_grid.scss b/src_scss/_grid.scss
new file mode 100644
index 0000000..68c9cb9
--- /dev/null
+++ b/src_scss/_grid.scss
@@ -0,0 +1,53 @@
+@import 'color';
+
+
+table.grid {
+    table-layout: fixed;
+    border-spacing: 0px;
+    border: 1px solid $color-grey-400;
+
+    td:not(:last-child) {
+        border-right: 1px solid $color-grey-300;
+    }
+
+    thead tr, tfoot tr {
+        background-color: $color-grey-200;
+    }
+
+    td, th {
+        padding: 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    tbody td {
+        background-color: white;
+    }
+
+    tbody td, tfoot td {
+        border-top: 1px solid $color-grey-400;
+    }
+
+    input {
+        width: 100%;
+    }
+
+    input[type=text] {
+        position: relative;
+        border: 1px;
+        font-size: 10pt;
+        font-family: 'Roboto';
+    }
+
+    tfoot td > div {
+        display: flex;
+
+        & > .spacer {
+            flex-grow: 1;
+        }
+    }
+
+    .invalid {
+        background-color: rgba(red, 0.2);
+    }
+}
diff --git a/src_scss/_shadow.scss b/src_scss/_shadow.scss
new file mode 100644
index 0000000..8bcb900
--- /dev/null
+++ b/src_scss/_shadow.scss
@@ -0,0 +1,23 @@
+
+$shadow-key-umbra-opacity: 0.2 !default;
+$shadow-key-penumbra-opacity: 0.14 !default;
+$shadow-ambient-shadow-opacity: 0.12 !default;
+
+
+@mixin shadow-1dp() {
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+              0 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+              0 1px 2px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-2dp() {
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+              0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+              0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+}
+
+@mixin shadow-4dp() {
+  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+              0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+              0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
diff --git a/src_scss/color.scss b/src_scss/color.scss
deleted file mode 100644
index 9e4b539..0000000
--- a/src_scss/color.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-
-$color-grey-50: rgb(250, 250, 250);
-$color-grey-100: rgb(245, 245, 245);
-$color-grey-200: rgb(238, 238, 238);
-$color-grey-300: rgb(224, 224, 224);
-$color-grey-400: rgb(189, 189, 189);
-$color-grey-500: rgb(158, 158, 158);
-$color-grey-600: rgb(117, 117, 117);
-$color-grey-700: rgb(97, 97, 97);
-$color-grey-800: rgb(66, 66, 66);
-$color-grey-900: rgb(33, 33, 33);
diff --git a/src_scss/fonts/_font.scss b/src_scss/fonts/_font.scss
deleted file mode 100644
index 3f4e7e7..0000000
--- a/src_scss/fonts/_font.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-
-@mixin font($variant, $type, $weight, $style) {
-    @font-face {
-        font-family: '#{$variant}';
-        src: url('../../fonts/#{$variant}/#{$variant}-#{$type}.woff2') format('truetype');
-        font-weight: $weight;
-        font-style: $style;
-    }
-}
diff --git a/src_scss/fonts/fontawesome.scss b/src_scss/fonts/fontawesome.scss
index bfac549..5d628ba 100644
--- a/src_scss/fonts/fontawesome.scss
+++ b/src_scss/fonts/fontawesome.scss
@@ -1,7 +1,10 @@
-@import "font";
 
-
-@include font('FontAwesome', 'webfont', normal, normal);
+@font-face {
+    font-family: 'FontAwesome';
+    src: url('fonts/FontAwesome/FontAwesome.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
 
 .fa {
   display: inline-block;
diff --git a/src_scss/fonts/inter.scss b/src_scss/fonts/inter.scss
new file mode 100644
index 0000000..4863b74
--- /dev/null
+++ b/src_scss/fonts/inter.scss
@@ -0,0 +1,8 @@
+
+@font-face {
+    font-family: 'Inter';
+    src: url('fonts/Inter/Inter.woff2') format('woff2');
+    font-weight: 100 900;
+    font-style: oblique 0deg 10deg;
+    font-display: swap;
+}
diff --git a/src_scss/fonts/roboto.scss b/src_scss/fonts/roboto.scss
deleted file mode 100644
index 184ad61..0000000
--- a/src_scss/fonts/roboto.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "font";
-
-
-@include font('Roboto', 'Black', 900, normal);
-@include font('Roboto', 'BlackItalic', 900, italic);
-@include font('Roboto', 'Bold', 700, normal);
-@include font('Roboto', 'BoldItalic', 700, italic);
-@include font('Roboto', 'Medium', 500, normal);
-@include font('Roboto', 'MediumItalic', 500, italic);
-@include font('Roboto', 'Regular', 400, normal);
-@include font('Roboto', 'RegularItalic', 400, italic);
-@include font('Roboto', 'Light', 300, normal);
-@include font('Roboto', 'LightItalic', 300, italic);
-@include font('Roboto', 'Thin', 100, normal);
-@include font('Roboto', 'ThinItalic', 100, italic);
diff --git a/src_scss/grid.scss b/src_scss/grid.scss
deleted file mode 100644
index b1e9bf8..0000000
--- a/src_scss/grid.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import './color';
-
-
-table.grid {
-    table-layout: fixed;
-    border-spacing: 0px;
-    border: 1px solid $color-grey-400;
-
-    td:not(:last-child) {
-        border-right: 1px solid $color-grey-300;
-    }
-
-    thead tr, tfoot tr {
-        background-color: $color-grey-200;
-    }
-
-    td, th {
-        padding: 4px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    tbody td {
-        background-color: white;
-    }
-
-    tbody td, tfoot td {
-        border-top: 1px solid $color-grey-400;
-    }
-
-    input {
-        width: 100%;
-    }
-
-    input[type=text] {
-        position: relative;
-        border: 1px;
-        font-size: 10pt;
-        font-family: 'Roboto';
-    }
-
-    tfoot td > div {
-        display: flex;
-
-        & > .spacer {
-            flex-grow: 1;
-        }
-    }
-
-    .invalid {
-        background-color: rgba(red, 0.2);
-    }
-}
diff --git a/src_scss/main.scss b/src_scss/main.scss
index 897847c..80cb0ab 100644
--- a/src_scss/main.scss
+++ b/src_scss/main.scss
@@ -1,173 +1,204 @@
-@import '~normalize.css/normalize';
 @import '~izitoast/dist/css/iziToast.min';
 
-@import './fonts/fontawesome';
-@import './fonts/roboto';
-@import './color';
-@import './shadow';
-@import './grid';
+@import 'color';
+@import 'shadow';
+@import 'fonts/fontawesome';
+@import 'fonts/inter';
 
 
-html, body {
-    font-size: 10pt;
-    font-family: 'Roboto';
-    height: 100%;
-    margin: 0px;
+html, body, button, input, select {
+    font-family: 'Inter';
+    font-size: 12pt;
 }
 
-
-.window {
+html, body {
+    margin: 0;
+    user-select: none;
     height: 100%;
-    display: flex;
+    overflow: hidden;
 }
 
-
-.left-panel {
-    @include shadow-4dp();
-    width: 450px;
-    display: flex;
-    flex-direction: column;
-    background-color: $color-grey-100;
-
-    .header {
-        flex-shrink: 0;
-        margin: 10px;
+body {
+    & > .main {
+        height: 100%;
         display: flex;
-        align-items: center;
 
-        .title {
-            flex-grow: 1;
-            font-size: 18pt;
-            font-weight: 500;
-            color: $color-grey-800;
+        & > .panel-resizer {
+            cursor: ew-resize;
+            width: 0.4rem;
         }
 
-        a {
-            font-size: 24pt;
-            color: $color-grey-800;
-
-            &:visited {
-                color: $color-grey-800;
-            }
-
-            &:hover {
-                color: black;
-            }
-        }
-    }
+        & > .left-panel {
+            @include shadow-4dp;
+            width: 35rem;
+            display: flex;
+            flex-direction: column;
+            background-color: $color-grey-100;
+            overflow: auto;
+
+            & > .header {
+                flex-shrink: 0;
+                margin: 1rem;
+                display: flex;
+                align-items: center;
+
+                & > .title {
+                    flex-grow: 1;
+                    font-size: 18pt;
+                    font-weight: 500;
+                    color: $color-grey-800;
+                }
 
-    .group {
-        flex-shrink: 0;
-        display: flex;
-        flex-direction: column;
-        margin: 10px;
-        margin-bottom: 0px;
-    }
+                & > .github {
+                    font-size: 24pt;
+                    color: $color-grey-800;
 
-    .content {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        margin: 10px;
-        margin-bottom: 0px;
-        align-items: stretch;
-        overflow: auto;
+                    &:visited {
+                        color: $color-grey-800;
+                    }
 
-        table.grid {
-            width: 100%;
+                    &:hover {
+                        color: black;
+                    }
+                }
+            }
 
-            .fixed {
-                width: 55px
+            & > .group {
+                flex-shrink: 0;
+                display: flex;
+                flex-direction: column;
+                margin: 1rem;
+                margin-bottom: 0;
             }
 
-            tbody td:last-child {
-                text-align: center;
+            & > .content {
+                flex-grow: 1;
+                display: flex;
+                flex-direction: column;
+                margin: 1rem;
+                margin-bottom: 0;
+                align-items: stretch;
+                overflow: auto;
+
+                & > div {
+                    margin-bottom: 1rem;
+
+                    & > table {
+                        width: 100%;
+
+                        .col-quantity, .col-height, .col-width, .col-rotate {
+                            width: 5rem;
+
+                            input {
+                                text-align: right;
+                            }
+                        }
+
+                        .col-delete {
+                            width: 2rem;
+                        }
+
+                        & > tbody {
+                            td {
+                                div {
+                                    display: flex;
+                                    align-content: stretch;
+
+                                    & > * {
+                                        flex-shrink: 1;
+                                        flex-grow: 1;
+                                        width: 1rem;
+                                    }
+
+                                }
+                            }
+                        }
+
+                        & > tfoot {
+                            td {
+                                & > div {
+                                    display: flex;
+
+                                    & > .spacer {
+                                        flex-grow: 1;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
             }
 
-            .grid-col-width, .grid-col-height, .grid-col-quantity {
-                text-align: right;
+            & > .calculate {
+                flex-shrink: 0;
+                margin: 1rem;
+                padding: 1rem;
+            }
 
-                input {
-                    text-align: right;
-                }
+            .invalid {
+                background-color: rgba(red, 0.2);
             }
         }
 
-        & > *:not(:last-child) {
-            margin-bottom: 10px;
+        & > .center-panel {
+            flex-grow: 1;
+            overflow: auto;
+            padding: 1.5rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
-    }
-
-    .calculate {
-        flex-shrink: 0;
-        margin: 10px;
-        padding: 10px;
-    }
 
-    .invalid {
-        background-color: rgba(red, 0.2);
-    }
-}
-
-
-.center-panel {
-    flex-grow: 1;
-    overflow: auto;
-    padding: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-
-.right-panel {
-    @include shadow-4dp();
-    width: 200px;
-    display: flex;
-    flex-direction: column;
-    background-color: $color-grey-100;
-    overflow: auto;
+        & > .right-panel {
+            @include shadow-4dp;
+            width: 20rem;
+            display: flex;
+            flex-direction: column;
+            background-color: $color-grey-100;
+            overflow: auto;
+
+            .toolbar {
+                display: flex;
+                justify-content: center;
+                margin: 1rem;
+                flex-shrink: 0;
+            }
 
-    .toolbar {
-        display: flex;
-        justify-content: center;
-        margin: 10px;
-        flex-shrink: 0;
-    }
+            .panel {
+                margin: 1.5rem 0;
 
-    .panel {
-        margin: 15px 0px;
+                & > *:hover {
+                    background-color: $color-grey-400;
+                    cursor: pointer;
+                }
+            }
 
-        & > *:hover {
-            background-color: $color-grey-400;
-            cursor: pointer;
-        }
-    }
+            .panel-name {
+                padding: 0.4rem 1rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-weight: 600;
+                color: $color-grey-800;
+            }
 
-    .panel-name {
-        padding: 3px 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-weight: 600;
-        color: $color-grey-800;
-    }
+            .item {
+                padding: 0.4rem 1rem 0.4rem 2rem;
+                display: flex;
 
-    .item {
-        padding: 3px 10px 3px 20px;
-        display: flex;
+                .item-name {
+                    flex-grow: 1;
+                }
 
-        .item-name {
-            flex-grow: 1;
-        }
+                .item-rotate, .item-x, .item-y {
+                    margin-left: 0.4rem;
+                    font-weight: 600;
+                    color: $color-grey-800;
+                }
+            }
 
-        .item-rotate, .item-x, .item-y {
-            margin-left: 3px;
-            font-weight: 600;
-            color: $color-grey-800;
+            .selected {
+                background-color: $color-grey-400;
+            }
         }
     }
-
-    .selected {
-        background-color: $color-grey-400;
-    }
 }
diff --git a/src_scss/shadow.scss b/src_scss/shadow.scss
deleted file mode 100644
index 8bcb900..0000000
--- a/src_scss/shadow.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-
-$shadow-key-umbra-opacity: 0.2 !default;
-$shadow-key-penumbra-opacity: 0.14 !default;
-$shadow-ambient-shadow-opacity: 0.12 !default;
-
-
-@mixin shadow-1dp() {
-  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-              0 2px 1px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-              0 1px 2px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
-}
-
-@mixin shadow-2dp() {
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-              0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-              0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
-}
-
-@mixin shadow-4dp() {
-  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-              0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-              0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
-}
-- 
cgit v1.2.3-70-g09d2