feat: add column size attribute (#455)

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

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>

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 }}

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 {

src/sass/_shortcodes.scss

@@ -70,16 +70,28 @@
 
 // {{< columns >}}
 .gdoc-columns {
-  margin-left: -$padding-16;
+  &--regular > :first-child {
-  margin-right: -$padding-16;
+    flex: 1;
-
-  &__content {
-    margin: $padding-16 0;
-    min-width: $body-min-width * 0.66;
-    padding: 0 $padding-16;
   }
 
-  .gdoc-page__anchor {
+  &--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;
+  }
+
+  .gdoc-post__anchor {
     display: none;
   }
 }

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;
 }