diff options
| -rw-r--r-- | assets/style.scss | 32 | ||||
| -rw-r--r-- | index.html | 22 |
2 files changed, 35 insertions, 19 deletions
diff --git a/assets/style.scss b/assets/style.scss index 5c331aa..a2dfe16 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,11 +1,12 @@ --- --- -$breakpoint: (min-width: 50rem); +$breakpoint: 50rem; $primary: #206bc4; $border: #eeeeee; $muted: #aaaaaa; $btn-form-height: 2rem; +$hover: rgba(0, 0, 0, .04); * { box-sizing: border-box; @@ -42,7 +43,7 @@ a { display: flex; flex-direction: column; - @media #{$breakpoint} { + @media (min-width: #{$breakpoint}) { flex-direction: row; } } @@ -55,7 +56,7 @@ a { width: 15rem; margin-top: 2rem; - @media #{$breakpoint} { + @media (min-width: #{$breakpoint}) { margin-top: 0; margin-left: 2rem; flex-direction: row; @@ -69,7 +70,6 @@ a { } .icon-preview-wrap { - margin-bottom: 3rem; position: relative; &:before { @@ -100,19 +100,27 @@ a { .icons-list { display: flex; - margin: -1rem; + margin: -.25rem; +} + +.icons-list-icon { + margin: .25rem; + width: 2rem; + height: 2rem; + color: inherit; + border-radius: 3px; + display: inline-flex; + align-items: center; + justify-content: center; + + &:hover { + background-color: $hover; + } .icon { display: block; - margin: .5rem; width: 1.5rem; height: 1.5rem; - } - - svg { - display: block; - width: 100%; - height: 100%; stroke-width: 2; } } @@ -20,7 +20,7 @@ {% include icon.html name=last-icon.slug %} {% endcapture %} - <div class="row"> + <div class="row mb"> <div class="col"> <div class="icon-preview-wrap"> @@ -71,15 +71,23 @@ </div> - <div class="icons-list"> - {% for icon in site.icons %} - <div class="icon" title="{{ icon.slug }}"> - {% assign name = icon.slug %} - {% include icon.html name=name %} + <div> + <div class="icons-list"> + {% for icon in site.icons %} + <a href="#" class="icons-list-icon" title="{{ icon.slug }}"> + {% assign name = icon.slug %} + {% include icon.html name=name %} + </a> + {% endfor %} </div> - {% endfor %} </div> </div> </div> + +<script> + (function(){ + + })(); +</script> </body> </html> |