style: css and dom fixes for better mobile and layout [sc-00] (#1119)

Co-authored-by: dgiordano33 <[email protected]>

site/layouts/guides/list.html

@@ -1,62 +1,69 @@
 {{ define "main" }}
   <div class="main py-5">
     <div class="container-fluid docs w-100">
-      <h1 class="display-3">{{ if .Params.displayTitle}}
-        {{.Params.displayTitle}}
-      {{else}}
-        {{.Title}}
-      {{end}}</h1>
-      <p class="lead-text">{{ .Params.description }}</p>
+      <h1 class="display-3">
+        {{ if .Params.displayTitle}}
+          {{.Params.displayTitle}}
+        {{else}}
+          {{.Title}}
+        {{end}}
+      </h1>
+      <p class="lead-text">
+        {{ .Params.description }}
+      </p>
 
       <!-- Guides List -->
       <div class="guides__list">
         {{ range where .Site.RegularPages.ByLastmod.Reverse "Section" "guides" }}
-          <div class="guide-card" data-tags="{{ delimit .Params.tags ", " }}">
-            <div>
-              <div class="guide-info">
-                <div class="guide-tag">
-                  {{ with .Params.tags }}
-                    {{ if (in (printf "%T" .) "[]string") }}
-                      {{ range $index, $tag := . }}
-                        {{ $tag }}
-                      {{ end }}
-                    {{ else }}
-                      <!-- Optional: Handle the case where tags is not an array -->
-                      <span>No tags available or invalid format</span>
+          <a href="{{ .RelPermalink }}" class="guide-card" data-tags="{{ delimit .Params.tags ", " }}" >
+            <div class="guide-info">
+              <div class="guide-tag">
+                {{ with .Params.tags }}
+                  {{ if (in (printf "%T" .) "[]string") }}
+                    {{ range $index, $tag := . }}
+                      {{ $tag }}
                     {{ end }}
                   {{ else }}
-                    <span>No tags available.</span>
+                    <!-- Optional: Handle the case where tags is not an array -->
+                    <span>
+                      No tags available or invalid format
+                    </span>
                   {{ end }}
-                </div>
-
-                <h2>
-                  <a href="{{ .RelPermalink }}">
-                    {{ if .Params.displayTitle }}
-                      {{ .Params.displayTitle }}
-                    {{ else }}
-                      {{ .Title }}
-                    {{ end }}
-                  </a>
-                </h2>
+                {{ else }}
+                  <span>
+                    No tags available.
+                  </span>
+                {{ end }}
+              </div>
 
-                <p>
-                  {{ if .Params.displayDescription }}
-                    {{ .Params.displayDescription }}
+              <h2>
+                  {{ if .Params.displayTitle }}
+                    {{ .Params.displayTitle }}
                   {{ else }}
-                    {{ .Description }}
+                    {{ .Title }}
                   {{ end }}
-                </p>
-              </div>
+              </h2>
 
-              <div class="write-info">
-                <img src="{{ .Params.avatar | relURL }}" alt="{{ .Params.author }}" width="24" height="24" />
-                <span>{{ .Params.author }}</span>
-                <a href="{{ .RelPermalink }}" class="cta-link">Read the guide</a>
-              </div>
+              <p>
+                {{ if .Params.displayDescription }}
+                  {{ .Params.displayDescription }}
+                {{ else }}
+                  {{ .Description }}
+                {{ end }}
+              </p>
+            </div>
+            <div class="write-info">
+              <img src="{{ .Params.avatar | relURL }}" alt="{{ .Params.author }}" width="24" height="24" />
+              <span>
+                {{ .Params.author }}
+              </span>
+              <span class="cta-link">
+                Read the guide
+              </span>
             </div>
-          </div>
+          </a>
         {{ end }}
       </div>
     </div>
   </div>
-{{ end }}
+{{ end }}

src/scss/_guides.scss

@@ -5,7 +5,7 @@
     flex-direction: row ;
 	flex-wrap: wrap;
     gap: 2rem;
-	
+
 	.display-3 {
 	  text-align: center;
 	  margin-bottom: 10px;
@@ -19,15 +19,27 @@
 	.guide-card {
 	  border: 1px solid $gray-light;
 	  border-radius: 6px;
-	  margin-bottom: 30px;
 	  max-width: 360px;
 	  display: flex;
 	  flex-direction: column;
-	  float: left;
-	  margin-right: 16px;
 	  min-height: 300px;
+      transition: border-color .15s ease-out, box-shadow .15s ease-out,transform .15s ease-out,opacity .15s ease-out;
+
+      a {
+        &:hover {
+          text-decoration: none;
+        }
+      }
+
+      &:hover {
+        box-shadow: 0px 1px 2px rgba(2,8,20,.06),0px 2px 8px rgba(2,8,20,.08);
+		border-color: $blue;
+        text-decoration: none;
+      }
 	  .guide-info {
 	  	padding: 20px 20px 24px 20px;
+		  display: flex;
+		  flex-direction: column;
 
 	  	h2 {
 	  	  font-size: 20px;
@@ -55,7 +67,10 @@
 	  	}
 	  }
 	  .write-info {
-	    padding: 20px;
+	    padding-right: 20px;
+	    padding-left: 20px;
+		margin-top: auto;
+		margin-bottom: 25px;
 	    font-size: 14px;
 	    line-height: 20px;
 	    color: $gray-darkish;
@@ -71,6 +86,7 @@
 			img {
 				border-radius: 50%;
 				overflow: hidden;
+				margin-right: 5px;
 			}
 	  }
 	}
@@ -92,12 +108,10 @@
 		  	}
 		  }
 		  .write-info {
-	  	  text-align: center;
-	  	  padding-bottom: 40px;
-
-	  	  .cta-link {
-	  	    width: 100%;
-	  	  }
+		  	.cta-link {
+				margin-top: 5px;
+				width: 100%;
+		  }
 	  	}
 		}
 	}
@@ -279,7 +293,6 @@
 		&-header {
       color: $gray-dark;
       font-weight: 600;
-      text-transform: uppercase;
     }
 		&-mobile {
       display: none;
@@ -396,4 +409,4 @@
 
 .guides__back {
 	margin-bottom:2rem;
-}
+}

src/scss/_learn.scss

@@ -263,7 +263,6 @@
     &-header {
       color: $gray-dark;
       font-weight: 600;
-      text-transform: uppercase;
     }
 
     &-mobile {
@@ -649,4 +648,4 @@
 
 .learn-cta-wrapper .btn {
   font-size: .8rem;
-}
+}