feat(about): wire bio portraits, swap images, circular frame, widen pull-quote
Portraits (1365 square) rendered as circles via border-radius:50%; parallax tamed to fit. Process figure swapped to dd-mixer-2; Home Our Origin split swapped to dd-pedals. Pull-quote widened 22ch to 44ch.
@@ -94,11 +94,11 @@
|
|||||||
Image2="@member.PortraitImage2"
|
Image2="@member.PortraitImage2"
|
||||||
Alt1="@($"{member.Name} — portrait")"
|
Alt1="@($"{member.Name} — portrait")"
|
||||||
NaturalWidth="1365"
|
NaturalWidth="1365"
|
||||||
NaturalHeight="2048"
|
NaturalHeight="1365"
|
||||||
WindowHeightFraction="0.62"
|
WindowHeightFraction="1.0"
|
||||||
ImageHeight="auto"
|
ImageHeight="auto"
|
||||||
ImageWidth="100%"
|
ImageWidth="100%"
|
||||||
ParallaxSpeed="0.5" />
|
ParallaxSpeed="0.3" />
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
@@ -180,8 +180,8 @@
|
|||||||
@* IMG SLOT D — hands-on-gear inset, the literal proof-of-effort image,
|
@* IMG SLOT D — hands-on-gear inset, the literal proof-of-effort image,
|
||||||
captioned in the rail rather than run full-bleed. *@
|
captioned in the rail rather than run full-bleed. *@
|
||||||
<figure class="movement-figure">
|
<figure class="movement-figure">
|
||||||
<ParallaxImage Image1="img/mixer-bw.jpg"
|
<ParallaxImage Image1="img/dd-mixer-2-bw.jpeg"
|
||||||
Image2="img/mixer.jpg"
|
Image2="img/dd-mixer-2.jpg"
|
||||||
Alt1="Deep DRFT — hands on the gear"
|
Alt1="Deep DRFT — hands on the gear"
|
||||||
NaturalWidth="2048"
|
NaturalWidth="2048"
|
||||||
NaturalHeight="1365"
|
NaturalHeight="1365"
|
||||||
@@ -353,10 +353,14 @@
|
|||||||
new(
|
new(
|
||||||
Name: "Khabran Peters",
|
Name: "Khabran Peters",
|
||||||
Role: "Production · Sound Design · Live",
|
Role: "Production · Sound Design · Live",
|
||||||
Bio: null),
|
Bio: null,
|
||||||
|
PortraitImage1: "img/dd-khabran-bw.jpeg",
|
||||||
|
PortraitImage2: "img/dd-khabran.jpeg"),
|
||||||
new(
|
new(
|
||||||
Name: "Daniel Harvey",
|
Name: "Daniel Harvey",
|
||||||
Role: "Production · Sound Design · Live",
|
Role: "Production · Sound Design · Live",
|
||||||
Bio: "Daniel started on drums at ten and embarked in electronic music at seventeen — synthesizers first. A metalhead at from a young age, he spent ten years as an engineer living near Detroit filling the nights with synthesized tones and rhythms, shaped most of all by modern underground Detroit techno. Art & engineering cannot be separated: custom plugins, hardware recording & performance rigs, the tools behind the tracks are just as important as the finished sound. To him the science and the math matter as much as the beauty — tension and release, built deliberately."),
|
Bio: "Daniel started on drums at ten and embarked in electronic music at seventeen — synthesizers first. A metalhead at from a young age, he spent ten years as an engineer living near Detroit filling the nights with synthesized tones and rhythms, shaped most of all by modern underground Detroit techno. Art & engineering cannot be separated: custom plugins, hardware recording & performance rigs, the tools behind the tracks are just as important as the finished sound. To him the science and the math matter as much as the beauty — tension and release, built deliberately.",
|
||||||
|
PortraitImage1: "img/dd-daniel-bw.jpeg",
|
||||||
|
PortraitImage2: "img/dd-daniel.jpeg"),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -272,16 +272,17 @@
|
|||||||
|
|
||||||
.bio-portrait {
|
.bio-portrait {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid var(--deepdrft-border);
|
border: 1px solid var(--deepdrft-border);
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Graceful-degrade slot shown until a portrait file lands. A flat tonal panel in
|
/* Graceful-degrade slot shown until a portrait file lands. A flat tonal panel in
|
||||||
the navy family with the site's portrait aspect precedent (1365×2048). */
|
the navy family, matching the circular portrait frame. */
|
||||||
.bio-portrait-placeholder {
|
.bio-portrait-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 1365 / 2048;
|
aspect-ratio: 1 / 1;
|
||||||
max-height: 56vh;
|
|
||||||
background:
|
background:
|
||||||
linear-gradient(160deg,
|
linear-gradient(160deg,
|
||||||
color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) 0%,
|
color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) 0%,
|
||||||
@@ -480,7 +481,7 @@
|
|||||||
.pull-quote {
|
.pull-quote {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: -7rem;
|
margin-left: -7rem;
|
||||||
max-width: 22ch;
|
max-width: 44ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pull-eyebrow {
|
.pull-eyebrow {
|
||||||
|
|||||||
@@ -144,10 +144,10 @@
|
|||||||
|
|
||||||
<MudItem xs="12" md="6">
|
<MudItem xs="12" md="6">
|
||||||
<div class="split-right">
|
<div class="split-right">
|
||||||
<ParallaxImage Image1="img/kp-shoulder-bw.jpeg"
|
<ParallaxImage Image1="img/dd-pedals.jpeg"
|
||||||
InvertDirection
|
InvertDirection
|
||||||
NaturalWidth="1365"
|
NaturalWidth="1159"
|
||||||
NaturalHeight="2048"
|
NaturalHeight="1196"
|
||||||
WindowHeightFraction="0.5"
|
WindowHeightFraction="0.5"
|
||||||
ImageHeight="auto"
|
ImageHeight="auto"
|
||||||
ImageWidth="100%"
|
ImageWidth="100%"
|
||||||
|
|||||||
|
After Width: | Height: | Size: 349 KiB |
|
After Width: | Height: | Size: 444 KiB |
|
After Width: | Height: | Size: 368 KiB |
|
After Width: | Height: | Size: 373 KiB |
|
After Width: | Height: | Size: 461 KiB |
|
After Width: | Height: | Size: 553 KiB |
|
After Width: | Height: | Size: 281 KiB |