[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:02px1pxrgba(0,0,0,0.1),03px2pxrgba(0,0,0,0.1);
 --shadow-medium:04px10pxrgba(0,0,0,0.1),06px15pxrgba(0,0,0,0.1);
 --shadow-large:04px10pxrgba(0,0,0,0.1),06px30pxrgba(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-topbody{
+.is-layout-scroll-past-endbody{
+margin-bottom:40vh;
+}
+
+.is-layout-alignment-horizontal-leftbody{
+align-items: flex-start;
+}
+
+.is-layout-alignment-horizontal-centerbody{
+align-items: center;
+}
+
+.is-layout-alignment-horizontal-rightbody{
+align-items: flex-end;
+}
+
+.is-layout-alignment-vertical-topbody{
 justify-content: flex-start;
 }
 
-.is-header-alignment-vertical-centerbody{
+.is-layout-alignment-vertical-centerbody{
 justify-content: center;
 }
 
-.is-header-alignment-vertical-bottombody{
+.is-layout-alignment-vertical-bottombody{
 justify-content: flex-end;
 }
 
-.is-bookmarks-show-linkbody{
-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 000var(--line-width) rgb(var(--accent)), inset 000calc(var(--line-width) *2) rgba(var(--accent),0.25), inset 000calc(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:001em0;
 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;
-}