jekyll-98 0.1.0

data/_sass/jekyll-98/_footer.scss

@@ -0,0 +1,222 @@
+// root taskbar "window"
+.taskbar {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+// Start button
+label[aria-label="Start"], button[aria-label="Start"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  width: 56px;
+  height: 23px;
+  max-height: 23px;
+  max-width: 56px;
+  padding: 0 4px;
+  margin: 0px 4px 0px 0px;
+
+  font-weight: bold;
+  text-align: left;
+  font-size: 11px;
+
+  & > img {
+    max-width: 16px;
+    margin-right: 4px;
+  }
+}
+
+// wrapper containing menu entries
+#start-menu-items a {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  text-decoration: none;
+  color: black;
+
+  &:hover {
+    color: white;
+    background-color: navy;
+  }
+}
+
+/* TOGGLE SHOW/HIDE MENU */
+#start-menu-items { display: none; }
+#start-menu-close { display: none; }
+
+// start menu while opened
+#start-menu-nav input:checked ~ #start-menu-items { 
+  display: grid; 
+  position: absolute;
+  bottom: 30px;
+  left: 0px;
+  min-height: 300px;
+  min-width: 200px;
+  max-width: 1/3;
+  grid-template-columns: 21px 1fr;
+}
+
+#start-menu-nav input:checked ~ #start-menu-close {
+  display: block;
+  position: absolute;
+  top: -100vh;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  min-width: 100vw;}
+
+.start-menu-banner {
+  width: 21px;
+  height: 100%;
+  background-color: navy;
+  background-image: url('../../assets/icons/98banner.png');
+  background-position-y: bottom;
+  background-repeat: no-repeat;
+}
+
+.start-menu-item {
+  display: grid;
+  grid-template-areas:
+    "icon title"
+    "icon alt";
+  
+  grid-template-rows: 24px 16px;
+  grid-template-columns: 32px 1fr;
+  column-gap: 8px;
+
+  border-bottom: 2px groove;
+
+  & img {
+    grid-area: icon;
+    width: 32px;
+    height: 32px;
+    // margin: 4px;
+    margin: auto;
+    margin-left: 4px;
+  }
+
+  &__title {
+    grid-area: title;
+    font-size: 12px;
+    font-weight: bold;
+    margin: 4px;
+    padding-top: 4px;
+  }
+
+  &__alt {
+    grid-area: alt;
+    font-size: 11px;
+    margin-left: 4px;
+  }
+}
+
+.social-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  height: 23px;
+
+  & > * {
+    margin: 0px 4px;
+  }
+}
+
+.social-icon {
+  height: 18px;
+  width: 18px;
+  padding: 1px 2px 2px 2px;
+  // padding: 2px;
+
+
+
+  & > img {
+    @extend .social-icon;
+    &:hover {
+      border-right: 1px solid slategrey;
+      border-bottom: 1px solid slategray;
+      border-left: 1px solid white;
+      padding: 1px;
+    }
+  }
+
+}
+
+.systray {
+  display: flex;
+  min-height: 18px;
+  height: 18px;
+  align-self: center;
+  justify-content: center;
+  align-items: center;
+  margin-right: 4px !important;
+}
+
+.stendo {
+  width: 100%;
+  flex-grow: 1;
+}
+
+.trayicon {
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+}
+
+.systray-balloon {
+  display: none;
+
+  & img {
+    width: 18px;
+    height: 18px;
+    align-self: center;
+    margin: auto;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+
+  }
+
+  &__header {
+    color: black;
+    padding: 16px 8px;
+    font-weight: bold;
+    font-size: 14px;
+    text-align: left;
+
+    grid-column: 2 / 3;
+    grid-row: 1 / 2;
+
+    & a {
+      text-decoration: none;
+      color: black;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__content {
+    grid-column: 1 / 3;
+    grid-row: 2 / 3;
+  }
+}
+
+.has-tooltip:hover + .systray-balloon {
+  display: grid;
+  background-color: #F2F2D6;
+  border-radius: 5px;
+  position: absolute;
+  bottom: 34px;
+  right: 12px;
+  padding: 0px 16px 16px;
+}

data/_sass/jekyll-98/_home.scss

@@ -0,0 +1,16 @@
+.home {
+  display: flex;
+  & .window {
+    margin: 16px;
+    height: fit-content;
+  }
+  & .window-body {
+    padding: 16px;
+  }
+}
+
+.desktop {
+  background-color: #008080;
+  height: 100vh;
+}
+

data/_sass/jekyll-98/_layout.scss

@@ -0,0 +1,8 @@
+@import 
+  "jekyll-98/contact",
+  "jekyll-98/desktop_icons",
+  "jekyll-98/footer",
+  "jekyll-98/home",
+  "jekyll-98/post",
+  "jekyll-98/post_list",
+  "jekyll-98/window"

data/_sass/jekyll-98/_post.scss

@@ -0,0 +1,61 @@
+.post-page {
+  display: flex;
+
+  & .window {
+    margin-bottom: 128px;
+    margin-top: 16px;
+    max-width: 66%;
+
+    @include media-query($on-palm) {
+      display: block;
+      margin: 16px auto 128px auto;
+      max-width: 96vw;
+    }
+  }
+
+  & .status-bar {
+    margin: 6px -6px -6px -6px;
+    
+    &-field {
+      font-size: 1rem;
+      padding: 4px;
+    }
+  }
+}
+
+.post-content {
+  & * {
+    font-size: 1rem;
+  }
+
+  & h1, h2, h3, h4, h5, h6 {
+    margin-top: 16px;
+    margin-bottom: 8px;
+  }
+
+  & img {
+    display: block;
+    max-height: 90vh;
+    max-width: 75%;
+    margin: auto;
+  }
+
+  & p {
+    margin-top: 12px;
+    margin-bottom: 12px;
+  }
+
+  & code {
+    font-family: "Perfect DOS VGA 437 Win";
+    font-size: 1.15rem;
+  }
+
+  & pre {
+    overflow: scroll;
+  }
+
+  & .highlighter-rouge {
+    margin-top: 12px;
+    margin-bottom: 16px;
+  }
+}

data/_sass/jekyll-98/_post_list.scss

@@ -0,0 +1,88 @@
+
+.post-list {
+  & li {
+    margin-bottom: 12px;
+  }
+}
+
+.post-list-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 6fr;
+  grid-template-rows: 1 1;
+  grid-gap: 8px 0px;
+}
+
+.post-list-item {
+  display: grid;
+  grid-column: 1 / end;
+  grid-row: 1;
+  grid-template-columns: 1fr 6fr;
+  grid-template-rows: 1fr 1 1; 
+  grid-gap: 4px 0px;
+}
+
+.post-list-icon {
+  width: 80%;
+  max-width: 48px;
+  margin: auto;
+  grid-column: 1;
+  grid-row: 1 / 3;
+}
+
+.post-link {
+  font-size: 24px;
+  grid-column: 2;
+  grid-row: 1;
+
+  @include media-query($on-palm) {
+    font-size: 1rem;
+  }
+}
+
+.post-meta {
+  font-size: 14px;
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.post-excerpt {
+  font-size: 12px;
+  grid-column: 2;
+  grid-row: 3;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.post-tags {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  grid-row: 2;
+  grid-column: 2 /3;
+}
+
+.post-tag {
+  &:hover {
+    color: blue;
+    text-decoration: underline;
+  }
+}
+
+.post-categories-label {
+  font-weight: bold;
+}
+
+.pager {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+
+  & * {
+    flex-shrink: 1;
+    flex-basis: 1/3;
+  }
+}

data/_sass/jekyll-98/_window.scss

@@ -0,0 +1,31 @@
+.title-bar {
+
+  &__icon {
+    width: 12px;
+    height: 12px;
+    margin-right: 4px;
+    position: relative;
+    top: 2px;
+  }
+}
+
+.error {
+  margin: 16px;
+  width: 50%;
+
+  &__icon {
+    width: 32px;
+    height: 32px;
+    margin: 16px;
+
+  }
+}
+
+.page-content {
+  & .small-window {
+    position: relative;
+    top: 16px;
+    left: 16px;
+  }
+}
+

data/_sass/jekyll-98/custom-styles.scss

@@ -0,0 +1,2 @@
+// Placeholder to allow defining custom styles that override everything else.
+// (Use `_sass/jekyll-98/custom-variables.scss` to override variable defaults)

data/_sass/jekyll-98/custom-variables.scss

@@ -0,0 +1 @@
+// Placeholder to allow overriding predefined variables smoothly.

data/_sass/jekyll-98/initialize.scss

@@ -0,0 +1,39 @@
+@charset "utf-8";
+
+// Width of the content area
+$content-width:    800px !default;
+
+$on-palm:          600px !default;
+$on-laptop:        800px !default;
+
+$on-medium:        $on-palm !default;
+$on-large:         $on-laptop !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//   .wrapper {
+//     padding-right: $spacing-unit / 2;
+//     padding-left: $spacing-unit / 2;
+//   }
+// }
+// Notice the following mixin uses max-width, in a deprecated, desktop-first
+// approach, whereas media queries used elsewhere now use min-width.
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+// Import pre-styling-overrides hook and style-partials.
+@import
+  "jekyll-98/custom-variables", // Hook to override predefined variables.
+  "jekyll-98/base",             // Defines element resets.
+  "jekyll-98/layout",           // Defines structure and style based on CSS selectors.
+  "jekyll-98/custom-styles"     // Hook to override existing styles.
+;
+
+@include media-query($on-palm) {
+  .hide-on-phone {
+    display: none;
+  }
+}

data/assets/404.md

@@ -0,0 +1,6 @@
+---
+layout: error
+permalink: /404.html
+---
+
+# 404

data/assets/about.html

@@ -0,0 +1,18 @@
+---
+layout: default
+permalink: /about.html
+---
+
+{% capture abouttext %}
+<h4>{{ site.title }}</h4>
+<p>{{ site.description }}</p>
+<br />
+<ul>
+  {% for info in site.jekyll-98.about %}
+  <li>{{ info }}</li>
+  {% endfor %}
+</ul>
+{% include about_text.html %}
+{% endcapture %}
+
+{%include window.html width="250px" class="small-window" title=site.title content=abouttext buttons=false statusbar=false %}

data/assets/contact.html

@@ -0,0 +1,39 @@
+---
+layout: default
+permalink: /contact.html
+---
+
+{% capture contact_info %}
+  {% assign info = site.jekyll-98.contact %}
+  <div class="contact-title">
+    <img src="{{ "/assets/icons/contact.png" | absolute_url }}" style="width: 48px; height: 48px;" />
+    <h4>Contact Information</h4>
+  </div>
+  <div class="contact-name">
+    <h4>{{ info.name }}</h4>
+    <h5>{{ info.email }}</h5>
+    {% if info.phone %}
+      <h5>{{ info.phone }}</h5>
+    {% endif %}
+  </div>
+  <div class="contact-address">
+    {% for line in info.address %}
+      <div class="address-line">{{ line }}</div>
+    {% endfor %}
+  </div>
+  <div class="contact-other">
+    <ul>
+      {% for line in info.other %}
+        <li class="other-line">{{ line }}</li>
+      {% endfor %}
+    </ul>
+  </div>
+  <div class="contact-social-wrapper">
+    {% include social.html showname=true hide_email=true %}
+  </div>
+{% endcapture %}
+
+<div class="contact-page">
+  {% include desktop_icons.html hide=true %}
+  {% include window.html class = "contact-window" title = "Contact Information" content=contact_info %}
+</div>

data/assets/css/style.scss

@@ -0,0 +1,7 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@import
+  // "jekyll-98/skins/{{ site.jekyll-98.skin | default: 'classic' }}",
+  "jekyll-98/initialize";