|
@@ -29,19 +29,19 @@ need to test
|
|
|
(offcanvas nav is self-contained CSS via :target — see .dw-offcanvas.)
|
|
(offcanvas nav is self-contained CSS via :target — see .dw-offcanvas.)
|
|
|
************************************************************/
|
|
************************************************************/
|
|
|
|
|
|
|
|
-// reboot provided body { color }; the theme's reset/bg cover the rest.
|
|
|
|
|
|
|
+/* reboot provided body { color }; the theme's reset/bg cover the rest. */
|
|
|
body { color: #232323; }
|
|
body { color: #232323; }
|
|
|
|
|
|
|
|
-// ---- replacements for dropped Bootstrap partials ----
|
|
|
|
|
|
|
+/* ---- replacements for dropped Bootstrap partials ---- */
|
|
|
|
|
|
|
|
-// images partial: only .img-fluid was used (art page).
|
|
|
|
|
|
|
+/* images partial: only .img-fluid was used (art page). */
|
|
|
.img-fluid {
|
|
.img-fluid {
|
|
|
max-width: 100%;
|
|
max-width: 100%;
|
|
|
height: auto;
|
|
height: auto;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// badge: last.fm stat counts (music) + analytics hit counts. Matches the
|
|
|
|
|
-// former bootstrap/badge output exactly (incl. the theme's top:-1px nudge).
|
|
|
|
|
|
|
+/* badge: last.fm stat counts (music) + analytics hit counts. Matches the */
|
|
|
|
|
+/* former bootstrap/badge output exactly (incl. the theme's top:-1px nudge). */
|
|
|
.badge {
|
|
.badge {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
padding: 0.35em 0.65em;
|
|
padding: 0.35em 0.65em;
|
|
@@ -57,9 +57,9 @@ body { color: #232323; }
|
|
|
top: -1px;
|
|
top: -1px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// alert: contact-form success / error messages (inc/tweaks.php). The BS
|
|
|
|
|
-// colour variants no longer compiled (theme-colors trimmed) — give them
|
|
|
|
|
-// real green/red here.
|
|
|
|
|
|
|
+/* alert: contact-form success / error messages (inc/tweaks.php). The BS */
|
|
|
|
|
+/* colour variants no longer compiled (theme-colors trimmed) — give them */
|
|
|
|
|
+/* real green/red here. */
|
|
|
.alert {
|
|
.alert {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
padding: 1rem;
|
|
padding: 1rem;
|
|
@@ -78,18 +78,18 @@ body { color: #232323; }
|
|
|
border-color: #f1aeb5;
|
|
border-color: #f1aeb5;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// pagination: flex container only. WP paginate_links() emits .page-numbers /
|
|
|
|
|
-// .pagination a, styled in style.css; margin/padding also live there.
|
|
|
|
|
|
|
+/* pagination: flex container only. WP paginate_links() emits .page-numbers / */
|
|
|
|
|
+/* .pagination a, styled in style.css; margin/padding also live there. */
|
|
|
.pagination {
|
|
.pagination {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
list-style: none;
|
|
list-style: none;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// ---- utilities (hand-rolled; replaces bootstrap utilities/api + helpers) ----
|
|
|
|
|
-// Only the ~35 utility classes actually used in the theme markup; values match
|
|
|
|
|
-// the former Bootstrap output exactly. Spacers: 1=.25 2=.5 3=1 4=1.5 5=3rem.
|
|
|
|
|
-// Breakpoints: md=768px, lg=992px, xl=1200px. (mb-n1 was a no-op — BS doesn't
|
|
|
|
|
-// generate negative margins by default — so it's intentionally omitted.)
|
|
|
|
|
|
|
+/* ---- utilities (hand-rolled; replaces bootstrap utilities/api + helpers) ---- */
|
|
|
|
|
+/* Only the ~35 utility classes actually used in the theme markup; values match */
|
|
|
|
|
+/* the former Bootstrap output exactly. Spacers: 1=.25 2=.5 3=1 4=1.5 5=3rem. */
|
|
|
|
|
+/* Breakpoints: md=768px, lg=992px, xl=1200px. (mb-n1 was a no-op — BS doesn't */
|
|
|
|
|
+/* generate negative margins by default — so it's intentionally omitted.) */
|
|
|
.mt-0 { margin-top: 0 !important; }
|
|
.mt-0 { margin-top: 0 !important; }
|
|
|
.mt-1 { margin-top: .25rem !important; }
|
|
.mt-1 { margin-top: .25rem !important; }
|
|
|
.mt-2 { margin-top: .5rem !important; }
|
|
.mt-2 { margin-top: .5rem !important; }
|
|
@@ -107,7 +107,7 @@ body { color: #232323; }
|
|
|
.pb-5 { padding-bottom: 3rem !important; }
|
|
.pb-5 { padding-bottom: 3rem !important; }
|
|
|
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
|
|
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
|
|
|
.d-flex { display: flex !important; }
|
|
.d-flex { display: flex !important; }
|
|
|
-.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } // was in bootstrap/helpers (position); header navbar full-width fixed
|
|
|
|
|
|
|
+.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } /* was in bootstrap/helpers (position); header navbar full-width fixed */
|
|
|
.align-items-end { align-items: flex-end !important; }
|
|
.align-items-end { align-items: flex-end !important; }
|
|
|
.justify-content-center { justify-content: center !important; }
|
|
.justify-content-center { justify-content: center !important; }
|
|
|
.float-end { float: right !important; }
|
|
.float-end { float: right !important; }
|
|
@@ -132,9 +132,9 @@ body { color: #232323; }
|
|
|
.fs-2 { font-size: 2rem !important; }
|
|
.fs-2 { font-size: 2rem !important; }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// ---- grid (hand-rolled 12-col flexbox; replaces bootstrap/grid + containers) ----
|
|
|
|
|
-// .container base widths/padding are custom in style.css (fixed per breakpoint);
|
|
|
|
|
-// only .container-fluid (full-width bands) + the flex grid live here.
|
|
|
|
|
|
|
+/* ---- grid (hand-rolled 12-col flexbox; replaces bootstrap/grid + containers) ---- */
|
|
|
|
|
+/* .container base widths/padding are custom in style.css (fixed per breakpoint); */
|
|
|
|
|
+/* only .container-fluid (full-width bands) + the flex grid live here. */
|
|
|
.container-fluid {
|
|
.container-fluid {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
padding-right: .75rem;
|
|
padding-right: .75rem;
|
|
@@ -160,26 +160,71 @@ body { color: #232323; }
|
|
|
padding-left: calc(var(--bs-gutter-x) * .5);
|
|
padding-left: calc(var(--bs-gutter-x) * .5);
|
|
|
margin-top: var(--bs-gutter-y);
|
|
margin-top: var(--bs-gutter-y);
|
|
|
}
|
|
}
|
|
|
-$dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 66.666667%, 75%, 83.333333%, 91.666667%, 100%;
|
|
|
|
|
.col { flex: 1 0 0%; }
|
|
.col { flex: 1 0 0%; }
|
|
|
-@for $i from 1 through 12 {
|
|
|
|
|
- .col-#{$i} { flex: 0 0 auto; width: nth($dw-cols, $i); }
|
|
|
|
|
-}
|
|
|
|
|
-@each $bp, $w in (sm: 576px, md: 768px, lg: 992px) {
|
|
|
|
|
- @media (min-width: $w) {
|
|
|
|
|
- .col-#{$bp} { flex: 1 0 0%; }
|
|
|
|
|
- @for $i from 1 through 12 {
|
|
|
|
|
- .col-#{$bp}-#{$i} { flex: 0 0 auto; width: nth($dw-cols, $i); }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+.col-1 { flex: 0 0 auto; width: 8.333333%; }
|
|
|
|
|
+.col-2 { flex: 0 0 auto; width: 16.666667%; }
|
|
|
|
|
+.col-3 { flex: 0 0 auto; width: 25%; }
|
|
|
|
|
+.col-4 { flex: 0 0 auto; width: 33.333333%; }
|
|
|
|
|
+.col-5 { flex: 0 0 auto; width: 41.666667%; }
|
|
|
|
|
+.col-6 { flex: 0 0 auto; width: 50%; }
|
|
|
|
|
+.col-7 { flex: 0 0 auto; width: 58.333333%; }
|
|
|
|
|
+.col-8 { flex: 0 0 auto; width: 66.666667%; }
|
|
|
|
|
+.col-9 { flex: 0 0 auto; width: 75%; }
|
|
|
|
|
+.col-10 { flex: 0 0 auto; width: 83.333333%; }
|
|
|
|
|
+.col-11 { flex: 0 0 auto; width: 91.666667%; }
|
|
|
|
|
+.col-12 { flex: 0 0 auto; width: 100%; }
|
|
|
|
|
+@media (min-width: 576px) {
|
|
|
|
|
+ .col-sm { flex: 1 0 0%; }
|
|
|
|
|
+ .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
|
|
|
|
|
+ .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
|
|
|
|
|
+ .col-sm-3 { flex: 0 0 auto; width: 25%; }
|
|
|
|
|
+ .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
|
|
|
|
|
+ .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
|
|
|
|
|
+ .col-sm-6 { flex: 0 0 auto; width: 50%; }
|
|
|
|
|
+ .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
|
|
|
|
|
+ .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
|
|
|
|
|
+ .col-sm-9 { flex: 0 0 auto; width: 75%; }
|
|
|
|
|
+ .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
|
|
|
|
|
+ .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
|
|
|
|
|
+ .col-sm-12 { flex: 0 0 auto; width: 100%; }
|
|
|
|
|
+}
|
|
|
|
|
+@media (min-width: 768px) {
|
|
|
|
|
+ .col-md { flex: 1 0 0%; }
|
|
|
|
|
+ .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
|
|
|
|
|
+ .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
|
|
|
|
|
+ .col-md-3 { flex: 0 0 auto; width: 25%; }
|
|
|
|
|
+ .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
|
|
|
|
|
+ .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
|
|
|
|
|
+ .col-md-6 { flex: 0 0 auto; width: 50%; }
|
|
|
|
|
+ .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
|
|
|
|
|
+ .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
|
|
|
|
|
+ .col-md-9 { flex: 0 0 auto; width: 75%; }
|
|
|
|
|
+ .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
|
|
|
|
|
+ .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
|
|
|
|
|
+ .col-md-12 { flex: 0 0 auto; width: 100%; }
|
|
|
|
|
+}
|
|
|
|
|
+@media (min-width: 992px) {
|
|
|
|
|
+ .col-lg { flex: 1 0 0%; }
|
|
|
|
|
+ .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
|
|
|
|
|
+ .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
|
|
|
|
|
+ .col-lg-3 { flex: 0 0 auto; width: 25%; }
|
|
|
|
|
+ .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
|
|
|
|
|
+ .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
|
|
|
|
|
+ .col-lg-6 { flex: 0 0 auto; width: 50%; }
|
|
|
|
|
+ .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
|
|
|
|
|
+ .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
|
|
|
|
|
+ .col-lg-9 { flex: 0 0 auto; width: 75%; }
|
|
|
|
|
+ .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
|
|
|
|
|
+ .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
|
|
|
|
|
+ .col-lg-12 { flex: 0 0 auto; width: 100%; }
|
|
|
}
|
|
}
|
|
|
@media (min-width: 768px) { .offset-md-1 { margin-left: 8.333333%; } }
|
|
@media (min-width: 768px) { .offset-md-1 { margin-left: 8.333333%; } }
|
|
|
@media (min-width: 992px) { .offset-lg-1 { margin-left: 8.333333%; } }
|
|
@media (min-width: 992px) { .offset-lg-1 { margin-left: 8.333333%; } }
|
|
|
|
|
|
|
|
-// ---- list-group (hand-rolled; replaces bootstrap/list-group) ----
|
|
|
|
|
-// Base only; context overrides (ul.nav, .list-group-horizontal, #music) live in
|
|
|
|
|
-// style.css. Resolved values: body-color #232323, body-bg #d3d3d3 (the gray
|
|
|
|
|
-// rows on music/analytics), border #dee2e6, radius .375rem.
|
|
|
|
|
|
|
+/* ---- list-group (hand-rolled; replaces bootstrap/list-group) ---- */
|
|
|
|
|
+/* Base only; context overrides (ul.nav, .list-group-horizontal, #music) live in */
|
|
|
|
|
+/* style.css. Resolved values: body-color #232323, body-bg #d3d3d3 (the gray */
|
|
|
|
|
+/* rows on music/analytics), border #dee2e6, radius .375rem. */
|
|
|
.list-group {
|
|
.list-group {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -203,10 +248,10 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
.list-group-horizontal > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: 0.375rem; border-top-right-radius: 0; }
|
|
.list-group-horizontal > .list-group-item:first-child:not(:last-child) { border-bottom-left-radius: 0.375rem; border-top-right-radius: 0; }
|
|
|
.list-group-horizontal > .list-group-item:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-right-radius: 0.375rem; }
|
|
.list-group-horizontal > .list-group-item:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-right-radius: 0.375rem; }
|
|
|
|
|
|
|
|
-// ---- nav / navbar / card (hand-rolled; replaces those partials) ----
|
|
|
|
|
-// Base only; the theme customizes navbar heavily (.navbar.fixed/.visible,
|
|
|
|
|
-// .navbar .container, .site-title a) and self-styles the front-page .card.
|
|
|
|
|
-// transitions partial dropped entirely (no .fade/.collapse used).
|
|
|
|
|
|
|
+/* ---- nav / navbar / card (hand-rolled; replaces those partials) ---- */
|
|
|
|
|
+/* Base only; the theme customizes navbar heavily (.navbar.fixed/.visible, */
|
|
|
|
|
+/* .navbar .container, .site-title a) and self-styles the front-page .card. */
|
|
|
|
|
+/* transitions partial dropped entirely (no .fade/.collapse used). */
|
|
|
.nav {
|
|
.nav {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
@@ -230,7 +275,7 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
text-decoration: none;
|
|
text-decoration: none;
|
|
|
}
|
|
}
|
|
|
-.card { // front-page only; matches former bootstrap output (bg = body-bg #d3d3d3)
|
|
|
|
|
|
|
+.card { /* front-page only; matches former bootstrap output (bg = body-bg #d3d3d3) */
|
|
|
position: relative;
|
|
position: relative;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -242,9 +287,9 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
border-radius: 0.375rem;
|
|
border-radius: 0.375rem;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// ---- forms + buttons (hand-rolled; replaces those partials) ----
|
|
|
|
|
-// Only used classes. btn-default/btn-danger never compiled (theme-colors
|
|
|
|
|
-// trimmed) so they fall back to the base .btn, same as before.
|
|
|
|
|
|
|
+/* ---- forms + buttons (hand-rolled; replaces those partials) ---- */
|
|
|
|
|
+/* Only used classes. btn-default/btn-danger never compiled (theme-colors */
|
|
|
|
|
+/* trimmed) so they fall back to the base .btn, same as before. */
|
|
|
.form-control {
|
|
.form-control {
|
|
|
display: block;
|
|
display: block;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -315,45 +360,45 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
##################### Overrides ############################
|
|
##################### Overrides ############################
|
|
|
************************************************************/
|
|
************************************************************/
|
|
|
|
|
|
|
|
-// Bootstrap 5.3 changed .table to default --bs-table-bg to --bs-body-bg
|
|
|
|
|
-// (it was transparent in 5.2). Keep the About icon grid transparent.
|
|
|
|
|
|
|
+/* Bootstrap 5.3 changed .table to default --bs-table-bg to --bs-body-bg */
|
|
|
|
|
+/* (it was transparent in 5.2). Keep the About icon grid transparent. */
|
|
|
.table.icons {
|
|
.table.icons {
|
|
|
--bs-table-bg: transparent;
|
|
--bs-table-bg: transparent;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// Sprite icons (dw_icon() / <use href="#dw-…">, from the FA Pro kit → icons.svg).
|
|
|
|
|
-// Sized like a font icon: 1em square, inherits text color.
|
|
|
|
|
|
|
+/* Sprite icons (dw_icon() / <use href="#dw-…">, from the FA Pro kit → icons.svg). */
|
|
|
|
|
+/* Sized like a font icon: 1em square, inherits text color. */
|
|
|
.dw-icon {
|
|
.dw-icon {
|
|
|
width: 1em;
|
|
width: 1em;
|
|
|
height: 1em;
|
|
height: 1em;
|
|
|
fill: currentColor;
|
|
fill: currentColor;
|
|
|
vertical-align: -0.125em;
|
|
vertical-align: -0.125em;
|
|
|
}
|
|
}
|
|
|
-// Social icons (was fa-2x). Baseline-aligned since they stand alone.
|
|
|
|
|
|
|
+/* Social icons (was fa-2x). Baseline-aligned since they stand alone. */
|
|
|
.dw-icon-2x {
|
|
.dw-icon-2x {
|
|
|
width: 2em;
|
|
width: 2em;
|
|
|
height: 2em;
|
|
height: 2em;
|
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// Offcanvas top-nav — self-contained, CSS-only (replaces Bootstrap's offcanvas
|
|
|
|
|
-// component + JS). The brand link is <a href="#nav">, so :target drives
|
|
|
|
|
-// the open state; a backdrop <a href="#"> and the × link close it. Tradeoffs vs
|
|
|
|
|
-// the BS JS version: no ESC-to-close, no focus-trap, no body-scroll-lock.
|
|
|
|
|
|
|
+/* Offcanvas top-nav — self-contained, CSS-only (replaces Bootstrap's offcanvas */
|
|
|
|
|
+/* component + JS). The brand link is <a href="#nav">, so :target drives */
|
|
|
|
|
+/* the open state; a backdrop <a href="#"> and the × link close it. Tradeoffs vs */
|
|
|
|
|
+/* the BS JS version: no ESC-to-close, no focus-trap, no body-scroll-lock. */
|
|
|
.dw-offcanvas {
|
|
.dw-offcanvas {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
top: 0;
|
|
top: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
right: 0;
|
|
right: 0;
|
|
|
- z-index: 1045; // above .navbar.fixed-top (1030)
|
|
|
|
|
|
|
+ z-index: 1045; /* above .navbar.fixed-top (1030) */
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
- height: 85px; // match the scroll-up navbar dropdown (~84.6px)
|
|
|
|
|
|
|
+ height: 85px; /* match the scroll-up navbar dropdown (~84.6px) */
|
|
|
visibility: hidden;
|
|
visibility: hidden;
|
|
|
transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
|
transition: transform 0.3s ease-in-out, visibility 0.3s;
|
|
transition: transform 0.3s ease-in-out, visibility 0.3s;
|
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
|
- background: rgba(72, 76, 87, 0.7); // footer color (#484c57), translucent
|
|
|
|
|
|
|
+ background: rgba(72, 76, 87, 0.7); /* footer color (#484c57), translucent */
|
|
|
backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
|
}
|
|
}
|
|
|
.dw-offcanvas:target {
|
|
.dw-offcanvas:target {
|
|
@@ -364,7 +409,7 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
display: none;
|
|
display: none;
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
inset: 0;
|
|
inset: 0;
|
|
|
- z-index: 1040; // below .dw-offcanvas
|
|
|
|
|
|
|
+ z-index: 1040; /* below .dw-offcanvas */
|
|
|
background: rgba(0, 0, 0, 0.4);
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
}
|
|
}
|
|
|
.dw-offcanvas:target ~ .dw-offcanvas-backdrop {
|
|
.dw-offcanvas:target ~ .dw-offcanvas-backdrop {
|
|
@@ -376,9 +421,9 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// Gallery carousel — CSS scroll-snap (replaces the Bootstrap carousel on the
|
|
|
|
|
-// art page). Swipe / trackpad / scrollbar natively; prev-next + arrow keys via
|
|
|
|
|
-// a tiny vanilla script (js/art.js). No autoplay (was 5s) by design.
|
|
|
|
|
|
|
+/* Gallery carousel — CSS scroll-snap (replaces the Bootstrap carousel on the */
|
|
|
|
|
+/* art page). Swipe / trackpad / scrollbar natively; prev-next + arrow keys via */
|
|
|
|
|
+/* a tiny vanilla script (js/art.js). No autoplay (was 5s) by design. */
|
|
|
.dw-carousel {
|
|
.dw-carousel {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
}
|
|
}
|
|
@@ -387,10 +432,10 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
overflow-x: auto;
|
|
overflow-x: auto;
|
|
|
scroll-snap-type: x mandatory;
|
|
scroll-snap-type: x mandatory;
|
|
|
scroll-behavior: smooth;
|
|
scroll-behavior: smooth;
|
|
|
- scrollbar-width: none; // Firefox
|
|
|
|
|
- &::-webkit-scrollbar {
|
|
|
|
|
- display: none; // WebKit
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ scrollbar-width: none; /* Firefox */
|
|
|
|
|
+}
|
|
|
|
|
+.dw-carousel-track::-webkit-scrollbar {
|
|
|
|
|
+ display: none; /* WebKit */
|
|
|
}
|
|
}
|
|
|
.dw-carousel-slide {
|
|
.dw-carousel-slide {
|
|
|
flex: 0 0 100%;
|
|
flex: 0 0 100%;
|
|
@@ -426,10 +471,10 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// Studio hero — vanilla fade-carousel (replaces Bootstrap carousel-fade + the
|
|
|
|
|
-// backstretch background). #studio-caro keeps its caro-grad* solid-colour
|
|
|
|
|
-// classes + 1s transition from style.css; the bg layer / <video> show through
|
|
|
|
|
-// when the gradient is caro-grad5 (transparent). Driven by js/studio.js.
|
|
|
|
|
|
|
+/* Studio hero — vanilla fade-carousel (replaces Bootstrap carousel-fade + the */
|
|
|
|
|
+/* backstretch background). #studio-caro keeps its caro-grad* solid-colour */
|
|
|
|
|
+/* classes + 1s transition from style.css; the bg layer / <video> show through */
|
|
|
|
|
+/* when the gradient is caro-grad5 (transparent). Driven by js/studio.js. */
|
|
|
#studio-caro {
|
|
#studio-caro {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
@@ -449,10 +494,10 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
object-fit: cover;
|
|
|
- display: none; // shown per-slide by studio.js (camera → Media, tv → fact intro)
|
|
|
|
|
|
|
+ display: none; /* shown per-slide by studio.js (camera → Media, tv → fact intro) */
|
|
|
}
|
|
}
|
|
|
.dw-studio-tv {
|
|
.dw-studio-tv {
|
|
|
- filter: saturate(0); // grayscale, as it was behind the About fact slides
|
|
|
|
|
|
|
+ filter: saturate(0); /* grayscale, as it was behind the About fact slides */
|
|
|
}
|
|
}
|
|
|
.dw-fade-carousel {
|
|
.dw-fade-carousel {
|
|
|
position: relative;
|
|
position: relative;
|
|
@@ -466,7 +511,7 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
transition: opacity 0.8s ease;
|
|
transition: opacity 0.8s ease;
|
|
|
}
|
|
}
|
|
|
.dw-fade-slide.active {
|
|
.dw-fade-slide.active {
|
|
|
- position: relative; // the active slide defines the track height
|
|
|
|
|
|
|
+ position: relative; /* the active slide defines the track height */
|
|
|
opacity: 1;
|
|
opacity: 1;
|
|
|
visibility: visible;
|
|
visibility: visible;
|
|
|
}
|
|
}
|
|
@@ -476,7 +521,7 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// Studio tab panes — vanilla show/hide (replaces Bootstrap Tab).
|
|
|
|
|
|
|
+/* Studio tab panes — vanilla show/hide (replaces Bootstrap Tab). */
|
|
|
#studio-tab .tab-pane {
|
|
#studio-tab .tab-pane {
|
|
|
display: none;
|
|
display: none;
|
|
|
}
|
|
}
|
|
@@ -484,7 +529,7 @@ $dw-cols: 8.333333%, 16.666667%, 25%, 33.333333%, 41.666667%, 50%, 58.333333%, 6
|
|
|
display: block;
|
|
display: block;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// About fade-carousel indicator dots (replaces Bootstrap .carousel-indicators).
|
|
|
|
|
|
|
+/* About fade-carousel indicator dots (replaces Bootstrap .carousel-indicators). */
|
|
|
.dw-fade-dots {
|
|
.dw-fade-dots {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
bottom: 1.5rem;
|
|
bottom: 1.5rem;
|