|
// variables |
|
//font & fallback |
|
$font-serif: 'IBM Plex Serif', 'Laila', Georgia, serif |
|
$font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', Arial, sans-serif |
|
|
|
//colors |
|
$gold: #d2ac67 |
|
$yellow: #DFCF56 |
|
$dark: #1A1E1A |
|
$green: #006741 |
|
$green-light: #2D8D55 |
|
$orange: #B05A2E |
|
$brown: #302A23 |
|
$bkg-alt: #f9f4df |
|
$darkish: #707875 |
|
$gray: #CACFCC |
|
$bkg: #F3F4F1 |
|
$bkg2: #fdfbfb |
|
|
|
//nav |
|
$nav-font-color: $darkish |
|
|
|
// reset |
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video, .row |
|
margin: 0 |
|
padding: 0 |
|
border: 0 |
|
vertical-align: baseline |
|
|
|
article, footer, header, nav, section |
|
display: block |
|
|
|
// box & basic |
|
*, *:before, *:after |
|
box-sizing: border-box |
|
-moz-box-sizing: border-box |
|
-webkit-box-sizing: border-box |
|
|
|
html |
|
width: 100% |
|
height: 100% |
|
|
|
body |
|
background-color: $bkg |
|
margin: 0 auto |
|
padding-top: 1rem |
|
letter-spacing: 0.005rem |
|
font-size: 1rem |
|
font-feature-settings: kern |
|
-ms-font-feature-settings: kern |
|
-o-font-feature-settings: kern |
|
font-kerning: normal |
|
text-rendering: optimizeLegibility |
|
-webkit-font-smoothing: antialiased |
|
-osx-font-smoothing: grayscale |
|
-webkit-text-size-adjust: 100% |
|
scroll-behavior: smooth |
|
|
|
html, body |
|
min-width: 320px |
|
font-size: 15px |
|
|
|
body, input, select, textarea |
|
font-family: $font-sans |
|
color: $dark |
|
font-weight: 400 |
|
line-height: 1.5 |
|
|
|
a, a:visited |
|
-moz-transition: color 0.2s ease-in-out, border-style 0.2s ease-in-out |
|
-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out |
|
-ms-transition: color 0.2s ease-in-out, border-style 0.2s ease-in-out |
|
transition: color 0.2s ease-in-out, border-style 0.2s ease-in-out |
|
border-bottom: 1px dotted $darkish |
|
color: transparentize($dark, 0.3) |
|
text-decoration: none |
|
&:hover |
|
color: transparentize($dark, 0.15) |
|
text-decoration: none |
|
border-bottom-style: solid |
|
|
|
strong, b |
|
color: $dark |
|
font-weight: 600 |
|
|
|
em |
|
font-style: italic |
|
|
|
p |
|
margin-top: 1rem |
|
margin-bottom: 1rem |
|
color: transparentize($dark, 0.3) |
|
max-width: 40rem |
|
&:first-of-type |
|
margin-top: 0 |
|
|
|
h1, h2, h3, h4, h5, h6 |
|
color: transparentize($dark, 0.2) |
|
font-family: $font-serif |
|
font-weight: 700 |
|
letter-spacing: 0.055rem |
|
margin-left: auto |
|
margin-right: auto |
|
max-width: 40rem |
|
|
|
h1 |
|
font-size: 2rem |
|
margin-top: 2rem |
|
margin-bottom: 2rem |
|
letter-spacing: 0.01rem |
|
h2 |
|
font-size: 1.4rem |
|
//margin-left: 0 |
|
margin-top: 1.35rem |
|
margin-bottom: 1.35rem |
|
h3 |
|
font-size: 1.15rem |
|
margin-top: 1rem |
|
margin-bottom: 1rem |
|
&.h-alt |
|
font-size: 1.1rem |
|
font-family: $font-sans |
|
color: $green |
|
font-weight: 500 |
|
letter-spacing: 0.5px |
|
margin-bottom: 1.5rem |
|
text-align: center |
|
|
|
|
|
h4, h5, h6 |
|
font-size: 1.05rem |
|
//letter-spacing: 0.025rem |
|
margin-bottom: 1rem |
|
font-weight: 500 |
|
font-family: $font-serif |
|
&.h-alt |
|
font-size: 1rem |
|
font-family: $font-sans |
|
color: $green |
|
font-weight: 500 |
|
letter-spacing: 0.025rem |
|
margin-bottom: 1.5rem |
|
text-align: center |
|
|
|
h4 |
|
font-size: 1.1rem |
|
&.h-alt |
|
display: inline-block |
|
font-size: 1.15rem |
|
color: transparentize($brown, 0.2) |
|
font-weight: 600 |
|
text-align: center |
|
|
|
h6 |
|
font-size: 0.9rem |
|
|
|
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a |
|
color: inherit |
|
border-bottom: 0 |
|
|
|
//reusables |
|
.inner |
|
max-width: 69rem |
|
margin: 0 auto |
|
//margin: 1rem auto |
|
background: transparent |
|
padding: 1rem 1.5rem |
|
@media screen and (min-width: 736px) |
|
.h-alt |
|
margin-bottom: 3rem |
|
.inner |
|
padding: 2.5rem |
|
|
|
//table |
|
.table-wrapper |
|
overflow-x: auto |
|
-webkit-overflow-scrolling: touch |
|
table |
|
margin: 0 0 1.5rem 0 |
|
width: 100% |
|
display: block |
|
border-collapse: separate |
|
border-spacing: 0 |
|
& tbody tr |
|
border: solid 1px transparentize($dark, 0.75) |
|
border-left: 0 |
|
border-right: 0 |
|
&:nth-child(2n + 1) |
|
background-color: transparentize($dark, 0.95) |
|
& td |
|
padding: 1rem |
|
& th |
|
color: transparentize($dark, 0.2) |
|
font-size: 0.95rem |
|
font-weight: 600 |
|
text-align: left |
|
padding: 0 1rem |
|
& thead |
|
border-bottom: solid 2px transparentize($dark, 0.75) |
|
& tfoot |
|
border-top: solid 2px transparentize($dark, 0.75) |
|
&.alt |
|
border-collapse: separate |
|
border-spacing: 0 |
|
& tbody tr |
|
border: solid 1px transparentize($dark, 0.75) |
|
& td |
|
border-left: solid 1px transparentize($dark, 0.75) |
|
border-bottom: solid 1px transparentize($dark, 0.75) |
|
&:last-child |
|
border-right: solid 1px transparentize($dark, 0.75) |
|
&:first-child td |
|
border-top: solid 1px transparentize($dark, 0.75) |
|
&:last-child td |
|
border-bottom: solid 1px transparentize($dark, 0.75) |
|
& thead |
|
border-bottom: 0 |
|
& tfoot |
|
border-top: 0 |
|
|
|
//page |
|
.two |
|
padding: 1rem 0 |
|
margin: 2rem auto |
|
max-width: 80rem |
|
background: lighten($gray, 10%) |
|
text-align: center |
|
position: relative |
|
|
|
//menu |
|
.events |
|
text-align: left |
|
|
|
.menu |
|
width: 100% |
|
text-align: center |
|
margin: 1.5rem auto 0 auto |
|
display: flex |
|
flex-direction: column |
|
justify-content: center |
|
&:last-of-type |
|
margin-top: 0 |
|
> .table-wrapper |
|
max-width: 35rem |
|
text-align: left |
|
margin-right: auto |
|
margin-left: auto |
|
overflow: hidden |
|
max-height: 50rem |
|
transition: max-height 0.5s ease-in-out |
|
tfoot |
|
td |
|
padding-top: 0.5rem |
|
font-size: 0.9rem |
|
color: transparentize($dark, 0.3) |
|
&.hidden |
|
max-height: 0 |
|
transition: max-height 0.3s ease-in-out |
|
&.events |
|
.table-wrapper |
|
max-width: unset |
|
td |
|
max-width: 40rem |
|
&:first-of-type |
|
font-weight: 500 |
|
|
|
//menu nav |
|
.menu-nav |
|
margin-bottom: 1.5rem |
|
|
|
.menu-header-0 |
|
margin-right: 1.5rem |
|
.menu-header-1 |
|
margin-left: 1.5rem |
|
.menu-header |
|
border-bottom: 2px solid transparent |
|
cursor: pointer |
|
transition: all 0.2s ease-in-out |
|
display: inline-block |
|
font-size: 1.15rem |
|
color: transparentize($brown, 0.2) |
|
font-weight: 600 |
|
text-align: center |
|
margin-bottom: 1rem |
|
&.active, &:hover |
|
border-bottom-color: transparentize($brown, 0.2) |
|
|
|
.menu-nav-item |
|
display: inline-block |
|
margin-right: 0.75rem |
|
margin-bottom: 0.5rem |
|
border-bottom: 1.1px solid transparent |
|
font-size: 1.05rem |
|
cursor: pointer |
|
transition: all 0.2s ease-in-out |
|
&.hidden |
|
display: none |
|
&:last-of-type |
|
margin-right: 0 |
|
&.active, &:hover |
|
color: $dark |
|
border-bottom-color: transparentize($dark, 0.1) |