diff --git a/_config.yml b/_config.yml index cdbaa4c..6b2a0fc 100644 --- a/_config.yml +++ b/_config.yml @@ -1,6 +1,6 @@ # Site settings -title: Cheat Sheet -description: A list of everything that could go in the of your document +title: cheatsheet +description: "A free guide to elements" baseurl: "" # the subpath of your site, e.g. /blog/ url: "http://gethead.info" # the base hostname & protocol for your site (no trailing slash) twitter_username: joshbuchea diff --git a/_includes/head.html b/_includes/head.html index 36b6c17..8d24ce1 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -8,7 +8,7 @@ - {% if page.title %}{{ page.title | xml_escape }}{% else %}{{ site.title | xml_escape }}{% endif %} + {% if page.title %}{{ page.title | xml_escape }}{% else %}{{ site.title | xml_escape }} - {{ site.description | xml_escape }} {% endif %} diff --git a/_includes/header.html b/_includes/header.html index 92e4c57..7611b9d 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,12 +1,30 @@
-

{{ site.title | xml_escape }}

+

+ + + <head> cheatsheet +

- {% include share-page.html %} +
+
+ + +

Please use this affiliate link when you shop at Amazon.

+

Thank You! 🤗

+ +
-
- By Josh Buchea / @{{ site.twitter_username }} +
+

A free guide to <head> elements

+ + {% include share-page.html %} + + +
diff --git a/img/amazon-logo-large.jpg b/img/amazon-logo-large.jpg new file mode 100644 index 0000000..e572771 Binary files /dev/null and b/img/amazon-logo-large.jpg differ diff --git a/main.scss b/main.scss index 0698fbc..c3fe579 100644 --- a/main.scss +++ b/main.scss @@ -6,6 +6,14 @@ @import 'github'; @import 'syntax'; +* { + box-sizing: border-box; + &:before, + &:after { + box-sizing: border-box; + } +} + body { margin: 0; padding: 0; @@ -25,24 +33,17 @@ h1#head { } a { - color: #70B7FD; - color: #222; -} - -a:hover, -a:focus { - color: #70B7FD; - color: #000; -} - -a { - transition: all .2s ease-in-out; border-bottom: 1px solid #ddd; text-decoration: none; + transition: all .2s ease-in-out; + color: #70B7FD; + color: #222; &:hover, &:focus { border-bottom: 1px solid #70B7FD; + color: #70B7FD; + color: #000; } } @@ -52,6 +53,10 @@ img { vertical-align: middle; } +ul ul { + padding-left: 20px; +} + .container { margin: 0 auto; max-width: 800px; @@ -59,13 +64,69 @@ img { } .site__header { - padding: 80px 0 40px; + padding: 60px 0 30px; background-color: #F2F2F2; + + h1, h2, h3, h4, h5, h6 { + margin-top: 0; + } } .site__title { - margin-top: 0; - font-size: 48px; + font-size: 40px; + text-align: center; + + & > span:last-child { + color: #ACACAC; + } + + @media(min-width: 700px) { + font-size: 72px; + text-align: left; + } +} + +.header-content { + @media(min-width: 700px) { + display: flex; + align-items: flex-start; + } +} + +.header-ad { + display: flex; + align-items: center; + margin: 0 auto 40px; + box-shadow: 0 0 1rem rgba(0,0,0,0.2); + border-radius: 5px; + background-color: #fff; + min-width: 240px; + width: 240px; + height: 218px; + font-size: .8em; + + & > a { + display: block; + padding: 1rem 2rem; + border-bottom: none; + } + + p:last-of-type { + margin-bottom: 0; + } + + @media(min-width: 700px) { + margin: 0; + } +} + +.header-text { + text-align: center; + + @media(min-width: 700px) { + margin-left: 40px; + text-align: left; + } } .site__main { @@ -77,6 +138,10 @@ img { font-size: 1.5em; } +.site__main p:nth-of-type(2) { + display: none; +} + pre { overflow-x: auto; word-wrap: normal;