2022 updates (#77)

* add updates from Figma designs

.ruby-version

@@ -0,0 +1 @@
+3.0.0

Gemfile

@@ -1,3 +1,4 @@
 source 'https://rubygems.org'
 
-gem 'jekyll'
+gem 'jekyll'
+gem "webrick", "~> 1.7"

Gemfile.lock

@@ -4,17 +4,17 @@ GEM
     addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.8)
-    em-websocket (0.5.2)
+    concurrent-ruby (1.1.9)
+    em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
+      http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.1)
+    ffi (1.15.4)
     forwardable-extended (2.6.0)
-    http_parser.rb (0.6.0)
-    i18n (1.8.10)
+    http_parser.rb (0.8.0)
+    i18n (1.8.11)
       concurrent-ruby (~> 1.0)
-    jekyll (4.2.0)
+    jekyll (4.2.1)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -38,7 +38,7 @@ GEM
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
-    listen (3.5.1)
+    listen (3.7.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
@@ -49,19 +49,21 @@ GEM
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rexml (3.2.5)
-    rouge (3.26.0)
+    rouge (3.27.0)
     safe_yaml (1.0.5)
     sassc (2.4.0)
       ffi (~> 1.9)
     terminal-table (2.0.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.7.0)
+    unicode-display_width (1.8.0)
+    webrick (1.7.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   jekyll
+  webrick (~> 1.7)
 
 BUNDLED WITH
-   1.17.2
+   2.2.3

README.md

@@ -1,2 +1,9 @@
 # raina-shannon
-A Jekyll site for Raina Shannon
+
+A Jekyll site for Raina Shannon.
+
+## Deploy
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/71c8c614-1b11-44cc-a2c9-42299c62698d/deploy-status)](https://app.netlify.com/sites/raina-shannon/deploys)
+
+Using Netlify to deploy.

_art/catra.html

@@ -0,0 +1,6 @@
+---
+layout: art_post
+title:  "Catra"
+description: "Inspired by the queer magic of Noelle Stevenson's She-Ra and the Princesses of Power; Drawn in Procreate"
+image: /images/Catra.png
+---

_art/holiday-2017.html

@@ -0,0 +1,6 @@
+---
+layout: art_post
+title:  "Holiday 2017"
+description: "Doodles of friends in the xmas holiday spirit; Drawn in Procreate"
+image: /images/new_XMas.png
+---

_art/holiday-2018.html

@@ -0,0 +1,6 @@
+---
+layout: art_post
+title:  "Holiday 2018"
+description: "My cat insisted on being featured in the festivities; Drawn in Procreate"
+image: /images/Christmas_Card.jpg
+---

_art/holiday-2019.html

@@ -0,0 +1,6 @@
+---
+layout: art_post
+title:  "Holiday 2019"
+description: "My favorite card, inspired by the year I dyed my hair pink; Drawn in Procreate"
+image: /images/Holiday_2019.jpg
+---

_art/layered-response.html

@@ -0,0 +1,6 @@
+---
+layout: art_post
+title:  "Layered Response"
+description: "From the photo project/Tryptique that first inspired my interest in design work; shot on Canon, composed by hand, and finished in Photoshop"
+image: /images/fashCollage.png
+---

_art/persephone.html

@@ -0,0 +1,6 @@
+---
+layout: art_post
+title:  "Persephone"
+description: "Inspired by my favorite web comic and its leading pink lady: Rachel Smythe's Lore Olympus; Drawn in Procreate"
+image: /images/Persephone_Big_Mad.png
+---

_config.yml

@@ -14,3 +14,36 @@ url: "https://rainashannon.com" # the base hostname & protocol for your site
 
 # Build settings
 markdown: kramdown
+
+# Collections
+collections:
+  portfolio:
+    permalink: /:collection/:name
+    order:
+      - framework-styleguide.html
+      - desktop-to-mobile.html
+      - chart-data-design.html
+      - data-science-design.html
+      - visual-design.html
+      - art.html
+    output: true
+  art:
+    permalink: /:collection/:name
+    order:
+      - holiday-2019.html
+      - holiday-2018.html
+      - holiday-2017.html
+      - persephone.html
+      - layered-response.html
+      - catra.html
+    output: true
+  visual_design:
+    permalink: /:collection/:name
+    order:
+      - amelie.html
+      - taro.html
+      - firefly.html
+      - pines.html
+      - vest-hq.html
+      - lettering-tea.html
+    output: true

_includes/figure.html

@@ -0,0 +1,8 @@
+<div class="">
+  <a class="figure-link" href="{{ site.baseurl }}{{ post.url }}">
+    <figure>
+      <img class="" src="{{ site.baseurl }}{{ post.image }}" alt="{{ post.title }}">
+      <figcaption>{{ post.title }}</figcaption>
+    </figure>
+  </a>
+</div>

_includes/footer.html

@@ -1,3 +1,7 @@
-<footer class="o-container c-footer">
-  <p class="c-footer__content">Copyright &copy; Raina Shannon <span id="copyright-year">2016</span> | Made with love by <a class="" target="_blank" rel="noopener noreferrer" href="https://coltborg.com">Colt Borg</a></p>
+<footer class="container c-footer">
+  <p class="c-footer__content">
+    Copyright &copy; Raina Shannon <span id="copyright-year">2016</span>
+    |
+    Site designed by Raina Shannon, development by <a target="_blank" rel="noopener noreferrer" href="https://coltborg.com">Colt Borg</a>.
+  </p>
 </footer>

_includes/head.html

@@ -21,7 +21,9 @@
 
   {% include favicon.html %}
 
-  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:900i|Raleway:300" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;1,900&family=Raleway:wght@300;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
   <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">

_includes/header.html

@@ -1,14 +1,12 @@
-<header class="o-container c-header">
+<header class="container header">
   <a class="c-header__skip" href="#main">skip to content</a>
 
   <h1 class="c-header__title">
     <a class="c-header__link c-header__link--title" href="{{ site.baseurl }}/">raina shannon</a>
   </h1>
 
-  <button class="c-header__toggle js-menu-toggle" href="#">menu</button>
-  <nav class="c-header__nav js-menu">
+  <nav class="">
     <a class="c-header__link c-header__link--nav link{% if page.url == '/' %} c-header__link--active {% endif %}" href="{{ site.baseurl }}/">portfolio</a>
     <a class="c-header__link c-header__link--nav link{% if page.url == '/about' %} c-header__link--active {% endif %}" href="{{ site.baseurl }}/about">about</a>
-    <a class="c-header__link c-header__link--nav link{% if page.url == '/art-collection' %} c-header__link--active {% endif %}" href="{{ site.baseurl }}/art-collection">just for fun</a>
   </nav>
 </header>

_includes/post.html

@@ -1,12 +1,12 @@
-<div class="brick">
+<div class="">
     {% if post.content == "" %}
-      <a data-fslightbox href="{{ site.baseurl }}{{ post.image }}">
-        <img class="" data-rjs="3" src="{{ site.baseurl }}{{ post.image }}" alt="{{ post.title }}">
+      <a href="#">
+        <img class="" src="{{ site.baseurl }}{{ post.image }}" alt="{{ post.title }}">
       </a>
     {% else %}
       <a class="" href="{{ site.baseurl }}{{ post.url }}">
         <figure>
-          <img class="" data-rjs="3" src="{{ site.baseurl }}{{ post.image }}" alt="{{ post.title }}">
+          <img class="" src="{{ site.baseurl }}{{ post.image }}" alt="{{ post.title }}">
           {% if post.url contains 'case-studies'  %}
             <figcaption>{{ post.title }}</figcaption>
           {% endif %}

_includes/scripts.html

@@ -2,7 +2,7 @@
 <style>
   .c-about__text,
   .c-post__paragraph {
-    max-width: 28em;
+    max-width: 30em;
     min-font-size: 12px;
     rag-adjust: small-words;
     widow-adjust: padding-right;
@@ -11,20 +11,7 @@
     max-width: 100%;
   }
 </style>
-<script src="{{ "/js/type.min.js" | prepend: site.baseurl }}"></script>
+<!--- TODO: rip out -->
+<!-- <script src="{{ '/js/type.min.js' | prepend: site.baseurl }}"></script> -->
 
-<script src="{{ "/js/masonry.pkgd.min.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/js/imagesloaded.pkgd.min.js" | prepend: site.baseurl }}"></script>
-<script type="text/javascript" src="{{ "/js/retina.js" | prepend: site.baseurl }}"></script>
-<script type="text/javascript" src="{{ "/js/fslightbox.js" | prepend: site.baseurl }}"></script>
-<script src="{{ "/js/app.js" | prepend: site.baseurl }}"></script>
-<!--  Google Analytics  -->
-<script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-  ga('create', 'UA-60752701-1', 'auto');
-  ga('send', 'pageview');
-</script>
+<script src="{{ '/js/app.js' | prepend: site.baseurl }}"></script>

_layouts/art.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+<!-- TODO: DRY with visual_design.html -->
+<article class="square-images">
+  <h1 class="c-portfolio__title">{{ page.title }}</h1>
+  <h2 class="c-portfolio__subtitle">{{ page.description }}</h2>
+  <div class="grid-3x3">
+    {% for post in site.art %}
+      {% include figure.html %}
+    {% endfor %}
+  </div>
+</article>

_layouts/art_post.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+<article class="art-post">
+
+  <header class="">
+    <h1 class="c-post__title">{{ page.title }}</h1>
+    <h2 class="c-portfolio__subtitle">{{ page.description }}</h2>
+  </header>
+
+  <div class="o-grid o-grid--post">
+    <div class="o-grid__item o-grid__item--order-2 center-image">
+      <img class="c-post__image" src="{{ site.baseurl }}{{ page.image }}" alt="{{ page.title }}">
+    </div>
+  </div>
+
+  <div>
+    <a class="" href="{% link _portfolio/art.html %}">
+      Back to Art
+    </a>
+  </div>
+
+</article>

_layouts/default.html

@@ -7,7 +7,7 @@
 
     {% include header.html %}
 
-    <main id="main" class="c-main">
+    <main id="main" class="container">
       {{ content }}
     </main>
 

_layouts/page.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 ---
-<article class="o-container">
+<article class="container">
 
   <div class="{{ page.title }}">
     {{ content }}

_layouts/post.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 ---
-<article class="o-container c-post">
+<article class="c-post">
 
   <header class="c-post__header">
     <h1 class="c-post__title" itemprop="name headline">{{ page.title }}</h1>
@@ -11,10 +11,14 @@ <h1 class="c-post__title" itemprop="name headline">{{ page.title }}</h1>
     {{ content }}
 
     <div>
-      {% if page.url contains "projects" %}
-        <a class="c-post__return-link" href="{{ site.baseurl }}/art-collection">Back to just for fun</a>
+      {% if page.collection == "visual_design" %}
+        <a class="c-post__return-link" href="{% link _portfolio/visual-design.html %}">
+          Back to Visual Design
+        </a>
       {% else %}
-        <a class="c-post__return-link" href="{{ site.baseurl }}/">Back to Portfolio</a>
+        <a class="c-post__return-link" href="{% link index.html %}">
+          Back to Portfolio
+        </a>
       {% endif %}
     </div>
   </div>

_layouts/visual_design.html

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+
+<!-- <pre>
+  {{ site | inspect }}
+</pre> -->
+
+<!-- TODO: DRY with art.html -->
+<article class="square-images">
+  <h1 class="c-portfolio__title">{{ page.title }}</h1>
+  <h2 class="c-portfolio__subtitle">{{ page.description }}</h2>
+  <div class="grid-3x3">
+    {% for post in site.visual_design %}
+      {% include figure.html %}
+    {% endfor %}
+  </div>
+</article>

_portfolio/art.html

@@ -0,0 +1,6 @@
+---
+layout: art
+title:  "Art + Sketches"
+description: "A collection of favorite drawings + compositions: Just for fun"
+image: /images/cover_art.jpeg
+---