Added reset.css file

static/karbs/css/karbs.css

@@ -1,7 +1,5 @@
 main {
-  border-color: #30363d;
+  border: 1px solid #30363d;
-  border-style: solid;
-  border-width: 1px;
   max-width: 700px;
   color: #f0f6fc;
   padding: 50px;

static/main/css/layout.css

@@ -1,90 +1,3 @@
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  vertical-align: baseline;
-}
-
 html,
 body {
   font-family: 'Roboto', sans-serif;

static/main/css/reset.css

@@ -0,0 +1,123 @@
+/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  margin: 0;
+  padding: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

templates/karbs/instructions.html

@@ -1,51 +1,73 @@
 {% extends 'layout.html' %}
 {% load static %}
-{% block title %} {{ title }} {% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block meta %}
-    <link rel="stylesheet" type="text/css" href="{% static 'karbs/css/karbs.css' %}" />
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'karbs/css/karbs.css' %}"/>
 {% endblock %}
 {% block content %}
-    <h1>Kristofers Auto-Rice Bootsrapping Script (KARBS)</h1><hr>
+    <h1>Kristofers Auto-Rice Bootsrapping Script (KARBS)</h1>
-
+    <hr>
-    <p>KARBS is an efficient shell script that will install a fully-featured tiling window manager-based system on any
+    <p>
+        KARBS is an efficient shell script that will install a fully-featured tiling window manager-based system on any
         <a href="https://archlinux.org/" target="_blank">Arch</a> or
         <a href="https://artixlinux.org/" target="_blank">Artix</a>
-        Linux-based system, without any of the routine of manual post-install processes and configuration.</p>
+        Linux-based system, without any of the routine of manual post-install processes and configuration.
-    <p>By default, KARBS installs and deploys
+    </p>
-        <a href="https://github.com/kristoferssolo/solorice" targer="_blank">my own personal dotfiles</a>.</p>
+    <p>
-
+        By default, KARBS installs and deploys
-    <h2>Installation</h2><hr>
+        <a href="https://github.com/kristoferssolo/solorice" targer="_blank">my own personal dotfiles</a>.
-
+    </p>
-    <p>On any (preferrably fresh) install of an
+    <h2>Installation</h2>
+    <hr>
+    <p>
+        On any (preferrably fresh) install of an
         <a href="https://archlinux.org/" target="_blank">Arch</a> or
         <a href="https://artixlinux.org/" target="_blank">Artix</a>
-        Linux, make sure <code>curl</code> is installed and just run the following as the root user:</p>
+        Linux, make sure <code>curl</code> is installed and just run the following as the root user:
-
+    </p>
     <pre><code>curl -LO krisrofers.xyz/karbs.sh
 sh karbs.sh</code></pre>
-
+    <p>
-    <p>Note that the KARBS scripts will not partition any drives or wipe anything, <strong>but</strong> when it deploys the dotfiles, it will overwrite any preexisting files: e.g. the KARBS .zshrc will replace your old .zshrc, etc.</p>
+        Note that the KARBS scripts will not partition any drives or wipe anything, <strong>but</strong> when it deploys the dotfiles, it will overwrite any preexisting files: e.g. the KARBS .zshrc will replace your old .zshrc, etc.
-
+    </p>
-    <h2>What does KARBS install?</h2><hr>
+    <h2>What does KARBS install?</h2>
-
+    <hr>
-    <p>You can check out the programs list that KARBS parses for installation <a href="https://github.com/kristoferssolo/karbs/blob/main/pkg-files/minimal-pkgs" target="_blank">right here</a>!</p>
+    <p>
-
+        You can check out the programs list that KARBS parses for installation <a href="https://github.com/kristoferssolo/karbs/blob/main/pkg-files/minimal-pkgs"
+    target="_blank">right here</a>!
+    </p>
     <p>Here is some idea of the programs installed:</p>
-
+    <aside>
-    <aside>If you don't know any of these programs and this is all Greek to you, don't worry because it's all done automatically for you and you will learn as you use the system.</aside>
+        If you don't know any of these programs and this is all Greek to you, don't worry because it's all done automatically for you and you will learn as you use the system.
-
+    </aside>
     <ul class="list">
-        <li><a href="https://awesomewm.org/" target="_blank">awesome</a> - a highly configurable, next generation framework window manager for X</li>
+        <li>
-        <li>Minimalist and keyboard-centric programs for
+            <a href="https://awesomewm.org/" target="_blank">awesome</a> - a highly configurable, next generation framework window manager for X
+        </li>
+        <li>
+            Minimalist and keyboard-centric programs for
             <ul class="list">
-                <li>file management (<a href="https://github.com/gokcehan/lf" target="_blank">lf</a>),</li>
+                <li>
-                <li>video (<a href="https://mpv.io/" target="_blank">mpv</a>),</li>
+                    file management (<a href="https://github.com/gokcehan/lf" target="_blank">lf</a>),
-                <li>image viewer (<a href="https://github.com/nsxiv/nsxiv" target="_blank">nsxiv</a>),</li>
+                </li>
-                <li>pdf/djvu/epub reader (<a href="https://pwmt.org/projects/zathura/" target="_blank">zathura</a>).</li>
+                <li>
+                    video (<a href="https://mpv.io/" target="_blank">mpv</a>),
+                </li>
+                <li>
+                    image viewer (<a href="https://github.com/nsxiv/nsxiv" target="_blank">nsxiv</a>),
+                </li>
+                <li>
+                    pdf/djvu/epub reader (<a href="https://pwmt.org/projects/zathura/" target="_blank">zathura</a>).
+                </li>
             </ul>
-            <li>A well featured and configured shell (<a href="https://www.zsh.org/" target="_blank">zsh</a>) and other core programs.</li>
+            <li>
+                A well featured and configured shell (<a href="https://www.zsh.org/" target="_blank">zsh</a>) and other core programs.
+            </li>
         </li>
     </ul>
-
+    <p>
-    <p>Note that making your own fork of KARBS is as easy as using your own dotfiles, making a programs file like the one above, and making any other direct changes to the script you want.</p>
+        Note that making your own fork of KARBS is as easy as using your own dotfiles, making a programs file like the one above, and making any other direct changes to the script you want.
+    </p>
 {% endblock %}

templates/layout.html

@@ -3,30 +3,39 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+        <meta name="viewport"
+              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
         <link rel="icon" href="{% static 'main/img/logo.svg' %}" />
-        <title>{% block title %}{% endblock %}</title>
+        <title>
-        <link rel="stylesheet" type="text/css" href="{% static 'main/css/layout.css' %}" />
+            {% block title %}{% endblock %}
+        </title>
+        <link rel="stylesheet"
+              type="text/css"
+              href="{% static 'main/css/reset.css' %}"/>
+        <link rel="stylesheet"
+              type="text/css"
+              href="{% static 'main/css/layout.css' %}"/>
         {% block meta %}{% endblock %}
     </head>
-
     <body>
         <div class="page-container">
             <div class="content-wrap">
-
                 <header>
                     <div>
                         <ul>
-                            <li><a href="{% url 'home' %}">Home</a></li>
+                            <li>
-                            <li><a href="{% url 'instructions' %}">Karbs</a></li>
+                                <a href="{% url 'home' %}">Home</a>
+                            </li>
+                            <li>
+                                <a href="{% url 'instructions' %}">Karbs</a>
+                            </li>
                         </ul>
                     </div>
                 </header>
-
+                <main>
-                <main>{% block content %}{% endblock %}</main>
+                    {% block content %}{% endblock %}
-
+                </main>
             </div>
         </div>
     </body>
-
 </html>

templates/main/index.html

@@ -1,12 +1,16 @@
 {% extends 'layout.html' %}
 {% load static %}
-{% block title %} {{ title }} {% endblock %}
+{% block title %}{{ title }}{% endblock %}
 {% block meta %}
-    <link rel="stylesheet" type="text/css" href="{% static 'main/css/index.css' %}" />
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'main/css/index.css' %}"/>
 {% endblock %}
 {% block content %}
     <div class="center">
         <p>At the moment this website is under construction.</p>
-        <p>For now you can check out <a href="{% url 'instructions' %}">KARBS</a>.</p>
+        <p>
+            For now you can check out <a href="{% url 'instructions' %}">KARBS</a>.
+        </p>
     </div>
 {% endblock %}

templates/main/lightsaber.html

@@ -5,33 +5,31 @@
         <meta charset="UTF-8" />
         <title>Lightsaber</title>
         <link rel="preconnect" href="https://fonts.gstatic.com" />
-        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap"
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
+              rel="stylesheet"/>
-        <link rel="stylesheet" type="text/css" href="{% static 'main/css/lightsaber.css' %}" />
+        <link rel="stylesheet"
+              href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
+        <link rel="stylesheet"
+              type="text/css"
+              href="{% static 'main/css/lightsaber.css' %}"/>
     </head>
     <body>
         <label for="green">Green</label>
         <input type="radio" id="green" name="color" checked />
-
         <label for="blue">Blue</label>
         <input type="radio" id="blue" name="color" />
-
         <label for="yellow">Yellow</label>
         <input type="radio" id="yellow" name="color" />
-
         <label for="purple">Purple</label>
         <input type="radio" id="purple" name="color" />
-
         <label for="red">Red</label>
         <input type="radio" id="red" name="color" />
-
         <label for="darksaber">Darksaber</label>
         <input type="radio" id="darksaber" name="color" />
-
         <div class="lightsaber">
             <input type="checkbox" id="on-off" />
             <div class="blade"></div>
-            <label class="hilt" for="on-off"> </label>
+            <label class="hilt" for="on-off"></label>
             <embed src="https://assets.codepen.io/308367/coolsaber.mp3" type="" />
         </div>
     </body>