fix: add styles and layout

zwave-js · Nov 28, 2024 · 3ad05e2 · 3ad05e2
1 parent 20e0263
commit 3ad05e2
Show file tree

Hide file tree

Showing 45 changed files with 2,109 additions and 0 deletions.
diff --git a/_includes/ajaxify_content_form.html b/_includes/ajaxify_content_form.html
@@ -0,0 +1,30 @@
+<script>
+    var contactForm = document.querySelector('form'),
+    inputEmail = contactForm.querySelector('[name="email"]'),
+    textAreaMessage = contactForm.querySelector('[name="content"]'),
+    sendButton = contactForm.querySelector('button');
+
+    sendButton.addEventListener('click', function(event){
+      event.preventDefault();
+
+      sendButton.innerHTML = '{{ site.text.contact.ajax.sending | default: "sending..." }}';
+
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '//formspree.io/{{ site.email }}', true);
+      xhr.setRequestHeader("Accept", "application/json")
+      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
+
+      xhr.send(
+        "email=" + inputEmail.value +
+        "&message=" + textAreaMessage.value);
+
+      xhr.onloadend = function (res) {
+        if (res.target.status === 200){
+          sendButton.innerHTML = '{{ site.text.contact.ajax.sent | default: "Message sent!" }}';
+        }
+        else {
+          sendButton.innerHTML = '{{ site.text.contact.ajax.error | default: "Error!" }}';
+        }
+      }
+    });
+</script>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,19 @@
+<footer class="center">
+  <div class="measure">
+    <small>
+      Theme crafted with &lt;3 by <a href="https://johno.com/">John Otander</a> (<a href="https://twitter.com/4lpine">@4lpine</a>).<br>
+      &lt;/&gt; available on <a href="https://github.com/johno/pixyll">GitHub</a>.
+    </small>
+  </div>
+</footer>
+{% if site.enable_anchorjs %}<!-- AnchorJS -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.0.0/anchor.min.js"></script>
+<script>
+    anchors.options.visible = 'always';
+    anchors.add('article h2, article h3, article h4, article h5, article h6');
+</script>{% endif %}
+<script type="text/javascript">
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("{{ '/sw.js' | relative_url }}")
+    }
+</script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,109 @@
+<head>
+    {% if site.google_tag_manager %}
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','{{ site.google_tag_manager }}');</script>
+    {% endif %}
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>{% if page.title %}{{ page.title | strip_html }} &#8211; {% endif %}{{ site.title | strip_html }}</title>
+    <link rel="dns-prefetch" href="//fonts.googleapis.com">
+    <link rel="dns-prefetch" href="//fonts.gstatic.com">
+    <link rel="dns-prefetch" href="//maxcdn.bootstrapcdn.com">
+    <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="{% if page.meta_description %}{{ page.meta_description | xml_escape }}{% elsif page.summary %}{{ page.summary | xml_escape }}{% else %}{{ site.description | xml_escape }}{% endif %}">
+    <link rel="manifest" type="application/manifest+json; charset=utf-8" href="{{ "/manifest.json" | relative_url }}" />
+    {% if page.meta_robots %}<meta name="robots" content="{{ page.meta_robots }}">
+    {% else %}<meta name="robots" content="all">{% endif %}
+    <meta name="author" content="{{ site.author }}">
+    {% if site.fb_page %}<meta property="fb:pages" content="{{ site.fb_page_id }}" />{% endif %}
+    {% if page.categories %}<meta name="keywords" content="{{ page.categories | join: ', ' }}">{% endif %}
+    <link rel="canonical" href="{{ page.url | absolute_url }}">
+    <link rel="alternate" type="application/rss+xml" title="RSS Feed for {{ site.title }}" href="{{ "/feed.xml" | relative_url }}" />
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ "/css/pixyll.css" | relative_url }}?{{ site.time | date: "%Y%m%d%H%M" }}" type="text/css">
+
+    <!-- Fonts -->
+    {% if site.extended_fonts %}
+    <link href='//fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'>
+    <link href='//fonts.googleapis.com/css?family=Lato:900,300&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'>
+    {% else %}
+    <link href='//fonts.googleapis.com/css?family=Merriweather:900,900italic,300,300italic' rel='stylesheet' type='text/css'>
+    <link href='//fonts.googleapis.com/css?family=Lato:900,300' rel='stylesheet' type='text/css'>
+    {% endif %}
+    {% if site.show_social_icons or site.show_sharing_icons %}
+      <link href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+    {% endif %}
+
+    <!-- MathJax -->
+    {% if site.enable_mathjax %}
+    <script type="text/javascript" async
+        src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+    </script>
+    {% endif %}
+
+    <!-- Verifications -->
+    {% if site.google_verification %}
+      <meta name="google-site-verification" content="{{ site.google_verification }}" />
+    {% endif %}
+    {% if site.bing_verification %}
+      <meta name="msvalidate.01" content="{{ site.bing_verification }}" />
+    {% endif %}
+
+    <!-- Open Graph -->
+    <!-- From: https://github.com/mmistakes/hpstr-jekyll-theme/blob/master/_includes/head.html -->
+    <meta property="og:locale" content="{{ site.text.og_locale | default: "en_US" }}">
+    <meta property="og:type" content="article">
+    <meta property="og:title" content="{% if page.title %}{{ page.title | xml_escape }}{% else %}{{ site.title | xml_escape }}{% endif %}">
+    <meta property="og:description" content="{% if page.description %}{{ page.description | xml_escape }}{% else %}{{ site.description | xml_escape }}{% endif %}">
+    <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+    <meta property="og:site_name" content="{{ site.title | xml_escape }}">
+    {% if site.post_preview_image %}
+    <meta property="og:image" content="{{ site.url }}/images/me.jpeg">
+    {% endif %}
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary" />
+    {% if site.twitter_username %}
+        <meta name="twitter:site" content="@{{ site.twitter_username }}" />
+        <meta name="twitter:creator" content="@{{ site.twitter_username }}" />
+    {% endif %}
+    <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
+    <meta name="twitter:description" content="{% if page.summary %}{{ page.summary }}{% else %}{{ site.description }}{% endif %}" />
+    <meta name="twitter:url" content="{{ site.url }}{{ page.url }}" />
+    {% if site.post_preview_image %}
+    <meta name="twitter:image" content="{{ site.url }}/images/me.jpeg" />
+    {% endif %}
+
+    <!-- Icons -->
+    <link rel="apple-touch-icon" sizes="57x57" href="{{ "/apple-touch-icon-57x57.png" | relative_url }}">
+    <link rel="apple-touch-icon" sizes="114x114" href="{{ "/apple-touch-icon-114x114.png" | relative_url }}">
+    <link rel="apple-touch-icon" sizes="72x72" href="{{ "/apple-touch-icon-72x72.png" | relative_url }}">
+    <link rel="apple-touch-icon" sizes="144x144" href="{{ "/apple-touch-icon-144x144.png" | relative_url }}">
+    <link rel="apple-touch-icon" sizes="60x60" href="{{ "/apple-touch-icon-60x60.png" | relative_url }}">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ "/apple-touch-icon-120x120.png" | relative_url }}">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ "/apple-touch-icon-76x76.png" | relative_url }}">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ "/apple-touch-icon-152x152.png" | relative_url }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ "/apple-touch-icon-180x180.png" | relative_url }}">
+    <link rel="icon" type="image/png" href="{{ "/favicon-192x192.png" | relative_url }}" sizes="192x192">
+    <link rel="icon" type="image/png" href="{{ "/favicon-160x160.png" | relative_url }}" sizes="160x160">
+    <link rel="icon" type="image/png" href="{{ "/favicon-96x96.png" | relative_url }}" sizes="96x96">
+    <link rel="icon" type="image/png" href="{{ "/favicon-16x16.png" | relative_url }}" sizes="16x16">
+    <link rel="icon" type="image/png" href="{{ "/favicon-32x32.png" | relative_url }}" sizes="32x32">
+    <link rel="shortcut icon" href="{{ "/favicon.ico" | relative_url }}">
+
+    {% if site.google_analytics %}
+    <script type="text/javascript">
+       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+       ga('create', '{{ site.google_analytics }}', 'auto');
+       ga('send', 'pageview');
+    </script>
+    {% endif %}
+</head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,14 @@
+<header class="site-header px2 px-responsive">
+  <div class="mt2 wrap">
+    <div class="measure">
+      <a href="{{ "/" | relative_url }}" class="site-title">{{ site.title }}</a>
+      <nav class="site-nav">
+        {% include navigation.html %}
+      </nav>
+      <div class="clearfix"></div>
+      {% if site.show_social_icons %}
+        {% include social_links.html %}
+      {% endif %}
+    </div>
+  </div>
+</header>
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -0,0 +1,15 @@
+{% assign default_paths = site.pages | map: "path" %}
+{% assign page_paths = site.header_pages | default: default_paths %}
+
+{% for path in page_paths %}
+
+    {% assign item = site.pages | where: "path", path | first %}
+
+    {% if item.title and page.title == item.title %}
+        <a class="nav-active" href="{{ item.url | relative_url }}">{{ item.title }}</a>
+    {% elsif item.title %}
+        <a class="nav-link" href="{{ item.url | relative_url }}">{{ item.title }}</a>
+    {% endif %}
+
+
+{% endfor %}
diff --git a/_includes/pagination.html b/_includes/pagination.html
@@ -0,0 +1,23 @@
+{% if paginator.total_pages != 1 %}
+<div class="pagination clearfix mb1 mt4">
+  <div class="left">
+    {% if paginator.previous_page %}
+      {% if paginator.page == 2 %}
+        <a class="pagination-item" href="{{ "/" | relative_url }}">{{ site.text.pagination.newer | default: "Newer" }}</a>
+      {% else %}
+        <a class="pagination-item" href="{{ paginator.previous_page_path | relative_url }}">{{ site.text.pagination.newer | default: "Older" }}</a>
+      {% endif %}
+    {% else %}
+      <span class="pagination-item disabled">{{ site.text.pagination.newer | default: "Newer" }}</span>
+    {% endif %}
+  </div>
+  <div class="right">
+    {% if paginator.next_page %}
+      <a class="pagination-item" href="{{ paginator.next_page_path | relative_url }}">{{ site.text.pagination.older | default: "Older" }}</a>
+    {% else %}
+      <span class="pagination-item disabled">{{ site.text.pagination.older | default: "Older" }}</span>
+    {% endif %}
+  </div>
+  <div class="pagination-meta">Page {{ paginator.page }} of {{ paginator.total_pages }}</div>
+</div>
+{% endif %}
diff --git a/_includes/post_footer.html b/_includes/post_footer.html
@@ -0,0 +1,10 @@
+<div class="py2 post-footer">
+  <img src="{{ site.baseurl }}/images/me.jpeg" alt="John Otander" class="avatar" />
+  <p>
+    Pixyll is an open-source Jekyll theme that's built by <a href="https://johno.com/">John Otander</a>.
+    When he's not writing code and building things, he likes to ski. A. Lot.
+  </p>
+  <p>
+    Follow him on <a href="https://twitter.com/4lpine">Twitter</a>.
+  </p>
+</div>
diff --git a/_includes/share_buttons.html b/_includes/share_buttons.html
@@ -0,0 +1,41 @@
+<div class="share-page">
+  {{ site.text.share_buttons.text | default: "Share this post!" }}
+
+  <div class="share-links">
+    {% if site.share_facebook %}
+      <a class="fa fa-facebook" href="https://facebook.com/sharer.php?u={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.facebook | default: "Share on Facebook" }}"></a>
+    {% endif %}
+
+    {% if site.share_twitter %}
+      <a class="fa fa-twitter" href="https://twitter.com/intent/tweet?text={{ page.title | cgi_escape }}&amp;url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.twitter | default: "Share on Twitter" }}"></a>
+    {% endif %}
+
+    {% if site.share_googleplus %}
+      <a class="fa fa-google-plus" href="https://plus.google.com/share?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.googleplus | default: "Share on Google+" }}"></a>
+    {% endif %}
+
+    {% if site.share_linkedin %}
+      <a class="fa fa-linkedin" href="https://www.linkedin.com/shareArticle?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&amp;title={{ page.title | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.linkedin | default: "Share on LinkedIn" }}"></a>
+    {% endif %}
+
+    {% if site.share_digg %}
+      <a class="fa fa-digg" href="https://digg.com/submit?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&amp;title={{ page.title | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.digg | default: "Share on Digg" }}"></a>
+    {% endif %}
+
+    {% if site.share_tumblr %}
+      <a class="fa fa-tumblr" href="https://www.tumblr.com/share/link?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&amp;name={{ page.title | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.tumblr | default: "Share on Tumblr" }}"></a>
+    {% endif %}
+
+    {% if site.share_reddit %}
+      <a class="fa fa-reddit" href="https://www.reddit.com/submit?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&amp;title={{ page.title | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.reddit | default: "Share on Reddit" }}"></a>
+    {% endif %}
+
+    {% if site.share_stumbleupon %}
+      <a class="fa fa-stumbleupon" href="https://www.stumbleupon.com/submit?url={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&amp;title={{ page.title | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.stumbleupon | default: "Share on StumbleUpon" }}"></a>
+    {% endif %}
+
+    {% if site.share_hackernews %}
+      <a class="fa fa-hacker-news" onclick="parent.postMessage('submit','*')" href="https://news.ycombinator.com/submitlink?u={{ site.url | cgi_escape }}{{ page.url | cgi_escape }}&amp;t={{ page.title | cgi_escape }}" rel="nofollow" target="_blank" title="{{ site.text.share_buttons.hackernews | default: "Share on Hacker News" }}"></a>
+    {% endif %}
+  </div>
+</div>
diff --git a/_includes/social_links.html b/_includes/social_links.html
@@ -0,0 +1,59 @@
+<div class="social-icons">
+  <div class="social-icons-right">
+    {% if site.github_username %}
+      <a class="fa fa-github" href="https://github.com/{{ site.github_username }}"></a>
+    {% endif %}
+    {% if site.reddit_username %}
+    <a class="fa fa-reddit" href="https://reddit.com/user/{{ site.reddit_username }}"></a>
+    {% endif %}
+    {% if site.bitbucket_username %}
+      <a class="fa fa-bitbucket" href="https://bitbucket.org/{{ site.bitbucket_username }}"></a>
+    {% endif %}
+    {% if site.stackoverflow_id %}
+      <a class="fa fa-stack-overflow" href="https://stackoverflow.com/users/{{ site.stackoverflow_id }}"></a>
+    {% endif %}
+    <a class="fa fa-rss" href="{{ "/feed.xml" | relative_url }}"></a>
+    {% if site.twitter_username %}
+      <a class="fa fa-twitter" href="https://twitter.com/{{ site.twitter_username }}"></a>
+    {% endif %}
+    {% if site.skype_username %}
+      <a class="fa fa-skype" href="skype:{{ site.skype_username }}?userinfo"></a>
+    {% endif %}
+    {% if site.steam_nickname %}
+      <a class="fa fa-steam-square" href="https://steamcommunity.com/id/{{ site.steam_nickname }}"></a>
+    {% endif %}
+    {% if site.google_plus_id %}
+      <a class="fa fa-google-plus" href="https://plus.google.com/{{ site.google_plus_id }}/posts"></a>
+    {% endif %}
+    {% if site.email %}
+      <a class="fa fa-envelope" href="mailto:{{ site.email }}"></a>
+    {% endif %}
+    {% if site.linkedin_username %}
+      <a class="fa fa-linkedin" href="https://www.linkedin.com/in/{{ site.linkedin_username }}"></a>
+    {% endif %}
+    {% if site.angellist_username %}
+      <a class="fa fa-angellist" href="https://angel.co/{{ site.angellist_username }}"></a>
+    {% endif %}
+    {% if site.medium_id %}
+      <a class="fa fa-medium" href="https://medium.com/@{{ site.medium_id }}"></a>
+    {% endif %}
+    {% if site.telegram_username %}
+      <a class="fa fa-telegram" href="https://t.me/{{ site.telegram_username }}"></a>
+    {% endif %}
+    {% if site.vk_id %}
+      <a class="fa fa-vk" href="https://vk.com/{{ site.vk_id }}"></a>
+    {% endif %}
+  </div>
+  <div class="right">
+    {% if site.bitcoin_url %}
+      <a class="fa fa-bitcoin" href="{{ site.bitcoin_url }}"></a>
+    {% endif %}
+    {% if site.paypal_url %}
+      <a class="fa fa-paypal" href="{{ site.paypal_url }}"></a>
+    {% endif %}
+    {% if site.flattr_button %}
+      {{ site.flattr_button }}
+    {% endif %}
+  </div>
+</div>
+<div class="clearfix"></div>
diff --git a/_layouts/center.html b/_layouts/center.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+{% include head.html %}
+<body class="site{% if site.animated %} animated fade-in-down{% endif %}">
+  {% if site.google_tag_manager %}
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager }}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  {% endif %}
+	{% if site.facebook_comments %}
+		<div id="fb-root"></div>
+		<script>(function(d, s, id) {
+		  var js, fjs = d.getElementsByTagName(s)[0];
+		  if (d.getElementById(id)) return;
+		  js = d.createElement(s); js.id = id;
+		  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId={{ site.facebook_appid }}";
+		  fjs.parentNode.insertBefore(js, fjs);
+		}(document, 'script', 'facebook-jssdk'));</script>
+	{% endif %}
+
+  <div class="site-wrap center">
+    {% include header.html %}
+
+    <div class="post p2 p-responsive wrap" role="main">
+      <div class="measure">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+
+  {% include footer.html %}
+</body>
+</html>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+{% include head.html %}
+<body class="site{% if site.animated %} animated fade-in-down{% endif %}">
+  {% if site.google_tag_manager %}
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.google_tag_manager }}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  {% endif %}
+	{% if site.facebook_comments %}
+		<div id="fb-root"></div>
+		<script>(function(d, s, id) {
+		  var js, fjs = d.getElementsByTagName(s)[0];
+		  if (d.getElementById(id)) return;
+		  js = d.createElement(s); js.id = id;
+		  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId={{ site.facebook_appid }}";
+		  fjs.parentNode.insertBefore(js, fjs);
+		}(document, 'script', 'facebook-jssdk'));</script>
+	{% endif %}
+
+  <div class="site-wrap">
+    {% include header.html %}
+
+    <div class="post p2 p-responsive wrap" role="main">
+      <div class="measure">
+        {{ content }}
+      </div>
+    </div>
+  </div>
+
+  {% include footer.html %}
+</body>
+</html>