first commit

css/base/baseline.css

@@ -0,0 +1,45 @@
+@define-mixin atSmall {
+ @media (min-width: 530px) {
+ @mixin-content;
+ }
+}
+
+@define-mixin atSmallMedium {
+ @media (min-width: 767px) {
+ @mixin-content;
+ }
+}
+
+@define-mixin atMedium {
+ @media (min-width: 960px) {
+ @mixin-content;
+ }
+}
+
+body {
+ color: #333;
+ font-family: 'Roboto', sans-serif;
+ overflow-x: hidden;
+ position: relative;
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+}
+
+a {
+ color: $mainBlue;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+p, ul, ol {
+ margin: 0 0 1.65em 0;
+}
+
+p, li {
+ line-height: 1.65;
+}

css/base/utility-classes.css

@@ -0,0 +1,66 @@
+.container {
+ max-width: 1300px;
+ margin: 0 auto;
+ padding: 0 16px;
+ position: relative;
+}
+
+.container--narrow {
+ max-width: 960px;
+}
+
+.section-break {
+ border: none;
+ border-top: 1px solid #DDD;
+ margin: 2.5rem 0;
+}
+
+.min-list {
+ padding: 0;
+ margin: 0;
+}
+
+.min-list li {
+ list-style: none;
+}
+
+.p-top-small {padding-top: 1rem}
+.p-top-large {padding-top: 1.6rem}
+.p-bottom-large {padding-bottom: 1.6rem}
+
+@mixin atSmall {
+ .p-top-large {padding-top: 3.5rem}
+ .p-bottom-large {padding-bottom: 3.5rem}
+}
+
+.no-margin {margin: 0}
+.nu {text-decoration: none}
+.nu:hover {text-decoration: underline}
+
+.t-left {text-align: left}
+.t-right {text-align: right}
+.t-center {text-align: center}
+
+
+.t-small {font-size: .85rem}
+
+.float-left {float: left}
+.float-right {float: right}
+.push-right {margin-right: 20px}
+
+.container:before,
+.container:after,
+.group:before,
+.group:after {
+ content: " ";
+ display: table;
+}
+
+.container:after,
+.group:after {
+ clear: both;
+}
+
+.hide {
+ display: none;
+}

css/base/variables.css

@@ -0,0 +1,5 @@
+$beige: #FAF0CA;
+$mainYellow: #F4D35E;
+$mainBlue: #0D3B66;
+$lightOrange: #EE964B;
+$darkOrange: #F95738;

css/modules/acf-map.css

@@ -0,0 +1,11 @@
+.acf-map {
+width: 100%;
+height: 400px;
+border: #ccc solid 1px;
+margin: 20px 0;
+}
+
+/* fixes potential theme css conflict */
+.acf-map img {
+ max-width: inherit !important;
+}

css/modules/btn.css

@@ -0,0 +1,93 @@
+.btn {
+ display: inline-block;
+ cursor: pointer;
+ border-radius: 4px;
+ overflow: hidden;
+ text-decoration: none;
+ color: #FFF;
+ font-size: 1.19rem;
+ padding: 12px 24px;
+ border: none;
+ outline: none;
+
+ &--small {
+ font-size: .88rem;
+ padding: 7px 13px;
+ font-weight: 300;
+ }
+
+ &--with-photo {
+ padding-left: 40px;
+ position: relative;
+ }
+
+ &--orange {
+ background-color: $lightOrange;
+ }
+
+ &--orange:hover {
+ background: linear-gradient($lightOrange, color($lightOrange b(+30%) s(+80%)));
+ }
+
+ &--dark-orange {
+ background-color: $darkOrange;
+ }
+
+ &--dark-orange:hover {
+ background: linear-gradient($darkOrange, color($darkOrange b(+40%) s(+80%)));
+ }
+
+ &--blue {
+ background-color: $mainBlue;
+ }
+
+ &--blue:hover {
+ background: linear-gradient(color($mainBlue b(-16%)), $mainBlue);
+ }
+
+ &--yellow {
+ background-color: $mainYellow;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .22);
+ }
+
+ &--yellow:hover {
+ background: linear-gradient($mainYellow, color($mainYellow b(+40%) s(+80%)));
+ }
+
+ &--beige {
+ background-color: $beige;
+ color: #173f58;
+ }
+
+ &--beige:hover {
+ background-color: $mainYellow;
+ }
+
+ &--gray {
+ background-color: #222;
+ }
+
+ &--white {
+ background-color: #FFF;
+ color: #173f58;
+ }
+
+ &--white:hover {
+ background-color: #DDD;
+ }
+
+ &--large {
+ font-size: 1.3rem;
+ padding: 16px 34px;
+ border-radius: 7px;
+ @mixin atSmall {
+ font-size: 1.9rem;
+ }
+ }
+
+ &--inactive {
+ background-color: transparent;
+ cursor: default;
+ color: #333;
+ }
+}

css/modules/event-summary.css

@@ -0,0 +1,48 @@
+.event-summary {
+ position: relative;
+ padding-left: 107px;
+ min-height: 77px;
+ padding-bottom: 1px;
+ margin-bottom: 20px;
+
+ &__title a {
+ color: #173f58;
+ }
+
+ &__date {
+ text-decoration: none;
+ display: block;
+ top: 0;
+ left: 0;
+ position: absolute;
+ padding: 14px 0 11px 0;
+ color: #FFF;
+ border-radius: 50%;
+ background-color: $mainBlue;
+ width: 80px;
+ line-height: 1;
+ transition: opacity .33s;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .22);
+ }
+
+ &__date:hover {
+ opacity: .75;
+ }
+
+ &__date--beige {
+ background-color: $mainYellow;
+ }
+
+ &__month {
+ display: block;
+ font-size: 1.5rem;
+ font-weight: 300;
+ text-transform: uppercase;
+ }
+
+ &__day {
+ display: block;
+ font-size: 2.02rem;
+ font-weight: 700;
+ }
+}

css/modules/full-width-split.css

@@ -0,0 +1,35 @@
+.full-width-split {
+ @mixin atMedium {
+ display: flex;
+ }
+
+ &__one {
+ flex: 1;
+ padding: 1.6rem 16px;
+ @mixin atMedium {
+ padding: 40px;
+ }
+
+ .full-width-split__inner {
+ @mixin atMedium {
+ float: right;
+ }
+ }
+ }
+
+ &__two {
+ flex: 1;
+ background-color: $beige;
+ padding: 1.6rem 16px;
+ @mixin atMedium {
+ padding: 40px;
+ }
+ }
+
+ &__inner {
+
+ @media (min-width: 1350px) {
+ width: 610px;
+ }
+ }
+}

css/modules/generic-content.css

@@ -0,0 +1,34 @@
+.generic-content {
+ p, li {
+ font-size: 1.15rem;
+ }
+
+ blockquote, blockquote p {
+ font-size: 1.5rem;
+ font-style: italic;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ font-family: 'Roboto Condensed', sans-serif;
+ font-weight: 300;
+ margin-top: 0;
+ margin-bottom: 1rem;
+ }
+
+ h1 {font-size: 3.6rem}
+ h2 {font-size: 3.1rem}
+ h3 {font-size: 2.6rem}
+ h4 {font-size: 2.1rem}
+ h5 {font-size: 1.6rem}
+ h6 {font-size: 1.15rem}
+
+ @mixin atSmall {
+ h1 {font-size: 6.25rem}
+ h2 {font-size: 5rem}
+ h3 {font-size: 3.125rem}
+ h4 {font-size: 2.4rem}
+ h5 {font-size: 1.9rem}
+ h6 {font-size: 1.15rem}
+ }
+
+}