About

assets/scaffold.scss

@@ -67,8 +67,9 @@ h1, h2, h3, h4, h5, h6 {
   @extend .#{$footerTextColor};
 }
 
-// apply tachyons classes to blog post markdown
-.post-body {
+// apply tachyons classes to blog post and single page markdown
+.post-body,
+.page-body {
 
   h1, h2, h3, h4, h5, h6 { @extend .lh-title ; }
   h1 { @extend .f1 ; }
@@ -115,7 +116,7 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-// apply tachyons classes to blog lists
+// apply tachyons classes to blog lists 
 .blog-content {
   article { @extend .b--#{$borderColor} ; }
 }
@@ -389,6 +390,40 @@ details#PageTableOfContents nav#TableOfContents ul li:hover {
   @extend .bg-#{$siteBgColor};
 }
 
+// about page
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  @extend .static-l, .top-0-l;
+}
+
+audio {
+  filter: sepia(0%) saturate(0%) grayscale(1) contrast(99%) invert(100%);
+  width: 8rem;
+  height: 2rem;
+}
+.controls button:hover, 
+.controls button:focus {
+  @extend .o-10;
+}
+// apply tachyons classes to about page lists 
+.featured-content h5,
+.featured-content article {
+  @extend .b--#{$borderColor} ; 
+}
+.glow-on-hover {
+  @extend .o-80, .glow;
+}
+@media screen and (max-width: 48em) {
+  .glow-on-hover {
+    opacity: 1;
+  }
+}
+
+.about-sidebar {
+  @extend .bg-#{$sidebarBgColor};
+}
+
 // Fontawesome icons
 $fa-font-path:        "../webfonts";
 @import "fontawesome-free-5.15.1-web/scss/fontawesome.scss";

config.toml

@@ -1,7 +1,7 @@
 baseURL = "/"
 languageCode = "en"
 title = "Blogophonic"
-author = "Formspree"
+author = "Hi there"
 copyright = "" # set to override the auto generated copyright using org info and now year
 googleAnalytics = ""
 disqusShortname = ""
@@ -54,7 +54,7 @@ enableEmoji = true
   # use a built-in color theme
   # one of: forest / grayscale / peach / poppy / 
   #         sky / violet / water
-  theme = "poppy"
+  theme = "peach"
   # or, leave theme empty & make your own palette
   # basic color options: use only color names as shown in the
   # "Color Palette" section of http://tachyons.io/docs/themes/skins/

content/about/_index.md

@@ -0,0 +1,52 @@
+---
+title: "About"
+description: |
+  A blog template for Hugo developed by Formspree and available for free.
+date: 2019-02-19T14:47:22-06:00
+show_header: true
+
+## Configure header of page
+text_align_right: false
+show_title_as_headline: false
+headline: |
+  Hi, my name is Emily Cooper. Nice to meet you.
+subheadline: |
+  I'm a driven 20-something American from Chicago who moved to Paris for an unexpected job opportunity. I've been tasked with bringing an American point of view to a venerable French marketing firm.
+
+## Configure sidebar position & look
+sidebar_left: true
+glow_on_hover: true  # makes each column dim when no hover
+
+## Configure page content in wide column
+title_label: "What I'm up to lately" # leave blank to exclude
+number_featured: 2 # pulling from mainSections in config.toml
+number_categories: 3 # set to zero to exclude
+show_intro: true
+intro: |
+  Cultures clash as I adjust to the challenges of life in Paris while juggling my career, new friendships, and love life. Here is how to catch up with me lately!
+show_outro: true
+outro: |
+  <i class="fas fa-mug-hot pr2"></i>If my blog has helped you, you can [buy me a coffee](https://ko-fi.com/)!
+
+## Configure sidebar content in narrow column
+author: "Emily Cooper"
+role: "Social media strategy @ Savoir"
+avatar: avatar.jpg
+avatar_shape: rounded # circle, square, rounded
+show_social: true
+show_audio_link: true
+audio_link: 
+- name: How to say my name
+  url: audio.m4a
+link_list_label: "Interests" # bookmarks, elsewhere, etc.
+link_list:
+- name: Paris
+  url: https://en.wikipedia.org/wiki/Paris
+- name: Pastries
+  url: https://en.wikipedia.org/wiki/Pastry
+- name: People
+  url: https://en.wikipedia.org/wiki/People
+---
+
+** index doesn't contain a body, just front matter above.
+See about/list.html in the layouts folder **

content/blog/spoonful-series/01-spoonful.md

@@ -3,7 +3,7 @@ title: "A first post"
 weight: 1
 subtitle: ""
 excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites."
-date: 2019-07-02
+date: 2021-01-01
 author: "Eric Anderson"
 draft: false
 series:
@@ -12,6 +12,7 @@ tags:
 - hugo-site
 categories:
 - Theme Features
+- R
 # layout options: single, single-sidebar, single-series
 layout: single-series
 ---

content/blog/spoonful-series/02-spoonful.md

@@ -3,7 +3,7 @@ title: "A second post"
 weight: 2
 subtitle: ""
 excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites."
-date: 2019-07-02
+date: 2021-01-02
 author: "Eric Anderson"
 draft: false
 series:
@@ -12,6 +12,7 @@ tags:
 - hugo-site
 categories:
 - Theme Features
+- R
 # layout options: single, single-sidebar, single-series
 layout: single-series
 ---

content/blog/spoonful-series/03-spoonful/index.Rmarkdown

@@ -3,7 +3,7 @@ title: "A third post"
 weight: 3
 subtitle: ""
 excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites."
-date: 2021-01-01
+date: 2021-01-03
 author: "Eric Anderson"
 draft: false
 series:
@@ -12,6 +12,7 @@ tags:
 - hugo-site
 categories:
 - Theme Features
+- R
 # layout options: single, single-sidebar, single-series
 layout: single-series
 ---

content/blog/spoonful-series/03-spoonful/index.markdown

@@ -3,7 +3,7 @@ title: "A third post"
 weight: 3
 subtitle: ""
 excerpt: "Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites."
-date: 2021-01-01
+date: 2021-01-03
 author: "Eric Anderson"
 draft: false
 series:
@@ -12,6 +12,7 @@ tags:
 - hugo-site
 categories:
 - Theme Features
+- R
 # layout options: single, single-sidebar, single-series
 layout: single-series
 ---

content/project/bakeoff/index.md

@@ -9,6 +9,8 @@ tags:
   - hugo-site
 categories:
   - Theme Features
+  - R
+  - package
 layout: single
 links:
 - icon: door-open

content/project/giraffes/index.md

@@ -9,6 +9,8 @@ tags:
   - hugo-site
 categories:
   - Theme Features
+  - R
+  - package
 # layout options: single or single-sidebar
 layout: single
 ---

content/project/penguins/index.md

@@ -9,6 +9,8 @@ tags:
 - hugo-site
 categories:
 - Theme Features
+- R
+- package
 # layout options: single or single-sidebar
 layout: single-sidebar
 ---

layouts/about/list.html

@@ -0,0 +1,87 @@
+{{ define "main" }}
+<main class="page-main pa4" role="main">
+  <section class="page-content mw8 center">
+    {{ if .Params.show_header }}
+    <header class="page-header bb b--black-10 bw1 pb4 mb5 {{ if .Params.text_align_right }}tr{{ end }}">
+      {{ if .Params.show_title_as_headline }}<h1 class="f2 f1-m f-headline-l fw5-ns mv4 lh-solid tracked-tight-ns db">{{ .Title | markdownify }}</h1>
+      {{ else }}<h1 class="f2 f1-m f-headline-l fw5-ns mv4 lh-solid tracked-tight-ns db">{{ .Params.headline | markdownify }}</h1>{{ end }}
+      {{ with .Params.subheadline }}
+        <p class="f4 measure-wide lh-copy dib">{{ . | markdownify }}</p>
+      {{ end }}
+    </header>
+    {{ end }}
+
+    <section class="page-body">
+      <!--make the flexbox a row only on not small screens-->
+      <div class="flex items-start flex-row-l flex-column-ns flex-column {{ if not .Params.show_header }}mt4{{ end }}">
+
+        <!--wide content column: 2/3 -->
+        <div class="order-2 {{ if .Params.sidebar_left }}ml5-l order-2-l{{ else }}mr4-l order-1-l{{ end }} w-two-thirds-l w-100-ns {{ if .Params.glow_on_hover }}glow-on-hover{{ end }} pt5">
+          {{ if .Params.show_header }}
+            {{ with .Params.title_label }}
+              <h2 class="f2 fw7 tl">{{ . | markdownify }}</h2>
+            {{ end }}
+          {{ else }}
+            {{ with .Params.title_label }}  
+            <h1 class="f2 f1-m f-headline-l fw5-ns mv4 lh-solid tracked-tight-ns">{{ . | markdownify }}</h1>
+            {{ end }}
+          {{ end }}
+          {{ if .Params.show_intro }}
+            <p class="f4 measure lh-copy dib">{{ .Params.intro | markdownify }}</p>
+          {{ end }}
+          {{ partial "shared/summary-li" . }}
+          {{ if .Params.show_outro }}
+            <p class="measure-wide lh-copy cf pt3">
+            {{ .Params.outro | markdownify }}
+            </p>
+          {{ end }}
+        </div> <!--close wide column -->
+
+        <sidebar class="about-sidebar order-1 {{ if .Params.sidebar_left }}order-1-l{{ else }}mr4-l order-2-l{{ end }} pt5 mh0 w-third-l w-100-ns self-start sticky {{ if .Params.glow_on_hover }}glow-on-hover{{ end }}" id="profile">
+          <div class="pt3 pb1 pb2-ns tc ph4">
+            {{ if .Params.avatar }}
+              {{ $avatar := printf "/%s%s" .File.Dir .Params.avatar }}
+              {{ $avatar_shape := .Params.avatar_shape | default "circle" }}
+              {{ with $avatar_shape }}
+                <img src="{{ $avatar }}" class="h4 w4 dib {{if eq . "rounded"}}br3{{end}}{{if eq . "circle"}}br-100{{end}}" alt="avatar">
+              {{ end }}
+            {{ end }}
+            <h2 class="f4-ns fw6">{{ .Params.author }}</h2>
+            <h5 class="f4 fw2 ttu tracked">{{ .Params.role | markdownify }}</h5>
+            {{ if .Params.show_social }}
+              <div class="site-social-links db dtc-l v-mid w-100 w-33-l tc pv2">
+              {{ partial "shared/social-links.html" . }}
+              </div>
+            {{ end }}
+            </div>
+
+            {{ if .Params.show_audio_link }}
+            <div class="pa1 pa2-ns tc ph4">
+              {{ range .Params.audio_link }}
+                <p class="fw2 pb1">{{ .name }}</p>
+                <p>
+                <audio controls>
+                  <source src="{{ .url }}" type="audio/mp4">
+                  Your browser does not support the audio element.
+                </audio> 
+                </p>
+              {{ end }}
+            </div> 
+            {{ end }}
+
+          <div class="pa1 pa2-ns tc ph4">
+            <h5 class="f4 fw2 ttu tracked">{{ .Params.link_list_label }}</h5>
+            <ul class="list pl0 measure center">
+            {{ range .Params.link_list }}
+              <li class="lh-copy pv2 ba bl-0 bt-0 br-0 b--dotted b--black-20">
+                <a href="{{ .url }}" target="_blank">{{ .name }}</a>
+              </li>
+            {{ end }}
+            </ul>
+          </div>
+        </sidebar>  
+      </div>    <!--close flex-->
+    </section>  <!--close body section-->
+  </section>    <!--close page content section-->
+</main>
+{{ end }}