[feature] [design] improved controls and options for layout

Author: zombieFox

css/base.css

@@ -1,4 +1,5 @@
 :root {
+  --accent: 250, 130, 0;
   --black: 0, 0, 0;
   --white: 255, 255, 255;
   --shade-01: 38, 40, 49;
@@ -44,7 +45,6 @@
   --form-checkbox-radio-chcked-label: var(--gray-16);
   --form-checkbox-radio-disabled-label: var(--gray-04);
   --form-range-thumb: var(--gray-12);
-  --accent: 0, 255, 0;
   --root-font-size: 14px;
   --radius: 0.2em;
   --line-width: 0.2em;
@@ -66,9 +66,10 @@
   --z-index-modal: 7000;
   --z-index-menu: 8000;
   --z-index-auto-suggest-list: 8000;
+  --z-index-edge: 9000;
+  --header-area-width: 100%;
   --header-shade-color: transparent;
   --header-shade-opacity: none;
-  --header-height: 0;
   --header-search-width: 0%;
   --header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top));
   --header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom));
@@ -78,14 +79,13 @@
   --header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
   --header-border-width-multiplier-top: 1;
   --header-border-width-multiplier-bottom: 1;
+  --link-area-width: 100%;
   --background-image: none;
   --background-opacity: 1;
   --background-accent-opacity: 0;
   --background-blur: 0;
-  --layout-width: calc(70vw - var(--layout-width-gutter));
-  --layout-width-gutter: var(--gutter) * 8;
-  --menu-border-width: 2px;
-  --menu-border: var(--menu-border-width) solid rgb(var(--gray-02));
+  --layout-width: 80%;
+  --menu-border: calc(var(--line-width) * 1) solid rgb(var(--gray-03));
   --shadow-small: 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
   --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.1);
   --shadow-large: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 30px rgba(0, 0, 0, 0.1);
@@ -102,13 +102,15 @@
 }
 
 :root.is-bookmarks-style-block {
-  --link-height: 7em;
+  --link-items-width: 20%;
+  --link-items-height: 10em;
   --url-height: 20%;
   --edit-height: 30%;
 }
 
 :root.is-bookmarks-style-list {
-  --link-height: 4em;
+  --link-items-width: 20%;
+  --link-items-height: 4em;
   --url-height: 30%;
   --edit-height: 50%;
 }
@@ -117,10 +119,6 @@
   :root {
     --root-font-size: 16px;
   }
-
-  :root.is-bookmarks-style-block {
-    --link-height: 9em;
-  }
 }
 
 ::selection {
@@ -140,27 +138,40 @@ body {
   font-family: var(--font-regular);
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
   transition: background-color var(--animation-speed-fast) ease-in-out;
 }
 
-.is-header-alignment-vertical-top body {
+.is-layout-scroll-past-end body {
+  margin-bottom: 40vh;
+}
+
+.is-layout-alignment-horizontal-left body {
+  align-items: flex-start;
+}
+
+.is-layout-alignment-horizontal-center body {
+  align-items: center;
+}
+
+.is-layout-alignment-horizontal-right body {
+  align-items: flex-end;
+}
+
+.is-layout-alignment-vertical-top body {
   justify-content: flex-start;
 }
 
-.is-header-alignment-vertical-center body {
+.is-layout-alignment-vertical-center body {
   justify-content: center;
 }
 
-.is-header-alignment-vertical-bottom body {
+.is-layout-alignment-vertical-bottom body {
   justify-content: flex-end;
 }
 
-.is-bookmarks-show-link body {
-  display: inherit;
-  height: inherit;
-}
-
 .is-theme-style-dark {
   --gray-01: var(--shade-01);
   --gray-02: var(--shade-02);

css/clock.css

@@ -13,6 +13,18 @@
   flex-wrap: wrap;
 }
 
+.is-header-items-alignment-horizontal-left .clock {
+  justify-content: flex-start;
+}
+
+.is-header-items-alignment-horizontal-center .clock {
+  justify-content: center;
+}
+
+.is-header-items-alignment-horizontal-right .clock {
+  justify-content: flex-end;
+}
+
 .clock-separator,
 .clock-hours,
 .clock-minutes,
@@ -27,7 +39,6 @@
 
 .clock-separator {
   justify-content: center;
-  /* min-width: 0.5em; */
   color: rgb(var(--accent));
 }
 
@@ -39,14 +50,18 @@
   min-width: 1.25em;
 }
 
-.clock [class^="clock-"]:not(:first-child):not([class^="clock-separator"]),
-.clock [class*=" clock-"]:not(:first-child):not([class*=" clock-separator"]) {
-  margin-left: 0.2em;
+.is-header-items-alignment-horizontal-left .clock-item:not(:last-child) {
+  margin-right: 0.2em;
 }
 
-.clock [class^="clock-"]:not(:last-child):not([class^="clock-separator"]),
-.clock [class*=" clock-"]:not(:last-child):not([class*=" clock-separator"]) {
-  margin-right: 0.2em;
+.is-header-items-alignment-horizontal-center .clock-item:not(:first-child),
+.is-header-items-alignment-horizontal-center .clock-item:not(:last-child) {
+  margin-left: 0.1em;
+  margin-right: 0.1em;
+}
+
+.is-header-items-alignment-horizontal-right .clock-item:not(:first-child) {
+  margin-left: 0.2em;
 }
 
 .clock-hours {

css/container.css

@@ -13,6 +13,18 @@
   flex-wrap: wrap;
 }
 
+.is-header-items-alignment-horizontal-left .date {
+  justify-content: flex-start;
+}
+
+.is-header-items-alignment-horizontal-center .date {
+  justify-content: center;
+}
+
+.is-header-items-alignment-horizontal-right .date {
+  justify-content: flex-end;
+}
+
 .date-separator,
 .date-date,
 .date-day,
@@ -27,7 +39,6 @@
 
 .date-separator {
   justify-content: center;
-  /* min-width: 0.5em; */
   color: rgb(var(--accent));
 }
 
@@ -38,14 +49,18 @@
   justify-content: center;
 }
 
-.date [class^="date-"]:not(:first-child):not([class^="date-separator"]),
-.date [class*=" date-"]:not(:first-child):not([class*=" date-separator"]) {
-  margin-left: 0.2em;
+.is-header-items-alignment-horizontal-left .date-item:not(:last-child) {
+  margin-right: 0.2em;
 }
 
-.date [class^="date-"]:not(:last-child):not([class^="date-separator"]),
-.date [class*=" date-"]:not(:last-child):not([class*=" date-separator"]) {
-  margin-right: 0.2em;
+.is-header-items-alignment-horizontal-center .date-item:not(:first-child),
+.is-header-items-alignment-horizontal-center .date-item:not(:last-child) {
+  margin-left: 0.1em;
+  margin-right: 0.1em;
+}
+
+.is-header-items-alignment-horizontal-right .date-item:not(:first-child) {
+  margin-left: 0.2em;
 }
 
 .date-day {

css/date.css

@@ -0,0 +1,14 @@
+.edge {
+  background-color: rgba(var(--accent), 0.10);
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  border-radius: calc(var(--radius) * 2);
+  box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25), inset 0 0 0 calc(var(--line-width) * 3) rgba(var(--accent), 0.25);
+  z-index: var(--z-index-edge);
+  pointer-events: none;
+  transition: opacity var(--animation-speed-fast) ease-in-out;
+}

css/edge.css

@@ -745,7 +745,7 @@ input[type="range"][disabled]~.input-helper {
 .form-group {
   margin: 0 0 1em 0;
   display: inline-flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: stretch;
   width: 100%;
 }

css/form.css

@@ -20,9 +20,3 @@
   justify-content: center;
   align-items: center;
 }
-
-.greeting-item-text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}