improved responsiveness on small screens

dist/404.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>404 - Not Found</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: January 25, 2024</p>
         <p class="meta">Page last modified: January 25, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         <h1 id="404-not-found">404: Not Found</h1>
         <p><a
         href="xertun.webp"><img src="/xertun.webp" width="200" height="200" /></a></p>

dist/418.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>404 - Not Found</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: January 27, 2024</p>
         <p class="meta">Page last modified: January 27, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         <h1 id="418-im-a-teapot">418: I’m a teapot</h1>
         <p><a
         href="thing.webp"><img src="/thing.webp" width="200" height="200" /></a></p>

dist/blog/firstPost.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>First Post</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: January 26, 2024</p>
         <p class="meta">Page last modified: January 26, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         <p>wowzers first post</p>
         <p><img src="/xertun.webp" width="200" height="200"></p>
         <p>me ^</p>

dist/blog/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>Blog Index</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: January 26, 2024</p>
         <p class="meta">Page last modified: January 26, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         <p>(Sorted by date created)</p>
         <div id="latestPost">
             JavaScript must be enabled for the index to build. Otherwise visit <a href="/blogindex.txt">blogindex.txt</a> for a static list.

dist/blog/minimalMessaging.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>Why Keeping Your Applications Minimal Counts. -
 bear.oops.wtf</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -32,7 +33,7 @@ bear.oops.wtf</title>
         <p class="meta">Page created: March 11, 2024</p>
         <p class="meta">Page last modified: March 11, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         <h1 id="introduction">Introduction</h1>
         <p>When a man is stuck with cell service for a while (and
         abysmally slow LTE at that), he starts to realize how bloated

dist/coolLinks.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>Blog Index</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: January 26, 2024</p>
         <p class="meta">Page last modified: March 4, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         <p>Pages I think are cool:</p>
         <p><a href="https://cronyakatsuki.xyz" target="_blank">Crony’s
         Page</a> <a href="https://kaku.moe" target="_blank">Sensokaku’s

dist/css/style.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/scss/style.scss"],"names":[],"mappings":"AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAgBQ;AAkBR;EACI;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA,kBA9BS;EA+BT,OA9BS;;;AAiCb;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA,OAxCY;;;AA2ChB;EACI;EACA;EACA;;;AAGJ;EACI,kBAnDY;EAoDZ,OArDS;EAuDT;;AAEA;EACI,OA1DK;EA2DL;EACA;;AACA;EACI;EACA;;;AAKZ;EAGI,kBAtEY;EAuEZ,OApEa;EAqEb;EACA;EAEA,aAPM;EAQN,gBARM;EAUN;EACA;EAEA;;;AAGJ;EACI;EACA;;;AAGJ;EAGI;EACA;EACA;EACA;EACA;EAEA,cARM;EASN,eATM;EAWN;EACA;EACA;EACA;EACA;EAIA;;AAHA;EACI;;;AAKR;AAAA;AAAA;AAAA;AAAA;AAAA;EAMI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OAhIa;EAiIb;;;AAGJ;EACI,OA9HW;EAkIX;;AAHA;EACE,OA9HS;;;AAmIf;EACI,kBArIa;EAsIb,OA9Ia;;AA+Ib;EACE,kBAzIS;;;AA8If;EACI;EACA;;;AAGJ;EACI,kBA5JY;EA6JZ;EACA;;;AAGJ;EACI;EACA,kBAnKY;EAoKZ,OAzJa;EA0Jb;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EAMA;;AALA;EACI;EACA;EACA;;;AAKR;EACI;EACA;EACA;;;AAGJ;EACI,kBA5La;;;AA+LjB;EACI;EACA;EACA;;;AAGJ;EACI,kBAzMY;EA0MZ,OAtMa","file":"style.css"}

dist/git/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>You shouldn’t be here…</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: January 26, 2024</p>
         <p class="meta">Page last modified: January 26, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         <p>This is supposed to be the location of a Gitea instance, the
         webserver is likely misconfigured…</p>
         <p>Until next time…</p>

dist/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>bear.oops.wtf</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: January 6, 2024</p>
         <p class="meta">Page last modified: March 11, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         <p>Hello, I’m Bear. I don’t have much to put here. I play some
         games (Tetris recently),</p>
         <p><a href="/coolLinks.html">Cool Links</a> <a

dist/main.js

@@ -0,0 +1 @@
+({982:function(){var n=this&&this.__awaiter||function(n,t,e,o){return new(e||(e=Promise))((function(r,c){function a(n){try{u(o.next(n))}catch(n){c(n)}}function i(n){try{u(o.throw(n))}catch(n){c(n)}}function u(n){var t;n.done?r(n.value):(t=n.value,t instanceof e?t:new e((function(n){n(t)}))).then(a,i)}u((o=o.apply(n,t||[])).next())}))},t=this&&this.__generator||function(n,t){var e,o,r,c,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return c={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(c[Symbol.iterator]=function(){return this}),c;function i(i){return function(u){return function(i){if(e)throw new TypeError("Generator is already executing.");for(;c&&(c=0,i[0]&&(a=0)),a;)try{if(e=1,o&&(r=2&i[0]?o.return:i[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,i[1])).done)return r;switch(o=0,r&&(i=[2&i[0],r.value]),i[0]){case 0:case 1:r=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,o=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!((r=(r=a.trys).length>0&&r[r.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!r||i[1]>r[0]&&i[1]<r[3])){a.label=i[1];break}if(6===i[0]&&a.label<r[1]){a.label=r[1],r=i;break}if(r&&a.label<r[2]){a.label=r[2],a.ops.push(i);break}r[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(n,a)}catch(n){i=[6,n],o=0}finally{e=r=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}};document.addEventListener("DOMContentLoaded",(function(){return n(this,void 0,void 0,(function(){return t(this,(function(n){return console.debug("%c\n\nUA: ".concat(navigator.userAgent," \n\nTITLE: ").concat(document.title," \n\nEC: ").concat(document.getElementsByTagName("*").length," \n"),"color: #fbf1c7; font-size: 20px; background-color: #1e1e2e;"),[2]}))}))}))}})[982]();

dist/snoop.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>bear.oops.wtf</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: January 6, 2024</p>
         <p class="meta">Page last modified: March 11, 2024</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         
     </article>
 </body>

js/main/main.ts

@@ -0,0 +1,10 @@
+async function printInfo(): Promise<void> {
+    const con = console;
+
+    con.debug(`%c\n
+UA: ${navigator.userAgent} \n
+TITLE: ${document.title} \n
+EC: ${document.getElementsByTagName("*").length} \n`, "color: #fbf1c7; font-size: 20px; background-color: #1e1e2e;");
+}
+
+document.addEventListener("DOMContentLoaded", printInfo);

src/scss/style.scss

@@ -1,19 +1,4 @@
-/*
+@use "sass:math";
- *   Copyright (c) 2024 BearFM
-
- *   This program is free software: you can redistribute it and/or modify
- *   it under the terms of the GNU General Public License as published by
- *   the Free Software Foundation, either version 3 of the License, or
- *   (at your option) any later version.
-
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty of
- *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *   GNU General Public License for more details.
-
- *   You should have received a copy of the GNU General Public License
- *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
 @import "https://fonts.googleapis.com/icon?family=Material+Icons";
 
 $gruvbox-bg: #1e1e2e;
@@ -116,16 +101,14 @@ nav {
 }
 
 .article {
-    $pad: 42.25%;
-
     margin-top: 0;
     margin-bottom: auto;
     margin-left: 0;
     margin-right: 0;
     text-align: left;
 
-    padding-left: $pad;
+    padding-left: 30%;
-    padding-right: $pad;
+    padding-right: 30%;
 
     display: flex;
     flex-direction: column;
@@ -138,6 +121,19 @@ nav {
     white-space: normal;
 }
 
+@media (max-width: 978px) {
+    .article {
+        padding-left: 5%;
+        padding-right: 5%;
+    }
+
+    .barticle {
+        padding-left: 5%;
+        padding-right: 5%;
+    }
+
+}
+
 .article h1,
 .article h2,
 .article h3,

src/tmpl.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
     <script src="/css.js" type=""></script>
+    <script src="/main.js" type=""></script>
     <title>$title$</title>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
@@ -31,7 +32,7 @@
         <p class="meta">Page created: $date$</p>
         <p class="meta">Page last modified: $modified$</p>
     </div>
-    <article class="article">
+    <article class="article" id="article-body">
         $body$
     </article>
 </body>

webpack.config.js

@@ -14,6 +14,7 @@ const config = {
     entry: {
         blogIndex: glob.sync("./js/blogIndex/**/*.ts").map(file => path.resolve(file)),
         css: glob.sync("./js/css/**/*.ts").map(file => path.resolve(file)).concat(["./src/scss/style.scss"]),
+        main: glob.sync("./js/main/**/*.ts").map(file => path.resolve(file)),
 
     },
     output: {