diff --git a/style/_header.scss b/style/_header.scss index 4f886a4..c9b8855 100644 --- a/style/_header.scss +++ b/style/_header.scss @@ -53,13 +53,12 @@ header { align-items: flex-end; button { - background: #ccc; padding: 3px 5px; text-transform: lowercase; font-size: 0.66em; line-height: 1em; margin: 2px 5px; - @include mixins.heading; + @include mixins.button; } } @@ -70,19 +69,14 @@ header { width: 120px; } .adjust { - color: white; - font-family: "Proxima Nova"; - font-weight: 900; margin: 0 1px; width: 20px; - text-align: center; &:hover { - transform: scale(1.4); - transition: transform .2s; cursor: pointer; } + @include mixins.button; } } diff --git a/style/_mixins.scss b/style/_mixins.scss index 17457e3..bcc038e 100644 --- a/style/_mixins.scss +++ b/style/_mixins.scss @@ -5,3 +5,15 @@ @mixin text { font-family: "Noto Serif"; } + +@mixin button { + @include heading; + font-weight: 900; + background: crimson; + text-align: center; + color: white; + &:hover { + filter: hue-rotate(40deg); + transition: filter .2s; + } +}