/*!
|
Theme Name: Jake Van Extension
|
Theme URI: https://jakevan.ca
|
Description: Jvb-theme child theme, for Jake.
|
Author: Jake
|
Author URI: https://jakevan.ca/
|
Template: jvb-theme
|
Version: 0.1.5
|
!*/
|
:root{
|
--filter: grayscale(.3) sepia(.4);
|
|
/** 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: 'Open Sans', var(--font-base);
|
--body: 'Montserrat', var(--font-base);
|
--fw-h: 900;
|
--fw-h-light: 400;
|
--fw-h-bold: 800;
|
--fw-b: 400;
|
--fw-b-bold: 900;
|
--fw-b-light: 200;
|
|
--txt-small: clamp(0.75rem, calc(0.682rem + 0.341vw), 0.90rem);
|
--txt-x-small: clamp(0.88rem, calc(0.809rem + 0.355vw), 1.05rem);
|
--txt-medium: clamp(1.00rem, calc(0.920rem + 0.400vw), 1.20rem);
|
--txt-x-medium: clamp(1.13rem, calc(1.036rem + 0.466vw), 1.40rem);
|
--txt-large: clamp(1.35rem, calc(1.227rem + 0.614vw), 1.70rem);
|
--txt-x-large:clamp(1.62rem, calc(1.455rem + 0.830vw), 2.10rem);
|
--txt-xx-large: clamp(1.94rem, calc(1.714rem + 1.143vw), 2.60rem);
|
--txt-xxx-large: clamp(2.33rem, calc(2.014rem + 1.591vw), 3.30rem);
|
--txt-enormous: calc(26vh - 4rem);
|
|
/* 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: 237,237,244; /* #ededf4; */
|
--light-50: 227,227,238; /* #e3e3ee; */
|
--light-100: 218,218,232; /* #dadae8; */
|
--light-200: 209,209,227; /* #d1d1e3; */
|
|
--dark-0: 42,43,42; /* #2a2b2a; */
|
--dark-50: 47,48,47; /* #2f302f; */
|
--dark-100: 57,58,57; /* #393a39; */
|
--dark-200: 62,64,62; /* #3e403e; */
|
|
--action-0: 239,118,122; /* #ef767a; */
|
--action-50: 242,141,144; /* #f28d90; */
|
--action-100: 244,164,166; /* #f4a4a6; */
|
--action-200: 247,187,189; /* #f7bbbd; */
|
--action-contrast: var(--light-0);
|
|
--secondary-0: 50,157,203; /* #329dcb; */
|
--secondary-50: 90,177,214; /* #5ab1d6; */
|
--secondary-100: 131,196,224;/* #83c4e0; */
|
--secondary-200: 172,216,234;/* #acd8ea; */
|
--secondary-contrast: var(--light-0);
|
|
--success: 34,197,94; /* #22C55E; */
|
--successLight: 212,237,218;/* #d4edda; */
|
--successDark: 21,87,36; /* #155724; */
|
|
--warning: 232,167,55; /* #E8A737; */
|
--warningLight: 246,229,203;/* #F6E5CB; */
|
--warningDark: 35,24,6; /* #231806; */
|
|
--error: 239,68,68; /* #EF4444; */
|
--errorLight: 248,215,218; /* #f8d7da; */
|
--errorDark: 114,28,36; /* #721c24; */
|
|
|
--red-0: 239,118,122; /* #ef767a; */
|
--red-50: 236,95,100; /* #ec5f64; */
|
--red-100: 234,72,78; /* #ea484e; */
|
--red-200: 231,50,56; /* #e73238; */
|
--red-contrast: var(--dark-0);
|
|
--orange-0: 239,158,118; /* #ef9e76; */
|
--orange-50: 242,174,141; /* #f2ae8d; */
|
--orange-100: 244,190,164; /* #f4bea4; */
|
--orange-200: 247,207,187; /* #f7cfbb; */
|
--orange-contrast: var(--dark-0);
|
|
--yellow-0: 227,190,57; /* #E3BE39; */
|
--yellow-50: 233,205,102; /* #e9cd66; */
|
--yellow-100: 240,219,146; /* #f0db92; */
|
--yellow-200: 246,234,191; /* #f6eabf; */
|
--yellow-contrast: var(--dark-0);
|
|
--green-0: 50,203,130; /* #32cb82; */
|
--green-50: 90,214,155; /* #5ad69b; */
|
--green-100: 131,224,180; /* #83e0b4; */
|
--green-200: 172,234,204; /* #aceacc; */
|
--green-contrast: var(--dark-0);
|
|
--blue-0: 50,157,203; /* #329dcb; */
|
--blue-50: 90,177,214; /* #5ab1d6; */
|
--blue-100: 131,196,224; /* #83c4e0; */
|
--blue-200: 172,216,234; /* #acd8ea; */
|
--blue-contrast: var(--dark-0);
|
|
--purple-0: 186,118,239; /* #ba76ef; */
|
--purple-50: 197,141,242; /* #c58df2; */
|
--purple-100: 209,164,244; /* #d1a4f4; */
|
--purple-200: 220,187,247; /* #dcbbf7; */
|
--purple-contrast: var(--dark-0);
|
|
|
--base: var(--light-0);
|
--base-50: var(--light-50);
|
--base-100: var(--light-100);
|
--base-200: var(--light-200);
|
|
--contrast: var(--dark-0);
|
--contrast-50: var(--dark-50);
|
--contrast-100: var(--dark-100);
|
--contrast-200: var(--dark-200);
|
|
--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: 236,95,100; /* #ec5f64; */
|
--action-100: 234,72,78; /* #ea484e; */
|
--action-200: 231,50,56; /* #e73238; */
|
|
--secondary-50: 40,125,162; /* #287da2; */
|
--secondary-100: 30,94,121; /* #1e5e79; */
|
--secondary-200: 20,62,80; /* #143e50; */
|
|
--contrast: var(--light-0);
|
--contrast-50: var(--light-50);
|
--contrast-100: var(--light-100);
|
--contrast-200: var(--light-200);
|
|
--base: var(--dark-0);
|
--base-50: var(--dark-50);
|
--base-100: var(--dark-100);
|
--base-200: var(--dark-200);
|
|
--successBack: var(--successDark);
|
--successText: var(--successLight);
|
--warningBack: var(--warningDark);
|
--warningText: var(--warningLight);
|
--errorBack: var(--errorDark);
|
--errorText: var(--errorLight);
|
|
--red-50: 236,95,100; /* #ec5f64; */
|
--red-100: 234,72,78; /* #ea484e; */
|
--red-200: 231,50,56; /* #e73238; */
|
--red-contrast: var(--light-0);
|
|
--orange-50: 236,142,95; /* #ec8e5f; */
|
--orange-100: 234,126,72; /* #ea7e48; */
|
--orange-200: 231,110,50; /* #e76e32; */
|
--orange-contrast: var(--light-0);
|
|
--yellow-50: 204,166,29; /* #cca61d; */
|
--yellow-100: 159,130,23; /* #9f8217; */
|
--yellow-200: 115,93,16; /* #735d10; */
|
--yellow-contrast: var(--light-0);
|
|
--green-50: 40,162,104; /* #28a268; */
|
--green-100: 30,121,78; /* #1e794e; */
|
--green-200: 20,80,51; /* #145033; */
|
--green-contrast: var(--light-0);
|
|
--blue-50: 40,125,162; /* #287da2; */
|
--blue-100: 30,94,121; /* #1e5e79; */
|
--blue-200: 20,62,80; /* #143e50; */
|
--blue-contrast: var(--dark-0);
|
|
--purple-50: 163,72,234; /* #a348ea; */
|
--purple-100: 140,27,228; /* #8c1be4; */
|
--purple-200: 112,21,183; /* #7015b7; */
|
--purple-contrast: var(--light-0);
|
}
|
|
body {
|
overflow-x: clip;
|
}
|
/*** FONTS START **/
|
/** Download your Fonts from: https://gwfh.mranftl.com/
|
use ./assets/fonts/ as a base
|
**/
|
/* open-sans-regular - 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: 'Open Sans';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-italic - 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: 'Open Sans';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./assets/fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800 - 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: 'Open Sans';
|
font-style: normal;
|
font-weight: 800;
|
src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800italic - 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: 'Open Sans';
|
font-style: italic;
|
font-weight: 800;
|
src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
|
/* montserrat-200 - 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: 'Montserrat';
|
font-style: normal;
|
font-weight: 200;
|
src: url('./assets/fonts/montserrat-v31-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-200italic - 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: 'Montserrat';
|
font-style: italic;
|
font-weight: 200;
|
src: url('./assets/fonts/montserrat-v31-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-regular - 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: 'Montserrat';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-italic - 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: 'Montserrat';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./assets/fonts/montserrat-v31-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-900 - 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: 'Montserrat';
|
font-style: normal;
|
font-weight: 900;
|
src: url('./assets/fonts/montserrat-v31-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-900italic - 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: 'Montserrat';
|
font-style: italic;
|
font-weight: 900;
|
src: url('./assets/fonts/montserrat-v31-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
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 ***/
|
body.art.art, .art {
|
--action-0: var(--blue-0);
|
--action-50: var(--blue-50)!important;
|
--action-100: var(--blue-100)!important;
|
--action-200: var(--blue-200)!important;
|
--action-contrast: var(--blue-contrast)!important;
|
}
|
body.design.design, .design {
|
--action-0: var(--red-0);
|
--action-50: var(--red-50)!important;
|
--action-100: var(--red-100)!important;
|
--action-200: var(--red-200)!important;
|
--action-contrast: var(--red-contrast)!important;
|
}
|
body.development.development, .development {
|
--action-0: var(--orange-0);
|
--action-50: var(--orange-50)!important;
|
--action-100: var(--orange-100)!important;
|
--action-200: var(--orange-200)!important;
|
--action-contrast: var(--orange-contrast)!important;
|
}
|
body.strategy.strategy, .strategy {
|
--action-0: var(--green-0);
|
--action-50: var(--green-50)!important;
|
--action-100: var(--green-100)!important;
|
--action-200: var(--green-200)!important;
|
--action-contrast: var(--green-contrast)!important;
|
}
|
body.writing.writing, .writing {
|
--action-0: var(--purple-0);
|
--action-50: var(--purple-50)!important;
|
--action-100: var(--purple-100)!important;
|
--action-200: var(--purple-200)!important;
|
--action-contrast: var(--purple-contrast)!important;
|
}
|
body.project.project, .project {
|
--action-0: var(--yellow-0);
|
--action-50: var(--yellow-50)!important;
|
--action-100: var(--yellow-100)!important;
|
--action-200: var(--yellow-200)!important;
|
--action-contrast: var(--yellow-contrast)!important;
|
}
|
|
a {
|
color: rgb(var(--action-0));
|
}
|
a:visited {
|
color: rgb(var(--action-100));
|
}
|
a.current.current,
|
a:hover,
|
a:focus,
|
a:visited:hover,
|
a:visited:focus {
|
background-color: rgb(var(--action-0));
|
color: rgb(var(--action-200));
|
}
|
|
|
li {
|
list-style: inside;
|
padding-left: 1em;
|
}
|
|
.dashboard li {
|
list-style: none;
|
padding-left: 0;
|
}
|
|
.condensed.condensed a {
|
color: rgb(var(--contrast));
|
border-radius: 0;
|
border-bottom: 2px solid rgb(var(--action-0));
|
padding: .25rem 1rem;
|
}
|
.condensed.condensed a:hover,
|
.condensed.condensed a:focus {
|
color: var(--action-contrast);
|
}
|
|
.intro + nav {
|
grid-column: full;
|
margin: 0!important;
|
}
|
/* .intro + nav ul {*/
|
/* width: 100%;*/
|
/* }*/
|
/* .intro + nav li,*/
|
/* .intro + nav a {*/
|
/* min-height: var(--chip_);*/
|
/* }*/
|
|
|
:is(h1, h2, h3, h4, h5, h6) {
|
margin: 1.5em auto .25em 1.5rem;
|
}
|
h1 {
|
margin: 0 auto .25em 1.5rem;
|
}
|
.pre-footer {
|
background: rgb(var(--base));
|
padding: 3rem 0 2rem;
|
}
|
.pre-footer p {
|
margin: 0 auto .25rem 1rem;
|
}
|
.pre-footer a {
|
background-color: rgb(var(--action-0));
|
color: rgb(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;
|
}
|
|
.wp-site-blocks.wp-site-blocks > header {
|
--justify: 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);
|
}
|
}
|
footer {
|
z-index: var(--z-9);
|
padding: 1rem 2rem!important;
|
}
|
@media (min-width:768px) {
|
.w-50 {
|
max-width: calc(50% - 3rem)!important;
|
margin: 0 1rem!important;
|
}
|
}
|
main > * {
|
margin-left: var(--btn)!important;
|
}
|
main > section {
|
max-width: 100vw;
|
padding: 3rem var(--btn) 3rem 1.5rem;
|
margin-left: 0!important;
|
}
|
main > section:nth-of-type(even) {
|
background-color: rgb(var(--base-100));
|
}
|
main > section > * {
|
width: 100%;
|
max-width: var(--content);
|
margin-left: 1.5rem!important;
|
}
|
|
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 {
|
padding: 0;
|
color: rgb(var(--action-0));
|
background-color: rgb(var(--action-200));
|
}
|
.cover.alt {
|
min-height: 0;
|
}
|
.cover > .content {
|
background-color: rgba(var(--base), var(--op-6));
|
width: 100%;
|
margin: 0 !important;
|
color: rgb(var(--contrast));
|
padding: 2rem var(--btn) 2rem 2rem;
|
}
|
.cover h1 {
|
margin: 0;
|
}
|
.cover > img {
|
margin-left: 0!important;
|
}
|
.cover.alt > svg {
|
max-width: none;
|
margin: 0 auto!important;
|
}
|
.cover.alt + header#top {
|
margin: 0!important;
|
grid-column: full;
|
padding-right: var(--btn_);
|
}
|
.cover.alt + header h1 {
|
line-height: .75;
|
margin: 0 0 0 .5rem;
|
}
|
.cover.alt + #top h1 small {
|
line-height: 1;
|
}
|
|
@media (min-width: 768px) {
|
.cover.alt > svg {
|
max-width: 40vw;
|
margin: 0!important;
|
}
|
.cover.alt + #top {
|
flex-direction: column;
|
position: absolute;
|
right: 0;
|
top: 35vw;
|
max-width: 60vw;
|
grid-column: narrow;
|
z-index: 10;
|
color: rgb(var(--action-contrast));
|
padding: 0 var(--btn_) 0 0!important;
|
}
|
.cover.alt + #top a {
|
background-color: rgba(var(--action-0),var(--op-5));
|
color: rgb(var(--action-contrast));
|
}
|
.cover.alt + #top a:hover,
|
.cover.alt + #top a:focus {
|
background-color: rgb(var(--action-contrast));
|
color: rgb(var(--action-0));
|
}
|
}
|
|
.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: rgb(var(--base-50));
|
mix-blend-mode: lighten;
|
content: '';
|
position:absolute;
|
inset:0;
|
}
|
/**** END THIS ONE WORKS WELL **/
|
|
#top h1 small {
|
margin: 0;
|
line-height: .5;
|
}
|
#top p {
|
margin-left: auto;
|
font-size:var(--txt-x-small);
|
}
|
|
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: rgb(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);
|
}
|
|
section#gallery div {
|
max-width: var(--wide);
|
display: grid;
|
gap: 5px;
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-auto-rows: 200px;
|
}
|
#gallery div figure img {
|
width:100%;
|
height: 100%;
|
object-fit: cover;
|
transform: scale(1);
|
transition: var(--trans-transform);
|
}
|
#gallery div figure:hover img {
|
transform: scale(1.05);
|
}
|
|
#gallery div figure:nth-of-type(3n+1) {
|
padding: 15px;
|
}
|
#gallery div figure:nth-of-type(5n+1) {
|
padding: 25px;
|
}
|
/*section#gallery div img:nth-of-type(3n+1) {*/
|
/* padding: 1rem;*/
|
/*}*/
|
|
#gallery div figure:nth-of-type(6n + 1),
|
#gallery div figure:nth-of-type(6n + 5){
|
grid-row: span 2;
|
}
|
|
#gallery div figure:nth-of-type(6n + 0),
|
#gallery div figure:nth-of-type(6n + 6){
|
grid-column: span 2;
|
}
|
#gallery div figure:nth-of-type(6n+4) {
|
grid-column: span 2;
|
grid-row: span 2;
|
}
|
|
/*#gallery div img:nth-of-type(3n+2) {*/
|
/* grid-row: span 1;*/
|
/* grid-column: span 2;*/
|
/*}*/
|
|
|
.needs-wants.needs-wants {
|
max-width: var(--wide);
|
margin: 0!important;
|
}
|
details.info {
|
max-width: var(--wider);
|
}
|
.needs-wants .info{
|
max-width: var(--content);
|
}
|
.needs-wants li {
|
list-style: none;
|
padding:0;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: flex-start;
|
}
|
.needs-wants h3 {
|
margin: 4rem 0 2rem;
|
}
|
@media (min-width: 768px) {
|
|
.needs-wants img {
|
max-width: 45%;
|
margin-right: 4%;
|
position:sticky;
|
top: var(--btnbtn);
|
}
|
.needs-wants img + .info {
|
max-width: 50%;
|
display: inline-block;
|
}
|
}
|
|
.term-list .title {
|
text-transform: none;
|
padding: 0;
|
}
|
|
#summary .summary {
|
display: grid;
|
grid-template-columns: repeat(1, 1fr);
|
max-width: var(--wide);
|
}
|
#summary .summary .term-list {
|
height: var(--chipchip);
|
}
|
#summary .summary > li {
|
list-style: none;
|
height: var(--chipchip)
|
}
|
#summary .summary .icon {
|
--w: 1.5em;
|
margin-right: 1rem;
|
}
|
|
#summary .summary > li span:first-of-type {
|
margin-right: 1.5rem;
|
}
|
|
.project-list.item-grid.list-view img {
|
width: 100%;
|
}
|
.project-list h3 {
|
font-size: var(--txt-large);
|
margin: 0;
|
}
|
|
@media (min-width: 768px) {
|
#summary .summary {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
}
|
|
body:has(.on-this-page) .qtoggle {
|
bottom: calc(var(--btn_) + var(--btn_));
|
}
|
|
|
.index.open.open {
|
max-height: var(--maxHeight);
|
height: max-content;
|
}
|
|
.development .item-grid .item .images {
|
aspect-ratio: 16/9;
|
}
|
|
.main-actions.main-actions .buttons.buttons {
|
bottom: unset;
|
top: var(--btn_);
|
right: 0!important;
|
}
|
|
aside.main.right {
|
padding-bottom: 0;
|
padding-top: var(--btn);
|
}
|
aside.main.right.expanded {
|
right: var(--btn);
|
}
|
.main-actions button.expanded {
|
border-top-left-radius: var(--radius-outer);
|
border-bottom-left-radius: var(--radius);
|
right: var(--btn);
|
}
|
|
|
/****************************************************************
|
CONTENT LIST
|
****************************************************************/
|
ul.content-term-list {
|
margin-left:0!important;
|
margin-right: 0!important;
|
grid-column: full;
|
max-width: var(--full);
|
}
|
ul.content-term-list > li {
|
padding: var(--sp3) var(--btn_) var(--sp3) 0;
|
list-style: none;
|
}
|
ul.content-term-list > li:nth-of-type(even) {
|
background-color: rgb(var(--base-100));
|
}
|
ul.content-term-list img {
|
width: 40vw;
|
max-inline-size: none;
|
}
|
|
.content-term-list .cover {
|
padding-bottom: 0;
|
min-height: 40vh;
|
}
|
.content-term-list .cover::before {
|
display: none;
|
}
|
.content-term-list .cover .content {
|
background-color: rgba(var(--base), var(--op-6));
|
width: 100%;
|
border-radius: 1rem 1rem 0 0;
|
padding: 1rem;
|
}
|
.content-term-list .cover h2 {
|
margin: 0;
|
}
|
|
|
.feed-block .item-grid {
|
padding-right: var(--btnbtn);
|
}
|
|
|
div.poster {
|
height: 20vh;
|
grid-column: full;
|
max-width: 100vw;
|
margin: 0!important;
|
background-repeat: no-repeat;
|
background-size: cover;
|
background-position: center;
|
background-attachment: fixed;
|
}
|
|
@media (min-width: 768px) {
|
div.poster {
|
height: 35vh;
|
background-size: cover;
|
}
|
}
|
|
.cover.cover {
|
padding: 0;
|
}
|
