diff --git a/.gitignore b/.gitignore index 334afc3..15e19e2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,4 @@ /_site .sass-cache/ Gemfile.lock - -logo.png node_modules/ diff --git a/README.md b/README.md index 72c3f28..85465b0 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ bundle exec jekyll serve The logo was designed by @kristinbarr. With the server running, view it at http://localhost:4000/logo.html. -To create a PNG of the logo, install Node.js, then run: +To create a PNG of the logo, install Node.js and ImageMagick, then run: ```sh npm install diff --git a/_sass/constants.scss b/_sass/constants.scss new file mode 100644 index 0000000..d45c7c0 --- /dev/null +++ b/_sass/constants.scss @@ -0,0 +1,4 @@ +$hh-pink: #ff66c4; +$hh-purple: #7c2ae8; +$hh-red: #ff5757; +$hh-teal: #00c4cc; diff --git a/_sass/logo.scss b/_sass/logo.scss index 3a4dc51..7f867f2 100644 --- a/_sass/logo.scss +++ b/_sass/logo.scss @@ -14,37 +14,40 @@ } .logo { - $front-height: 300px; - $front-width: 405px; + $front-height: 19rem; + $front-width: 25.5rem; line-height: 0.9; .background { - background: linear-gradient(90deg, #7c2ae8, #00c4cc); + background: linear-gradient(90deg, $hh-purple, $hh-teal); display: inline-block; - padding: 35px 0; + padding: 2rem 0; width: $front-width; } $left-skew: -37deg; - $left-width: 50px; + $left-width: 3rem; .foreground { display: grid; grid-template-columns: $left-width $front-width; $left-face-height: tan(abs($left-skew)) * $left-width; grid-template-rows: $front-height $left-face-height; - left: -15px; - position: relative; + transform: translateX(-1rem); } + // add only one border at each edge (explicitly) below, since it's not easy to get neighboring borders to collapse otherwise + $face-border: 1px solid black; + .front-face { - background-color: #eff0f2; + background-color: white; + border: $face-border; font-family: "League Gothic", sans-serif; font-size: $front-height / 2; grid-column: 2; grid-row: 1; - padding: 19px 23px; + padding: 1.4rem; text-transform: uppercase; } @@ -53,11 +56,11 @@ } .hh { - letter-spacing: 7px; + letter-spacing: 0.4rem; } .location { - bottom: 71px; + bottom: 4.5rem; display: inline-block; font-family: Kollektif, sans-serif; font-size: 0.35em; @@ -68,7 +71,10 @@ } .left-face { - background-color: #ff5757; + background-color: $hh-red; + border-bottom: $face-border; + border-left: $face-border; + border-top: $face-border; grid-column: 1; grid-row: 1; transform: skewY($left-skew); @@ -76,7 +82,9 @@ } .bottom-face { - background-color: #ff66c4; + background-color: $hh-pink; + border-bottom: $face-border; + border-right: $face-border; grid-column: 2; grid-row: 2; transform: skewX(-90deg - $left-skew); diff --git a/_sass/pages/index.scss b/_sass/pages/index.scss index 9539b45..30decda 100644 --- a/_sass/pages/index.scss +++ b/_sass/pages/index.scss @@ -1,11 +1,11 @@ .page-index { .content { - padding: 200px 20px 125px; + padding: 20px 5px; text-align: center; } - h1 { - font-size: 5em; - margin-bottom: 0.2em; + .logo { + margin: 2rem 0; + max-width: 300px; } h2 { font-size: 1.4em; @@ -50,11 +50,3 @@ } } } - -@media all and (max-height: 650px) { - .page-index { - .content { - padding: 20px 5px; - } - } -} diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..2ac678b Binary files /dev/null and b/assets/logo.png differ diff --git a/css/logo.scss b/css/logo.scss index c3bbb86..4c3b306 100644 --- a/css/logo.scss +++ b/css/logo.scss @@ -1,6 +1,7 @@ --- --- +@import "constants"; @import "logo"; body { diff --git a/index.html b/index.html index e9207c8..f9f63c1 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,16 @@ --- -

Hacker Hours

+

+ +

Free office hours for programming help

- Next meetup: + Next meetup: +

diff --git a/logo.html b/logo.html index 8913ce5..2dfdfa7 100644 --- a/logo.html +++ b/logo.html @@ -1,14 +1,27 @@ - -