From 9e4d5929a84d7355751ae092ef12a92236812c48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20M=C3=BCller?= <straightshoota@gmail.com>
Date: Tue, 7 Nov 2023 22:03:29 +0100
Subject: [PATCH 1/2] Allow resizing preview vierport in style guide (#518)

---
 _sass/pages/_styleguide.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/_sass/pages/_styleguide.scss b/_sass/pages/_styleguide.scss
index 4cc46862..fafed5e9 100644
--- a/_sass/pages/_styleguide.scss
+++ b/_sass/pages/_styleguide.scss
@@ -10,8 +10,10 @@
     border-radius: 0.425rem;
     padding: var(--padding-sm);
 
-    &.wide {
-      max-width: unset;
+    max-width: unset;
+
+    &:not(.wide) {
+      width: var(--content-width);
     }
   }
 
@@ -23,3 +25,8 @@
     }
   }
 }
+
+.styleguide-preview {
+  resize: both;
+  overflow: scroll;
+}

From c297eacc17ef2736e4ad7d33c09d95a1a94302c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20M=C3=BCller?= <straightshoota@gmail.com>
Date: Fri, 17 Nov 2023 13:20:20 +0100
Subject: [PATCH 2/2] Add mixin `circle-image` (#522)

---
 _sass/components/_book-authors.scss | 7 ++-----
 _sass/elements/_avatar-list.scss    | 3 +--
 _sass/main.scss                     | 1 +
 _sass/mixins/_circle-image.scss     | 5 +++++
 _sass/pages/_sponsors.scss          | 3 +--
 5 files changed, 10 insertions(+), 9 deletions(-)
 create mode 100644 _sass/mixins/_circle-image.scss

diff --git a/_sass/components/_book-authors.scss b/_sass/components/_book-authors.scss
index b6423952..7f1b16f0 100644
--- a/_sass/components/_book-authors.scss
+++ b/_sass/components/_book-authors.scss
@@ -9,8 +9,7 @@
 .book-author {
   display: grid;
 
-  grid-template-areas:
-    "icon main";
+  grid-template-areas: "icon main";
   grid-template-columns: auto 1fr;
   column-gap: var(--padding-sm);
 
@@ -19,10 +18,8 @@
   }
 
   > .book-author-icon {
+    @include circle-image;
     grid-area: icon;
     width: 6ch;
-    aspect-ratio: 1;
-    object-fit: cover;
-    clip-path: content-box circle(50%);
   }
 }
diff --git a/_sass/elements/_avatar-list.scss b/_sass/elements/_avatar-list.scss
index 96afffde..eed715e4 100644
--- a/_sass/elements/_avatar-list.scss
+++ b/_sass/elements/_avatar-list.scss
@@ -52,8 +52,7 @@
 }
 
 .avatar-list img {
-  aspect-ratio: 1;
-  object-fit: cover;
+  @include circle-image;
   background-color: var(--background-main);
   box-shadow: 0 0 0 0.05em var(--background-main),
     0 0 0 0.08em rgba(0, 0, 0, 0.15);
diff --git a/_sass/main.scss b/_sass/main.scss
index b258370e..74360659 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -3,6 +3,7 @@
 @import "variables";
 @import "mixins/blockflow";
 @import "mixins/box-link";
+@import "mixins/circle-image";
 
 @layer reset {
   @import "reset";
diff --git a/_sass/mixins/_circle-image.scss b/_sass/mixins/_circle-image.scss
new file mode 100644
index 00000000..df3299fd
--- /dev/null
+++ b/_sass/mixins/_circle-image.scss
@@ -0,0 +1,5 @@
+@mixin circle-image() {
+  aspect-ratio: 1;
+  object-fit: cover;
+  clip-path: content-box circle(50%);
+}
diff --git a/_sass/pages/_sponsors.scss b/_sass/pages/_sponsors.scss
index 99ee1ebd..3ea8743d 100644
--- a/_sass/pages/_sponsors.scss
+++ b/_sass/pages/_sponsors.scss
@@ -70,10 +70,9 @@
   }
 
   img {
+    @include circle-image;
     width: 2em;
     min-width: 1.5em;
-    aspect-ratio: 1;
-    border-radius: 50%;
   }
 
   tr:not(:hover) img {