...
 
Commits (14)
......@@ -3,6 +3,7 @@
[Jekyll](https://jekyllrb.com/) and hosted using
[GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/).
## Building Static Assets
A manual build process is required to generate assets that cannot be built by
by Jekyll. These generated assets are committed and uploaded to the remote
......@@ -48,6 +49,7 @@ $ make serve
Open a web browser to `localhost:8000` to access the site.
## Licensing
Source in this repository is licensed under the 2-clause BSD license, see
`LICENSE` for details.
......@@ -56,25 +58,28 @@ Source in this repository is licensed under the 2-clause BSD license, see
Fonts in the `fonts` directory are licensed under the Apache
License Version 2.0, see `static/fonts/LICENSE` for details.
### Site Icons
### Link Icons
Icons of other sites used in the header navigation and in pages are copyright
their respective owners and used with permission:
their respective owners and used with permission. The following files are
located in `static/icons/link`:
| Icon | Owner | Notes |
|------------------------------|----------|------------------------------------|
| static/icons/_site.svg | Various | Aggregate of all icons |
| static/icons/hackaday-io.svg | Hackaday | [Contact for permission](https://hackaday.com/contact-us/) |
| static/icons/gitlab.svg | GitLab | [Guidelines](https://gitlab.com/gitlab-com/gitlab-artwork/blob/master/README.md) |
| static/icons/twitter.svg | Twitter | [Guidelines](https://about.twitter.com/content/dam/about-twitter/company/brand-resources/en_us/Twitter_Brand_Guidelines_V2.0.pdf) |
| Icon | Owner | Notes |
|-----------------|----------|------------------------------------------------|
| _icons.svg | Various | Aggregate of all icons |
| hackaday-io.svg | Hackaday | [Contact for permission](https://hackaday.com/contact-us/) |
| gitlab.svg | GitLab | [Guidelines](https://gitlab.com/gitlab-com/gitlab-artwork/blob/master/README.md) |
| twitter.svg | Twitter | [Guidelines](https://about.twitter.com/content/dam/about-twitter/company/brand-resources/en_us/Twitter_Brand_Guidelines_V2.0.pdf) |
### Content
The following files are copyright Blaine Murphy and may not be used:
- *.md (all markdown files except the README)
- assets/* (page assets)
- static/_favicons/* (favicon sources)
- static/favicons/* (generated favicon images)
- static/images/* (static images and sources)
- \*.md (all markdown files except the README)
- index/\* (index assets)
- projects/\* (project content and assets)
- random/\* (random content and assets)
- static/_favicons/\* (favicon sources)
- static/favicons/\* (generated favicon images)
- static/images/\* (static images and sources)
This is content that uniquely identifies my site. These files should be
replaced with your own content as you are building your site's identity.
......@@ -10,6 +10,7 @@ sass:
collections:
- projects
- random
# test server
port: 8000
......
root: /assets
project:
cover: cover.jpg
menu:
toggle:
title: Menu Toggle
filename: toggle.svg
link:
hackaday-io:
title: Hackaday.io Logo
filename: hackaday-io.svg
gitlab:
title: GitLab Logo
filename: gitlab.svg
twitter:
title: Twitter Logo
filename: twitter.svg
type:
image:
title: Image Icon
filename: image.svg
video:
title: Video Icon
filename: video.svg
......@@ -2,14 +2,19 @@ title: Blaine's World
color: "#333"
int_nav:
- title: About
url: /about
- title: Projects
url: /projects/
- title: Random
url: /random/
ext_nav:
- https://hackaday.io/unixispower
- https://gitlab.com/unixispower
- https://twitter.com/unixispower
- icon: hackaday-io
url: https://hackaday.io/unixispower
- icon: gitlab
url: https://gitlab.com/unixispower
- icon: twitter
url: https://twitter.com/unixispower
copyright: 2017-2018
copyright: 2017-2019
owner: Blaine Murphy
contact: [email protected]
repo: https://gitlab.com/unixispower/unixispower.gitlab.io
root: /static
images:
logo: /images/logo.svg
icons:
menu:
toggle:
title: Menu Toggle
path: /icons/toggle.svg
link:
hackaday.io:
title: Hackaday.io
path: /icons/hackaday-io.svg
gitlab.com:
title: GitLab
path: /icons/gitlab.svg
twitter.com:
title: Twitter
path: /icons/twitter.svg
scripts:
- /scripts/starfield.js
styles:
- /styles/styles.css
fonts:
- name: Open Sans
path: /fonts/open-sans.woff
format: woff
- name: Open Sans
path: /fonts/open-sans-bold.woff
format: woff
weight: bold
- name: Open Sans
path: /fonts/open-sans-italic.woff
format: woff
style: italic
- name: Open Sans
path: /fonts/open-sans-bold-italic.woff
format: woff
style: italic
weight: bold
favicons:
- rel: icon
path: /favicons/icon.ico
type: image/png
sizes: [16, 32, 48]
- rel: icon
path: /favicons/icon-192.png
type: image/png
sizes: [192]
- rel: apple-touch-icon
path: /favicons/icon-180.png
type: image/png
sizes: [180]
......@@ -5,7 +5,7 @@
document: document to locate asset for (default is page)
filename: filename of the asset in the document's asset directory
Variables:
site.data.assets.root: asset root path
site.baseurl: URL prefix
{%- endcomment -%}
......@@ -19,4 +19,4 @@
{%- assign sub_dir = extless_url -%}
{%- endif -%}
{{- site.baseurl }}{{ site.data.assets.root }}{{ sub_dir }}/{{ include.filename -}}
{{- site.baseurl }}{{ sub_dir }}/{{ include.filename -}}
{%- comment -%}
Format a Liquid structure to SASS-compatible syntax.
A single level map is converted via the "map" argument.
A list of maps is converted to a map of maps via the "maps" argument.
Parameters:
map: a single map
maps: list of maps
{%- endcomment -%}
{%- assign self = "helpers/to_sass.fn" -%}
{%- if include.map -%}
(
{%- for pair in map -%}
"{{ pair[0] }}": "{{ pair[1] }}",
{%- endfor -%}
)
{%- else if include.maps -%}
(
{%- for map in include.maps -%}
"{{ forloop.index }}": {% include {{ self }} map=map %},
{%- endfor -%}
)
{%- endif -%}
{%- comment -%}
Link with cover image, progress indicator, and icon.
Parameters:
link: href of link
title: title of link
image: src of cover image
progress:
icon_type:
icon_name:
Includes:
modules/progress.html
modules/icon.html
{%- endcomment -%}
<a class="cover" href="{{ include.link }}">
<article class="cover-article">
<header class="cover-header">
<h1 class="cover-title">{{ include.title | escape }}</h1>
</header>
<img class="cover-image"
src="{{ include.image }}"
alt="{{ include.title | escape }}" />
<footer class="cover-footer">
{%- if include.progress -%}
<div class="cover-progress">
{%- include modules/progress.html value=include.progress size="v-large" -%}
</div>
{%- endif -%}
{%- if include.icon_type -%}
<div class="cover-icon">
{%- include modules/icon.html type=include.icon_type name=include.icon_name size="v-large" -%}
</div>
{%- endif -%}
</footer>
</article>
</a>
......@@ -2,7 +2,6 @@
Site footer containing copyright, contact link, and source link.
Variables:
site.time: site build time
site.data.site.copyright: site copyright years
site.data.site.contact: contact email address
site.data.site.owner: site owner's name
......
......@@ -5,10 +5,6 @@
page.title: page title
site.data.site.title: site title
site.data.site.color: theme color
site.data.static.root: static asset root
site.data.static.favicons: list of favicons
site.data.static.styles: list of stylesheet paths
site.data.static.scripts: list of javascript paths
{%- endcomment -%}
......@@ -16,19 +12,12 @@
<title>{% if page.title %}{{ page.title | escape }} - {% endif %}{{ site.data.site.title | escape }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0" />
<meta name="theme-color" content="{{ site.data.site.color }}" />
{% for icon in site.data.static.favicons %}
<link rel="{{ icon.rel }}"
type="{{ icon.type }}"
sizes="{%- for size in icon.sizes -%}
{{- size }}x{{ size -}} {%- if forloop.last == false %}{{ " " }}{%- endif -%}
{%- endfor -%}"
href="{{ site.baseurl }}{{ site.data.static.root }}{{ icon.path }}" />
{% endfor %}
{% for style_path in site.data.static.styles %}
<link rel="stylesheet" type="text/css"
href="{{ site.baseurl }}{{ site.data.static.root }}{{ style_path }}"/>
{% endfor %}
{% for script_path in site.data.static.scripts %}
<script src="{{ site.baseurl }}{{ site.data.static.root }}{{ script_path }}"></script>
{% endfor %}
<link rel="icon" type="image/png" sizes="16x16 32x32 48x48" href="{{ site.baseurl }}/static/favicons/icon.ico" />
<link rel="icon" type="image/png" sizes="192x192" href="{{ site.baseurl }}/static/favicons/icon-192.png" />
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{ site.baseurl }}/static/favicons/icon-180.png" />
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/static/styles/styles.css"/>
<script src="{{ site.baseurl }}/static/scripts/starfield.js"></script>
</head>
......@@ -2,8 +2,7 @@
Site header containing navigation and network links.
Variables:
site.data.static.root: static asset root
site.data.static.images.logo: path to logo image
site.baseurl: URL prefix
site.data.site.title: site title
site.data.site.int_nav: internal navigation
site.data.site.ext_nav: external navigation
......@@ -14,28 +13,29 @@
<div id="header" class="header">
<div class="header-toggle">
{% include modules/icon.html type="menu" key="toggle" size="large" %}
{% include modules/icon.html type="menu" name="toggle" size="large" %}
</div>
<div class="header-items">
<a class="header-home-nav" href="{{ site.baseurl }}/">
<img class="header-logo"
src="{{ site.baseurl }}{{ site.data.static.root }}{{ site.data.static.images.logo }}"
src="{{ site.baseurl }}/static/images/logo.svg"
alt="{{ site.data.site.title | escape }}" />
</a>
{% if site.data.site.int_nav %}
<nav class="header-int-nav">
{%- for link in site.data.site.int_nav -%}
<div class="header-text-link">
<a href="{{ site.baseurl }}{{ link.url }}">{{ link.title | escape }}</a>
</div>
<div class="header-text-link"
><a href="{{ site.baseurl }}{{ link.url }}">{{ link.title | escape }}</a></
div>
{%- endfor -%}
</nav>
{% endif %}
{% if site.data.site.ext_nav %}
<div class="header-ext-nav">
{%- for url in site.data.site.ext_nav -%}
<a class="header-icon-link"
href="{{ url }}">{% include modules/icon.html type="link" match=url size="v-large" %}</a>
{%- for link in site.data.site.ext_nav -%}
<a class="header-icon-link" href="{{ link.url }}">
{%- include modules/icon.html type="link" name=link.icon size="v-large" -%}
</a>
{%- endfor -%}
</div>
{% endif %}
......
{%- comment -%}
Sizable icon image.
Icons are defined in the "icons" variable located in "_data/static.yml".
The "icons" variable is a map of type name to icon collection. Each icon
collection is a map of icon key to icon object which each contain a "title"
and "path". The "type" argument selects which type map to use in the icon
lookup. An icon within the type can be selected by key using the "key"
argument or by a string that contains the key by using the "match"
argument.
Icon metadata is defined in the file "_data/icons.yml" and images are
stored in subdirectories of "static/icons". The metadata file lists each
"type" subdirectory as a root-level key. Each "type" key contains a map of
icon "name" to icon metadata. For example, a set of navigation icons could
be specified as follows:
Contents of file "_data/icons.yml":
nav:
top:
title: Top of Page
filename: top.svg
next:
title: Next Page
filename: next.svg
Contents of directory "static/icons":
- nav
- top.svg
- next.svg
Parameters:
type: which type map to use for icon lookup
key: exact key of an icon
match: string containing key of an icon
type: icon type
name: icon name
size: one of "v-small", "small", "medium", "large", or "v-large"
Variables:
site.baseurl: URL prefix
site.data.static.root: static asset root
site.data.static.icons: icons
{%- endcomment -%}
{%- assign icons = site.data.static.icons[include.type] -%}
{%- assign icon = nil -%}
{%- if include.match -%}
{%- for icon_pair in icons -%}
{%- if include.match contains icon_pair[0] -%}
{%- assign icon = icon_pair[1] -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- elsif include.key -%}
{%- assign icon = icons[include.key] -%}
{%- endif -%}
{%- assign icon = site.data.icons[include.type][include.name] -%}
{%- assign size = include.size | default: "medium" -%}
{%- if icon -%}
<img class="icon icon-{{ include["size"] | default: "medium" }}"
src="{{ site.baseurl }}{{ site.data.static.root }}{{ icon.path }}"
<img class="icon icon-{{ size }}"
src="{{ site.baseurl }}/static/icons/{{ include.type }}/{{ icon.filename }}"
alt="{{ icon.title | escape }}" />
{%- endif -%}
{%- comment -%}
Responsive media used in page content.
Parameters:
type: type of media file, one of "image" or "video"
size: size of the media, one of "small", "medium", or "large"
content: filename of media file
caption: caption of media
Includes:
functions/asset_url.fn
{%- endcomment -%}
{%- capture content_url -%}
{%- include functions/asset_url.fn document=document filename=include.content -%}
{%- endcapture -%}
{%- assign size = include.size | default: "medium" -%}
{%- comment -%}
Enclosing element must be a block-level element or Markdown will format it.
This is only an issue because this module is included in markdown directly.
{%- endcomment -%}
<div class="media media-{{ size }}">
<a href="{{ content_url }}">
<figure class="media-figure">
{%- if include.type == "image" -%}
<img class="media-content" src="{{ content_url }}" alt="{{ include.caption | escape }}" />
{%- endif -%}
<figcaption class="media-caption">{{ include.caption | escape }}</figcaption>
</figure>
</a>
</div>
......@@ -2,28 +2,30 @@
Progress icon with percentage indicator.
Parameters:
value: progress value from 0 to 100
value: progress value from 0 to 100 or one of "ongoing" or "unknown"
size: one of "v-small", "small", "medium", "large", or "v-large"
{%- endcomment -%}
{%- assign circumference = 3.14159 | times: 2 | times: 42.5 -%}
{%- assign percent = include.value | default: 100 -%}
{%- assign stroke_length = percent | times: 0.01 | times: circumference -%}
{%- if include.value == nil -%}
{%- if include.value == nil or include.value == "ongoing" or include.value == "unknown" -%}
{%- assign percent = 100 -%}
{%- assign status = "unknown" -%}
{%- elsif percent >= 100 -%}
{%- assign status = "full" -%}
{%- elsif percent >= 75 -%}
{%- assign status = "high" -%}
{%- elsif percent >= 50 -%}
{%- assign status = "middle" -%}
{%- else -%}
{%- assign status = "low" -%}
{%- assign percent = include.value -%}
{%- if percent >= 100 -%}
{%- assign status = "full" -%}
{%- elsif percent >= 75 -%}
{%- assign status = "high" -%}
{%- elsif percent >= 50 -%}
{%- assign status = "middle" -%}
{%- else -%}
{%- assign status = "low" -%}
{%- endif -%}
{%- endif -%}
{%- assign circumference = 3.14159 | times: 2 | times: 42.5 -%}
{%- assign stroke_length = percent | times: 0.01 | times: circumference -%}
<svg class="progress progress-{{ include["size"] | default: "medium" }}"
viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
......
{%- comment -%}
Project link with cover image, progress indicator, and site icon.
Parameters:
document: project document
document.title: project title
document.progress: project progress value
document.ext_url: URL to external project site
document.cover: cover image filename
Variables:
site.data.assets.preview.cover: default cover image filename
Includes:
helpers/asset_url.fn
modules/progress.html
modules/icon.html
{%- endcomment -%}
{%- assign document = include.document -%}
{%- assign cover = document.cover | default: site.data.assets.project.cover -%}
<a class="project" href="{{ document.ext_url }}">
<article class="project-article">
<header class="project-header">
<h1 class="project-title">{{ document.title | escape }}</h1>
</header>
<img class="project-cover"
src="{% include helpers/asset_url.fn document=document filename=cover %}"
alt="{{ document.title | escape }}" />
<footer class="project-footer">
<div class="project-progress">
{%- include modules/progress.html value=document.progress size="v-large" -%}
</div><div class="project-site-icon">
{%- include modules/icon.html type="link" match=document.ext_url size="v-large" -%}
</div>
</footer>
</article>
</a>
{%- comment -%}
Project link with cover image, progress indicator, and site icon.
Parameters:
document: project document
document.link: URL to external project site
document.title: project title
document.cover: cover image filename
document.progress: project progress value
document.type: type of project, used as link icon "name"
Includes:
progress.html
icon.html
{%- endcomment -%}
{%- assign document = include.document -%}
{%- assign cover_filename = document.cover | default: "cover.jpg" -%}
{%- capture cover_url -%}
{%- include functions/asset_url.fn document=document filename=cover_filename -%}
{%- endcapture -%}
{%- include modules/cover.html link=document.link title=document.title image=cover_url
progress=document.progress icon_type="link" icon_name=document.type %}
{%- comment -%}
Media link with cover image and type icon.
Parameters:
document: media document
document.title: media title
document.type: media type
document.cover: cover image filename
document.media: media filename
Includes:
icon.html
{%- endcomment -%}
{%- assign document = include.document -%}
{%- assign cover_filename = document.cover | default: "cover.jpg" -%}
{%- if document.type == "image" -%}
{%- assign media_filename = document.media | default: "media.jpg" -%}
{%- endif -%}
{%- capture cover_url -%}
{%- include functions/asset_url.fn document=document filename=cover_filename -%}
{%- endcapture -%}
{%- capture media_url -%}
{%- include functions/asset_url.fn document=document filename=media_filename -%}
{%- endcapture -%}
{%- include modules/cover.html link=media_url title=document.title image=cover_url
icon_type="type" icon_name=document.type %}
......@@ -22,7 +22,7 @@ layout: base
{%- assign documents = collection.docs | sort: "date" | reverse -%}
{%- for document in documents -%}
<div class="grid-item">
{%- include {{ page.template }} document=document -%}
{%- include modules/{{ page.template }} document=document -%}
</div>
{%- endfor -%}
{%- if collection.docs.size == 0 -%}
......
---
title: Chanterelle
date: 2017-05-21 02:15:26 +0000
ext_url: https://gitlab.com/unixispower/chanterelle
link: https://gitlab.com/unixispower/chanterelle
type: gitlab
progress: 100
---
---
title: DATAPE
date: 2017-10-29 18:20:00 +0000
ext_url: https://hackaday.io/project/27917-datape
link: https://hackaday.io/project/27917-datape
type: hackaday-io
progress: 25
---
---
title: J-Card Template
date: 2017-08-27 19:25:12 +0000
ext_url: https://gitlab.com/unixispower/jcard-template
link: https://gitlab.com/unixispower/jcard-template
type: gitlab
progress: 100
---
---
title: KD-C1 Mods
date: 2018-01-05 02:27:00 +0000
ext_url: https://hackaday.io/project/29337-kd-c1-mods
link: https://hackaday.io/project/29337-kd-c1-mods
type: hackaday-io
progress: ongoing
---
---
title: Push to Reboot
date: 2018-04-13 21:37:00 +0000
ext_url: https://hackaday.io/project/134298-push-to-reboot
link: https://hackaday.io/project/134298-push-to-reboot
type: hackaday-io
progress: 75
---
---
title: Tape Artchive
date: 2017-08-17 21:24:00 +0000
ext_url: https://hackaday.io/project/26877-tape-artchive
link: https://hackaday.io/project/26877-tape-artchive
type: hackaday-io
progress: 100
---
---
title: Wasteland Jukebox
date: 2016-07-02 08:20:00 +0000
ext_url: https://hackaday.io/project/12496-wasteland-jukebox
link: https://hackaday.io/project/12496-wasteland-jukebox
type: hackaday-io
progress: 30
---
---
layout: document
title: Maxtorn
date: 2018-02-01 17:09:00 -0500
type: image
---
// Theme configuration.
//
// Variables
// site-baseurl: URL prefix
//* Typography *//
// font
$text-font-family: "Open Sans", sans-serif;
// fonts
$text-font-root: $site-baseurl + "/static/fonts";
$text-font-format: "woff";
$text-primary-font-id: "open-sans";
$text-primary-font-name: "Open Sans";
$text-fallback-font-name: sans-serif;
$text-line-height: 1.3;
// spacings
......@@ -26,36 +32,36 @@ $text-v-small-size: 0.75em;
//* Color Palette *//
// opacity
$colors-high-opacity: 0.8;
$colors-low-opacity: 0.2;
$color-high-opacity: 0.8;
$color-low-opacity: 0.2;
// primary content: headings, text
$colors-global-bg-color: #000;
$colors-global-fg-color: #eee;
$colors-global-contrast-color: #bf9;
$color-global-bg-color: #000;
$color-global-fg-color: #eee;
$color-global-contrast-color: #bf9;
// menu content: header, menus
$colors-menu-bg-color: #333;
$colors-menu-fg-color: #eee;
$colors-menu-accent-color: #222;
$color-menu-bg-color: #333;
$color-menu-fg-color: #eee;
$color-menu-accent-color: #222;
// informational content: footer
$colors-info-fg-color: #444;
$colors-info-accent-color: #333;
$colors-info-contrast-color: #666;
$color-info-fg-color: #444;
$color-info-accent-color: #333;
$color-info-contrast-color: #666;
// boxed content: tables, form fields, code
$colors-box-bg-color: #111;
$colors-box-fg-color: #eee;
$colors-box-accent-color: #333;
$colors-box-overlay-color: rgba(#000, $colors-high-opacity);
$color-box-bg-color: #111;
$color-box-fg-color: #eee;
$color-box-accent-color: #333;
$color-box-overlay-color: rgba(#000, $color-high-opacity);
// status indicators
$colors-status-bg-color: #333;
$colors-status-unknown-color: #66c;
$colors-status-low-color: #c66;
$colors-status-middle-color: #cc6;
$colors-status-high-color: #6c6;
$color-status-bg-color: #333;
$color-status-unknown-color: #66c;
$color-status-low-color: #c66;
$color-status-middle-color: #cc6;
$color-status-high-color: #6c6;
//* Animations *//
......@@ -79,9 +85,9 @@ $media-medium-or-small-query: "only screen and (max-width: #{$media-medium-width
//* Sizes *//
// thicknesses
$sizes-thick-line: 4px;
$sizes-medium-line: 2px;
$sizes-thin-line: 1px;
$size-thick-line: 4px;
$size-medium-line: 2px;
$size-thin-line: 1px;
// radii
$sizes-radius: 4px;
$size-radius: 4px;
......@@ -3,37 +3,27 @@
// Styles:
// base/config.scss
// mixins/font-family.scss
// Variables
// site-baseurl: URL prefix
// static-root: path to static file root directory
// static-fonts: path to static file font directory
/* fonts */
@each $name, $font in $static-fonts {
$name: map-get($font, "name");
$path: $site-baseurl + $static-root + map-get($font, "path");
$format: map-get($font, "format");
$style: map-get($font, "style");
$style: normal !default;
$weight: map-get($font, "weight");
$weight: normal !default;
@include font-face($name, $path, $format, unquote($style), unquote($weight));
}
@include font-family(
$text-primary-font-name,
$text-primary-font-id,
$text-font-root,
$text-font-format);
/* root */
body {
font-family: $text-font-family;
font-family: $text-primary-font-name, $text-fallback-font-name;
line-height: 1;
color: $colors-global-fg-color;
background-color: $colors-global-bg-color;
color: $color-global-fg-color;
background-color: $color-global-bg-color;
}
/* headings */
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: $colors-global-fg-color;
color: $color-global-fg-color;
}
h1 { margin: 0; }
h2, h3, h4, h5, h6 { margin: $text-wide-gap 0 $text-narrow-gap }
......@@ -63,15 +53,21 @@ blockquote {
/* links */
a {
text-decoration: none;
color: $colors-global-contrast-color;
color: $color-global-contrast-color;
&:hover { text-decoration: underline; }
-webkit-tap-highlight-color: rgba($colors-global-fg-color, $colors-low-opacity);
-webkit-tap-highlight-color: rgba($color-global-fg-color, $color-low-opacity);
}
/* figures */
figure, figcaption {
margin: 0;
padding: 0;
}
/* text selection */
::selection {
color: $colors-global-bg-color;
background-color: rgba($colors-global-contrast-color, $colors-high-opacity);
color: $color-global-bg-color;
background-color: rgba($color-global-contrast-color, $color-high-opacity);
}
......@@ -14,8 +14,8 @@
padding: $text-narrow-gap $text-medium-gap;
overflow: hidden; // contain navigation during toggle transition
background-color: $colors-menu-bg-color;
border-bottom: $sizes-thick-line solid $colors-menu-accent-color;
background-color: $color-menu-bg-color;
border-bottom: $size-thick-line solid $color-menu-accent-color;
}
&-body {
margin: $text-wide-gap $text-medium-gap;
......@@ -25,6 +25,6 @@
}
&-footer-column {
padding-top: $text-space-gap;
border-top: $sizes-medium-line solid $colors-info-accent-color;
border-top: $size-medium-line solid $color-info-accent-color;
}
}
......@@ -2,4 +2,5 @@
@import "./font-face",
"./font-family",
"./stretched";
// Font family mixin.
// Include a font family that follows a predictable naming scheme.
//
// Parameters:
// name: font name
// id: font filename component (name-in-kebab-form)
// root: web path to directory of fonts
// format: font format
@mixin font-family($name, $id, $root, $format) {
$prefix: $root + "/" + $id;
$suffix: "." + $format;
@include font-face($name, $prefix + $suffix, $format, normal, normal);
@include font-face($name, $prefix + "-bold" + $suffix, $format, normal, bold);
@include font-face($name, $prefix + "-italic" + $suffix, $format, italic, normal);
@include font-face($name, $prefix + "-bold-italic" + $suffix, $format, italic, bold);
}
......@@ -4,6 +4,7 @@
@import "./background",
"./header",
"./footer",
"./project",
"./cover",
"./icon",
"./progress";
"./progress",
"./media";
// Document preview.
// Link with cover image, progress indicator, and icon.
//
// Styles:
// base/config.scss
// mixins/stretched.scss
.project {
.cover {
display: block;
// new stacking context (stretched mix-in sets position)
......@@ -17,8 +17,8 @@
&-article {
overflow: hidden; // trim clipped corners
background-color: $colors-box-bg-color;
border-radius: $sizes-radius;
background-color: $color-box-bg-color;
border-radius: $size-radius;
}
&-header, &-footer, &-cover { position: absolute; }
......@@ -32,27 +32,29 @@
}
&-footer { bottom: 0; }
&-header, &-progress, &-site-icon {
background-color: $colors-box-overlay-color;
&-header, &-progress, &-icon {
background-color: $color-box-overlay-color;
}
&-progress, &-site-icon {
&-progress, &-icon {
position: absolute;
padding: $text-narrow-gap;
}
&-progress {
bottom: 0; left: 0;
border-top-right-radius: $sizes-radius;
border-top-right-radius: $size-radius;
}
&-site-icon {
&-icon {
bottom: 0; right: 0;
border-top-left-radius: $sizes-radius;
border-top-left-radius: $size-radius;
}
&-title {
font-size: $text-large-size;
text-align: center;
text-decoration: none;
color: $color-global-fg-color;
}
&-cover {
&-image {
top: 0; left: 0;
width: 100%;
height: 100%;
......
......@@ -9,13 +9,13 @@
flex-flow: row nowrap;
align-items: center;
color: $colors-info-fg-color;
color: $color-info-fg-color;
&-info {
margin-right: $text-space-gap;
text-align: center;
>a { color: $colors-info-contrast-color; }
>a { color: $color-info-contrast-color; }
}
@media #{$media-medium-or-small-query} {
......
......@@ -10,7 +10,7 @@
$ext-nav-spacing: $text-narrow-gap;
position: relative;
color: $colors-menu-fg-color;
color: $color-menu-fg-color;
&-toggle { display: none; }
......@@ -36,13 +36,13 @@
margin-left: $int-nav-spacing;
>a {
color: $colors-menu-fg-color;
color: $color-menu-fg-color;
font-size: $text-large-size;
}
}
&-icon-link { margin-left: $ext-nav-spacing; }
@media #{$media-small-query} {
@media #{$media-medium-or-small-query} {
// spacing between item rows
$row-spacing: $text-narrow-gap;
......
// Icon image.
//
// Styles:
// base/config.scss
// base/config.scss
.icon {
// size subclasses
&-v-small {
width: $text-space-gap;
......
// Responsive media used in page content.
//
// Styles:
// base/config.scss
.media {
position: relative;
overflow: hidden; // trim clipped corners
margin: $text-medium-gap auto $text-medium-gap; // center
background-color: $color-box-bg-color;
border-radius: $size-radius;
// size subclasses
&-small { max-width: $media-small-width; }
&-medium { max-width: $media-medium-width; }
&-large { max-width: 100%; }
&-content {
max-width: 100%;
}
&-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: $text-narrow-gap;
color: $color-global-fg-color;
text-decoration: none;
text-align: center;
background-color: $color-box-overlay-color;
}
}
......@@ -7,23 +7,23 @@
.progress {
fill: transparent;
&-circle { fill: $colors-status-bg-color; }
&-circle { fill: $color-status-bg-color; }
&-outline {
stroke-opacity: $colors-low-opacity;
fill-opacity: $colors-low-opacity;
stroke-opacity: $color-low-opacity;
fill-opacity: $color-low-opacity;
&-unknown { fill: $colors-status-unknown-color; }
&-full { fill: $colors-status-high-color; }
&-unknown { fill: $color-status-unknown-color; }
&-full { fill: $color-status-high-color; }
}
&-outline, &-slice {
&-unknown { stroke: $colors-status-unknown-color; }
&-low { stroke: $colors-status-low-color; }
&-middle { stroke: $colors-status-middle-color; }
&-high, &-full { stroke: $colors-status-high-color; }
&-unknown { stroke: $color-status-unknown-color; }
&-low { stroke: $color-status-low-color; }
&-middle { stroke: $color-status-middle-color; }
&-high, &-full { stroke: $color-status-high-color; }
}
&-icon { stroke: $colors-global-fg-color; }
&-text { fill: $colors-global-fg-color; }
&-icon { stroke: $color-global-fg-color; }
&-text { fill: $color-global-fg-color; }
// size subclasses
&-v-small {
......
---
layout: document
title: About
---
My name is Blaine. I am a maker, software developer, and amateur radio operator
living in Morgantown, West Virginia. I like Linux, Unix, open source software
and hardware, and vintage computers. Check out the links along the top to see
my personal projects.
---
layout: collection
title: Projects
collection: projects
template: modules/project.html
layout: document
title: Welcome :)
---
My name is Blaine and this is my personal website. I am a computer junkie who
enjoys hacking on hardware and writing software in my "free time". I love open
source software and I'm a big fan of the
[Unix philosophy](https://en.wikipedia.org/wiki/Unix_philosophy). This site is
where I post projects that I'm working on and random art that I've made. Check
out the navigation along the top to see what all is here.
---
layout: collection
title: Personal Projects
collection: projects
template: project_cover.html
---
---
layout: collection
title: Random Stuff
collection: random
template: random_cover.html
---
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100mm" height="100mm" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="m94.21 39.387h-25.805l11.085-34.129c0.56848-1.746 3.0454-1.746 3.6342 0zl5.6036 17.217c0.50757 1.5633-0.04061 3.2891-1.3806 4.2636l-48.422 35.185zm-88.419 0h25.805l-11.085-34.129c-0.56848-1.746-3.0454-1.746-3.6342 0zl-5.6036 17.217c-0.50757 1.5633 0.040606 3.2891 1.3806 4.2636l48.422 35.185zm44.22 56.665 18.415-56.665h-36.829z" fill="#eee" />
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100mm"
height="100mm"
viewBox="0 0 100 100"
version="1.1"
id="svg8"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="_icons.svg">
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.98994949"
inkscape:cx="-26.962713"
inkscape:cy="208.92303"
inkscape:document-units="mm"
inkscape:current-layer="g1518"
showgrid="false"
width="100mm"
inkscape:showpageshadow="false"
inkscape:window-width="1440"
inkscape:window-height="875"
inkscape:window-x="1366"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:snap-bbox="true"
inkscape:pagecheckerboard="true"
showguides="true"
inkscape:guide-bbox="true"
inkscape:snap-object-midpoints="true"
inkscape:snap-bbox-midpoints="false"
inkscape:snap-center="true">
<sodipodi:guide
position="50,50"
orientation="1,0"
id="guide5017"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
<sodipodi:guide
position="50,50"
orientation="0,1"
id="guide5019"
inkscape:locked="false"
inkscape:label=""
inkscape:color="rgb(0,0,255)" />
</sodipodi:namedview>
<defs
id="defs2">
<linearGradient
id="path1950_1_"
gradientUnits="userSpaceOnUse"
x1="-808.87268"
y1="199.8918"
x2="-860.56921"
y2="49.2029"
gradientTransform="matrix(-0.16693445,0,0,-0.16693445,-136.67424,34.857615)">
<stop
offset="0"
style="stop-color:#FFFFFF"
id="stop4" />
<stop
offset="1"
style="stop-color:#FFFFFF;stop-opacity:0"
id="stop6" />
</linearGradient>
</defs>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Template"
style="display:none">
<rect
id="rect125"
width="100"
height="100"
x="3.814697e-07"
y="-3.814697e-07"
style="display:inline;fill:#eeeeee;fill-opacity:1;stroke:none;stroke-width:0.30561128"
rx="8.8892174"
ry="8.8892174" />
<path
inkscape:connector-curvature="0"
id="path1512-3"
d="m -31.673844,-27.995512 c -4.924626,0 -8.88938,3.964754 -8.88938,8.88938 v 82.221338 c 0,4.924626 3.964754,8.889382 8.88938,8.889382 h 82.221338 c 4.924626,0 8.889382,-3.964756 8.889382,-8.889382 v -82.221338 c 0,-4.924626 -3.964756,-8.88938 -8.889382,-8.88938 z m -1.209228,6.000151 h 84.639794 c 0.930709,0 1.680001,0.749292 1.680001,1.680001 v 84.639794 c 0,0.930709 -0.749292,1.680001 -1.680001,1.680001 h -84.639794 c -0.930709,0 -1.680001,-0.749292 -1.680001,-1.680001 V -20.31536 c 0,-0.930709 0.749292,-1.680001 1.680001,-1.680001 z"
style="display:inline;fill:#eeeeee;fill-opacity:1;stroke:none;stroke-width:0.30561128" />
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Image"
style="display:inline">
<path
style="display:inline;fill:#eeeeee;fill-opacity:1;stroke:none;stroke-width:0.30561128"
d="M 8.8893797,0 C 3.9647534,0 0,3.9647534 0,8.8893797 V 91.110717 c 0,4.924626 3.9647534,8.889383 8.8893797,8.889383 H 91.110717 c 4.924626,0 8.889383,-3.964757 8.889383,-8.889383 V 8.8893797 C 100.0001,3.9647534 96.035343,0 91.110717,0 Z M 7.6801513,6.0001504 H 92.319945 c 0.930709,0 1.680001,0.749292 1.680001,1.6800009 V 92.319945 c 0,0.930709 -0.749292,1.680001 -1.680001,1.680001 H 7.6801513 c -0.9307089,0 -1.6800009,-0.749292 -1.6800009,-1.680001 V 7.6801513 c 0,-0.9307089 0.749292,-1.6800009 1.6800009,-1.6800009 z M 30.000236,19.999813 A 10,10 0 0 0 19.999813,30.000236 10,10 0 0 0 30.000236,40.000142 10,10 0 0 0 40.000142,30.000236 10,10 0 0 0 30.000236,19.999813 Z M 71.237511,42.593783 44.720785,69.11051 31.066322,55.456047 13.00024,73.522127 v 13.47773 H 87.999796 V 59.356066 Z"
id="rect125-3"
inkscape:connector-curvature="0" />
</g>
<g
style="display:inline"
inkscape:label="Video"
id="g1518"
inkscape:groupmode="layer">
<path
style="display:inline;fill:#eeeeee;fill-opacity:1;stroke:none;stroke-width:0.30561128"
d="M 8.8893797,0 C 3.9647534,0 0,3.9647534 0,8.8893797 V 91.110717 c 0,4.924626 3.9647534,8.889383 8.8893797,8.889383 H 91.110717 c 4.924626,0 8.889383,-3.964757 8.889383,-8.889383 V 8.8893797 C 100.0001,3.9647534 96.035343,0 91.110717,0 Z M 25.000024,6.0001504 H 75.000071 V 93.999946 H 25.000024 Z M 6.4998615,9.9999063 H 18.500163 c 0.830999,0 1.49965,0.6691667 1.49965,1.5001667 v 11.999784 c 0,0.831 -0.668651,1.500167 -1.49965,1.500167 H 6.4998615 c -0.8309999,0 -1.4996501,-0.669167 -1.4996498,-1.500167 V 11.500073 c 0,-0.831 0.6686499,-1.5001667 1.4996498,-1.5001667 z m 75.0000725,0 h 12.000301 c 0.831001,0 1.499651,0.6691667 1.499651,1.5001667 v 11.999784 c 0,0.831 -0.66865,1.500167 -1.499651,1.500167 H 81.499934 c -0.831001,0 -1.500166,-0.669167 -1.500166,-1.500167 V 11.500073 c 0,-0.831 0.669165,-1.5001667 1.500166,-1.5001667 z M 6.4998615,31.669902 H 18.500163 c 0.830999,0 1.49965,0.669166 1.49965,1.500167 v 11.999782 c 0,0.831001 -0.668651,1.500167 -1.49965,1.500167 H 6.4998615 c -0.8309999,0 -1.4996501,-0.669166 -1.4996498,-1.500167 V 33.170069 c 0,-0.831001 0.6686499,-1.500167 1.4996498,-1.500167 z m 75.0000725,0 h 12.000301 c 0.831001,0 1.499651,0.669166 1.499651,1.500167 v 11.999782 c 0,0.831001 -0.66865,1.500169 -1.499651,1.500167 H 81.499934 c -0.831001,0 -1.500166,-0.669166 -1.500166,-1.500167 V 33.170069 c 0,-0.831001 0.669165,-1.500167 1.500166,-1.500167 z M 36.999809,34.99993 V 65.000166 L 67.000045,50.000048 Z M 6.4998615,53.339896 H 18.500163 c 0.830999,0 1.49965,0.669166 1.49965,1.500166 v 11.999786 c 0,0.830998 -0.668651,1.500166 -1.49965,1.500166 H 6.4998615 c -0.8309999,0 -1.4996501,-0.669168 -1.4996498,-1.500166 V 54.840062 c 0,-0.831 0.6686499,-1.500166 1.4996498,-1.500166 z m 75.0000725,0 h 12.000301 c 0.831001,0 1.499651,0.669166 1.499651,1.500166 v 11.999786 c 0,0.830998 -0.66865,1.500166 -1.499651,1.500166 H 81.499934 c -0.831001,0 -1.500166,-0.669168 -1.500166,-1.500166 V 54.840062 c 0,-0.831 0.669165,-1.500166 1.500166,-1.500166 z M 6.4998615,75.000071 H 18.500163 c 0.830999,0 1.49965,0.669169 1.49965,1.500169 v 11.999783 c 0,0.831001 -0.668651,1.500166 -1.49965,1.500166 H 6.4998615 c -0.8309999,0 -1.4996501,-0.669165 -1.4996498,-1.500166 V 76.50024 c 0,-0.831 0.6686499,-1.500169 1.4996498,-1.500169 z m 75.0000725,0 h 12.000301 c 0.831001,0 1.499651,0.669169 1.499651,1.500169 v 11.999783 c 0,0.831001 -0.66865,1.500166 -1.499651,1.500166 H 81.499934 c -0.831001,0 -1.500166,-0.669165 -1.500166,-1.500166 V 76.50024 c 0,-0.831 0.669165,-1.500169 1.500166,-1.500169 z"
id="path1512"
inkscape:connector-curvature="0" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="m8.8894 0c-4.9246 0-8.8894 3.9648-8.8894 8.8894v82.221c0 4.9246 3.9648 8.8894 8.8894 8.8894h82.221c4.9246 0 8.8894-3.9648 8.8894-8.8894v-82.221c0-4.9246-3.9648-8.8894-8.8894-8.8894zm-1.2092 6.0002h84.64c0.93071 0 1.68 0.74929 1.68 1.68v84.64c0 0.93071-0.74929 1.68-1.68 1.68h-84.64c-0.93071 0-1.68-0.74929-1.68-1.68v-84.64c0-0.93071 0.74929-1.68 1.68-1.68zm22.32 14a10 10 0 0 0-10 10 10 10 0 0 0 10 9.9999 10 10 0 0 0 9.9999-9.9999 10 10 0 0 0-9.9999-10zm41.237 22.594-26.517 26.517-13.654-13.654-18.066 18.066v13.478h75v-27.644z" fill="#eee"/>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="m8.8894 0c-4.9246 0-8.8894 3.9648-8.8894 8.8894v82.221c0 4.9246 3.9648 8.8894 8.8894 8.8894h82.221c4.9246 0 8.8894-3.9648 8.8894-8.8894v-82.221c0-4.9246-3.9648-8.8894-8.8894-8.8894zm16.111 6.0002h50v88h-50zm-18.5 3.9998h12c0.831 0 1.4996 0.66917 1.4996 1.5002v12c0 0.831-0.66865 1.5002-1.4996 1.5002h-12c-0.831 0-1.4997-0.66917-1.4996-1.5002v-12c0-0.831 0.66865-1.5002 1.4996-1.5002zm75 0h12c0.831 0 1.4997 0.66917 1.4997 1.5002v12c0 0.831-0.66865 1.5002-1.4997 1.5002h-12c-0.831 0-1.5002-0.66917-1.5002-1.5002v-12c0-0.831 0.66916-1.5002 1.5002-1.5002zm-75 21.67h12c0.831 0 1.4996 0.66917 1.4996 1.5002v12c0 0.831-0.66865 1.5002-1.4996 1.5002h-12c-0.831 0-1.4997-0.66917-1.4996-1.5002v-12c0-0.831 0.66865-1.5002 1.4996-1.5002zm75 0h12c0.831 0 1.4997 0.66917 1.4997 1.5002v12c0 0.831-0.66865 1.5002-1.4997 1.5002h-12c-0.831 0-1.5002-0.66917-1.5002-1.5002v-12c0-0.831 0.66916-1.5002 1.5002-1.5002zm-44.5 3.33v30l30-15zm-30.5 18.34h12c0.831 0 1.4996 0.66917 1.4996 1.5002v12c0 0.831-0.66865 1.5002-1.4996 1.5002h-12c-0.831 0-1.4997-0.66917-1.4996-1.5002v-12c0-0.831 0.66865-1.5002 1.4996-1.5002zm75 0h12c0.831 0 1.4997 0.66917 1.4997 1.5002v12c0 0.831-0.66865 1.5002-1.4997 1.5002h-12c-0.831 0-1.5002-0.66917-1.5002-1.5002v-12c0-0.831 0.66916-1.5002 1.5002-1.5002zm-75 21.66h12c0.831 0 1.4996 0.66917 1.4996 1.5002v12c0 0.831-0.66865 1.5002-1.4996 1.5002h-12c-0.831 0-1.4997-0.66916-1.4996-1.5002v-12c0-0.831 0.66865-1.5002 1.4996-1.5002zm75 0h12c0.831 0 1.4997 0.66917 1.4997 1.5002v12c0 0.831-0.66865 1.5002-1.4997 1.5002h-12c-0.831 0-1.5002-0.66916-1.5002-1.5002v-12c0-0.831 0.66916-1.5002 1.5002-1.5002z" fill="#eee"/>
</svg>
......@@ -106,7 +106,7 @@ var starfield = (function() {
var surfaceSize = {width: 0, height: 0};
var frameTime = Date.now();
// start draw loop
// start drawing
window.setInterval(function() {
// calculate elapsed time since last frame
var now = Date.now();
......
......@@ -5,8 +5,6 @@
// import variables and _data
$site-baseurl: "{{ site.baseurl }}";
$static-root: "{{ site.data.static.root }}";
$static-fonts: {% include helpers/to_sass.fn maps=site.data.static.fonts %};
// import styles
@import "mixins/all.scss",
......