diff --git a/css/base.css b/css/base.css index ab0b664b..332bfd1a 100755 --- a/css/base.css +++ b/css/base.css @@ -60,9 +60,10 @@ --z-index-link: 2000; --z-index-header: 3000; --z-index-tip: 4000; - --z-index-shade: 5000; - --z-index-modal: 6000; - --z-index-menu: 7000; + --z-container-edge: 5000; + --z-index-shade: 6000; + --z-index-modal: 7000; + --z-index-menu: 8000; --header-shade-color: transparent; --header-shade-opacity: none; --header-height: 0; @@ -71,6 +72,8 @@ --background-opacity: 1; --background-accent-opacity: 0; --background-blur: 0; + --layout-width: calc(70vw - var(--layout-width-gutter)); + --layout-width-gutter: var(--gutter) * 8; /* breakpoint reference */ /* can not be used in @media as of yet */ --breakpoint-sm: 550px; diff --git a/css/container.css b/css/container.css index 886b4512..26a83da7 100755 --- a/css/container.css +++ b/css/container.css @@ -1,45 +1,29 @@ .container { margin-left: auto; margin-right: auto; - transition: all var(--animation-speed-fast) ease-in-out; + position: relative; + width: var(--layout-width); } -.is-layout-width-fluid .container, -.is-layout-width-wide .container, -.is-layout-width-thin .container { - width: calc(100vw - 4em); +.container-edge { + background-color: transparent; + position: fixed; + top: 0; + left: 50%; + width: calc(var(--layout-width) + var(--layout-width-gutter)); + height: 100vh; + transform: translate(-50%, 0); + z-index: var(--z-container-edge); + pointer-events: none; + 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); } -@media (min-width: 550px) { - .is-layout-width-wide .container { - width: 80vw; - } - - .is-layout-width-thin .container { - width: 60vw; - } -} +@media (min-width: 550px) {} @media (min-width: 900px) {} -@media (min-width: 1100px) { - .is-layout-width-wide .container { - width: 75vw; - } - - .is-layout-width-thin .container { - width: 40vw; - } -} - -@media (min-width: 1600px) { - .is-layout-width-wide .container { - width: 70vw; - } - - .is-layout-width-thin .container { - width: 30vw; - } -} +@media (min-width: 1100px) {} + +@media (min-width: 1600px) {} @media (min-width: 1600px) {} diff --git a/css/form.css b/css/form.css index 1e0bbb5a..bc9d1bd3 100755 --- a/css/form.css +++ b/css/form.css @@ -62,7 +62,7 @@ input[type="text"][disabled] { padding: 0 calc(1em - var(--line-width)); color: rgb(var(--form-input-text-disabled)); border-width: var(--line-width); - border-color: rgb(var(--gray-02)); + border-color: rgb(var(--form-input-text-disabled));; cursor: default; box-shadow: none; } diff --git a/css/header.css b/css/header.css index 426e6e4b..bf3fb2a6 100755 --- a/css/header.css +++ b/css/header.css @@ -41,6 +41,17 @@ border-bottom: var(--line-width) solid rgb(var(--accent)); } +.header-edge { + background-color: transparent; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + 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); +} + .header-area { margin: 0 calc(var(--gutter) * -1); display: flex; diff --git a/index.html b/index.html index 9de4b1e5..6e255a2c 100644 --- a/index.html +++ b/index.html @@ -259,6 +259,7 @@ +
Effects may not be visible if the Search box is set to grow to fill available space.