diff --git a/css/v2.css b/css/v2.css index 0d891dcbc..8b1ec6438 100755 --- a/css/v2.css +++ b/css/v2.css @@ -226,7 +226,7 @@ main::before { height: 1px; width: 100%; } -.full-width::after, .dotsep::after { +.full-width::after, .dotsep::after, h2:has(+slide-show)::after { content: url(../assets/img/border-dot-black.svg); position: absolute; z-index: 1234; diff --git a/index.html b/index.html index badf19a4e..8cf86705d 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ } main, main > .full-width { display: grid; - grid-template-columns: 1fr [dash] 1px [main] auto 1px 1fr; + grid-template-columns: 1fr [dash] 1px [main] calc(100% - 4px) 1px 1fr; grid-template-rows: repeat(10,auto); } @@ -27,29 +27,35 @@ background-image: linear-gradient(42deg,hsl(0 80 0 / 0),40%,hsl(0 100 0 / 0.1),60%,hsl(0 80 0 / 0)); } -.use-cases { - --padding-left: 4rem; - --padding-right: 10rem; -} - .use-cases section { - padding: 2rem; + padding-inline: 3rem; } .use-cases { - width: 50rem; + width: 100%; } .use-cases > section .spotlight > img { display: block; } +h2:has(+ .use-cases) { + margin-block: 0; + padding-block: 1.5em 0.5em; + padding-inline: 1.5rem 0; +} + @media (min-width: 45rem) { + h2:has(+ .use-cases) { + padding-inline-start: 5rem; + } .use-cases { - width: 100%; - --padding-right: 0; + --padding-left: 2rem; + --padding-right: 0; + } + .use-cases section { + padding-inline: 2.5rem; } - .use-cases > section .spotlight { display: grid; grid-template-columns: 1fr 1fr; @@ -87,7 +93,7 @@ main { padding-inline: 0; } -main > section { +main > * { background: var(--dashV); } main > section > * { diff --git a/js/slide-show.css b/js/slide-show.css index 79bff603e..e51408211 100644 --- a/js/slide-show.css +++ b/js/slide-show.css @@ -3,4 +3,52 @@ By Stephen Band Built 2023-02-22 14:59 */ -slide-show{position:relative;box-sizing:border-box;padding:0;grid-auto-flow:column;grid-auto-columns:100%;grid-auto-rows:min-content;align-items:center;justify-items:stretch;scroll-snap-type:x mandatory;scroll-snap-stop:always;-webkit-scroll-behavior:smooth;scroll-behavior:smooth;overscroll-behavior-x:contain;-ms-overflow-style:none;scrollbar-width:none;padding-left:var(--padding-left, 0);padding-right:var(--padding-right, 0);scroll-padding-left:var(--padding-left, 0);scroll-padding-right:var(--padding-right, 0)}slide-show:not(:defined){display:grid;overflow:scroll;overflow-y:hidden}slide-show:not(:defined)>[slot]{display:none!important}.loading slide-show{-webkit-scroll-behavior:auto;scroll-behavior:auto}slide-show::-webkit-scrollbar{display:none}slide-show:not(:defined)>[slot]{display:none}slide-show>*{scroll-snap-align:center}slide-show:-webkit-full-screen{align-content:center}slide-show:fullscreen{align-content:center} + slide-show{ + position:relative; + box-sizing:border-box; + padding:0; + grid-auto-flow:column; + grid-auto-columns:100%; + grid-auto-rows:min-content; + align-items:center; + justify-items:stretch; + scroll-snap-type:x mandatory; + scroll-snap-stop:always; + -webkit-scroll-behavior:smooth; + scroll-behavior:smooth; + overscroll-behavior-x:contain; + -ms-overflow-style:none; + scrollbar-width:none; + padding-left:var(--padding-left, 0); + padding-right:var(--padding-right, 0); + scroll-padding-left:var(--padding-left, 0); + scroll-padding-right:var(--padding-right, 0) +} +slide-show:not(:defined){ + display:grid; + overflow:scroll; + overflow-y:hidden +} +slide-show:not(:defined)>[slot]{ + display:none!important +} +.loading slide-show{ + -webkit-scroll-behavior:auto; + scroll-behavior:auto +} +slide-show::-webkit-scrollbar{ + display:none +} +slide-show:not(:defined)>[slot]{ + display:none +} +slide-show>*{ + scroll-snap-align:center +} +slide-show:-webkit-full-screen{ + align-content:center +} +slide-show:fullscreen{ + align-content:center +} + \ No newline at end of file