Add clamp and aspect-ratio helpers, 9.0.8

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 * Deprecate lazyload from CSS as it is no longer needed after loading="lazy"
 * Add image-background helper class for imgs as backgrounds
+* Add CSS clamp function as helper for responsive font sizes
+* Add CSS aspect-ratio helper for responsive images
 
 ### 9.0.7: 2022-08-22
 

bin/tasks/additions.sh

@@ -10,7 +10,7 @@ chmod 777 ${PROJECT_PATH}/media
 
 echo "${YELLOW}Generating default README.md...${TXTRESET}"
 
-NEWEST_AIR_VERSION="9.0.7"
+NEWEST_AIR_VERSION="9.0.8"
 NEWEST_WORDPRESS_VERSION="6.0.0"
 NEWEST_PHP_VERSION="7.4"
 CURRENT_DATE=$(LC_TIME=en_US date '+%d %b %Y' |tr ' ' '_');

functions.php

@@ -7,7 +7,7 @@
  *
  * @Date: 2019-10-15 12:30:02
  * @Last Modified by:   Roni Laukkarinen
- * @Last Modified time: 2022-08-22 15:17:03
+ * @Last Modified time: 2022-08-23 16:14:26
  *
  * @package air-light
  */
@@ -17,7 +17,7 @@
 /**
  * The current version of the theme.
  */
-define( 'AIR_LIGHT_VERSION', '9.0.7' );
+define( 'AIR_LIGHT_VERSION', '9.0.8' );
 
 // We need to have some defaults as comments or empties so let's allow this:
 // phpcs:disable Squiz.Commenting.InlineComment.SpacingBefore, WordPress.Arrays.ArrayDeclarationSpacing.SpaceInEmptyArray

package.json

@@ -1,6 +1,6 @@
 {
   "name": "air-light",
-  "version": "9.0.7",
+  "version": "9.0.8",
   "description": "A minimalist WordPress starter theme.",
   "author": "Digitoimisto Dude Oy ([email protected])",
   "devDependencies": {

readme.txt

@@ -12,7 +12,7 @@ Tags: one-column, accessibility-ready, translation-ready
 
 Requires at least: 5.0
 Tested up to: 6.0.0
-Stable tag: 9.0.7
+Stable tag: 9.0.8
 License: MIT License
 License URI: https://opensource.org/licenses/MIT
 

sass/helpers/_aspect-ratio.scss

@@ -0,0 +1,25 @@
+@use 'sass:math';
+
+@mixin aspect-ratio($width, $height) {
+  aspect-ratio: #{$width} / #{$height};
+
+  // Support for Safari 10-14 (Big Sur and earlier)
+  @supports not (aspect-ratio: 1 / 1) {
+    position: relative;
+
+    &::before {
+      content: '';
+      display: block;
+      padding-top: math.div($height, $width) * 100%;
+      width: 100%;
+    }
+
+    > .content {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}

sass/helpers/_clamp.scss

@@ -0,0 +1,13 @@
+// stylelint-disable max-line-length
+@use 'sass:math';
+
+// Easy CSS Clamp SCSS function
+// @source https://dev.to/christianmay21/easy-css-clamp-scss-mixin-1225
+// Usage: font-size: clamp-calc(480px, 640px, 12px, 16px);
+@function clamp-calc($min-width, $max-width, $size-at-min-width, $size-at-max-width) {
+  $slope: math.div($size-at-max-width - $size-at-min-width, $max-width - $min-width) or calc(($size-at-max-width - $size-at-min-width) / ($max-width - $min-width));
+  $y-axis-intersection: -1 * $min-width * $slope + $size-at-min-width;
+  $return-value: clamp(#{$size-at-min-width}, #{$y-axis-intersection} + #{$slope} * 100vw, #{$size-at-max-width});
+
+  @return $return-value;
+}

style.css

@@ -4,7 +4,7 @@ Theme URI: https://github.com/digitoimistodude/air-light
 Author: Digitoimisto Dude Oy
 Author URI: https://www.dude.fi
 Description: Hi. I'm a starter theme called <code>Air-light</code>, or <em>air</em>, if you like. I'm a theme based on Automattic's underscores and I'm meant for hacking so don't use me as a <em>Parent Theme</em> as-is. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
-Version: 9.0.7
+Version: 9.0.8
 
 ------8<----------
 Please do this before your actual theme is ready to go live:
@@ -20,7 +20,7 @@ If you see this, contact the site admin.
 /*---------------------------------------------------------------
 >>> Air-light theme version information, only for AIR developers
 -----------------------------------------------------------------
-@version 2022-08-22
+@version 2022-08-23
 @since 2016-01-28
 
 Tested up to: 5.9.3