newport 1.0.6 → 1.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e111cd4c09644217b541f2a4a54ff5be9b20f2fad5ce8819a821a0cb77f2a657
-  data.tar.gz: '0862e9f1354dc4ac499c2a00f548fbe60f507a4cf25f5fd265e05f333fac8a52'
+  metadata.gz: ff47fb76e4cf88c9843d48f1b435d2fd0ce938bef6ce7f74db9ffa26ca05173a
+  data.tar.gz: a8e78af5182b81b2cd27d8b39bca804940a873f1084c68ec47a88e12a3c6c4c2
 SHA512:
-  metadata.gz: f6f8f1d31101f91d3bc1c25f7b82d243fabe4b2ff761df354333d283db88f7c439e1f9b8ec1c16e30385c80b6c1c92fa779a13703934e69b096b51b8f0626a34
-  data.tar.gz: 531cee4fbafa6b18c405d520fc658b4530e5024473545725250226de4f8be966180e971aeb32a6788b59a8f5548c8f85cb9daa645b4c14ba79c30db414b4502b
+  metadata.gz: fd4c6743ef16d99548496ef16e7acefe08a97bc2566ed6e0cde29b0e64e5a789a290acf6b87601e0470ab6851c889430735694da937310a42cdcca0174356a1f
+  data.tar.gz: 637c43e5b8cbff4ddca8001d37b634f1b5577f1dbed2cf25cdae70af0b61fd304779efa8df06bdede63563de93b9547fa204397323b2c599245f0345e7e0a40b

data/lib/newport/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Newport
-  VERSION = '1.0.6'
+  VERSION = '1.0.7'
 end

data/lib/site_template/config.yml

@@ -5,3 +5,4 @@ plugins:
   - darkmode
   - permalink
   - pagination
+  - changefont

data/lib/site_template/layouts/nav.html

@@ -1,5 +1,4 @@
 <nav>
-  <!-- <a href="/">home</a> &middot; 
-    <a href="/feed.xml">feed</a> &middot;  -->
   <div id="darkmode"></div>
+  <div id="changefont"></div>
 </nav>

data/lib/site_template/layouts/style.css

@@ -14,7 +14,7 @@ img{max-width: 100%;}
 h1 a,h1 a:active,h1 a:visited{color:var(--h1-color)}
 .title{float:left;padding-top:0.5rem}
 section{margin-top:2rem}
-#darkmode{display:inline}
+#darkmode,#changefont{display:inline}
 .expander-arrow, .more-arrow, .more-arrow:active, .more-arrow:visited { color: var(--text-color); fill: var(--text-color) }
 footer {border-top: 1px var(--footer-border-color) solid;min-height: 80px;padding-top: 10px;padding-bottom:15px}
 .main {min-height: calc(100% - 40px)}
@@ -35,67 +35,3 @@ code{background:var(--code-background-color);padding-left:2px;padding-right:2px}
     --footer-border-color: #555;
     --h1-color: #ddd;
 }
-
-/* The switch - the box around the slider */
-.switch {
-position: relative;
-display: inline-block;
-width: 30px;
-height: 17px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-opacity: 0;
-width: 0;
-height: 0;
-}
-
-/* The slider */
-.slider {
-position: absolute;
-cursor: pointer;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-background-color: #ccc;
--webkit-transition: .4s;
-transition: .4s;
-}
-
-.slider:before {
-position: absolute;
-content: "";
-height: 13px;
-width: 13px;
-left: 2px;
-bottom: 2px;
-background-color: white;
--webkit-transition: .4s;
-transition: .4s;
-color: #000;
-}
-
-input:checked + .slider {
-background-color: #333;
-}
-
-input:focus + .slider {
-box-shadow: 0 0 1px #333;
-}
-
-input:checked + .slider:before {
--webkit-transform: translateX(13px);
--ms-transform: translateX(13px);
-transform: translateX(13px);
-}
-
-/* Rounded sliders */
-.slider.round {
-border-radius: 17px;
-}
-
-.slider.round:before {
-border-radius: 50%;
-}

data/lib/site_template/plugins/changefont.js

@@ -0,0 +1,83 @@
+function setFontFromCookies() {
+  var fontSize = Cookies.get('font-size');
+  if (fontSize == undefined) {
+    var fontSize = 0.9;
+  }
+
+  var fontFamily = Cookies.get('font-family');
+  if (fontFamily == undefined) {
+    var fontFamily = 'monospace';
+  }
+
+  if (fontFamily == 'monospace') {
+    var lineHeight = Number(fontSize) + 0.4;
+  } else {
+    var lineHeight = Number(fontSize) + 1;
+  }
+
+  console.log(fontFamily);
+  console.log(fontSize + 'rem');
+  console.log(lineHeight + 'rem');
+
+  let body = document.getElementsByClassName("posts")[0];
+  body.style.fontSize = fontSize + 'rem';
+  body.style.fontFamily = fontFamily;
+  body.style.lineHeight = lineHeight + 'rem';
+}
+
+function showDropDown() {
+  document.getElementById("dropdown").classList.toggle("show");
+}
+
+function setFontSize(size) {
+  switch (size) {
+    case 'small':
+      Cookies.set('font-size', 0.8);
+      setFontFromCookies();
+      break;
+    case 'medium':
+      Cookies.set('font-size', 0.9);
+      setFontFromCookies();
+      break;
+    case 'large':
+      Cookies.set('font-size', 1.0);
+      setFontFromCookies();
+      break;
+  }
+}
+
+function setFont(font) {
+  switch (font) {
+    case 'mono':
+      Cookies.set('font-family', 'monospace');
+      setFontFromCookies();
+      break;
+    case 'sans':
+      Cookies.set('font-family', 'sans-serif');
+      setFontFromCookies();
+      break;
+  }
+}
+
+// Close the dropdown menu if the user clicks outside of it
+window.onclick = function (event) {
+  if (!event.target.matches('.dropbtn')) {
+    var dropdowns = document.getElementsByClassName("dropdown-content");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (openDropdown.classList.contains('show')) {
+        openDropdown.classList.remove('show');
+      }
+    }
+  }
+}
+
+setFontFromCookies();
+document.getElementById("changefont").innerHTML = '<div class="dropdown"><button onclick="showDropDown()" class="dropbtn">&#9776;</button><div id="dropdown" class="dropdown-content"><span>Font Size<br /><button onclick="setFontSize(\x27small\x27)" class="font-size-small">A</button><button onclick="setFontSize(\x27medium\x27)" class="font-size-medium">A</button><button onclick="setFontSize(\x27large\x27)" class="font-size-large">A</button></span><span>Font<br /><button onclick="setFont(\x27mono\x27)" class="font-mono">mono</button><button onclick="setFont(\x27sans\x27)" class="font-sans">sans-serif</button></span></div></div>';
+var css = '.font-size-small{font-size:.9rem;border:none;background:#ddd;cursor:pointer}.font-size-medium{font-size:1rem;border:none;background:#ddd;cursor:pointer}.font-size-large{font-size:1.1rem;border:none;background:#ddd;cursor:pointer}.font-mono{font-family:monospace;border:none;cursor:pointer}.font-sans{font-family:sans-serif;border:none;cursor:pointer}.dropbtn{padding:0;font-size:16px;border:none;cursor:pointer;background:0 0;color:var(--text-color)}.dropdown{position:relative;display:inline-block}.dropdown-content{text-align:center;display:none;position:absolute;background-color:#eee;min-width:180px;z-index:1;margin-left:-160px}.dropdown-content span{color:#000;padding:12px 16px;text-decoration:none;display:block}.show{display:block}';
+var head = document.getElementsByTagName('head')[0];
+var s = document.createElement('style');
+s.setAttribute('type', 'text/css');
+s.appendChild(document.createTextNode(css));
+head.appendChild(s);

data/lib/site_template/plugins/darkmode.js

@@ -1,13 +1,13 @@
 // Place an empty div with the id darkmode where you want to toggle to appear in your html
 // ie. <div id="darkmode"></div>
 
-(function() {
+(function () {
 
   function showDark() {
     document.documentElement.setAttribute("data-theme", "dark");
     Cookies.set('appearance', 'dark');
   }
-  
+
   function showLight() {
     document.documentElement.setAttribute("data-theme", "light");
     Cookies.set('appearance', 'light');
@@ -24,7 +24,7 @@
     showLight();
   }
 
-  document.getElementById("darkmode-checkbox").onchange = function(){
+  document.getElementById("darkmode-checkbox").onchange = function () {
     if (document.getElementById('darkmode-checkbox').checked) {
       showDark();
     } else {
@@ -33,3 +33,10 @@
   };
 
 })();
+
+var css = ' .switch {position: relative;display: inline-block;width: 30px;height: 17px;}.switch input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}.slider:before {position: absolute;content: "";height: 13px;width: 13px;left: 2px;bottom: 2px;background-color: white;-webkit-transition: .4s;transition: .4s;color: #000;}input:checked + .slider {background-color: #333;}input:focus + .slider {box-shadow: 0 0 1px #333;}input:checked + .slider:before {-webkit-transform: translateX(13px);-ms-transform: translateX(13px);transform: translateX(13px);}.slider.round {border-radius: 17px;}.slider.round:before {border-radius: 50%;}';
+var head = document.getElementsByTagName('head')[0];
+var s = document.createElement('style');
+s.setAttribute('type', 'text/css');
+s.appendChild(document.createTextNode(css));
+head.appendChild(s);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: newport
 version: !ruby/object:Gem::Version
-  version: 1.0.6
+  version: 1.0.7
 platform: ruby
 authors:
 - Richard Fisher
@@ -90,6 +90,7 @@ files:
 - lib/site_template/layouts/main.html
 - lib/site_template/layouts/nav.html
 - lib/site_template/layouts/style.css
+- lib/site_template/plugins/changefont.js
 - lib/site_template/plugins/darkmode.js
 - lib/site_template/plugins/expander.js
 - lib/site_template/plugins/pagination.js