=Jakevan latest

Jake Vanderwerf

2026-02-10 06b8cd3115cece332e193181928d868141dfc465

 all.css

@@ -5,7 +5,7 @@
Author:         Jake
Author URI:     https://jakevan.ca/
Template:       jvb-theme
Version:        0.1.0
Version:        0.1.5
!*/
:root{
   --filter: grayscale(.3) sepia(.4);
@@ -265,3 +265,866 @@
   url('./assets/fonts/montserrat-v31-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/*** FONTS END ***/

.design a, a.design{
   color: var(--red-0);
}
.design a:hover, a.design:hover {
   background-color: var(--red-0);
   color: var(--red-200);
}
.development a, a.development {
   color: var(--orange-0);
}
.development a:hover, a.development:hover {
   background-color: var(--orange-0);
   color: var(--orange-200);
}
.strategy a, a.strategy {
   color: var(--green-0);
}
.strategy a:hover, a.strategy:hover {
   background-color: var(--green-0);
   color: var(--green-200);
}
.art a, a.art {
   color: var(--blue-0);
}
.art a:hover, a.art:hover {
   background-color: var(--blue-0);
   color: var(--blue-200);
}
.writing a, a.writing {
   color: var(--purple-0);
}
.writing a:hover, a.writing:hover {
   background-color: var(--purple-0);
   color: var(--purple-200);
}

li {
   list-style: inside;
   padding-left: 1em;
}

.dashboard li {
   list-style: none;
   padding-left: 0;
}

.condensed.condensed a {
   color: var(--contrast);
   border-radius: 0;
   border-bottom: 2px solid var(--action-0);
}
.condensed .design a {
   border-color: var(--red-0);
}
.condensed .development a {
   border-color: var(--orange-0);
}
.condensed .strategy a {
   border-color: var(--green-0);
}
.condensed .art a {
   border-color: var(--blue-0);
}
.condensed .writing a {
   border-color: var(--purple-0);
}

.intro + nav {
   grid-column: full;
}
   .intro + nav ul {
      width: 100%;
   }
   .intro + nav li,
   .intro + nav a {
      min-height: var(--chip_);
      border-radius: 8px 0 8px 0!important;
   }
   .intro + nav li{
      width: 23%;
   }


:is(h1, h2, h3, h4, h5, h6) {
   margin: 1.5em auto .25em 1.5rem;
}
h1 {
   margin: 0 auto .25em 1.5rem;
}
.pre-footer {
   background: var(--base);
   padding: 3rem 0 2rem;
}
.pre-footer p {
   margin: 0 auto .25rem 1rem;
}
.pre-footer a {
   background-color: var(--action-0);
   color: var(--action-contrast);
}

footer {
   margin: 0;
   padding: 1rem 2rem;
}
footer p {
   text-align: left;
}

.buttons {
   margin: 1rem auto 1rem 1.5rem;
}

footer nav.condensed ul {
   --justify: flex-start;
   --gap: 0 .5rem;
   margin-bottom: 1rem;
}

header {
   justify-content: center;
   gap: 1rem;
}
header .icon-logo {
   --w: var(--chipchip);
}
header .icon-jakevan {
   --w: var(--btn_);
   margin-left: 1rem;
}
header p {
   width: max-content;
}
#theme-switch {
   position: absolute;
   left: 1rem;
}
section.intro {
   --w: min(40vw, 350px);
   height: max-content;
}
   section.intro .icon {
      margin: 0;
   }
   section.intro h1 {
      max-width: var(--w);
   }
.home .media-text {
   --w: min(40vw, 350px);
   height: max-content;
}
.home .media-text figure,
.home .media-text >div {
   margin: 0;
   width: var(--w);
   padding: 2rem 0 2rem 2rem;
}
.home h1 {
   font-size: var(--txt-medium);
   font-family: var(--body);
   font-weight: var(--fw-b-light);
   text-transform: none;
   margin: 0;
}
@media (min-width:768px) {
   .home h1 {
      font-size: var(--txt-x-large);
   }
}
@media (max-width: 768px) {
   footer, .pre-footer {
      padding-right: var(--btn_);
   }
}

main > section:nth-of-type(even) {
   background-color: var(--base-100);
   max-width: 100vw;
   padding: 3rem 0;
}
main > section > * {
   width: 100%;
   max-width: var(--content);
   margin-left: 1.5rem;
   margin-right: auto;
}
main > section:nth-of-type(even) > * {
   max-width: var(--content);
}

main > section.callout:last-of-type {
   margin-bottom: 0;
}

nav.fixed.bottom {
   transition: var(--trans-size);
}
.drawer.open + .fixed.bottom {
   width: calc(100% - 240px);
   transition: var(--trans-size);
}

.cover.alt {
   overflow: visible;
   height: 45vh;
   min-height: 45vh;
   padding:0;
}
.cover.alt::before {
   display: none;
}

.cover.alt + #top {
   max-width: 100%;
   margin: 0 var(--btn_) 0 0!important;
   width: 100%;
   z-index: var(--z-1);
}

.cover.alt + #top#top h1 {
   margin: 1rem 0 0;
   padding-right: 1rem;
   text-align: right;
}

.cover.alt img {
   object-fit: cover;
   width:100%;
   height: 100%;
   border-radius: 0 0 10rem 10rem;
   transition: var(--trans-transform);
}
.cover.alt div {
   max-width: none;
}

.cover.art {
   --color-0: var(--blue-0);
   --color-1: var(--blue-50);
   --color-2: var(--blue-100);
   --color-3: var(--blue-200);
}
.cover.design {
   --color-0: var(--red-0);
   --color-1: var(--red-50);
   --color-2: var(--red-100);
   --color-3: var(--red-200);
}
.cover.development {
   --color-0: var(--orange-0);
   --color-1: var(--orange-50);
   --color-2: var(--orange-100);
   --color-3: var(--orange-200);
}
.cover.strategy {
   --color-0: var(--green-0);
   --color-1: var(--green-50);
   --color-2: var(--green-100);
   --color-3: var(--green-200);
}
.cover.writing {
   --color-0: var(--purple-0);
   --color-1: var(--purple-50);
   --color-2: var(--purple-100);
   --color-3: var(--purple-200);
}

.cover.art >div:nth-of-type(4n+1) img,
.cover.writing div:nth-of-type(4),
.cover.design div:nth-of-type(4n+1) div,
.cover.development div:nth-of-type(4n+1) div{
   background-color: var(--color-0);
   border-color: var(--color-2);
}

.cover.art >div:nth-of-type(4n+2) img,
.cover.writing div:nth-of-type(3),
.cover.writing div:nth-of-type(5),
.cover.design div:nth-of-type(4n+2) div,
.cover.strategy div:nth-of-type(3n+1),
.cover.development div:nth-of-type(4n+2) div{
   background-color: var(--color-1);
   border-color: var(--color-3);
}
.cover.art >div:nth-of-type(4n+3) img,
.cover.writing div:nth-of-type(2),
.cover.writing div:nth-of-type(6),
.cover.design div:nth-of-type(4n+3) div,
.cover.strategy div:nth-of-type(3n+2) {
   background-color: var(--color-2);
   border-color: var(--color-0);
}
.cover.art >div:nth-of-type(4n+4) img,
.cover.writing div:nth-of-type(1),
.cover.writing div:nth-of-type(7),
.cover.design div:nth-of-type(4n+4) div,
.cover.strategy div:nth-of-type(3n+3) {
   background-color: var(--color-3);
   border-color: var(--color-1);
}


.cover.strategy div,
.cover.development div div,
.cover.art div {
   z-index: 0;
   overflow: hidden;
   background-color: var(--base);
   border: 1vw solid var(--base-100);
}

/*.cover.art {*/
/* display: flex;*/
/* flex-direction: column;*/
/* align-items: center;*/
/* position: relative;*/
/* --width: 48vh;*/
/* --half: calc(var(--width) / 2);*/
/* --quarter: calc(var(--half) / 2);*/
/* --offHalf: calc(var(--half) - 3vw);*/
/*}*/
/* .cover.art .img {*/
/*    min-height: var(--width);*/
/*    width: var(--half);*/
/*    overflow: hidden;*/
/*    background-color: transparent!important;*/
/*    border: none;*/
/* }*/
/* .cover.art .img:nth-child(1) {*/

/* }*/
/* .cover.art .img div {*/
/*    aspect-ratio: 1;*/
/*    width: var(--width);*/
/*    border-radius: 50%;*/
/*    min-height: var(--width);*/
/* }*/
/*    .cover.art > div:nth-child(2),*/
/*    .cover.art > div:nth-child(4) {*/
/*       border-radius: 50%;*/
/*       position: absolute;*/
/*       width: 25vw;*/
/*       min-height: 25vw;*/
/*       border-width: .5vw;*/
/*    }*/
/*       .cover.art > div:nth-child(2) {*/
/*          left: 10vw;*/
/*          top: 10vw;*/
/*       }*/
/*       .cover.art > div:nth-child(4) {*/
/*          right: var(--btn_);*/
/*          top: 48vh;*/
/*       }*/
/*       @media (min-width: 768px) {*/

/*          .cover.art > div:nth-child(2),*/
/*          .cover.art > div:nth-child(4) {*/
/*             width: 15vw;*/
/*             min-height: 15vw;*/
/*          }*/
/*          .cover.art > div:nth-child(2) {*/
/*             left: var(--half);*/
/*             top: var(--quarter);*/
/*          }*/
/*          .cover.art > div:nth-child(4) {*/
/*             right: calc(var(--quarter) + 6vw);*/
/*             top: calc(var(--half) + 12vw);*/
/*          }*/
/*       }*/
/*    .cover.art > div:nth-child(1),*/
/*    .cover.art > div:nth-child(3) {*/
/*       position:relative;*/
/*    }*/
/*       .cover.art > div:nth-child(1) {*/
/*          left: var(--quarter);*/
/*       }*/
/*          .cover.art > div:nth-child(1) div {*/
/*             position: absolute;*/
/*             right: 0;*/
/*          }*/
/*       .cover.art > div:nth-child(3) {*/
/*          top: calc(var(--half) * -1);*/
/*          right: var(--quarter);*/
/*       }*/
/*.cover.art .halftone +.halftone {*/
/* transform: rotate(180deg);*/
/* top: var(--width);*/
/* left: 0;*/
/* right: unset;*/
/*}*/

/*.cover.art .img::before {*/
/* content: '';*/
/* filter: invert(1) brightness(0.75) invert(1) saturate(2);*/
/* width:100%;*/
/* height: 50%;*/
/* position:absolute;*/
/* bottom: 0;*/
/*}*/
/*.cover.art .img ~ .img::before {*/
/* bottom: unset;*/
/* top: 0;*/
/*}*/
/*.cover.art .halftone {*/
/* width:50%;*/
/* height: var(--half);*/
/* position: absolute;*/
/* top: 0;*/
/* right: 0;*/
/* background-color:transparent!important;*/
/* border: 1px solid var(--base-50)!important;*/
/* border-top-width: 0!important;*/
/* border-right-width:0!important;*/
/*}*/

.cover.art.alt {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(3, 25vw);
   gap: 0;
   height: max-content;
   padding: 2rem 0 0;
}
.cover.art div {
   background-color: transparent;
   border: none;
}
.cover.art img {
   border-radius: 50%;
   padding: .25rem;
   border: .36em solid var(--blue-0);
   position: relative;
}
   .cover.art .has-img {
      grid-row: span 2;
      grid-column: span 2;
      overflow:hidden;
      position: relative;
      background: transparent!important;
   }

      .cover.art .has-img:first-child {
         grid-row: 2 / span 2;
      }
         .cover.art .has-img img {
            aspect-ratio:1;
            z-index: 0;
            mix-blend-mode: darken;
         }
         .cover.art .has-img:first-child img {
            left: 50%;
         }
         .cover.art .has-img:nth-child(3) img {
            left: -50%;
         }
         .has-img:nth-child(1) .halftone::before {
            background: radial-gradient(#fff 0%,#fff 15%, #888 65%) 0 0 / 1.2em 1.2em, radial-gradient(circle at top right, #fff, #000);
         }
         .has-img:nth-child(3) .halftone::before {
            background: radial-gradient(#fff 0%,#fff 15%, #888 65%) 0 0 / 1.2em 1.2em, radial-gradient(circle at bottom left, #fff, #000);
         }
         .cover.art img {
            border: .36em solid var(--blue-50);
         }
         .has-img:nth-child(1) .halftone::before,
         .has-img:nth-child(1) .halftone::after {
            top:50%;
            z-index: 1;
         }
         .has-img:nth-child(3) .halftone::before,
         .has-img:nth-child(3) .halftone::after {
            bottom:50%;
            z-index: 1;
         }
      .cover.art .has-img .img,
      .cover.art .halftone {
         /*position:absolute;*/
         /*inset: 0;*/
         /*left: 50%;*/
         /*min-width: 50vw;*/
         /*min-height: 50vw;*/
      }

   .cover.art > div:nth-child(2) {
      grid-column: 2;
      left:-2rem;
      bottom: -1.4rem;
      position: relative;
      aspect-ratio: 1;
      /*aspect-ratio: 1;*/
   }
   .cover.art > div:last-of-type {
      grid-column: 3;
      top: -1.6rem;
      right:-2rem;
      position: relative;
      aspect-ratio: 1;
      /*aspect-ratio: 1;*/
   }


.cover.development {
   display: flex;
   flex-direction: column;
   align-items: center;
   --width: 75vh;
   --third: calc(var(--width) / 3);
   --half: calc(var(--width) / 2);
   --quarter: calc(var(--half) / 2);
}

.cover.development div div,
.cover.development div {
   width: var(--third);
   height: var(--third);
   min-height: var(--third);
   aspect-ratio: 1;
   border-radius: 50%;
}

.cover.development div {
   background-color: transparent;
   border: 0;
}
.cover.development > div:nth-of-type(1),
.cover.development > div:nth-of-type(2) {
   position: absolute;
   width: var(--quarter);
   height: var(--half);
   border-radius: 0;
   overflow: hidden;
}


.cover.development div:nth-of-type(3),
.cover.development div:nth-of-type(4),
.cover.development div:nth-of-type(5) {
   background-color: transparent;
   background-image: repeating-radial-gradient(circle, var(--base-50) 0, var(--base-50) 16px, var(--orange-200) 16px, var(--orange-200) 17px);
   border: 1px solid var(--orange-200);
}

.cover.development div div {
   width: var(--half);
   height: var(--half);
}
.cover.development div:nth-of-type(1) div {
   position: absolute;
   right: 0;
}
.cover.development > div:nth-of-type(1) {
   left: 50%;
}
.cover.development div:nth-of-type(2) {
   top:var(--half);
   right: 50%;
}


.cover.design {
   --width: 50vw;
   --half: calc(var(--width) / 2);
   --negHalf: calc(var(--half) * -1);
   display: flex;
   flex-direction: column;
   overflow:visible;
   padding-left:5vw;
   /*transform: rotate(30deg);*/
}
@media (min-width: 768px) {
   .cover.design {
      --width: 27vw;
   }
}
   .cover.design::before {
      content: '';
      position: absolute;
      left: calc(var(--half) + 5vw); /* same as padding-left above */
      width: 2px;
      background-color: var(--base);
      display:block;
      top: 0;
      height: calc(var(--width) * 2.75);
   }
.cover.design > div {
   min-height: var(--width);
   background:transparent;
   border: none;
   position:relative;
   mix-blend-mode:soft-light;
}
   .cover.design > div:nth-of-type(2),
   .cover.design > div:nth-of-type(3) {
      width:var(--half);
      overflow:hidden;
   }
   .cover.design div:nth-of-type(3){
      margin-left: var(--half);
   }
   .cover.design > div:nth-of-type(3) div {
      position: absolute;
      right: 0;
      top:0;
   }
   .cover.design > div:nth-of-type(2){
      top: var(--negHalf);
   }
   .cover.design > div:nth-of-type(3){
      top: calc(var(--negHalf) * 2);
   }
   .cover.design > div:nth-of-type(4){
      top: calc(var(--negHalf) * 3);
   }
.cover.design div div {
   aspect-ratio: 1;
   width: var(--width);
   border-radius:50%;
}


/*.cover.strategy {*/
/* display: flex;*/
/* flex-wrap: wrap;*/
/* justify-content:space-evenly;*/
/* align-items:flex-start;*/
/*}*/
/*.cover.strategy .item {*/
/* width: 30vw;*/
/* aspect-ratio: 1;*/
/* border-radius: 0 50% 50%;*/
/* transform: rotate(45deg);*/
/* box-shadow: rgba(var(--base-rgb), var(--op-5)) var(--shdw);*/
/*}*/
/* .cover.strategy .item img {*/
/*    transform: rotate(-45deg);*/
/* }*/

/*.cover.strategy .crowd {*/
/* width: 100%;*/
/* padding: 3vw 0;*/
/* display: flex;*/
/* flex-wrap: nowrap;*/
/* max-width:none;*/
/* background-color:var(--base-50)!important;*/
/* border: none;*/
/* overflow:visible;*/
/* margin-bottom: 5vw;*/
/*}*/
/* .cover.strategy .crowd div {*/
/*    aspect-ratio: 1;*/
/*    border-radius: 50%;*/
/*    !*border-radius: 0 50% 0 50%;*!*/
/*    !*transform: rotate(30deg);*!*/
/*    min-width: 8vw;*/
/* }*/
/*    .cover.strategy .crowd div {*/
/*       background-color:var(--base-100);*/
/*       border-color: var(--base-50);*/
/*       mix-blend-mode: overlay;*/
/*       position:relative;*/
/*       flex: 1;*/
/*       margin: 0 -2vw;*/
/*    }*/
/*    .cover.strategy .crowd div:nth-of-type(odd){*/
/*       top: 1vw;*/
/*    }*/
/*    .cover.strategy .crowd div:nth-of-type(even){*/
/*       top: -3vw;*/
/*    }*/
.cover.writing {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 40vh;
   --width: 33.3vw;
   --first: calc(var(--width) * .666);
   --second: calc(var(--first) * .666);
   --third: calc(var(--second) * .666);
}
   .cover.writing div {
      width: var(--width);
      aspect-ratio: 1;
      transform: rotate(45deg);
      z-index: 4;
      margin: 0 -6vw;
      box-shadow: rgba(var(--base-rgb),var(--op-5)) var(--shdw);
   }
      .cover.writing div img {
         transform: rotate(-45deg);
      }

   .cover.writing div:nth-of-type(3),
   .cover.writing div:nth-of-type(5) {
      width: var(--first);
      z-index: 3;
      margin: 0 -4vw;
   }
   .cover.writing div:nth-of-type(2),
   .cover.writing div:nth-of-type(6) {
      width: var(--second);
      z-index: 2;
      margin: 0 -3vw;
   }
   .cover.writing div:nth-of-type(1),
   .cover.writing div:nth-of-type(7) {
      width: var(--third);
      z-index: 1;
      margin: 0 -2vw;
   }

/*.halftone {*/
/* background: !* 1 *!*/
/*    var(--pattern,*/
/*    radial-gradient(closest-side, #777, #fff)*/
/*    .25rem/ 1em 1em space),*/
/*    var(--map,*/
/*    linear-gradient(0deg, #888, #fff));*/
/* background-blend-mode: multiply !* 2 *!;*/
/* filter: contrast(21) !* 3 *!*/
/*}*/

/*** THIS ONE WORKS WELL **/

/*.halftone {*/
/* background: linear-gradient(90deg, var(--blue-0), transparent);*/
/* background-blend-mode: color;*/
/*}*/

.halftone::before {
   content: '';
   position:absolute;
   inset:0;
   background: radial-gradient(#fff, #888) 0 0 / 1em 1em, radial-gradient(circle at bottom left, #fff, #000);
   background-blend-mode: multiply;
   filter: contrast(50) blur(2px) contrast(4);
   mix-blend-mode: darken;
}
.halftone::after {
   z-index: 1;
   background: var(--base-50);
   mix-blend-mode: lighten;
   content: '';
   position:absolute;
   inset:0;
}
/**** END THIS ONE WORKS WELL **/
.cover.strategy {
   overflow:visible;
   display: flex;
   justify-content: center;
   --radi: 10vw 10vw;
}
.cover.strategy div {
   height: 30vh;
   min-width: 18vw;
   margin: 0 -.5vw;
   border-color: var(--green-0)!important;
}
   .cover.strategy > div:first-of-type,
   .cover.strategy > div:last-of-type {
      display: none;
   }
   .cover.strategy div:nth-of-type(odd){
      border-radius: 0 0 var(--radi);
      border-top:0;
      z-index: 1;
   }
   .cover.strategy div:nth-of-type(even){
      z-index: 0;
      height:40vh;
      border-bottom: 0;
      position: relative;
      top: 19vh;
      border-radius: var(--radi) 0 0;
   }

.cover.strategy  div:nth-of-type(2) {
   height: 60vh;
}
.cover.strategy  div:nth-of-type(6) {
   height: 30vh;
}


@media (min-width:768px) {
   .cover.writing {
      height: 55vh;
   }
   .cover.strategy {
      --radi: 7.5vw;
   }
   .cover.strategy div {
      min-width: 15vw;
   }
   .cover.strategy div:nth-of-type(even) {
      top: 15vh;
   }

   .cover.strategy > div:first-of-type,
   .cover.strategy > div:last-of-type {
      display: block;
   }
}

.feed-block .item-grid {
   max-width: none;
   padding-right: var(--btn);
}

#top h1 small {
   margin: 0;
   line-height: .5;
}
#top p {
   margin-left: auto;
   font-size:var(--txt-x-small);
}

.cover {
   padding: 1rem;
}
.cover h1 {
   font-size: var(--txt-xxx-large);
   line-height: .75;
   mix-blend-mode: luminosity;
   margin: 0 0 .5rem;
}
.cover .content {
   padding: 1rem 0;
   text-align: right;
   margin-right: var(--btn);
}

h2.subtitle {
   font-weight: var(--fw-h-light);
   text-transform: none;
   font-size: var(--txt-medium);
   margin: .5rem 0;
}

figure {
   margin: 0;
}
.loading[open] .spinner {
   display: none;
}
.loading[open] i.icon {
   --w: var(--txt-enormous);
   background-color: var(--action-0);
   animation: spin .36s var(--trans-fn) infinite;
}


.row.services {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   padding-bottom: 2rem;
}
   .row.services h2 {
      margin: 1.5em 0 .25rem;
      font-size: var(--txt-x-medium);
   }