Refactor Jekyll configuration and styles for improved layout and resp…

…onsiveness
daniel-butler-irl · Nov 2, 2024 · e5fe0ea · e5fe0ea
1 parent 3bbdb83
commit e5fe0ea
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 77 deletions.
diff --git a/docs/Gemfile b/docs/Gemfile
@@ -1,16 +1,13 @@
 source "https://rubygems.org"
 
 gem "github-pages", group: :jekyll_plugins
-gem "jekyll-feed", "~> 0.12"
-gem "minima"
 
 group :jekyll_plugins do
-  gem "jekyll-feed"
   gem "jekyll-seo-tag"
+  gem "jekyll-feed"
 end
 
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
+# Windows and JRuby does not include zoneinfo files
 platforms :mingw, :x64_mingw, :mswin, :jruby do
   gem "tzinfo", ">= 1"
   gem "tzinfo-data"
@@ -19,6 +16,5 @@ end
 # Performance-booster for watching directories on Windows
 gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
 
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+# Lock http_parser.rb gem
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -1,11 +1,12 @@
 title: Daniel Butler
 description: Automation Engineer at IBM Cloud | Making Cloud Development Easier
-url: "https://dbdev.ie"
-baseurl: ""
+baseurl: "/docs"
+url: "https://daniel-butler-irl.github.io"
 
 # Theme settings
-theme: minima
+remote_theme: pages-themes/[email protected]
 plugins:
+  - jekyll-remote-theme
   - jekyll-feed
   - jekyll-seo-tag
 
@@ -20,25 +21,7 @@ author:
 markdown: kramdown
 kramdown:
   input: GFM
-  hard_wrap: false
-
-# Collections
-collections:
-  projects:
-    output: true
-    permalink: /projects/:path/
-
-# Defaults
-defaults:
-  - scope:
-      path: ""
-      type: "posts"
-    values:
-      layout: "post"
-  - scope:
-      path: ""
-    values:
-      layout: "default"
+  syntax_highlighter: rouge
 
 # Exclude from processing
 exclude:

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -6,50 +6,11 @@
     <title>{{ page.title }} - {{ site.title }}</title>
     <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
     {% seo %}
-    <style>
-        .wrapper {
-            max-width: 960px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        .header {
-            display: flex;
-            align-items: center;
-            margin-bottom: 40px;
-        }
-        .profile-img {
-            width: 150px;
-            height: 150px;
-            border-radius: 50%;
-            margin-right: 20px;
-        }
-        .social-links {
-            margin-top: 20px;
-        }
-        .social-links a {
-            margin-right: 15px;
-            text-decoration: none;
-        }
-        .project-card {
-            border: 1px solid #e1e4e8;
-            border-radius: 6px;
-            padding: 20px;
-            margin-bottom: 20px;
-        }
-        .navigation {
-            margin-bottom: 30px;
-        }
-        .navigation a {
-            margin-right: 20px;
-            text-decoration: none;
-            color: #0366d6;
-        }
-    </style>
 </head>
 <body>
     <div class="wrapper">
         <header class="header">
-            <img src="{{ '/assets/images/profile.jpg' | relative_url }}" alt="Daniel Butler" class="profile-img">
+            <img src="{{ '/assets/images/profile.jpg' | relative_url }}" alt="Daniel Butler" class="profile-img" onerror="this.src='https://via.placeholder.com/150'">
             <div>
                 <h1>{{ site.title }}</h1>
                 <p>{{ site.description }}</p>
@@ -60,12 +21,6 @@ <h1>{{ site.title }}</h1>
             </div>
         </header>
 
-        <nav class="navigation">
-            {% for item in site.navigation %}
-            <a href="{{ item.url | relative_url }}">{{ item.title }}</a>
-            {% endfor %}
-        </nav>
-
         <main>
             {{ content }}
         </main>
@@ -75,4 +30,4 @@ <h1>{{ site.title }}</h1>
         </footer>
     </div>
 </body>
-</html>
+</html>
diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
@@ -0,0 +1,80 @@
+---
+---
+
+@import "{{ site.theme }}";
+
+/* Custom styles */
+.wrapper {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.profile-img {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  margin-right: 20px;
+}
+
+.social-links {
+  margin-top: 20px;
+
+  a {
+    margin-right: 15px;
+    text-decoration: none;
+    color: #0366d6;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.project-card {
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+  padding: 20px;
+  margin-bottom: 20px;
+  background-color: #fff;
+}
+
+.navigation {
+  margin-bottom: 30px;
+
+  a {
+    margin-right: 20px;
+    text-decoration: none;
+    color: #0366d6;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+footer {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #eaecef;
+  text-align: center;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    text-align: center;
+
+    .profile-img {
+      margin-right: 0;
+      margin-bottom: 20px;
+    }
+  }
+}