diff options
| -rw-r--r-- | _includes/footer.html | 36 | ||||
| -rw-r--r-- | _includes/header.html | 33 | ||||
| -rw-r--r-- | _layouts/default.html | 2 | ||||
| -rw-r--r-- | _layouts/home.html | 24 | ||||
| -rw-r--r-- | _layouts/page.html | 14 | ||||
| -rw-r--r-- | _layouts/post.html | 4 | ||||
| -rw-r--r-- | assets/main.css | 84 | ||||
| -rw-r--r-- | assets/main.js | 107 | ||||
| -rw-r--r-- | follow.md | 72 | ||||
| -rw-r--r-- | index.md | 28 |
10 files changed, 202 insertions, 202 deletions
diff --git a/_includes/footer.html b/_includes/footer.html index 85e1e38..f66a879 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,31 +1,7 @@ -<footer class="site-footer h-card"> - <data class="u-url" href="{{ "/" | relative_url }}"></data> - - <div class="wrapper"> - - <h2 class="footer-heading">{{ site.title | escape }}</h2> - - <div class="footer-col-wrapper"> - <div class="footer-col footer-col-1"> - <ul class="contact-list"> - <li class="p-name"> - {%- if site.author -%} - {{ site.author | escape }} - {%- else -%} - {{ site.title | escape }} - {%- endif -%} - </li> - {%- if site.email -%} - <li><a class="u-email" href="mailto:{{ site.email }}">{{ site.email }}</a></li> - {%- endif -%} - </ul> - </div> - - <div class="footer-col footer-col-2"> - {%- include social.html -%} - </div> - </div> - - </div> - +<footer> + <p class="license light"> + Unless otherwised specified, all works are licensed under the + <a href="{{ '/assets/wtfpl.txt' | relative_url}}">WTFPL</a>. + </p> </footer> + diff --git a/_includes/header.html b/_includes/header.html index c79b19c..7e3f12a 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,6 +1,6 @@ <header id="title-header" role="banner"> <div class="row"> - <div class="four columns"> + <div class="six columns"> <h1 class="title"> <a href="{{ "/" | relative_url }}">{{ site.title | escape }}</a> </h1> @@ -23,32 +23,11 @@ </a> </span> </div> - <div class="light license"> - Unless otherwised specified, all works are licensed under the - <a href="{{ '/assets/wtfpl.txt' | relative_url}}">WTFPL</a>. - </div> - </div> - - <div id="crypto-display" class="four columns"> </div> - - <div class="four columns light"> - <div class="donation"> - <span>If you like what I do, consider donating!</span><br/> - <span> - <a href="https://cash.me/$mediocregopher" target="_blank">USD</a> - • - <a class="crypto" href="bitcoin:18kqNYjUZ4zNEp4VjE3pKPLBitUy6U76rk">BTC</a> - • - <a class="crypto" href="litecoin:LZgyna6Nw4phzWv24QP4xgUi7hC9DDHV7o">LTC</a> - • - <a class="crypto" href="ethereum:0xB8e1608059174760f4652178303f7c7a59121922">ETH</a> - • - <a class="crypto" href="zcash:zcMmjd2gNetan9QciRExVdTb64ZEYPjk8w6NiEXnLRcDbVQQxZ9xvKH3Ab3y7uccCrN5HRvR5YVvq684gC1drvnYadp3Yz2">ZEC</a> - • - <a class="crypto" href="monero:4HJsnT47QLPH3GaTUZsMZrCyFErJiHM5gSCtxLnYvYPsabuBqV3d4Wa1TW6Fa4Zdw9b29xqKUNf9qHev3gEXFEFK4W3oeRDaFvWQN6fePM">XMR</a> - </span> - </div> </div> - + {%- if!page.nofollow != true %} + <!--<div class="six-columns"> + <a href="/follow.html">FOLLOW PLZ</a> + </div>--> + {% endif -%} </div> </header> diff --git a/_layouts/default.html b/_layouts/default.html index 0aab111..5df9d6d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -13,6 +13,8 @@ {{ content }} </main> + {%- include footer.html -%} + </div> </body> diff --git a/_layouts/home.html b/_layouts/home.html deleted file mode 100644 index 4a24765..0000000 --- a/_layouts/home.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: default ---- - -{%- if site.posts.size > 0 -%} -<ul id="posts-list"> - {%- for post in site.posts -%} - {%- if post.hide -%}{%- continue -%}{%- endif -%} - <li> - <h2> - <a href="{{ post.url | relative_url }}"> - {{ post.title | escape }} - </a> - </h2> - <span>{{ post.date | date: site.date_format }}</span> - {%- if post.updated %} - <span>(Updated {{ post.updated | date: site.date_format }})</span> - {% endif -%} - <p>{{ post.description }}</p> - </li> - {%- endfor -%} -</ul> - -{%- endif -%} diff --git a/_layouts/page.html b/_layouts/page.html deleted file mode 100644 index 01e4b2a..0000000 --- a/_layouts/page.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -layout: default ---- -<article class="post"> - - <header class="post-header"> - <h1 class="post-title">{{ page.title | escape }}</h1> - </header> - - <div class="post-content"> - {{ content }} - </div> - -</article> diff --git a/_layouts/post.html b/_layouts/post.html index 98a0536..6b97042 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,7 +1,7 @@ --- layout: default --- -<article itemscope itemtype="http://schema.org/BlogPosting" style="margin-bottom: 50vh;"> +<article itemscope itemtype="http://schema.org/BlogPosting"> <header id="post-header"> <h1 id="post-headline" itemprop="name headline"> @@ -22,7 +22,7 @@ layout: default </time> • {% endif -%} - <span itemprop="about"><em>{{ page.description }}</em></span> + <description itemprop="about"><em>{{ page.description }}</em></description> </div> </header> diff --git a/assets/main.css b/assets/main.css index 78ede2b..d1ce662 100644 --- a/assets/main.css +++ b/assets/main.css @@ -28,7 +28,8 @@ ul { #title-header { border-bottom: 1px solid #666; padding-top: 2rem; - padding-bottom:2rem; + padding-bottom: 2rem; + margin-bottom: 4rem; } #title-header .title { @@ -55,37 +56,14 @@ ul { text-decoration: none; } -#crypto-display { - min-width: 1px; -} - -#crypto-display-qr img, -#crypto-display-qr canvas { - width: 100%; - max-width: 512px; -} - -#crypto-display-addr { - overflow-wrap: break-word; - margin-top: 1em; -} - -#crypto-display-x { - text-align: center; - margin-top: 1em; -} - -#crypto-display-x span:hover { - cursor: pointer; - font-weight: bold; -} - -#crypto-display-x span { - cursor: pointer; +footer { + margin-top: 4rem; + border-top: 1px solid #666; + padding-top: 2rem; + margin-bottom: 50vh; } #posts-list { - margin-top: 3rem; list-style: none; } @@ -99,7 +77,7 @@ ul { } #post-header { - margin-top: 3rem; + margin-top: 2rem; margin-bottom: 2rem; } @@ -107,11 +85,6 @@ ul { margin: 0; } -#post-content { - border-bottom: 1px solid #666; - margin-bottom: 2rem; -} - #post-content ul { margin-left: 1em; } @@ -121,3 +94,44 @@ ul { { max-width: 100%; } + +/* The Modal (background) */ +#modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +#modal-body { + position: relative; + background-color: #fefefe; + margin: 10rem auto; /* 15% from the top and centered */ + padding: 5rem; + border: 1px solid #888; + max-width: 30%; /* Could be more or less, depending on screen size */ +} + +/* The Close Button */ +#modal-close { + position: absolute; + top: 1rem; + right: 1rem; + line-height: 1rem; + color: #aaa; + font-size: 28px; + font-weight: bold; +} + +#modal-close:hover, +#modal-close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} diff --git a/assets/main.js b/assets/main.js index 5cbcf89..7557f2b 100644 --- a/assets/main.js +++ b/assets/main.js @@ -1,67 +1,48 @@ -console.log("main.js started"); - -// For asynchronously loading the qr code library, loadQRLib returns a promise -// which will be resolved when the library is loaded. -var qrLibProm; -var loadQRLib = () => { - if (qrLibProm) { return qrLibProm; } - qrLibProm = new Promise((resolve, reject) => { - console.log("loading qrcode.min.js"); - var script = document.createElement('script'); - script.src = "/assets/qrcode.min.js"; - script.async = true; - script.onload = () => { resolve(); }; - document.querySelectorAll('head')[0].appendChild(script); - }); - return qrLibProm; -}; +// showModal will create the modal structure the first time it is called. +var modal, modalContent; +const showModal = function() { + if (!modal) { + // make the modal + const modalClose = document.createElement('span'); + modalClose.id = 'modal-close'; + modalClose.innerHTML = '×'; + + modalContent = document.createElement('div'); + modalContent.id = 'modal-content'; + + const modalBody = document.createElement('div'); + modalBody.id = 'modal-body'; + modalBody.appendChild(modalContent); + modalBody.appendChild(modalClose); + + modal = document.createElement('div'); + modal.id = 'modal'; + modal.appendChild(modalBody); + + // add the modal to the document + document.getElementsByTagName('body')[0].appendChild(modal); + + // setup modal functionality + modalClose.onclick = function() { + modal.style.display = "none"; + } + } + + modalContent.innerHTML = ''; + for (var i = 0; i < arguments.length; i++) { + modalContent.appendChild(arguments[i]); + } + modal.style.display = "block"; + + // When the user clicks anywhere outside of the modal, close it + window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + window.onclick = undefined; + } + } +} document.addEventListener("DOMContentLoaded", () => { console.log("DOM loaded"); - - var cryptoDisplay = document.querySelector('#crypto-display'); - var clearCryptoDisplay = () => { - cryptoDisplay.innerHTML = ' '; - }; - - console.log("setting up crypto buttons"); - document.querySelectorAll('.crypto').forEach((el) => { - var href = el.href; - el.href="#"; - el.onclick = () => { - var parts = href.split(":"); - if (parts.length != 2) { - console.error(el, "href not properly formatted"); - return; - } - var currency = parts[0]; - var address = parts[1]; - - clearCryptoDisplay(); - - var cryptoDisplayQR = document.createElement('div'); - cryptoDisplayQR.id = "crypto-display-qr"; - - var cryptoDisplayAddr = document.createElement('div'); - cryptoDisplayAddr.id = "crypto-display-addr"; - cryptoDisplayAddr.innerHTML = '<span>'+currency + " address: " + address + '</span>'; - - var cryptoDisplayX = document.createElement('div'); - cryptoDisplayX.id = "crypto-display-x"; - cryptoDisplayX.onclick = clearCryptoDisplay; - cryptoDisplayX.innerHTML = '<span>X</span>'; - - cryptoDisplay.appendChild(cryptoDisplayQR); - cryptoDisplay.appendChild(cryptoDisplayAddr); - cryptoDisplay.appendChild(cryptoDisplayX); - - loadQRLib().then(() => { - new QRCode(cryptoDisplayQR, { - text: currency, - width: 512, - height: 512, - }); - }); - }; - }); }) diff --git a/follow.md b/follow.md new file mode 100644 index 0000000..f94111a --- /dev/null +++ b/follow.md @@ -0,0 +1,72 @@ +--- +layout: post +title: "Follow the Blog" +description: "There's lots of ways to do it" +nofollow: true +--- + +There are a few ways to get notified of new posts to the Mediocre Blog. + +## Method 1: RSS + +RSS is the classic way to follow any blog. Simply give any RSS reader the +following URL... + +<a href="{{site.url}}/feed.xml">{{site.url}}/feed.xml</a> + +...and posts from this blog will show up as soon as they are published. + +There are literally thousands of RSS readers out there. Here's some +recommendations: + +* [Google Chrome Browser Extension](https://chrome.google.com/webstore/detail/rss-feed-reader/pnjaodmkngahhkoihejjehlcdlnohgmp) + +* [spaRSS](https://f-droid.org/en/packages/net.etuldan.sparss.floss/) is my + preferred android RSS reader, but you'll need to install + [f-droid](https://f-droid.org/) on your device (a good thing to do anyway, + imo). + +* TODO: an iOS reader, for you Apple users. Someone please [email + me](mailto:mediocregopher.com) a recommendation. + + +## Method 2: Twitter + +New posts are automatically published to [my Twitter](https://twitter.com/{{ +site.twitter_username }}). Simply follow me there and pray the algorithm smiles +upon my tweets enough to show them to you! :pray: :pray: :pray: + +## Method 3: Email + +I do solemnly swear to never ever ever: + +* Email you anything that's not a notification about new blog posts. + +* Give your email address to anyone for any reason. + +* Track whether or not you've opened the emails, clicked the links inside, or + anything like that. Delete every single one, I don't care. + +With that out of the way... if you'd like to receive an email everytime a new +post is published just type in your email and hit "Subscribe" below! + +<!-- Begin Mailchimp Signup Form --> +<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"> +<style type="text/css"> + #mc_embed_signup{ + } + /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. + We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ +</style> +<div id="mc_embed_signup"> +<form action="https://gmail.us7.list-manage.com/subscribe/post?u=b01da7c6e6b3cb148e812a0fc&id=e4559a9a22" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> + <div id="mc_embed_signup_scroll"> + + <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> + <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> + <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_b01da7c6e6b3cb148e812a0fc_e4559a9a22" tabindex="-1" value=""></div> + <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> + </div> +</form> +</div> +<!--End mc_embed_signup--> @@ -1,9 +1,23 @@ --- -# -# By default, content added below the "---" mark will appear in the home page -# between the top bar and the list of recent posts. -# To change the home page layout, edit the _layouts/home.html file. -# See: https://jekyllrb.com/docs/themes/#overriding-theme-defaults -# -layout: home +layout: default --- + +{%- if site.posts.size > 0 -%} +<ul id="posts-list"> + {%- for post in site.posts -%} + {%- if post.hide -%}{%- continue -%}{%- endif -%} + <li> + <h2> + <a href="{{ post.url | relative_url }}"> + {{ post.title | escape }} + </a> + </h2> + <span>{{ post.date | date: site.date_format }}</span> + {%- if post.updated %} + <span>(Updated {{ post.updated | date: site.date_format }})</span> + {% endif -%} + <p>{{ post.description }}</p> + </li> + {%- endfor -%} +</ul> +{%- endif -%} |