Adding some styling. Set posts up to show a graphic and enabled hover…

…->click. Linked preliminary project, with "to-do" item to fill in with more content.
TimothyFDavison · Nov 1, 2024 · 283c79e · 283c79e
1 parent b7b1687
commit 283c79e
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 134 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,4 @@
-# whiteglass-template
+# TimothyFDavison.XYZ
 
-[![Deploy Jekyll site to Pages](https://github.com/yous/whiteglass-template/actions/workflows/main.yml/badge.svg?branch=source)](https://github.com/yous/whiteglass-template/actions/workflows/main.yml)
+Experimenting with static site generation. Site produced using Jekyll and the Whiteglass template.
 
-Template site for [whiteglass](https://github.com/yous/whiteglass) theme. Click
-"Use this template" button to start.
-
-## Configuration
-
-Change the options defined in _config.yml. Let's say the URL of your source
-repository is `https://github.com/johndoe/some-repo`.
-
-``` yaml
-title: My site title
-author: John Doe
-description: This is my site description.
-baseurl: "/some-repo"
-url: "https://johndoe.github.io"
-```
-
-For further details, see [Configuration](https://jekyllrb.com/docs/configuration/)
-section under Jekyll documentation.
-
-## License
-
-whiteglass-template is free and unencumbered software released into the public
-domain. For more information, please refer to <http://unlicense.org/>.
diff --git a/_config.yml b/_config.yml
@@ -1,37 +1,14 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-#
-# If you need help with YAML syntax, here are some quick references for you:
-# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
-# https://learnxinyminutes.com/docs/yaml/
-#
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-
+# Personal details
 title: Timothy F. Davison
 author: Timothy F. Davison
-description: >- # this means to ignore newlines until "baseurl:"
+description: >- 
   And now I am become blog, writer of trash thought pieces.
-baseurl: "" # the subpath of your site, e.g. /blog
-url: "https://yous.github.io" # the base hostname & protocol for your site, e.g. http://example.com
+baseurl: ""
+url: ""
 lang: en
 timezone: UTC
 
-# Social media
-twitter_username:
-twitter_image:
-facebook_app_id:
-facebook_image:
+# Social media, Google Analytics
 google_analytics:
 comments: false
 
@@ -42,25 +19,7 @@ plugins:
   - jekyll-paginate
   - jekyll-sitemap
 
-# Exclude from processing.
-# The following items will not be processed, by default.
-# Any item listed under the `exclude:` key here will be automatically added to
-# the internal "default list".
-#
-# Excluded items can be processed by explicitly listing the directories or
-# their entries' file path in the `include:` list.
-#
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
+# Exclude options
 exclude:
   - README.md
 

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: "en" }}">
 
+  <link rel="stylesheet" href="{{ '/main.css' | relative_url }}">
+
   {% include head.html %}
 
   <body>

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -6,44 +6,30 @@
 
   {{ content }}
 
+  <section class="homepage-banner">
+    <h1>Welcome! I'm an AI researcher at the Johns Hopkins University Applied Physics Laboratory.</h1>
+    <p>I specialize in the generation, detection, and counter-detection of synthetic media.</p>
+  </section>
+
   {% capture site_lang %}{{ site.lang | default: "en" }}{% endcapture %}
 
-  <ul class="post-list">
-    {% for post in paginator.posts %}
-      {% capture post_lang %}{{ post.lang | default: site_lang }}{% endcapture %}
-      {% capture lang %}{% if post_lang != site_lang %}{{ post_lang }}{% endif %}{% endcapture %}
-
-      <li{% if lang != empty %} lang="{{ lang }}"{% endif %}>
-        <header class="post-header">
-          <h1 class="post-title">
-            {% if post.external-url %}
-              <a class="post-link" href="{{ post.external-url }}">{{ post.title | escape }} &rarr;</a>
-            {% else %}
-              <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
-            {% endif %}
-          </h1>
-
-          <p class="post-meta">
-            {% if post.categories != empty or post.tags != empty %}
-              {% include category_links.html categories=post.categories tags=post.tags %}
-            {% endif %}
-            {% if post.external-url %}
-              • <a href="{{ post.url | relative_url }}">Permalink</a>
-            {% endif %}
-          </p>
-        </header>
-
-        <div class="post-content">
-          {{ post.excerpt }}
+  <div class="post-grid">
+  {% for post in paginator.posts %}
+    <div class="post-box">
+      <a href="{{ post.url | relative_url }}">
+        <div class="post-icon">
+          {% if post.icon %}
+            <img src="{{ post.icon | relative_url }}" alt="{{ post.title }} icon" />
+          {% else %}
+            <img src="/assets/icons/default-icon.png" alt="Default icon" />
+          {% endif %}
         </div>
-        {% if post.content contains site.excerpt_separator %}
-          <p class="post-continue">
-            <a href="{{ post.url | relative_url }}">{% include i18n.html lang=lang value="morelink" default="Read on" %} &rarr;</a>
-          </p>
-        {% endif %}
-      </li>
-    {% endfor %}
-  </ul>
+        <div class="post-title">{{ post.title }}</div>
+      </a>
+    </div>
+  {% endfor %}
+</div>
+
 
   {% include pagination.html %}
 

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -1,24 +1,8 @@
----
-layout: default
----
-<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
+<article class="post-content">
+  <h1>{{ page.title }}</h1>
+  <p>{{ page.date | date: "%B %-d, %Y" }}</p>
 
-  <header class="post-header">
-    {% if page.external-url %}
-      <h1 class="post-title" itemprop="name headline"><a href="{{ page.external-url }}">{{ page.title | escape }} &rarr;</a></h1>
-    {% else %}
-      <h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
-    {% endif %}
-    </header>
-
-  <div class="post-content" itemprop="articleBody">
+  <div class="post-body">
     {{ content }}
   </div>
-
-  {% if site.comments == true and page.comments != false %}
-    <div class="post-comments" itemprop="comment">
-      {% include custom_comments_provider.html %}
-    </div>
-  {% endif %}
-
-</article>
+</article>
diff --git a/_posts/2020-04-25-test.markdown b/_posts/2020-04-25-test.markdown
diff --git a/_posts/2024-10-31-roots.markdown b/_posts/2024-10-31-roots.markdown
@@ -0,0 +1,12 @@
+---
+layout: page
+icon: "/assets/roots.png"
+title: "I Need To Grow Away From These Roots"
+---
+## I Need To Grow Away From These Roots
+Ambient music generation inspired by the audio component of David Whiting's artistic piece, [I Need To
+Grow Away From These Roots](https://www.vitling.xyz/i-need-to-grow-away-from-these-roots/). 
+All credit to the original artist. 
+
+### Code
+All code can be found on my Github [here](https://github.com/TimothyFDavison/I-Need-To-Grow-Away-From-These-Roots).
diff --git a/_posts/2024-10-31-roots2.markdown b/_posts/2024-10-31-roots2.markdown
@@ -0,0 +1,12 @@
+---
+layout: page
+icon: "/assets/roots.png"
+title: "I Need To Grow Away From These Roots"
+---
+## I Need To Grow Away From These Roots
+Ambient music generation inspired by the audio component of David Whiting's artistic piece, [I Need To
+Grow Away From These Roots](https://www.vitling.xyz/i-need-to-grow-away-from-these-roots/). 
+All credit to the original artist. 
+
+### Code
+All code can be found on my Github [here](https://github.com/TimothyFDavison/I-Need-To-Grow-Away-From-These-Roots).
diff --git a/_sass/homepage.scss b/_sass/homepage.scss
@@ -0,0 +1,20 @@
+// Setting homepage layout variables.
+.homepage-banner {
+    text-align: center;
+    margin: 50px auto;
+    max-width: 700px;
+}
+
+.homepage-banner h1 {
+    font-size: 2.5em;
+    font-weight: bold;
+    margin-bottom: 10px;
+    line-height: 1.2;
+    color: #333; /* Change color if you prefer */
+}
+
+.homepage-banner p {
+    font-size: 1.2em;
+    color: #666;
+    margin-bottom: 20px;
+}
diff --git a/_sass/icons.scss b/_sass/icons.scss
@@ -0,0 +1,61 @@
+// Posts grid
+.post-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between; /* Adjusts spacing between boxes */
+  margin: 0 -10px;
+}
+
+.post-box {
+  position: relative;
+  flex: 0 1 calc(50% - 20px); /* 3 boxes per row with spacing */
+  margin: 10px; /* Space between boxes */
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
+  font-size: .4em;
+  transition: transform 0.2s;
+}
+
+@media (max-width: 768px) {
+    .post-box {
+        flex: 0 1 calc(100% - 20px); /* 2 boxes per row on smaller screens */
+    }
+}
+
+@media (max-width: 480px) {
+    .post-box {
+        flex: 0 1 100%; /* 1 box per row on mobile */
+    }
+}
+
+
+// Hover, icons, title
+.post-box:hover {
+  transform: scale(1.05);
+}
+
+.post-icon img {
+  width: 100%; /* Make icon take up the entire container */
+  height: 100%;
+  object-fit: cover; /* Ensure the image fits within the box */
+  border-radius: 8px; /* Optional: round corners */
+}
+
+.post-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
+  color: #fff;
+  font-size: 0.4em;
+  padding: 5px;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.post-box:hover .post-title {
+  opacity: 1;
+}
diff --git a/_sass/style.scss b/_sass/style.scss
@@ -0,0 +1,42 @@
+// Define defaults for each variable.
+$base-font-family: Bitter, "Apple SD Gothic Neo", "Noto Sans", "Source Han Sans", "Noto Sans CJK JP", "Source Han Sans JP", "Noto Sans CJK KR", "Source Han Sans KR", NanumBarunGothic, AppleGothic, "Malgun Gothic", Dotum, sans-serif !default;
+$monospace-font-family: Monaco, Menlo, Consolas, "Courier New", DotumChe, monospace !default;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit:     30px !default;
+
+$text-color:       #111 !default;
+$background-color: #fdfdfd !default;
+$brand-color:      #2568ba !default;
+
+$grey-color:       #757575 !default;
+$grey-color-light: adjust-color($grey-color, $lightness: 45%) !default;
+$grey-color-dark:  adjust-color($grey-color, $lightness: -20%) !default;
+
+// Width of the content area
+$content-width:    800px !default;
+$on-palm:          600px !default;
+$on-laptop:        800px !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//   .wrapper {
+//     padding-right: $spacing-unit * 0.5;
+//     padding-left: $spacing-unit * 0.5;
+//   }
+// }
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}
+
+// Import partials.
+@import
+  "whiteglass/base",
+  "whiteglass/layout",
+  "whiteglass/syntax-highlighting"
+;
diff --git a/assets/roots.png b/assets/roots.png
diff --git a/assets/tim.jpg b/assets/tim.jpg
diff --git a/main.scss b/main.scss
@@ -0,0 +1,5 @@
+---
+---
+@import "_sass/style";
+@import "_sass/homepage";
+@import "_sass/icons";