diff --git a/assets/sass/components/_search-form.scss b/assets/sass/components/_search-form.scss new file mode 100644 index 00000000..169a5afd --- /dev/null +++ b/assets/sass/components/_search-form.scss @@ -0,0 +1,36 @@ +.search-form__fieldset { + display: inline; + border: 0; + padding: 0; + position: relative; + line-height: 0; +} + +.search-form__input { + background-color: darken($background-color, 5%); + border: 1px solid $border-color; + border-radius: 1em; + color: $text-color; + font-size: 0.9rem; + padding: 0.35em 0.75em 0.35em 2em; + + @media (prefers-color-scheme: dark) { + background-color: lighten($background-color-dark, 5%); + border: 1px solid $border-color-dark; + color: $text-color-dark; + } +} + +.search-form__icon { + left: 0.6rem; + position: absolute; + top: 0.5rem; + height: 0.8rem; + width: 0.8rem; + + fill: $text-color; + + @media (prefers-color-scheme: dark) { + fill: $text-color-dark; + } +} diff --git a/assets/sass/components/_site-footer.scss b/assets/sass/components/_site-footer.scss new file mode 100644 index 00000000..de5dd7b1 --- /dev/null +++ b/assets/sass/components/_site-footer.scss @@ -0,0 +1,5 @@ +.site-footer { + margin: 4rem 0 2rem; + padding: 0 $pad-min; + text-align: center; +} diff --git a/assets/sass/components/_site-header.scss b/assets/sass/components/_site-header.scss index 03fc432c..75734566 100644 --- a/assets/sass/components/_site-header.scss +++ b/assets/sass/components/_site-header.scss @@ -1,12 +1,5 @@ .site-header { padding: 0 $pad-min; - - @media (prefers-color-scheme: dark) { - } -} - -.site-header__container { - @include container; } .site-header__home-link { diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 6b7f23a8..87f8e7f4 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -34,6 +34,8 @@ // This is where majority of our work takes place and our UI components // are often composed of Objects and Components @import "components/site-header"; +@import "components/site-footer"; +@import "components/search-form"; @import "components/home"; @import "components/posts"; @import "components/post"; diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index e69de29b..6dd49528 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -0,0 +1,15 @@ + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 532bd26a..fdd57736 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,5 +1,5 @@