Showcase page

assets/css/creative.css

@@ -601,44 +601,6 @@ img::-moz-selection {
     background: 0 0;
 }
 
-#MadeWithGamma
-{
-  background-color: #333;
-  padding: 0 0 1em;
-}
-
-#MadeWithGamma h2
-{
-  color: #fff;
-}
-
-#MadeWithGamma .gammaCard
-{
-  min-height: 250px;
-}
-
-#MadeWithGamma p
-{
-  font-size: smaller;
-}
-
-.card
-{
-  background-color: #444;
-  color: #ccc;
-  border-color: #2f2f2f;
-}
-
-#MadeWithGamma .card h4
-{
-  color: #fff;
-}
-
-.card .card-footer
-{
-  background-color: rgba(0,0,0,.1);
-}
-
 #Support
 {
   background-color: #333;

assets/scss/_showcase.scss

@@ -3,6 +3,16 @@
 
   background-color: #222;
 
+  .lazyload,
+  .lazyloading {
+    opacity: 0;
+  }
+
+  .lazyloaded {
+    opacity: 1;
+    transition: opacity 300ms;
+  }
+
   img
   {
     background: none;
@@ -107,6 +117,10 @@
     overflow:hidden;
     border-radius: 4px;
 
+    background-color: #1f1f1f;
+    color: #ccc;
+    border-color: #2f2f2f;
+
     box-shadow: 0 0 12px 5px rgba(0,0,0,0.2);
 
     .card-meta{color:orange}
@@ -155,8 +169,14 @@
     .card-img-overlay 
     {
         transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
-        background: #444444;
+        background: #101010;
         background: linear-gradient(0deg, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 70%);
     }
   }
+
+  .list{
+    .card{
+      background-color: #101010;
+    }
+  }
 }

layouts/partials/showcase-card-seeAll.html

@@ -0,0 +1,14 @@
+{{ $TotalProjects := len (where site.RegularPages "Section" "madewithgamma") }}
+
+<div class="swiper-slide py-4 px-3">
+    <div class="card text-white card-has-bg click-col h-100 justify-content-center">
+        <div class="card-body mx-2 mb-sm-3 align-self-center flex-grow-0 d-flex">
+            <div class="col">
+                <div class="d-flex justify-content-center mb-3">There are {{ $TotalProjects }} recent projects to discover.</div>
+                <div class="d-flex justify-content-center">
+                    <a class="btn btn-primary align-self-center" href="{{ "/showcase/#projects" | relURL }}">See All</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

layouts/partials/showcase-page-madeWithGammaCard.html

@@ -0,0 +1,16 @@
+{{ $rightItem := .right}}
+
+{{ with .context}}
+<div class="col-10 my-2 col-lg-5 py-4 px-3">
+    <div class="card text-white card-has-bg click-col">
+        <img class="card-img-top lazyload" data-src="{{.Params.img | relURL}}" alt="{{ .Params.Title }}">
+        <div class="card-body p-4">
+            <small class="card-meta mb-2">{{.Params.Author}}</small>
+            <a href="{{ .Params.link }}" target="_blank" class="stretched-link"><h4 class="card-title mt-0 ">{{.Params.Title}}</h4></a>
+            <div class="d-xs-none d-sm-block">
+                {{.Content}}
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}

layouts/partials/showcase-page-projects.html

@@ -0,0 +1,15 @@
+<div class="row justify-content-center mb-3 mb-md-1" id="projects">
+    <div class="col-11 col-xl-9">
+        <div class="row">
+            <div class="col d-flex">
+                <div class="label py-1 px-2 text-center">Recent</div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="list row mb-5 justify-content-around px-5">
+    {{ $pages := ((where site.RegularPages "Section" "madewithgamma").ByParam "id").Reverse }}
+    {{ range $index, $elem:= $pages }}
+        {{ partial "showcase-page-madeWithGammaCard" (dict "context" $elem "index" $index) }}
+    {{ end }}
+</div>

layouts/partials/showcase-page-showreels.html

@@ -0,0 +1,33 @@
+<div class="row justify-content-around mb-3">
+    <div class="col-11 col-xl-9">
+        <div class="row">
+            <div class="col d-flex">
+                <div class="label py-1 px-2 text-center">Showreels</div>
+            </div>
+        </div>
+    </div>
+    <div class="col-11 col-xl-9 mt-2">
+        <ul class="nav nav-pills" id="showreel-pills" role="tablist">
+            {{ with .Showreel2}}
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link active mr-2" href="#showreel-2" data-toggle="pill" data-target="#showreel-2" role="tab" aria-controls="showreel-2" aria-selected="true" alt="{{ .alt }}">{{ .title }}</button >
+                </li>
+            {{ end }}
+            {{ with .Showreel1}}
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" href="#showreel-1" data-toggle="pill" data-target="#showreel-1" role="tab" aria-controls="showreel-1" aria-selected="false" alt="{{ .alt }}">{{ .title }}</button >
+                </li>
+            {{ end }}
+        </ul>
+    </div>
+</div>
+<div class="row mt-2 px-3 mb-5 justify-content-around" id="showreel-content">
+    <div class="tab-content col-11 col-xl-9 mx-2 text-center px-0">
+        <div class="mediaShadow tab-pane fade show active" id="showreel-2" role="tabpanel" aria-labelledby="pills-showreel2-tab">
+            {{ partial "vimeo" .Showreel2.vimeo }}
+        </div>
+        <div class="mediaShadow tab-pane fade" id="showreel-1" role="tabpanel" aria-labelledby="pills-showreel1-tab">
+            {{ partial "vimeo" .Showreel1.vimeo }}
+        </div>
+    </div> 
+</div>

layouts/partials/showcase-page.html

@@ -0,0 +1,16 @@
+{{ "<!-- MADE WITH GAMMA -->" | safeHTML }}
+<section id="Showcase">
+    <div class="container-fluid">
+        {{ with .Site.Params.Showcase }}
+            <div class="row justify-content-center">
+                <div class="col-lg-8 col-lg-offset-2 text-center">
+                    <h2 class="section-heading">{{ .headline }}</h2>
+                    <hr class="primary">
+                </div>
+            </div>
+            {{ partial "showcase-page-showreels" . }}
+
+            {{ partial "showcase-page-projects" . }}   
+        {{ end }}
+    </div>
+</section>  

layouts/partials/showcase-projects.html

@@ -9,15 +9,19 @@
 </div>
 <div class="row justify-content-center mb-5">
     <div class="col-11 col-xl-9">
-        {{ $pages := ((where site.RegularPages "Section" "madewithgamma").ByParam "id").Reverse }}
+        {{ $pages := ((first 5 (where site.RegularPages "Section" "madewithgamma")).ByParam "id").Reverse }}
 
         <div class="swiper">
             <!-- Additional required wrapper -->
             <div class="swiper-wrapper">
+
                 <!-- Slides -->
                 {{ range $index, $elem:= $pages }}
-                    {{ partial "madeWithGammaCard" (dict "context" $elem "index" $index) }}
+                    {{ partial "showcase-madeWithGammaCard" (dict "context" $elem "index" $index) }}
                 {{ end }}
+
+                {{ partial "showcase-card-seeAll" }}
+
             </div>
         </div>           
 
@@ -27,6 +31,8 @@
         <!-- If we need navigation buttons -->
         <div class="swiper-button-prev"></div>
         <div class="swiper-button-next"></div>
-
     </div>
-</div>
+</div>
+<div class="row justify-content-center">
+    <a class="btn btn-primary" href="{{ "/showcase/#projects" | relURL }}">See All Projects</a>
+</div>

layouts/showcase/list.html

@@ -7,7 +7,7 @@
     <div class="main">
         {{ partial "nav-showcase" . }}
 
-        {{ partial "showcase" .}}
+        {{ partial "showcase-page" .}}
 
         {{ partial "videoBlocker" . }}
 
@@ -16,6 +16,8 @@
         {{ partial "footer" . }}
 
         {{ partial "js" . }}
+
+        <script src="{{"/js/lazysizes.min.js" | relURL}}"></script>
     </div>
 </body>
 </html>