Related posts widget style tweaks.

hackersandslackers · Jan 18, 2024 · 0accd83 · 0accd83
1 parent 99c2137
commit 0accd83
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 52 deletions.
diff --git a/assets/built/main.js b/assets/built/main.js
diff --git a/assets/built/page.js b/assets/built/page.js
diff --git a/assets/built/post.js b/assets/built/post.js
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
         "@babel/eslint-parser": "^7.23.3",
         "@babel/preset-env": "^7.23.8",
         "@tryghost/release-utils": "0.8.1",
-        "autoprefixer": "10.4.16",
+        "autoprefixer": "10.4.17",
         "babel-loader": "^9.1.3",
         "babel-plugin-import": "^1.13.8",
         "babel-plugin-module-resolver": "^5.0.0",
@@ -76,7 +76,7 @@
         "postcss-color-mod-function": "3.0.3",
         "postcss-easy-import": "4.0.0",
         "pump": "3.0.0",
-        "sass": "^1.69.7",
+        "sass": "^1.70.0",
         "sass-loader": "^14.0.0",
         "style-loader": "^3.3.4",
         "terser-webpack-plugin": "^5.3.10",

diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
@@ -13,11 +13,12 @@
 }
 
 @mixin header-third {
-  font-family: $body-font-semibold;
-  font-size: 1.4em;
+  font-family: $body-font-medium;
+  font-size: 1.3em;
   line-height: 1.1;
   margin: 40px 0 5px;
   color: #4e576a;
+  letter-spacing: .5px;
 
   @media(max-width: $mobile-breakpoint) {
     font-size: 1.3em;
@@ -411,4 +412,4 @@
     color: $color-hover !important;
     box-shadow: inset 0 0 0 1px $color-hover;
   }
-}
+}
diff --git a/src/scss/footer.scss b/src/scss/footer.scss
@@ -207,20 +207,34 @@
       }
 
       .social-media-button {
+        font-size: 1.8em;
+
+        &:hover {
+          cursor: pointer;
+          font-size: 2em;
+        }
+
+        @media(max-width: $smallscreen-breakpoint) {
+          font-size: 1.8em;
+
+          &:hover {
+            font-size: 2em;
+          }
+        }
 
         @media(max-width: $tablet-breakpoint) {
-          font-size: 1.4em;
+          font-size: 1.6em;
 
           &:hover {
-            font-size: 1.6em;
+            font-size: 1.8em;
           }
         }
 
         @media(max-width: $mobile-breakpoint) {
-          font-size: 1.7em;
+          font-size: 1.6em;
 
           &:hover {
-            font-size: 1.9em;
+            font-size: 1.8em;
           }
         }
 
@@ -290,6 +304,10 @@
         color: #414d5a;
         font-size: 1.05em;
 
+        @media(max-width: $mobile-breakpoint) {
+          font-size: 1.15em;
+        }
+
         a {
           transition: $transition;
           font-family: $body-font-medium;
@@ -308,7 +326,7 @@
     &.social {
       margin-bottom: 0;
       max-width: unset;
-      width: 260px;
+      width: 280px;
       height: unset;
     }
   }

diff --git a/src/scss/kg.scss b/src/scss/kg.scss
@@ -159,6 +159,7 @@ make sure they look good, and are given a bit of extra spacing. */
 
 .kg-table-card {
   margin: 20px 0;
+  overflow-y: hidden;
 
   .tableContainer {
     margin: 0;

diff --git a/src/scss/post.scss b/src/scss/post.scss
@@ -374,7 +374,7 @@
     }
 
     h2 {
-      line-height: 1;
+      line-height: 1.2;
       font-family: $body-font-light;
 
       @media(max-width: $mobile-breakpoint) {
@@ -533,6 +533,7 @@
       @media(max-width: $mobile-breakpoint) {
         width: -webkit-fill-available;
         margin-top: 10px !important;
+        padding-top: 5px;
         max-width: 85vw;
         font-size: .98em !important;
         line-height: 1.4 !important;
@@ -737,4 +738,4 @@
   &:hover {
     cursor: zoom-out;
   }
-}
+}
diff --git a/src/scss/related-posts.scss b/src/scss/related-posts.scss
@@ -69,25 +69,26 @@
 
       .post-card-title {
         font-size: 1.3em;
-        line-height: 1.1;
+        line-height: 1.15;
         font-family: $header-font;
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 3;
-        line-clamp: 3;
-        text-overflow: ellipsis;
-        word-wrap: break-word;
+        -webkit-box-orient: vertical;
 
         @media(max-width: $tablet-breakpoint) {
-          font-size: 1.3em;
+          font-size: 1.2em;
+
         }
 
         @media(max-width: $mobile-breakpoint) {
-          font-size: 1.5em;
+          font-size: 1.3em;
+          line-height: 1.15;
         }
 
         @media(max-width: 450px) {
-          font-size: 1.3em;
+          font-size: 1.2em;
+          line-height: 1.1;
         }
       }
 

diff --git a/yarn.lock b/yarn.lock
@@ -2420,9 +2420,9 @@
   integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
 "@types/node@*":
-  version "20.11.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.3.tgz#ac29fba7aeadc74046b02e50758156f4850f1296"
-  integrity sha512-nrlmbvGPNGaj84IJZXMPhQuCMEVTT/hXZMJJG/aIqVL9fKxqk814sGGtJA4GI6hpJSLQjpi6cn0Qx9eOf9SDVg==
+  version "20.11.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.5.tgz#be10c622ca7fcaa3cf226cf80166abc31389d86e"
+  integrity sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==
   dependencies:
     undici-types "~5.26.4"
 
@@ -2955,14 +2955,14 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-[email protected].16:
-  version "10.4.16"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
-  integrity sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==
+[email protected].17:
+  version "10.4.17"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.17.tgz#35cd5695cbbe82f536a50fa025d561b01fdec8be"
+  integrity sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==
   dependencies:
-    browserslist "^4.21.10"
-    caniuse-lite "^1.0.30001538"
-    fraction.js "^4.3.6"
+    browserslist "^4.22.2"
+    caniuse-lite "^1.0.30001578"
+    fraction.js "^4.3.7"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
@@ -3257,7 +3257,7 @@ broccoli-stew@^3.0.0:
     symlink-or-copy "^1.2.0"
     walk-sync "^1.1.3"
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.21.10, browserslist@^4.22.2:
+browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.22.2:
   version "4.22.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b"
   integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==
@@ -3382,10 +3382,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565:
-  version "1.0.30001576"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz#893be772cf8ee6056d6c1e2d07df365b9ec0a5c4"
-  integrity sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001565, caniuse-lite@^1.0.30001578:
+  version "1.0.30001578"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001578.tgz#11741580434ce60aae4b4a9abee9f9f8d7bf5be5"
+  integrity sha512-J/jkFgsQ3NEl4w2lCoM9ZPxrD+FoBNJ7uJUpGVjIg/j0OwJosWM36EPDv+Yyi0V4twBk9pPmlFS+PLykgEvUmg==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -3992,9 +3992,9 @@ [email protected]:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 electron-to-chromium@^1.4.601:
-  version "1.4.632"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.632.tgz#df6253483b802eb83eee2fdc0e5067bd46f36f11"
-  integrity sha512-JGmudTwg7yxMYvR/gWbalqqQiyu7WTFv2Xu3vw4cJHXPFxNgAk0oy8UHaer8nLF4lZJa+rNoj6GsrKIVJTV6Tw==
+  version "1.4.637"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.637.tgz#ed8775cf5e0c380c3e8452e9818a0e4b7a671ac4"
+  integrity sha512-G7j3UCOukFtxVO1vWrPQUoDk3kL70mtvjc/DC/k2o7lE0wAdq+Vwp1ipagOow+BH0uVztFysLWbkM/RTIrbK3w==
 
 ember-cli-babel-plugin-helpers@^1.1.1:
   version "1.1.1"
@@ -4239,7 +4239,7 @@ eslint-plugin-filenames@allouis/eslint-plugin-filenames#15dc354f4e3d155fc2d6ae08
     lodash.snakecase "4.1.1"
     lodash.upperfirst "4.3.1"
 
-eslint-plugin-ghost@^4.42.0:
+eslint-plugin-ghost@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-ghost/-/eslint-plugin-ghost-3.4.0.tgz#2a84e53e1bdc3ca722e2886e49d5de0dd2344d6f"
   integrity sha512-uj/ClW5yyfm0tHikI7jyWJbMqLVnn3PTr5GwVc0NTciM9tgkfS7TxEi8jAEa1idLRGPou+gF+Tvt0QBI/29S4g==
@@ -4754,7 +4754,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fraction.js@^4.3.6:
+fraction.js@^4.3.7:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
@@ -6708,9 +6708,9 @@ postcss-modules-extract-imports@^3.0.0:
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
 postcss-modules-local-by-default@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz#b08eb4f083050708998ba2c6061b50c2870ca524"
-  integrity sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6"
+  integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==
   dependencies:
     icss-utils "^5.0.0"
     postcss-selector-parser "^6.0.2"
@@ -7372,10 +7372,10 @@ sass-loader@^14.0.0:
   dependencies:
     neo-async "^2.6.2"
 
-sass@^1.69.7:
-  version "1.69.7"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.7.tgz#6e7e1c8f51e8162faec3e9619babc7da780af3b7"
-  integrity sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==
+sass@^1.70.0:
+  version "1.70.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.70.0.tgz#761197419d97b5358cb25f9dd38c176a8a270a75"
+  integrity sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -7851,9 +7851,9 @@ terser-webpack-plugin@^5.3.10, terser-webpack-plugin@^5.3.7:
     terser "^5.26.0"
 
 terser@^5.26.0:
-  version "5.26.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.26.0.tgz#ee9f05d929f4189a9c28a0feb889d96d50126fe1"
-  integrity sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==
+  version "5.27.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.27.0.tgz#70108689d9ab25fef61c4e93e808e9fd092bf20c"
+  integrity sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"