| | |
| | | Author URI: https://jakevan.ca/ |
| | | Template: jvb-theme |
| | | Version: 0.1.0 |
| | | Text Domain: lyns |
| | | */ |
| | | :root{ |
| | | /* Layout */ |
| | |
| | | |
| | | /** 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); |
| | | --heading: 'Source Serif 4', var(--font-base); |
| | | --body: 'Montserrat', var(--font-base); |
| | | --hWeight: 300; |
| | | --hlight: 300; |
| | | --hBold: 700; |
| | | --bWeight: 500; |
| | | --bBold: 800; |
| | | --bLight: 300; |
| | | --bWeight: 400; |
| | | --bBold: 900; |
| | | --bLight: 200; |
| | | |
| | | /* Font sizes */ |
| | | --enormous: calc(26vh - 4rem); |
| | |
| | | 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; |
| | | --dark-0: #151515; |
| | | --dark-50: #222222; |
| | | --dark-100: #2e2e2e; |
| | | --dark-200: #3b3b3b; |
| | | --action-0: #ff0080; |
| | | --action-50: #ff2492; |
| | | --action-100: #ff47a4; |
| | | --action-200: #ff6bb5; |
| | | --secondary-0: #D69121; |
| | | --secondary-50: #ffc421; |
| | | --secondary-100: #ffcd44; |
| | | --secondary-200: #ffd768; |
| | | --light-0: #fff9f5; |
| | | --light-50: #fff3eb; |
| | | --light-100: #feede1; |
| | | --light-200: #fee7d7; |
| | | --light-rgb: 255,249,24; |
| | | --dark-0: #140900; |
| | | --dark-50: #1e0e00; |
| | | --dark-100: #281200; |
| | | --dark-200: #331700; |
| | | --dark-rgb: 20,9,0; |
| | | --action-0: #c85604; |
| | | --action-50: #dc5f04; |
| | | --action-100: #f06705; |
| | | --action-200: #fa710f; |
| | | --action-rgb: 200,86,4; |
| | | --secondary-0: #90D932; |
| | | --secondary-50: #99dc43; |
| | | --secondary-100: #a3df54; |
| | | --secondary-200: #ace366; |
| | | --secondary-rgb: 131,217,50; |
| | | |
| | | --success: #20D64E; |
| | | --successLight: #DBFAE3; |
| | | --successDark: #05230D; |
| | | --success: #7cf067; |
| | | --successLight: #f4fef2; |
| | | --successDark: #0d3906; |
| | | --successBack: var(--successLight); |
| | | --successText: var(--successDark); |
| | | --warning: #D69121; |
| | | --warningLight: #F6E5CB; |
| | | --warningDark: #231806; |
| | | --warning: #F0B967; |
| | | --warningLight: #fef9f2; |
| | | --warningDark: #221503; |
| | | --warningBack: var(--warningLight); |
| | | --warningText: var(--warningDark); |
| | | --error: #CF1616; |
| | | --errorLight: #F9C8C8; |
| | | --errorDark: #4A0808; |
| | | --error: #BF3434; |
| | | --errorLight: #fcf6f6; |
| | | --errorDark: #471313; |
| | | --errorBack: var(--errorLight); |
| | | --errorText: var(--errorDark); |
| | | --action-contrast: var(--light-0); |
| | | --secondary-contrast: var(--light-0); |
| | | --light-rgb: 239,239,239; |
| | | --dark-rgb: 21,21,21; |
| | | --action-rgb: 255,0,128; |
| | | --secondary-rgb: 252,185,0; |
| | | |
| | | --rgba-subtle: rgba(var(--c),.5); |
| | | --rgba-subtle-hover: rgba(var(--c),.1); |
| | |
| | | } |
| | | |
| | | 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: #b44d04; |
| | | --action-100: #a04503; |
| | | --action-200: #8c3c03; |
| | | --secondary-50: #86d027; |
| | | --secondary-100: #7bbf23; |
| | | --secondary-200: #70ae20; |
| | | --contrast: var(--light-0); |
| | | --contrast-50: var(--light-50); |
| | | --contrast-100: var(--light-100); |
| | |
| | | /** Download your Fonts from: https://gwfh.mranftl.com/ |
| | | use ./assets/fonts/ as a base |
| | | **/ |
| | | /* 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+ */ |
| | | } |
| | | |
| | | /* source-serif-4-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: 'Source Serif 4'; |
| | | font-style: normal; |
| | | font-weight: 300; |
| | | src: url('./assets/fonts/source-serif-4-v14-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/source-serif-4-v14-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /* source-serif-4-300italic - 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: 'Source Serif 4'; |
| | | font-style: italic; |
| | | font-weight: 300; |
| | | src: url('./assets/fonts/source-serif-4-v14-latin-300italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/source-serif-4-v14-latin-300italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /* source-serif-4-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: 'Source Serif 4'; |
| | | font-style: normal; |
| | | font-weight: 700; |
| | | src: url('./assets/fonts/source-serif-4-v14-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/source-serif-4-v14-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /* source-serif-4-700italic - 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: 'Source Serif 4'; |
| | | font-style: italic; |
| | | font-weight: 700; |
| | | src: url('./assets/fonts/source-serif-4-v14-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/source-serif-4-v14-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /*** FONTS END ***/ |
| | | |
| | | :root { |
| | | --bg-blend: luminosity; |
| | | --blur: 0px; |
| | | --fg-blend: overlay; |
| | | --opacity: 0.9028149706380943; |
| | | --spacing: 0px; |
| | | } |
| | | /*.img-wrapper {*/ |
| | | /* background-color: var(--action-0);*/ |
| | | /* display: flex;*/ |
| | | /* flex: 1 1 100%;*/ |
| | | /* height: 100%;*/ |
| | | /* overflow: hidden;*/ |
| | | /* padding: var(--spacing);*/ |
| | | /* position: relative;*/ |
| | | /*}*/ |
| | | |
| | | /*.img-wrapper img {*/ |
| | | /* filter: grayscale(100%) contrast(1) blur(var(--blur));*/ |
| | | /* flex: 1 0 100%;*/ |
| | | /* height: 100%;*/ |
| | | /* max-width: 100%;*/ |
| | | /* mix-blend-mode: var(--bg-blend);*/ |
| | | /* object-fit: cover;*/ |
| | | /* opacity: var(--opacity);*/ |
| | | /* position: relative;*/ |
| | | /* width: 100%;*/ |
| | | /*}*/ |
| | | |
| | | /*.img-wrapper::before {*/ |
| | | /* background-color: var(--contrast-50);*/ |
| | | /* bottom: 0;*/ |
| | | /* content: '';*/ |
| | | /* height: 100%;*/ |
| | | /* left: 0;*/ |
| | | /* mix-blend-mode: var(--fg-blend);*/ |
| | | /* position: absolute;*/ |
| | | /* right: 0;*/ |
| | | /* top: 0;*/ |
| | | /* width: 100%;*/ |
| | | /* z-index: 1;*/ |
| | | /*}*/ |
| | | |
| | | .wp-site-blocks > header { |
| | | flex-direction: column; |
| | | align-items: flex-start!important; |
| | | justify-content: flex-start!important; |
| | | height: max-content!important; |
| | | min-height: var(--height); |
| | | --gap: 0; |
| | | padding: 0!important; |
| | | } |
| | | #theme-switch#theme-switch { |
| | | position: absolute; |
| | | top: 1rem; |
| | | left: 1rem; |
| | | } |
| | | .wp-site-blocks > header a[rel=home] { |
| | | position: relative; |
| | | |
| | | } |
| | | .wp-site-blocks > header > div.row { |
| | | width: 100%; |
| | | --gap: 0 2rem; |
| | | --justify: flex-start; |
| | | --align: center; |
| | | --w: var(--height); |
| | | padding: 0 1rem 0 var(--offHeight); |
| | | height: var(--height); |
| | | min-height: var(--height); |
| | | } |
| | | .icon-logo { |
| | | background-color: var(--action-0); |
| | | margin: 0 0 0 2rem; |
| | | } |
| | | .wp-site-blocks > header p { |
| | | margin: 0; |
| | | width: max-content; |
| | | } |
| | | .wp-site-blocks > header p + p { |
| | | font-size: var(--small); |
| | | } |
| | | .wp-site-blocks > header nav { |
| | | width: 100%; |
| | | --height: 3rem; |
| | | background-color: var(--base-200); |
| | | } |
| | | .wp-site-blocks > header nav ul { |
| | | width: 100%; |
| | | } |
| | | .wp-site-blocks > header nav li+li::before { |
| | | display: none; |
| | | } |
| | | .wp-site-blocks > header nav a { |
| | | padding: .25rem .5rem; |
| | | color: var(--contrast); |
| | | } |
| | | .wp-site-blocks > header nav a:hover, |
| | | .wp-site-blocks > header nav a:focus { |
| | | color: var(--action-contrast); |
| | | } |
| | | header .title.title { |
| | | position: relative; |
| | | height: fit-content; |
| | | text-transform: uppercase; |
| | | font-weight: var(--hWeight); |
| | | font-family: var(--heading); |
| | | } |
| | | footer { |
| | | margin: 0!important; |
| | | } |
| | | main > *:last-child { |
| | | margin-bottom: 0!important; |
| | | } |
| | | |
| | | |
| | | @media (min-width:768px){ |
| | | .wp-site-blocks > header > div.row { |
| | | --wrap: nowrap; |
| | | } |
| | | footer { |
| | | padding: 1rem 2rem; |
| | | } |
| | | } |
| | | nav.fixed.bottom.bottom, nav.on-this-page.on-this-page { |
| | | width: 100vw; |
| | | } |
| | | nav.fixed.bottom .icon { |
| | | margin: 0 1rem; |
| | | } |
| | | nav.fixed.bottom span { |
| | | margin-right: 1rem; |
| | | } |
| | | h1:first-of-type { |
| | | margin-top: 4rem!important; |
| | | } |
| | | .callout p { |
| | | text-align: center; |
| | | } |
| | | footer nav { |
| | | margin-bottom: 1rem; |
| | | } |
| | | footer p.font-small.font-small { |
| | | margin: 0; |
| | | } |
| | | |
| | | |
| | | section:nth-of-type(even) { |
| | | background-color: var(--base-100); |
| | | max-width: none; |
| | | padding: 2rem 0; |
| | | } |
| | | section:nth-of-type(even) > * { |
| | | max-width: var(--maxWidth); |
| | | } |
| | | |
| | | .cover.cover::before { |
| | | mix-blend-mode: hue; |
| | | } |