Use Docsy-friendly section partial

Use a partial for <section> that will work with near-vanilla Docsy.

Author: lmktfy

assets/scss/_base.scss

@@ -315,13 +315,6 @@ $ocean-nodes-h3-margin-bottom: 30px;
   position: relative;
   overflow: hidden;
 
-  & > .video-text-optional {
-    width: 30vw;
-    padding-top: 2rem;
-    color: white;
-    margin-right: 70vw;
-  }
-
   h2 {
     font-size: 32px;
     line-height: 44px;
@@ -345,14 +338,7 @@ $ocean-nodes-h3-margin-bottom: 30px;
     margin: 5px;
   }
 
-  #desktopKCButton {
-    display: inline;
-    position: absolute;
-    padding: 20px 10px 20px 10px;
-    margin: 0;
-  }
-
-  #desktopKCButton:hover, .desktopKCButton:hover{
+  .desktopKCButton:hover{
     background-color: #ffffff;
     color: #326ce5;
     transition: 150ms;
@@ -365,13 +351,9 @@ $ocean-nodes-h3-margin-bottom: 30px;
     color: $secondary;
     padding: 1.5rem;
     margin-bottom: 1rem;
-
-    &:hover::before {
-      border-color: transparent transparent transparent $dark-grey;
-    }
   }
 
-  #desktopShowVideoButton:hover{
+  #desktopShowVideoButton:hover {
     color: $primary;
     transition: 150ms;
   }
@@ -389,7 +371,7 @@ $ocean-nodes-h3-margin-bottom: 30px;
     position: fixed;
     top: 50%;
     left:50%;
-    transform: translate(-50%, -50%); 
+    transform: translate(-50%, -50%);
   }
 
   #closeButton {
@@ -428,6 +410,7 @@ $ocean-nodes-h3-margin-bottom: 30px;
 
 // KubeWeekly
 #kubeweekly {
+  visibility: hidden;
   background-color: $light-grey;
   padding-top: 30px;
   padding-bottom: 80px;

assets/scss/_custom.scss

@@ -96,31 +96,6 @@ body.td-home main[role="main"] > section:first-of-type .content p:first-child {
   }
 }
 
-section#upcoming-events {
-  color: $white;
-  background: $secondary;
-  text-align: center;
-  padding-top: 4rem;
-  padding-bottom: 2rem;
-  h2, h3, h4, h5, h6 {
-    font-weight: bold;
-  }
-  > div {
-    margin: 1.5em;
-    padding: 0.5em 0 0.5em 0;
-    a, a:hover {
-      color: $white;
-      background: transparent;
-      font-size: 1.5rem;
-      text-decoration: underline;
-      strong {
-        color: $white;
-        background: transparent;
-      }
-    }
-  }
-}
-
 .section-feature#kubeweekly {
 
   a.kubeweekly-signup, a.kubeweekly-signup:hover {
@@ -437,8 +412,10 @@ footer {
   background-position: 65% center, left center;
   background-repeat: no-repeat, repeat;
   background-size: auto 100%, cover;
+
   .video-text-optional {
     padding-left: calc(max(10vw, 5rem));
+    padding-right: clamp(2rem, 60vw, 80vw);
 
     button::before, button::after {
       color: $secondary;
@@ -1947,6 +1924,58 @@ body.td-search {
   color: #ffffff !important;
 }
 
+body.td-home section#upcoming-events > .col > .row {
+  color: $white;
+  background: $secondary;
+  text-align: center;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+
+  flex-direction: row;
+  row-gap: 0.25rem;
+  column-gap: calc(clamp(1rem, 5vw, 6rem);
+  justify-content: center;
+  flex-wrap: wrap;
+
+  > h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    width: 100vw;
+    padding: 1rem;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  > div {
+    margin: 0.5em;
+    padding: 0.5em 0 0.5em 0;
+    a, a:hover {
+      color: $white;
+      background: transparent;
+      font-size: 1.5rem;
+    }
+    a {
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+        text-decoration-color: $white;
+        strong {
+          text-decoration: initial;
+        }
+      }
+      strong {
+        color: $white;
+        background: transparent;
+        text-decoration: underline;
+        text-decoration-color: $primary;
+      }
+
+      &::before {
+        content: '• ';
+      }
+    }
+  }
+}
+
 body.td-home section.case-studies {
    h2, h3 {
      text-align: center;

assets/scss/_desktop.scss

@@ -64,18 +64,6 @@ $vendor-strip-height: 44px;
     }
   }
 
-  #video {
-    position: relative;
-    background-position: top center;
-    background-size: cover;
-
-    &>.light-text {
-      margin: 0 10% 15px 0;
-    }
-  }
-
-
-
   #talkToUs {
     h4 {
       br {

assets/scss/_tablet.scss

@@ -118,10 +118,6 @@ $vendor-strip-font-size: 16px;
     }
   }
 
-  #mobileShowVideoButton {
-    display: none;
-  }
-
   #talkToUs {
     #bigSocial {
       div {

layouts/shortcodes/blocks/section.html

@@ -1,16 +1,30 @@
-{{- $class := .Get "class" -}}
+{{- $_hugo_config := `{ "version": 1 }` -}}
+{{- $col_id := .Get "color" | default .Ordinal -}}
+{{- $height := .Get "height" | default "auto"  -}}
+{{- $type   := .Get "type" | default "" -}}
 {{- $style := .Get "style" -}}
-{{- $id := .Get "id" | default (printf "section-%d" .Ordinal) -}}
+{{- $id_fallback := ( printf "td-block-%d" .Ordinal ) -}}
+{{- $id := .Get "id" | default (printf "%s%s" $id_fallback "-section" ) -}}
+{{- $class := .Get "class" -}}
 {{- $bg := .Get "background-image" -}}
+{{- if $bg -}}
+  {{- template "shortcodes-blocks_getimage" (dict "name" $bg "ctx" . "target" "bg") }}
+{{- end -}}
 {{/* special case Kubernetes overview */}}
 {{- if eq $class "k8s-overview" -}}
-	{{- partial "kubernetes-overview.html" (dict "id" $id "class" $class "inner" $.Inner ) -}}
+ {{- partial "kubernetes-overview.html" (dict "id" $id "class" $class "inner" $.Inner ) -}}
 {{- else -}}
-{{- if $bg -}}
-	{{ template "shortcodes-blocks_getimage" (dict "name" $bg "ctx" . "target" "bg") }}
-{{- end -}}
+<a id="{{ $id_fallback }}" class="td-offset-anchor"></a>
 {{- $image := $.Scratch.Get "bg" -}}
-<section id="{{ $id }}" class="{{ with $image }}section-with-bgimage{{end}} {{ with $class }}{{ . }}{{ end }}" style="{{ with $image }}background-image: url({{ .Permalink }}); {{ end }}{{ with $style }}{{ . | safeCSS }}{{ end }}">
-	{{ $.Inner }}
+<section id="{{ $id }}" class="row td-box td-box--{{ $col_id }} td-box--gradient td-box--height-{{ $height }}{{ with $class }} {{ . }}{{ end }}{{ with $image }} section-with-bgimage {{ end }}" style="{{ with $image }}background-image: url({{ .Permalink }}); {{ end }}{{ with $style }}{{ . | safeCSS }}{{ end }}">
+	<div class="col">
+		<div class="row {{ $type }}">
+			{{ if eq .Page.File.Ext "md" }}
+				{{ .Inner | markdownify }}
+			{{ else }}
+				{{ .Inner | htmlUnescape | safeHTML }}
+			{{ end }}
+		</div>
+	</div>
 </section>
 {{- end -}}