diff --git a/dev/scss/components/_home-loop.scss b/dev/scss/components/_home-loop.scss new file mode 100644 index 0000000..b073579 --- /dev/null +++ b/dev/scss/components/_home-loop.scss @@ -0,0 +1,29 @@ +.home-loop { + position: relative; + overflow: hidden; + + a { + display: table; + min-height: 250px; + text-decoration: none; + } + + h1 { + margin: $gutter; + background-color: rgba($black, 0.15); + color: $white; + } + + img { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + width: 100%; + height: auto; + object-fit: cover; + } + +} diff --git a/dev/scss/elements/_inputs.scss b/dev/scss/elements/_inputs.scss index 3c83c8f..e596e78 100644 --- a/dev/scss/elements/_inputs.scss +++ b/dev/scss/elements/_inputs.scss @@ -5,16 +5,8 @@ textarea, [type="search"], [type="tel"], [type="text"] { - border: 0; - box-shadow: $box-shadow-light; - background-color: $gray-light; padding: 8px; width: 100%; - - .dark & { - box-shadow: none; - background-color: $white; - } } .select-wrapper { diff --git a/dev/scss/elements/_section.scss b/dev/scss/elements/_section.scss index 21f31a6..e69de29 100644 --- a/dev/scss/elements/_section.scss +++ b/dev/scss/elements/_section.scss @@ -1,5 +0,0 @@ -@media screen and (max-width: #{$screen-tablet - 1}) { - section { - margin: 0 $gutter; - } -} diff --git a/dev/scss/generic/_skips.scss b/dev/scss/generic/_skips.scss new file mode 100644 index 0000000..2023f02 --- /dev/null +++ b/dev/scss/generic/_skips.scss @@ -0,0 +1,17 @@ +.skip-nav { + &:active, + &:focus { + position: absolute; + top: 15px; + left: 10px; + border: 1px solid $white; + background-color: $gray-dark; + padding: 5px 10px; + width: auto; + height: auto; + overflow: visible; + white-space: normal; + color: $white; + clip: auto; + } +} diff --git a/dev/scss/generic/_typography.scss b/dev/scss/generic/_typography.scss index 62da7d7..b826406 100644 --- a/dev/scss/generic/_typography.scss +++ b/dev/scss/generic/_typography.scss @@ -14,9 +14,9 @@ h6 { font-weight: 700; } -h1 { font-size: 3rem; } -h2 { font-size: 2.375rem; } -h3 { font-size: 1.875rem; } +h1 { font-size: 2rem; } +h2 { font-size: 1.875rem; } +h3 { font-size: 1.375rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1rem; } @@ -31,7 +31,7 @@ p { article, section { - font-size: 1.125em; + // font-size: 1.125em; li { line-height: 1.6; } } @@ -49,11 +49,11 @@ section { font-weight: 700; } -@media screen and (min-width: $screen-tablet-lg) { - h1 { font-size: 3.4375rem; } - h2 { font-size: 3rem; } - h3 { font-size: 2.5rem; } - h4 { font-size: 1.5rem; } - h5 { font-size: 1rem; } - h6 { font-size: 1rem; } -} +// @media screen and (min-width: $screen-tablet-lg) { +// h1 { font-size: 3.4375rem; } +// h2 { font-size: 3rem; } +// h3 { font-size: 2.5rem; } +// h4 { font-size: 1.5rem; } +// h5 { font-size: 1rem; } +// h6 { font-size: 1rem; } +// } diff --git a/dev/scss/main.scss b/dev/scss/main.scss index 1ac481a..4d45b2b 100644 --- a/dev/scss/main.scss +++ b/dev/scss/main.scss @@ -19,6 +19,7 @@ @import 'generic/container'; @import 'generic/grid'; @import 'generic/typography'; +@import 'generic/skips'; // Elements // styling for bare HTML elements (like H1, A, etc.). These come with @@ -42,6 +43,7 @@ // specific UI components. This is where majority of our work takes place // and our UI components are often composed of Objects and Components @import 'components/main-nav'; +@import 'components/home-loop'; // Utilities // utilities and helper classes with ability to override anything which diff --git a/footer.php b/footer.php index 1f942fc..ade3b42 100644 --- a/footer.php +++ b/footer.php @@ -1,3 +1,3 @@ -