| | |
| | | /*! |
| | | Theme Name: Jake Van Extension |
| | | Theme URI: https://jakevan.ca |
| | | Description: Jvb-theme child theme, for Jake. |
| | | Theme Name: Edmonton Ink Extension |
| | | Theme URI: https://edmonton.ink |
| | | Description: Jvb-theme child theme, for edmonton.ink. |
| | | 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: 'Mitr', 'Impact', var(--font-base); |
| | | --body: 'Courier Prime', var(--font-base); |
| | | --fw-h: 700; |
| | | --fw-h-light: 700; |
| | | --fw-h-bold: regular; |
| | | --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: #f9f9f9; |
| | | --light-50: #f0f0f0; |
| | | --light-100: #e6e6e6; |
| | | --light-200: #dbdbdb; |
| | | --light-rgb: 249,249,249; |
| | | |
| | | --dark-0: #151515; |
| | | --dark-50: #222222; |
| | | --dark-100: #2e2e2e; |
| | | --dark-200: #3b3b3b; |
| | | --dark-50: #212121; |
| | | --dark-100: #2c2c2c; |
| | | --dark-200: #383838; |
| | | --dark-rgb: 21,21,21; |
| | | |
| | | --action-0: #ff0080; |
| | |
| | | } |
| | | |
| | | body:has(#theme-switcher:checked){ |
| | | --action-50: #db006e; |
| | | --action-100: #b8005c; |
| | | --action-200: #94004a; |
| | | --action-50: #cc0066; |
| | | --action-100: #99004d; |
| | | --action-200: #660033; |
| | | --secondary-50: #d89f00; |
| | | --secondary-100: #b58500; |
| | | --secondary-200: #916a00; |
| | |
| | | /** Download your Fonts from: https://gwfh.mranftl.com/ |
| | | use ./assets/fonts/ as a base |
| | | **/ |
| | | @font-face { |
| | | font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ |
| | | font-family: 'Courier Prime'; |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | src: url('./assets/fonts/courier-prime-v9-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/courier-prime-v9-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /* courier-prime-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: 'Courier Prime'; |
| | | font-style: italic; |
| | | font-weight: 400; |
| | | src: url('./assets/fonts/courier-prime-v9-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/courier-prime-v9-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /* courier-prime-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: 'Courier Prime'; |
| | | font-style: normal; |
| | | font-weight: 700; |
| | | src: url('./assets/fonts/courier-prime-v9-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/courier-prime-v9-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /* courier-prime-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: 'Courier Prime'; |
| | | font-style: italic; |
| | | font-weight: 700; |
| | | src: url('./assets/fonts/courier-prime-v9-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/courier-prime-v9-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | |
| | | /* mitr-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: 'Mitr'; |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | src: url('./assets/fonts/mitr-v11-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/mitr-v11-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /* mitr-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: 'Mitr'; |
| | | font-style: normal; |
| | | font-weight: 700; |
| | | src: url('./assets/fonts/mitr-v11-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ |
| | | url('./assets/fonts/mitr-v11-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ |
| | | } |
| | | /*** FONTS END ***/ |
| | | |
| | | header svg.logo { |
| | | height: var(--chipchip); |
| | | } |
| | | |
| | | header svg.logo path:not(#flame) { |
| | | /*fill: var(--contrast) !important;*/ |
| | | /*fill: var(--light-0)!important;*/ |
| | | } |
| | | header svg.logo path { |
| | | paint-order: stroke fill; |
| | | stroke: var(--dark-0)!important; |
| | | stroke-width: 1px; |
| | | } |
| | | header [rel=home]:hover { |
| | | background: var(--action-0); |
| | | } |
| | | header [rel=home]:hover .logo path#flame { |
| | | /*fill: var(--dark-0);*/ |
| | | } |
| | | |
| | | header { |
| | | --offset: .5rem; |
| | | padding: 0 var(--offset); |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | header > #theme-switch { |
| | | position: absolute; |
| | | left: var(--offset); |
| | | } |
| | | header > nav:not(.mobile) { |
| | | position: absolute; |
| | | right: var(--offset); |
| | | --gap: 0; |
| | | } |
| | | |
| | | .toggle.notifications.has .icon-bell, |
| | | .toggle.notifications .icon-bell-ringing { |
| | | display: none; |
| | | } |
| | | |
| | | .toggle.notifications .icon-bell, |
| | | .toggle.notifications.has .icon-bell-ringing { |
| | | display: block; |
| | | } |
| | | /*}*/ |
| | | /*header >svg #flame {*/ |
| | | /* paint-order: stroke fill;*/ |
| | | /* stroke: var(--dark-0);*/ |
| | | /* stroke-width: 1px;*/ |
| | | /*}*/ |
| | | |
| | | |
| | | @media (min-width:768px) { |
| | | footer { |
| | | padding: 1rem 2rem; |
| | | } |
| | | } |