feat: add column size attribute (#455)

6 files changed, 47 insertions, 6 deletions

diff --git a/exampleSite/content/en/shortcodes/columns.md b/exampleSite/content/en/shortcodes/columns.md
index 91043cd..8302266 100644
--- a/exampleSite/content/en/shortcodes/columns.md
+++ b/exampleSite/content/en/shortcodes/columns.md
@@ -4,6 +4,14 @@ title: Columns
 
 The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.
 
+## Attributes
+
+| Name            | Description                                      | default |
+| --------------- | ------------------------------------------------ | ------- |
+| size (optional) | size of the first column (small\|regular\|large) | regular |
+
+## Usage
+
 ```html
 {{</* columns */>}} <!-- begin columns block -->
 ## Left Content
diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
index c319671..cec8a95 100644
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -7,7 +7,7 @@
     --code
   {{- end }}"
   href="{{ .Destination | safeURL }}"
-  {{ with .Title }}title="{{ . }}"{{ end }}
+  {{- with .Title }}{{ printf "title=\"%s\"" . | safeHTMLAttr }}{{- end }}
 >
   {{- .Text | safeHTML -}}
 </a>
diff --git a/layouts/shortcodes/columns.html b/layouts/shortcodes/columns.html
index 2bb72b2..5a7bb62 100644
--- a/layouts/shortcodes/columns.html
+++ b/layouts/shortcodes/columns.html
@@ -1,4 +1,11 @@
-<div class="gdoc-columns flex flex-wrap flex-mobile-column">
+{{- $size := default "regular" (.Get "size" | lower) }}
+
+{{- if not (in (slice "regular" "large" "small") $size) }}
+  {{- $size = "regular" }}
+{{- end }}
+
+
+<div class="gdoc-columns gdoc-columns--{{ $size }} flex flex-gap flex-mobile-column">
   {{ range split .Inner "<--->" }}
     <div class="gdoc-columns__content gdoc-markdown--nested flex-even">
       {{ . | $.Page.RenderString }}
diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss
index b63479d..86efa3b 100644
--- a/src/sass/_mobile.scss
+++ b/src/sass/_mobile.scss
@@ -63,6 +63,15 @@
 
   .flex-mobile-column {
     flex-direction: column;
+
+    &.gblog-columns {
+      margin: $padding-32 0;
+    }
+
+    .gblog-columns__content {
+      min-width: auto;
+      margin: 0;
+    }
   }
 
   #menu-control:checked ~ main {
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index 0727ac9..4cc42fe 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -70,16 +70,28 @@
 
 // {{< columns >}}
 .gdoc-columns {
-  margin-left: -$padding-16;
-  margin-right: -$padding-16;
+  &--regular > :first-child {
+    flex: 1;
+  }
+
+  &--small > :first-child {
+    flex: 0.35;
+    min-width: $body-min-width * 0.35;
+  }
+
+  &--large > :first-child {
+    flex: 1.65;
+    min-width: $body-min-width * 1.65;
+  }
 
   &__content {
+    flex: 1 1;
     margin: $padding-16 0;
     min-width: $body-min-width * 0.66;
-    padding: 0 $padding-16;
+    padding: 0;
   }
 
-  .gdoc-page__anchor {
+  .gdoc-post__anchor {
     display: none;
   }
 }
diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss
index 38f2fe2..4911ba1 100644
--- a/src/sass/_utils.scss
+++ b/src/sass/_utils.scss
@@ -29,6 +29,11 @@
   background: var(--accent-color-lite);
 }
 
+.flex-gap {
+  flex-wrap: wrap;
+  gap: $padding-16;
+}
+
 .justify-start {
   justify-content: flex-start;
 }