| | |
| | | /*! |
| | | 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 |
| | |
| | | |
| | | /** 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); |
| | |
| | | /** 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%; |
| | | } |