update site: add dark theme, change project icon, remove sass, tidy up

Amery2010 · May 29, 2021 · 36cdfd4 · 36cdfd4
1 parent 267e017
commit 36cdfd4
Show file tree

Hide file tree

Showing 16 changed files with 785 additions and 719 deletions.
diff --git a/.well-known/brave-rewards-verification.txt b/.well-known/brave-rewards-verification.txt
@@ -0,0 +1,4 @@
+This is a Brave Rewards publisher verification file.
+
+Domain: htmlhead.dev
+Token: 6a7e3540aa1b995e824578024bab2e51a47105438015fac73db317f74278c01a
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# 🗿 HEAD
+# 🤯 HEAD
 
-> A list of everything that \*could\* go in the `<head>` of your document
+> A simple guide to HTML `<head>` elements
 
 [![Contributors](https://img.shields.io/github/contributors/joshbuchea/head.svg?style=for-the-badge)](https://github.com/joshbuchea/HEAD/graphs/contributors)
 [![CC0](https://img.shields.io/badge/license-CC0-green.svg?style=for-the-badge)](https://creativecommons.org/publicdomain/zero/1.0/)
@@ -56,14 +56,13 @@ Below are the essential elements for any web document (websites/apps):
 <title>Page Title</title>
 ```
 
-**meta charset** - defines the encoding of the website, utf-8 is the standard
+`meta charset` - defines the encoding of the website, `utf-8` is the standard
 
-**meta name="viewport"** - viewport settings related to mobile responsiveness
+`meta name="viewport"` - viewport settings related to mobile responsiveness
 
-**width=device-width** means that it will use the physical width of the device (instead of zooming out) which is good with mobile friendly pages
-
-**initial-scale=1** is the initial zoom, 1 means no zoom
+`width=device-width` - use the physical width of the device (great for mobile!)
 
+`initial-scale=1` - the initial zoom, 1 means no zoom
 
 **[⬆ back to top](#table-of-contents)**
 
@@ -610,42 +609,48 @@ The **HEAD** repository consists of two branches:
 
 #### 1. `master`
 
-This branch consists of the `README.md` file that is automatically reflected on the [htmlhead.dev](https://htmlhead.dev/) website. All changes to the content of the cheat sheet as such should be directed to this file.
+This branch consists of the `README.md` file that is reflected on the [htmlhead.dev](https://htmlhead.dev/) website. All changes to the content of the guide should be made in this file.
 
 Please follow these steps for pull requests:
 
+{:.list-style-default}
 - Modify only one tag, or one related set of tags at a time
 - Use double quotes on attributes
 - Don't include a trailing slash in self-closing elements — the HTML5 spec says they're optional
 - Consider including a link to documentation that supports your change
 
 #### 2. `gh-pages`
 
-This branch is responsible for the [htmlhead.dev](https://htmlhead.dev/) website. We use [Jekyll](https://jekyllrb.com/) to deploy the `README.md` Markdown file through [GitHub Pages](https://pages.github.com/). All website related modifications must be directed here.
+This branch is responsible for the [htmlhead.dev](https://htmlhead.dev/) website. We use [Jekyll](https://jekyllrb.com/) to deploy the `README.md` markdown file to [GitHub Pages](https://pages.github.com/). All website related modifications should be made in this branch.
 
-You may want to go through the [Jekyll Docs](https://jekyllrb.com/docs/home/) and understand how Jekyll works before working on this branch.
+You may find it helpful to review the [Jekyll Docs](https://jekyllrb.com/docs/home/) and understand how Jekyll works before working in this branch.
 
-### Contributors
+## 🌟 Contributors
 
-Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors).
+Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors) 🤩
 
 ## 👤 Author
 
 **Josh Buchea**
 
+- GitHub: [@joshbuchea](https://github.com/joshbuchea)
 - Twitter: [@joshbuchea](https://twitter.com/joshbuchea)
-- Github: [@joshbuchea](https://github.com/joshbuchea)
 
-## Show your support
+## 💛 Support
+
+If this project was helpful for you or your organization, please considering supporting my work directly:
 
-Please ⭐️ this repository if this project helped you!
+- 💛 [Sponsor me on GitHub](https://github.com/sponsors/joshbuchea)
+- ⭐️ [Star this project on GitHub](https://github.com/joshbuchea/HEAD)
+- 🐙 [Follow me on GitHub](https://github.com/joshbuchea)
+- 🐦 [Follow me on Twitter](https://twitter.com/joshbuchea)
 
-<a href="https://www.patreon.com/joshbuchea">
-  <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
-</a>
+Everything helps, thanks! 🙏
+
+— Josh
 
 ## 📝 License
 
 [![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)
 
-**[⬆ back to top](#table-of-contents)**
+**[⬆ back to top](#table-of-contents)**
diff --git a/_config.yml b/_config.yml
@@ -1,12 +1,14 @@
 # Site settings
-title: HEAD
-description: "A free guide to <head> elements"
+title: 🤯 HEAD
+description: "A simple guide to HTML <head> elements"
 baseurl: "" # the subpath of your site, e.g. /blog/
 url: "https://htmlhead.dev" # the base hostname & protocol for your site (no trailing slash)
 twitter_username: joshbuchea
-github_username:  joshbuchea
+github_username: joshbuchea
 google_analytics: UA-79520097-1
 exclude: [readme.md]
+include:
+  - .well-known
 sass:
   #style: compressed
 

diff --git a/_includes/analytics.html b/_includes/analytics.html
@@ -6,4 +6,4 @@
 	</script>
 	<script src="https://www.google-analytics.com/analytics.js" async defer></script>
 	<!-- End Google Analytics -->
-{% endif %}
+{% endif -%}
diff --git a/_includes/head.html b/_includes/head.html
@@ -8,9 +8,7 @@
   <!-- <meta name="theme-color" content="#2980b9"> -->
   <!-- <meta name="google-site-verification" content=""> -->
   <meta name="monetization" content="$ilp.uphold.com/KBfxJZi2y78w">
-
   <title>{% if page.title %}{{ page.title | xml_escape }}{% else %}{{ site.title | xml_escape }} - {{ site.description | xml_escape }} {% endif %}</title>
-
   <link rel="stylesheet" href="main.css">
   <!-- <link rel="mask-icon" href="favicon.svg" color="#2980b9"> -->
   <!-- <link rel="icon" href="apple-touch-icon-precomposed.png"> -->

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,42 +1,42 @@
 <header class="site__header">
   <div class="container">
-    <h1 class="site__title">
-      {{ site.title | xml_escape }}
-      <!-- html<span>head</span>.dev -->
-      <!-- &lt;head&gt; cheatsheet -->
-    </h1>
+    <h1 class="site__title">{{ site.title | xml_escape }}</h1>
+    <!-- html<span>head</span>.dev -->
+    <!-- &lt;head&gt; cheatsheet -->
 
     <div class="header-content">
-      <div class="header-link">
-        <p>
-          <a
-            href="https://smiledaily.us"
-            rel="noopener noreferrer"
-            target="_blank"
-            >Get the daily newsletter for a happy head 😊</a
-          >
-        </p>
-        <!-- <a target="_blank" href="https://amazon.com/?tag=buchea-20">
-          <img src="/img/amazon-logo-large.jpg" width="100%" height="auto">
-          <p>Please use this affiliate link when you shop at Amazon.</p>
-          <p>Thank You! 🤗</p>
-        </a> -->
-
-        <!-- Carbon Ads -->
-        <!-- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIL537&placement=getheadinfo" id="_carbonads_js"></script> -->
-      </div>
-
       <div class="header-text">
-        <h2>A free guide to HTML5 &lt;head&gt; elements</h2>
+        <h2>A simple guide to HTML &lt;head&gt; elements</h2>
+        <!-- <h2>What's in your &lt;head&gt;?</h2> -->
 
         {% include share-page.html %}
 
-        <div>
-          a project by
+        <p>
+          A project by
           <a href="https://twitter.com/{{ site.twitter_username }}"
-            >@joshbuchea</a
+            >Josh Buchea</a
           >
-        </div>
+        </p>
+      </div>
+
+      <div class="header-link">
+        <!-- <p>
+          Try the free email newsletter I do with my wife — 
+          <a
+            href="https://smiledaily.us"
+            rel="noopener noreferrer"
+            target="_blank"
+          >Smile Daily 😊</a>
+        </p> -->
+        <!-- <p>
+          Please use my 
+          <a
+            href="https://amazon.com/?tag=buchea-20"
+            rel="noopener noreferrer"
+            target="_blank"
+          >affiliate link</a>
+          when you shop at Amazon — thank you 🙏
+        </p> -->
       </div>
     </div>
 

diff --git a/_includes/share-page.html b/_includes/share-page.html
@@ -1,6 +1,19 @@
 <div class="share-page">
 
-  <!-- TODO: Measure performance difference after facebook share snippet is removed -->
+  <!-- PERF MEASUREMENTS ⚡️ -->
+
+  <!-- with facebook share button: 23 requests, 280 kb transferred, 793 kb resources -->
+  <!-- without facebook share button: 20 requests, 144 kb transferred, 268 kb resources -->
+  <!-- total facebook share button: 3 requests, 136 kB transferred, 525 kB resources -->
+
+  <!-- with twitter share button: 20 requests, 144 kb transferred, 267 kb resources -->
+  <!-- without twitter share button: 12 requests, 104 kb transferred, 113 kb resources -->
+  <!-- total twitter share button: 8 requests, 40 kb transferred, 154 kb resources -->
+
+  <!-- with github star button: 12 requests, 104 kb transferred, 114 kb resources -->
+  <!-- without github star button: 10 requests, 95.8 kb transferred, 93.1 kb resources -->
+  <!-- total github star button: 2 requests, 8.2 kb transferred, 20.9 kb resources -->
+
   <!-- Share via Facebook -->
   <!-- <iframe
     src="https://www.facebook.com/plugins/share_button.php?href={{ site.url }}{{ page.url }}&layout=button&mobile_iframe=true&width=58&height=20&appId"
@@ -14,7 +27,7 @@
   <!-- End Share via Facebook -->
 
   <!-- Share via Twitter -->
-  <a
+  <!-- <a
     class="twitter-share-button"
     href="https://twitter.com/share"
     data-url="{{ site.url }}{{ page.url }}"
@@ -27,7 +40,7 @@
     !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
     if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
     fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
-  </script>
+  </script> -->
   <!-- End Share via Twitter -->
 
   <!-- <a href="https://twitter.com/joshbuchea" class="twitter-follow-button" data-show-count="false">Follow @joshbuchea</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> -->
@@ -45,4 +58,11 @@
   <!-- Place this tag in your head or just before your close body tag. -->
   <script async defer src="https://buttons.github.io/buttons.js"></script>
   <!-- End Star on GitHub -->
+
+  <!-- <p>
+    <a
+      href="#"
+      rel="noopener noreferrer"
+      target="_blank">Share HEAD on twitter</a>
+  </p> -->
 </div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,7 +12,6 @@
       </div>
     </div>
 
-
     <script>
       // open external links in new tab
       var links = document.links;

diff --git a/_sass/_github.scss b/_sass/_github.scss
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,6 @@ @@
           </div>
         </div>
         <script>
           // open external links in new tab
           var links = document.links;
@@ Expand Down @@