Jake Vanderwerf
2 hours ago d3eed75f359581d9e93f4706b094f409c33e7afc
all.css
@@ -1,7 +1,7 @@
/*!
Theme Name:     Jake Van Extension
Theme URI:      https://jakevan.ca
Description:    Jvb-theme child theme, for Jake.
Theme Name:     Martian Infotech Extension
Theme URI:      https://martianit.ca
Description:    Jvb-theme child theme, for Martian Infotech.
Author:         Jake
Author URI:     https://jakevan.ca/
Template:       jvb-theme
@@ -12,81 +12,85 @@
   /** Download your Fonts from: https://gwfh.mranftl.com/ **/
   --font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   --heading: 'Josefin Sans', var(--font-base);
   --body: 'Open Sans', var(--font-base);
   --fw-h: 300;
   --fw-h-light: 300;
   --fw-h-bold: 700;
   --fw-b: 500;
   --fw-b-bold: 800;
   --heading: 'Ailerons', var(--font-base);
   --body: 'Oswald', var(--font-base);
   --fw-h: 500;
   --fw-h-light: 500;
   --fw-h-bold: 500;
   --fw-b: 300;
   --fw-b-bold: 700;
   --fw-b-light: 300;
   /* Colours
   For best results, generate colours from base colours using: https://uicolors.app/generate/
   or sass darken/lighten by 5%: http://scg.ar-ch.org/
   */
   --light-0: #efefef;
   --light-50: #e2e2e2;
   --light-100: #d5d5d5;
   --light-200: #c9c9c9;
   --light-rgb: 239,239,239;
   --light-0: 250,249,250;    /* #faf9fa */
   --light-50: 238,235,238;   /* #eeebee */
   --light-100: 227,221,227;  /* #e3dde3 */
   --light-200: 215,207,215;  /* #d7cfd7 */
   --light-rgb: 250,249,250;
   --dark-0: #151515;
   --dark-50: #222222;
   --dark-100: #2e2e2e;
   --dark-200: #3b3b3b;
   --dark-rgb: 21,21,21;
   --dark-0: 35,31,32;        /* #231f20 */
   --dark-50: 49,43,44;    /* #312b2c */
   --dark-100: 62,55,57;      /* #3e3739 */
   --dark-200: 76,67,69;      /* #4c4345; */
   --dark-rgb: 35,31,32;
   --action-0: #ff0080;
   --action-50: #ff2492;
   --action-100: #ff47a4;
   --action-200: #ff6bb5;
   --action-rgb: 255,0,128;
   --action-0: 5,165,75;      /* #05a54b; */
   --action-50: 6,190,86;     /* #06be56; */
   --action-100: 7,214,97;    /* #07d661; */
   --action-200: 7,239,109;   /* #07ef6d; */
   --action-rgb: 5,165,75;
   --action-contrast: var(--light-0);
   --secondary-0: #D69121;
   --secondary-50: #ffc421;
   --secondary-100: #ffcd44;
   --secondary-200: #ffd768;
   --secondary-rgb: 252,185,0;
   --secondary-contrast: var(--light-0);
   --secondary-0: 255,210,90;    /* #FFD25A; */
   --secondary-50: 255,217,115;/* #ffd973; */
   --secondary-100: 255,244,141;/* #ffe08d; */
   --secondary-200: 255,231,166;/* #ffe7a6; */
   --secondary-rgb: 255,210,90;
   --secondary-contrast: var(--dark-0);
   --success: #20D64E;
   --successLight: #DBFAE3;
   --successDark: #05230D;
   --successBack: var(--successLight);
   --successText: var(--successDark);
   --warning: #D69121;
   --warningLight: #F6E5CB;
   --warningDark: #231806;
   --warningBack: var(--warningLight);
   --warningText: var(--warningDark);
   --error: #CF1616;
   --errorLight: #F9C8C8;
   --errorDark: #4A0808;
   --errorBack: var(--errorLight);
   --errorText: var(--errorDark);
   --success: 5,165,75;    /* #05a54b; */
   --successLight: 222,254,236;/* #defeec; */
   --successDark: 1,41,19;    /* #012913; */
   --warning: 214,145,33;     /* #D69121; */
   --warningLight: 246,229,203;/* #F6E5CB; */
   --warningDark: 35,24,6;    /* #231806; */
   --error: 240,128,128;      /* #F08080; */
   --errorLight: 253,242,242; /* #fdf2f2; */
   --errorDark: 55,7,7;    /* #370707; */
   --base: var(--light-0);
   --base-50: var(--light-50);
   --base-100: var(--light-100);
   --base-200: var(--light-200);
   --base-rgb: var(--light-rgb);
   --contrast: var(--dark-0);
   --contrast-50: var(--dark-50);
   --contrast-100: var(--dark-100);
   --contrast-200: var(--dark-200);
   --contrast-rgb: var(--dark-rgb);
   --successBack: var(--successLight);
   --successText: var(--successDark);
   --warningBack: var(--warningLight);
   --warningText: var(--warningDark);
   --errorBack: var(--errorLight);
   --errorText: var(--errorDark);
}
body:has(#theme-switcher:checked){
   --action-50: #db006e;
   --action-100: #b8005c;
   --action-200: #94004a;
   --secondary-50: #d89f00;
   --secondary-100: #b58500;
   --secondary-200: #916a00;
   --action-50: 4,140,64;     /* #048c40; */
   --action-100: 4,115,52;    /* #047334; */
   --action-200: 3,91,41;     /* #035b29; */
   --secondary-50: 255,203,64;   /* #ffcb40; */
   --secondary-100: 255,196,39;/* #ffc427; */
   --secondary-200: 255,189,13;/* #ffbd0d; */
   --contrast: var(--light-0);
   --contrast-50: var(--light-50);
@@ -111,4 +115,238 @@
/** Download your Fonts from: https://gwfh.mranftl.com/
use ./assets/fonts/ as a base
**/
/* oswald-300 - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Oswald';
   font-style: normal;
   font-weight: 300;
   src: url('./assets/fonts/oswald-v57-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/oswald-v57-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* oswald-700 - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Oswald';
   font-style: normal;
   font-weight: 700;
   src: url('./assets/fonts/oswald-v57-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/oswald-v57-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* oswald-700 - latin */
@font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   font-family: 'Ailerons';
   font-style: normal;
   font-weight: 500;
   src: url('./assets/fonts/Ailerons-Typeface.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('./assets/fonts/Ailerons-Typeface.otf') format('opentype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
html {
   font-size: 18px;
}
/*** FONTS END ***/
div.logo {
   display: flex;
   gap: 1.5rem;
   align-items: center;
   margin: 0 auto;
}
   .logo #martian-infotech-logo {
      width: var(--btn);
      height: var(--btn);
   }
   .logo #martian-infotech {
      height: var(--chipchip);
      width: auto;
   }
   svg #Infotech {
      fill: rgb(var(--contrast))!important;
   }
.pre-header .socials {
   display: flex;
   justify-content: flex-end;
   list-style: none;
   gap: .5rem;
   width:100%;
}
.sub-header {
   position: sticky;
   top: -2rem;
   transition: top var(--trans-base);
   background-color: rgb(var(--base))!important;
   box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);
}
   .sub-header p {
      margin: 0;
      text-align: center;
   }
.scroll-up .sub-header {
   top: calc(var(--btn) + var(--chip_) - 2px);
}
/*nav.condensed {*/
/* width: 100%;*/
/*}*/
/* nav.condensed ul {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: center;*/
/*    font-family: var(--body);*/
/* }*/
/* nav.condensed ul a {*/
/*    text-transform: uppercase;*/
/* }*/
   footer {
      margin-top: 1rem;
   }
   .pre-footer {
      background-color: rgb(var(--base));
      text-align: center;
      padding: 2rem 0;
   }
/*nav.always.fixed ul {*/
/* justify-content: flex-end;*/
/*}*/
/*nav.always.fixed li:has(.socials) {*/
/* margin-top: 2rem;*/
/*}*/
.intro {
   margin: 2rem auto 4rem!important;
   gap: 1.5rem;
   align-items: center;
   height: max-content;
}
.intro h1 {
   margin: 0;
   font-size: var(--txt-xx-large);
}
.intro svg {
   width: 40vw;
   height: auto;
   margin: 0 auto;
}
   @media (min-width:768px){
      .intro svg {
         width: 50vw;
         margin: unset;
      }
      .intro h1 {
         font-size: var(--txt-xxx-large);
         max-width: 50vw;
      }
   }
main > section:nth-of-type(even) {
   background-color: rgb(var(--base-100));
   /*max-width: 100vw;*/
   padding: 3rem 0;
}
/*main > section > * {*/
/* width: 100%;*/
/* max-width: var(--content);*/
/*}*/
/*main > section:nth-of-type(even) > * {*/
/* max-width: var(--wide);*/
/*}*/
.callout a {
   color: rgb(var(--action-0));
}
   .callout .buttons a {
      color: rgb(var(--action-contrast));
   }
/*.item-grid {*/
/* grid-template-columns: repeat(1, 1fr)!important;*/
/*}*/
.item-grid .item figure {
   max-width: 40vw;
   width: 100%;
}
.item-grid .item > .group {
   width: 100%;
   margin-left: 1rem;
}
/*ul.socials {*/
/* width: 100%;*/
/* --justify: flex-end!important;*/
/* height: 100%!important;*/
/*}*/
/*ul.socials li {*/
/* list-style: none;*/
/*}*/
aside.sub.header {
   background-color: rgb(var(--base));
   text-align: center;
   z-index: var(--z-6);
   position: sticky;
   top: 0;
   left: 0;
   transition: top var(--trans-base);
   --justify: center!important;
}
.scroll-up aside.sub.header {
   top: calc(var(--btn) + var(--chip));
}
:is(h1,h2,h3,h4,h5,h6) small {
   line-height: .9;
}
/*nav a {*/
/* --align: center;*/
/*}*/
.buttons li {
   width: 100%;
}
/*nav.condensed li {*/
/* --dir: row;*/
/*}*/
@media (min-width: 768px) {
   .media-text.row {
      --wrap: nowrap;
   }
}
header > a[rel="home"],
header > .logo {
   margin: 0 auto;
}
.loop li {
   --gap: 1rem;
}
@media (max-width: 767px) {
   .loop li>figure {
      float: unset;
      margin: 0;
      aspect-ratio: unset;
      max-width: none;
   }
}
.home .loop p:has(.read-more) {
   display: none;
}
.loop li > .col.col {
   width: unset;
   max-width: 100%;
}
.media-text > * {
   width: 100%;
   max-width: 50%;
}