jekyll-98 0.1.0

data/_includes/social.html

@@ -0,0 +1,230 @@
+{%- assign social = site.jekyll-98.social_links -%}
+
+{% unless include.hide_email %}
+  {%- if site.author.email -%}
+    <a
+      target="_blank"
+      class="social-icon"
+      href="mailto:{{ site.author.email | cgi_escape | escape }}"
+      title="{{ site.author.email | escape }}">
+      <img src="{{ "/assets/social/Mail.png" | absolute_url }}" />
+      {% if include.showname %}
+        {{ site.author.email }}
+      {%- endif -%}
+    </a>
+  {%- endif -%}
+{% endunless %}
+{%- if social.github -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://github.com/{{ social.github | cgi_escape | escape }}"
+    title="{{ social.github | escape }}">
+    <img src="{{ "/assets/social/github.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.github }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- for glb in social.gitlab -%}
+  {%- if glb.username and glb.instance -%}
+    <a
+      target="_blank"
+      class="social-icon"
+      rel="me"
+      href="https://{{ glb.instance | cgi_escape | escape}}/{{glb.username}}"
+      title="{{ glb.username | escape }}">
+      <img src="{{ "/assets/social/gitlab.svg" | absolute_url }}" />
+      {% if include.showname %}
+        {{ glb.username }}
+      {% endif %}
+    </a>
+  {%- endif -%}
+{%- endfor -%}
+{%- if social.instagram -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://www.instagram.com/{{ social.instagram | cgi_escape | escape }}"
+    title="{{ social.instagram | escape }}">
+    <img src="{{ "/assets/social/instagram.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.instagram }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.twitter -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://twitter.com/{{ social.twitter | cgi_escape | escape }}"
+    title="{{ social.twitter | escape }}">
+    <img src="{{ "/assets/social/twitter.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.twitter }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.twitch -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://twitch.com/{{ social.twitch | cgi_escape | escape }}"
+    title="{{ social.twitch | escape }}">
+    <img src="{{ "/assets/social/twitch.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.twitch }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.youtube -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://www.youtube.com/{{ social.youtube | cgi_escape | escape }}"
+    title="{{ social.youtube | escape }}">
+    <img src="{{ "/assets/social/youtube.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.youtube }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.youtube_channel -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://www.youtube.com/channel/{{ social.youtube_channel | cgi_escape | escape }}"
+    title="{{ social.youtube_channel_name | escape | default: 'YouTube' }}"><img src="{{ "/assets/social/youtube.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.youtube_channel_name }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.facebook -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://www.facebook.com/{{ social.facebook | cgi_escape | escape }}"
+    title="{{ social.facebook | escape }}"><img src="{{ "/assets/social/facebook.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.facebook }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.linkedin -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://www.linkedin.com/in/{{ social.linkedin | cgi_escape | escape }}"
+    title="{{ social.linkedin | escape }}"><img src="{{ "/assets/social/linkedin.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.linkedin }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.stackoverflow -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://stackoverflow.com/users/{{ social.stackoverflow | cgi_escape | escape }}"
+    title="{{ social.stackoverflow | escape }}"><img src="{{ "/assets/social/stackoverflow.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.stackoverflow }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.dribbble -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://dribbble.com/{{ social.dribbble | cgi_escape | escape }}"
+    title="{{ social.dribbble | escape }}"><img src="{{ "/assets/social/dribble.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.dribbble }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.flickr -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://www.flickr.com/photos/{{ social.flickr | cgi_escape | escape }}"
+    title="{{ social.flickr | escape }}"><img src="{{ "/assets/social/flickr.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.flickr }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.pinterest -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://www.pinterest.com/{{ social.pinterest | cgi_escape | escape }}"
+    title="{{ social.pinterest | escape }}"><img src="{{ "/assets/social/pinterest.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.pinterest }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- for mst in social.mastodon -%}
+  {%- if mst.username and mst.instance -%}
+    <a
+      target="_blank"
+      class="social-icon"
+      rel="me"
+      href="https://{{ mst.instance | cgi_escape | escape}}/@{{mst.username}}"
+      title="{{ mst.username | escape }}"><img src="{{ "/assets/social/mastodon.svg" | absolute_url }}" />
+      {% if include.showname %}
+        {{ mst.username }}
+      {% endif %}
+    </a>
+  {%- endif -%}
+{%- endfor -%}
+{%- if social.telegram -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://t.me/{{ social.telegram | cgi_escape | escape }}"
+    title="{{ social.telegram | escape }}"><img src="{{ "/assets/social/telegram.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.telegram }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.keybase -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    rel="me"
+    href="https://keybase.io/{{ social.keybase | cgi_escape | escape }}"
+    title="{{ social.keybase | escape }}"><img src="{{ "/assets/social/keybase.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.keybase }}
+    {% endif %}
+  </a>
+{%- endif -%}
+{%- if social.devto -%}
+  <a
+    target="_blank"
+    class="social-icon"
+    href="https://dev.to/{{ social.devto | cgi_escape | escape }}"
+    title="{{ social.devto | escape }}">
+    <img src="{{ "/assets/social/devto.svg" | absolute_url }}" />
+    {% if include.showname %}
+      {{ social.devto }}
+    {% endif %}
+  </a>
+{%- endif -%}

data/_includes/start-menu-item.html

@@ -0,0 +1,13 @@
+<a href="{{ include.url }}">
+  <div class="start-menu-item">
+    {% assign homeurl = "/" | absolute_url %}
+    {% assign homeicon = "/assets/icons/" | append: site.jekyll-98.icon | default: 'computer' | append: ".png" | absolute_url %}
+    {% assign iconlink = include.icon | default: 'document' | prepend: "/assets/icons/" | append: ".png" | absolute_url %}
+    {% if include.url == homeurl %}
+      {% assign iconlink = homeicon %}
+    {% endif %}
+    <img src="{{ iconlink }}" alt="{{ include.alt }}" />
+    <div class="start-menu-item__title">{{ include.title }}</div>
+    <div class="start-menu-item__alt">{{ include.alt }}</div>
+  </div>
+</a>

data/_includes/startmenu.html

@@ -0,0 +1,70 @@
+<script>
+  // if you're reading this and you know how to accomplish this without js, please let me know!
+  function closeStart() {
+    document.getElementById('start').checked = false;
+  }
+</script>
+
+<nav id="start-menu-nav">
+  <label
+    class="window"
+    aria-label="Start"
+    for="start">
+    <img src="{{ "/assets/icons/start.png" | absolute_url }}" />
+    Start
+  </label>
+  <input type="checkbox" id="start" />
+  <div id="start-menu-close" onclick="closeStart()"></div>
+  <div id="start-menu-items" class="window">
+    <div class="start-menu-banner"></div>
+
+    <div>
+      {% assign homelink = "/" | absolute_url %}
+      {% include start-menu-item.html 
+       url = homelink
+       title=site.title
+       icon=site.jekyll-98.icon
+       alt = "Go back to homepage" %}
+
+      {% for category in site.jekyll-98.desktop_categories %}
+        {% assign category_exists = site.categories[category] %}
+        {% if category_exists.size > 0 %}
+          {% assign label = category | capitalize %}
+          {% assign href = "/category/" | append: category | absolute_url %}
+          {% assign alt_text = "Browse posts tagged " | append: category %}
+          {% include start-menu-item.html
+           url=href
+           title=label
+           icon = "documents"
+           alt=alt_text %}
+        {% endif %}
+      {% endfor %}
+
+      {%- for link in site.jekyll-98.site_links -%}
+        {%- if link.title and link.url -%}
+          {% include start-menu-item.html
+           url=link.url
+           title=link.title
+           icon=link.icon
+           alt=link.alt %}
+        {%- endif -%}
+      {%- endfor -%}
+
+      {% if site.jekyll-98.contact %}
+        {% assign contactlink = "/contact.html" | absolute_url %}
+        {% include start-menu-item.html 
+         url = contactlink
+         title = "Contact Information"
+         icon = "contact"
+         alt = "How to contact the author" %}
+      {% endif %}
+
+      {% assign aboutlink = "/about.html" | absolute_url %}
+      {% include start-menu-item.html 
+       url = aboutlink
+       title = "About"
+       icon = "info"
+       alt = "Information about this site" %}
+    </div>
+  </div>
+</nav>

data/_includes/stylelink.html

@@ -0,0 +1,12 @@
+{%- comment -%} EXPERIMENTAL - Swaps 98.css for XP.css with no other changes - will require fixes {%- endcomment -%}
+{% if site.jekyll-98.xp %}
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/xp.css"
+  > 
+{% else %}
+  <link
+      rel="stylesheet"
+      href="https://unpkg.com/xp.css/dist/98.css"
+  >
+{% endif %}

data/_includes/systray.html

@@ -0,0 +1,35 @@
+<!-- because this is a cheesy Windows 98 theme, include cheesy Windows 98 sound  -->
+<audio id="sound">
+  <source src="{{ "/assets/98sound.wav" | absolute_url}}" type="audio/wav">
+</audio>
+<script>
+  function playSound() {
+    document.getElementById("sound").play();
+  }
+</script>
+
+<div class="status-bar">
+  <div class="systray status-bar-field">
+    <a href="{{"/feed.xml" | absolute_url }}">
+      <img src="{{ "/assets/icons/feed.png" | absolute_url }}" style="margin-top: 5px" class="trayicon" aria-label="Link to atom feed of posts" />
+    </a>
+    <img src="{{ "/assets/icons/sound.png" | absolute_url }}" onclick="playSound()" class="trayicon">
+    <a class="has-tooltip">
+      <img src="{{"/assets/icons/help_small.png" | absolute_url }}" class="trayicon" 
+      aria-label="
+      jekyll-98 theme by queenkjuul
+      depends on XP.css by botoxparty
+      which is built on 98.css by jdan
+      depends on balloon.css by kazzkiq
+      all of which are under the MIT license
+      uses SuperTinyIcons by edent
+      see license information here: 
+      https://github.com/edent/SuperTinyIcons
+      ">
+    </a>
+    <div class="systray-balloon">
+      {% include about_text.html %}
+    </div>
+    {{ site.time | date: '%H:%M'}}
+  </div>
+</div>

data/_includes/titlebar.html

@@ -0,0 +1,15 @@
+<div class="title-bar">
+  <div class="title-bar-text">
+    {%- if include.icon -%}
+    <img src="/assets/icons/{{ include.icon }}.png" class="title-bar__icon" />
+    {%- endif -%} {{ include.title }}
+  </div>
+  <div class="title-bar-controls">
+    {%- if include.help -%}
+    <button aria-label="Help"></button>
+    {%- endif -%}
+    <button aria-label="Minimize"></button>
+    <button aria-label="Maximize"></button>
+    <button aria-label="Close"></button>
+  </div>
+</div>

data/_includes/window.html

@@ -0,0 +1,22 @@
+<div class="window {{ include.class }}" style="width: {{ include.width }}; {{ include.style }}">
+  <!-- title bar -->
+  {% include titlebar.html
+    title=include.title
+    help=include.help
+  %}
+
+  <!-- window body -->
+  <div class="window-body">
+
+    {{ include.content }}
+
+    {% if include.buttons %} 
+      {% include okcancel.html %}
+    {% endif %}
+
+    {% if include.statusbar %}
+      {{ include.statusbar }}
+    {% endif %}
+
+  </div>
+</div>

data/_layouts/category_index.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+
+<div class="home">
+  {% include desktop_icons.html hide=true %}
+
+  <div class="window">
+    {% include titlebar.html title=page.title %}
+  <div class="window-body">
+    <h1>Archive of posts tagged '{{ page.title }}'</h1>
+    <br />
+    {% include post_list.html %}
+  </div>
+</div>

data/_layouts/default.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "end" }}">
+
+  {%- include head.html -%}
+  
+  <body class="desktop">
+    <main>
+      <div class="page-content" aria-label="Content">
+        {{ content }}
+      </div>
+    </main>
+    
+    {%- include footer.html -%}
+    
+  </body>
+</html>

data/_layouts/error.html

@@ -0,0 +1,58 @@
+---
+layout: default
+---
+
+{% capture error_content %}
+<table cellpadding="3" cellspacing="5" style="font-size: 1.2rem; padding: 8px;">
+  <tr>
+    <td id="tableProps" valign="top" align="left" width="34"><img id="pagerrorImg" SRC="{{ "/assets/icons/error.png" | absolute_url }}"
+    width="33" height="33"><td width="360"><h4 id="textSection1"
+    ><span id="errorText">The page cannot be displayed</span></h4></td>
+    </td>
+  </tr>
+  <tr>
+    <td id="tablePropsWidth" colspan="2"><font
+    >The page you are looking for is currently
+    unavailable. The Web site might be experiencing technical difficulties, or you may need to
+    adjust your browser settings.</font></td>
+  </tr>
+  <tr>
+    <td id="tablePropsWidth" colspan="2"><font id="LID1"
+    ><hr color="#C0C0C0" noshade>
+    <p id="LID2">Please try the following:</p><ul>
+      <li id="instructionsText1">Click the 
+      <a href="javascript:location.reload()" target="_self">
+      <img valign="bottom" border=0 src="{{ "/assets/icons/refresh.png" | absolute_url }}" width="16" height="16"
+        alt="refresh.gif (82 bytes)"></a> <a href="javascript:location.reload()" onclick="function () { location.reload() }" target="_self">Refresh</a> button, or try again later.<br>
+      </li>
+      
+      <li id="instructionsText2">If you typed the page address in the Address bar, make sure that
+        it is spelled correctly.<br>
+      </li>
+      <li id="instructionsText3">To check your connection settings, click the <b>Tools</b> menu, and then click
+        <b>Internet Options</b>. On the <b>Connections</b> tab, click <b>Settings</b>.
+        The settings should match those provided by your local area network (LAN) administrator or Internet service provider (ISP). </li>
+      <li ID="list4">If your Network Administrator has enabled it, Microsoft Windows
+          can examine your network and automatically discover network connection settings.<BR>
+          If you would like Windows to try and discover them,
+          <br>click <a  href="" title="Detect Settings"><img border=0 src="{{ "/assets/icons/search.png" | absolute_url }}" width="16" height="16" alt="Detect Settings" valign="bottom"> Detect Network Settings</a> 
+      </li>
+    <li id="instructionsText5">
+        Some sites require 128-bit connection security. Click the <b>Help</b> menu and then click <b> About Internet Explorer </b> to determine what strength security you have installed.
+    </li>
+    <li id="instructionsText4">
+        If you are trying to reach a secure site, make sure your Security settings can support it. Click the <B>Tools</b> menu, and then click <b>Internet Options</b>.  On the Advanced tab, scroll to the Security section and check settings for SSL 2.0, SSL 3.0, TLS 1.0, PCT 1.0. 
+    </li>
+      <li id="list3">Click the <a href="javascript:history.back()" onclick="function () { history.back() }"><img valign=bottom border=0 src="{{ "/assets/icons/back.png" | absolute_url }}" width="16" height="16"> Back</a> button to try another link. </li>    
+    </ul>
+    <p><br>
+    </p>
+    <h6 id="IEText" >Cannot find server or DNS Error<BR> Internet Explorer 
+	
+    </h2>
+    </font></td>
+  </tr>
+</table>
+{% endcapture %}
+
+{% include window.html title="Page not found - Microsoft Internet Explorer" content=error_content style="max-width: 550px; margin: 16px" %}

data/_layouts/home.html

@@ -0,0 +1,21 @@
+---
+layout: default
+---
+
+<div class="home">
+
+
+  {% include desktop_icons.html %}
+
+  <div class="window">
+    {% include titlebar.html title=site.title %}
+
+    <div class="window-body">
+      <h1>{{ site.title }}</h1>
+      <br />
+      <h4>{{ site.description }}</h4>
+      <br />
+      {% include post_list.html %}
+    </div>
+  </div>
+</div>

data/_layouts/post.html

@@ -0,0 +1,28 @@
+---
+layout: default
+---
+{% capture window_content %}
+<div class="post-content window-body">
+  <h1>{{page.title}}</h1>
+  {{content}}
+</div>
+{% endcapture %}
+
+{% capture status_bar_content %}
+  <div class="status-bar">
+    <div class="status-bar-field status-bar-date">
+      {%- assign date_format = site.jekyll-98.date_format | default: "%b %-d, %Y" -%} 
+      {{ page.date | date: date_format }}
+    </div>
+    {% for category in page.categories %}
+      <div class="status-bar-field">
+        {{category}}
+      </div>
+    {% endfor %}
+  </div>
+{% endcapture %}
+
+<div class="post-page">
+  {% include desktop_icons.html hide=true %}
+  {% include window.html title=page.title content=window_content statusbar=status_bar_content %}
+</div>

data/_sass/jekyll-98/_base.scss

@@ -0,0 +1,47 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+} 
+
+.window {
+
+  & h1 {
+    font-size: 2rem;
+  }
+  
+  & h2 {
+    font-size: 1.6rem;
+  }
+  
+  & h3 {
+    font-size: 1.4rem;
+  }
+  
+  & h4 {
+    font-size: 1.2rem;
+  }
+  
+  & h5 {
+    font-size: 1.1rem;
+  }
+  
+  & h6 {
+    font-size: 1rem;
+  }
+}
+
+* {
+  font-family: "Pixelated MS Sans Serif";
+  font-smooth: never;
+  -webkit-font-smoothing: none;
+}
+
+ul {
+  margin-left: 16px;
+}

data/_sass/jekyll-98/_contact.scss

@@ -0,0 +1,47 @@
+.contact-page {
+  display: flex;
+  flex-direction: row;
+
+  & .window-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  & .contact-title {
+    display: flex; 
+    flex-direction: row; 
+    justify-content: center; 
+    align-items: center;
+    gap: 16px;
+  }
+
+  & .contact-window {
+      display: block;
+      position: relative;
+      top: 16px;
+      margin: 0px auto 128px auto;
+      min-width: 50%;
+      max-width: 96vw;
+  }
+
+  & .contact-address {
+    font-size: 1rem;
+  }
+
+  & .contact-social-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px;
+  }
+
+  & .social-icon {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: fit-content;
+  }
+}

data/_sass/jekyll-98/_desktop_icons.scss

@@ -0,0 +1,38 @@
+.desktop-icons {
+  display: flex;
+  flex-direction: column;
+  // margin: 16px;
+
+  & a {
+    text-decoration: none;
+    color: black;
+  }
+}
+
+.desktop-icon {
+  margin: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 96px;
+  max-width: 96px;
+  max-height: 64px;
+  height: 64px;
+
+  & img {
+    width: 48px;
+    height: 48px;
+  }
+
+  & figcaption {
+    font-family: 'Pixelated MS Sans Serif';
+    margin-top: 8px;
+  }
+
+  @include media-query($on-palm) {
+    margin: 16px 0px 0px 8px;
+    max-width: 72px;
+  }
+}