Fix about page

jotonedev · Mar 1, 2024 · fa26a58 · fa26a58
1 parent a317b50
commit fa26a58
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    jekyll-theme-tallneck (0.2.4)
+    jekyll-theme-tallneck (0.2.6)
       jekyll (>= 4.0, < 5.0)
       jekyll-feed (~> 0.17)
       jekyll-seo-tag (~> 2.8)

diff --git a/_includes/post-card.html b/_includes/post-card.html
@@ -1,7 +1,7 @@
 <article class="post-card" id="{{ include.post.id }}">
 <a href="{{ include.post.url | relative_url }}" class="post-card--link post-card--flex">
     <div class="post-card--image">
-        <img src="{{ include.post.image | relative_url }}" alt="{{ include.post.title }}" aria-hidden="true">
+        <img src="{{ include.post.image | relative_url }}" alt="{{ include.post.title }}" aria-hidden="true" width="900" height="640">
     </div>
     <div class="post-card--content">
         <h2 class="post-card--title">{{ include.post.title }}</h2>

diff --git a/_sass/tallneck/components/about.scss b/_sass/tallneck/components/about.scss
@@ -1,6 +1,12 @@
 .about {
-    display: flex;
-    flex-flow: row wrap;
+    display: grid;
+    grid-template-columns: minmax($about-img-min-width, $about-img-max-width) 1fr;
+    grid-template-rows: auto;
+
+    @media (max-width: $about-wrap-max-width) {
+        grid-template-columns: 1fr;
+    }
+
     justify-content: space-between;
 
     margin-left: auto;
@@ -14,8 +20,11 @@
         flex: 1 1 38%;
         align-self: center;
 
-        min-width: 250px;
-        max-width: 500px;
+        width: 100%;
+        height: auto;
+
+        max-width: $about-img-max-width;
+        min-width: $about-img-min-width;
 
         margin-left: auto;
         margin-right: auto;

diff --git a/_sass/tallneck/variables.scss b/_sass/tallneck/variables.scss
@@ -27,6 +27,10 @@ $card-max-width: 18rem !default;
 $card-min-width: 16rem !default;
 $card-min-height: 400px !default;
 
+$about-img-min-width: 250px !default;
+$about-img-max-width: 400px !default;
+$about-wrap-max-width: 800px !default;
+
 // Colors
 :root {
   --background-color: #fff;

diff --git a/jekyll-theme-tallneck.gemspec b/jekyll-theme-tallneck.gemspec
@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-tallneck"
-  spec.version       = "0.2.5"
+  spec.version       = "0.2.6"
   spec.authors       = ["John Toniutti"]
   spec.email         = ["[email protected]"]