Adding cards

layouts/post/card-large.html

@@ -0,0 +1,38 @@
+<div class="d-flex justify-content-center align-items-center py-md-4 card-large">
+    {{ $page:= . }}
+    {{- with .Resources.Match "images/banner.svg" -}}
+    {{ range . }}
+    {{- $image := . -}}
+    <div class="col-md-6 card-large-image" style="background-image: url('{{ $image.RelPermalink }}');">
+        <!-- <a href="{{ $page.RelPermalink }}" class="d-block">
+            <img data-src="{{ $image.RelPermalink }}" class="" alt="{{ $page.Title }}" data-aos="zoom-in" style="">
+        </a> -->
+        <div style="background-image: url('{{ $image.RelPermalink }}')"></div>
+        {{- end -}}
+        {{- end -}}
+    </div>
+    <div class="col-md-6">
+        <div class="d-flex justify-content-between align-items-start">
+            <h5 class="created text-muted text-uppercase font-weight-bold">{{ $page.Date.Format "January 2, 2006" }}</h5>
+            <p class="text-muted">{{ $page.ReadingTime }} min read</p>
+        </div>
+        <h2><a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a></h2>
+
+        <div class="content">
+            {{ $page.Summary }}
+        </div>
+        <div>
+            {{- with $page.Params.tags -}}
+            <div class="d-flex justify-content-start">
+                <div class="tags">
+                    {{- range . -}}
+                    <a class="badge badge-dark mr-2" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">
+                        <i class="fas fa-tag mr-2"></i>{{ . }}
+                    </a>
+                    {{- end -}}
+                </div>
+            </div>
+            {{- end -}}
+        </div>
+    </div>
+</div>

layouts/post/card.html

@@ -1,18 +1,12 @@
-<div class="card h-100" data-aos="zoom-in">
+<div class="d-flex">
     {{ $page := . }}
-    <a href="{{ $page.RelPermalink }}" class="d-block">
     {{- with .Resources.Match "images/banner.svg" -}}
     {{ range . }}
     {{- $image := . -}}
-                    <img data-src="{{ $image.RelPermalink }}" class="card-img-top mx-auto d-block pt-2" alt="{{ $page.Title }}">
+    <div class="card-large-image" style="background-image: url('{{ $image.RelPermalink }}');">
+        <div style="background-image: url('{{ $image.RelPermalink }}')">
+        </div>
+    </div>
     {{- end -}}
     {{- end -}}
-        <div class="card-body">
-            <h4 class="card-title">{{ $page.Title }}</h4>
-            <p class="card-text text-muted text-uppercase">{{ $page.Date.Format "January 2, 2006" }}</p>
-            <div class="card-text">
-                {{ $page.Summary | plainify }}
-            </div>
-        </div>
-    </a>
 </div>

src/scss/cards.scss

@@ -0,0 +1,51 @@
+.card-large, .card-regular {
+    background-color: white;
+    z-index: 1;
+    border: 1px solid rgb(204, 18, 18);
+    border-top-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-right-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    border-right-style: solid;
+    border-right-width: 1px;
+    border-bottom-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-left-color: rgba(62.7%, 18.4%, 18.4%, 0.2);
+    border-left-style: solid;
+    border-left-width: 1px;
+    border-image-source: initial;
+    border-image-slice: initial;
+    border-image-width: initial;
+    border-image-outset: initial;
+    border-image-repeat: initial;
+    border-radius: .45rem;
+    border-top-left-radius: 0.45rem;
+    border-top-right-radius: 0.45rem;
+    border-bottom-right-radius: 0.45rem;
+    border-bottom-left-radius: 0.45rem;
+    -webkit-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
+    -moz-box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
+    box-shadow: 4px 4px 36px -10px rgba(255,0,94,0.79);
+    transition-property: all;
+    transition-duration: 1s;
+    overflow: hidden;
+
+    &:hover {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    -moz-transform: translate(-2px, -2px);
+    -ms-transform: translate(-2px, -2px);
+    -o-transform: translate(-2px, -2px);
+    -webkit-transform: translate(-2px, -2px);
+    transform: translate(-2px, -2px);
+    }
+
+    & .card-large-image {
+        height: 250%;
+        background-position: center;
+        background-size: cover;
+        overflow: hidden;
+    }
+}

src/scss/styles.scss

@@ -8,4 +8,5 @@
 @import "toc";
 @import "scroll-bar";
 @import "admonition-icons";
+@import "cards";
 @import "fonts";