# MOB 2020 Main Stylesheet # last modified August 18, 2020
// this file must start with front matter, like above, so jekyll knows to parse and do shit with it! :D
// ————————————————————————————————————————— // VARIABLES: for partials // ————————————————————————————————————————— // for layout $column-count: 10; $column-count-m: 7; $column-count-s: 4; $grid-width: 1920; $column-margin: 20;
// ————————————————————————————————————————— // IMPORTS // ————————————————————————————————————————— // these are partials // init for mob theme @import “init”; // grid and base layout classes @import “layout”;
// ————————————————————————————————————————— // VARIABLES: for base // ————————————————————————————————————————— $headerheight: 80px; $fullbrowserheight: calc(100vh - 80px);
// color $black: #000; $white: #FBF9F2;
// easings $easing: cubic-bezier(0.83, 0, 0.17, 1);
// ————————————————————————————————————————— // M I X I N S // ————————————————————————————————————————— // @include background-image(“image.jpg”); @mixin background-image($url) {
background: $grey url($url) no-repeat center; background-size: cover;
}
// @include background-fill(); @mixin background-fill() {
background-repeat: no-repeat; background-position: center; background-size: cover;
}
// ————————————————————————————————————————— // S T A T E S // ————————————————————————————————————————— ::selection {
background:rgba(252, 67, 54, 0.5);
}
::-moz-selection {
background: rgba(252, 67, 54, 0.5);
}
.keyboard-focus :focus {
outline: 2px solid blue;
}
// skip link defaults skipLink {
padding: 20px 10px 11px 10px; display: inline-block; position: absolute; z-index: 123456789; background-color: white; top: -200px; left: 20px; border-radius: 0px 0px 5px 5px; box-shadow: 0px 0px 24px rgba(0,0,0,0.5); transition: .4s all $easing; &:focus { top: 0; }
}
// ————————————————————————————————————————— // core styles & classes // —————————————————————————————————————————
body, input, textarea, radio, checkbox, .strip {
background-color: transparent; font-weight: normal; font-style: normal; line-height: 1; text-align: left;
}
.pv {
padding-top: 65px; padding-bottom: 65px;
}
.video-wrapper {
position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; embed, video, object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
/* Fixes potential theme css conflict. */ .acf-map {
width: 100%; height: 100vh; img { max-width: inherit !important; }
}
li p, p .button {
font-size: 100%;
}
// ————————————————————————————————————————— // header // —————————————————————————————————————————
header {}
// ————————————————————————————————————————— // ST Typography // —————————————————————————————————————————
.st {
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } p, li { margin: 0; padding: 0; } b, strong { font-weight: 600; } a { text-decoration: underline; } p.small { font-size: 140%; } // ————————————————————————————— headings h1, h2 { font-size: 360%; font-weight: 400; margin-top: 40px; margin-bottom: 10px; } h3 { font-size: 270%; margin-bottom: 10px; margin-top: 40px; } h4 { font-size: 200%; margin-top: 20px; margin-bottom: 2px; } h5 { font-size: 200%; } h6 { font-size: 300%; margin-bottom: 32px; } // ————————————————————————————— lists ul { list-style-type: disc; } ul ul { margin-top: 10px; margin-bottom: 20px; list-style-type: circle; } ul ul ul { list-style-type: square; } ol { list-style-type: decimal; } ol ol { margin-top: 10px; margin-bottom: 20px; list-style-type: lower-alpha; } ol ol ol { list-style-type: lower-roman; } ol ol, ul ol { list-style-type: lower-roman; } li li { font-size: 100%; } iframe { width: 100%; }
}
// ————————————————————————————————————————— // Special Typography // —————————————————————————————————————————
// ————————————————————————————————————————— // buttons // —————————————————————————————————————————
.button {
margin-top: 10px; display: inline-block; padding: 15px 30px; text-decoration: none !important; line-height: 1; &:hover {}
}
// ————————————————————————————————————————— // contact form 7 // —————————————————————————————————————————
.form-layer {
padding: 0 20px 100px; text-align: center; background: white; .form-layer__form { p { font-size: 100%; margin-top: 25px; display: block; clear: both; } p { font-size: 100%; margin-top: 25px; display: block; clear: both; } p.three-field-date, p.two-field-date { font-size: 100%; margin-top: 0; } label, legend { display: inline-block; padding-bottom: 5px; font-size: 180%; } legend { margin-top: 25px; } input, textarea, checkbox, radio { box-sizing: border-box; border: none; margin: 0; padding: 0; width: 600px; max-width: 100%; font-size: 180%; line-height: 1.2; padding: 10px; } input[type="submit"] { text-align: center; font-size: 180%; width: auto; } input:focus, textarea:focus { outline: 3px solid #4985a7; color: black; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box !important; background: url('img/dropdown-arrow.png') no-repeat 96% 50% transparent; background-size: 16px 9px; } }
}
// ————————————————————————————————————————— // footer // —————————————————————————————————————————
footer {}
// ————————————————————————————————————————— // IMPORTS // ————————————————————————————————————————— // these are partials, must go in the _sass folder @import “responsive.scss”;