+ Finalizing css for projects section

Media queries to come

themes/resume/layouts/index.html

@@ -14,7 +14,7 @@
             {{ range .Pages }}
             <li class="nav-item">
                 <a class="nav-link" href="#{{trim .RelPermalink "/"}}">
-                    {{.Title}} or
+                    {{.Title}}
                 </a>
             </li>
             {{ end }}
@@ -30,6 +30,21 @@
 		<p class="reveal-text" style="font-size: 2rem;">{{.Site.Params.Description}}</p>
 	</div>
 </div>
+
+<div class="container">
+    {{ with .Site.GetPage "/projects" }}
+        <h1 class="section-header">{{.Title}}</h1>
+        <div class="section">
+            {{ range .Pages }}
+                <div class="card">
+                    <a href="{{.Params.Link}}"><h1 class="card-title title-link">{{.Title}}</h1></a>
+                    <h6 class="card-subtitle mb-2 text-muted">{{.Params.Slogan}}</h6>
+                    <a href="{{.Params.Link}}"><img src="{{.Params.Img}}" class="card-img"></a>
+                    <div class="card-body"> {{.Content}} </div>
+                </div>
+            {{ end }}
+        </div>
+    {{ end }}
 </div>
 </body>
 </html>

themes/resume/layouts/shortcodes/embed.html

@@ -1,6 +0,0 @@
-<a href="{{ .Get "link" }}">
-    <div class="embed" style="border-left-color:{{ .Get "color"}}">
-        <h2>{{.Get "title"}}</h2>
-        <img src={{.Get "img"}} class="embed-img">
-    </div>
-</a>

themes/resume/static/css/style.css

@@ -114,17 +114,32 @@ html {
   100% {color: #dcdcdc; clip-path: inset(0 0 0 0);}
 }
 
-.banner-button {
+.section-header {
-    position: absolute;
+  color: #EAA221;
-    bottom: 16px;
-    left: 50%;
-    color: whitesmoke;
-    font-size:4rem;
 }
-.fa-arrow-circle-down {
+.section {
-    color: #dcdcdc;
+  display: flex;
-}
+  flex-wrap: wrap;
-.fa-arrow-circle-down:hover {
-    color: white;
 }
 
+.title-link { color: #EAA221; }
+.title-link { text-decoration-color: #EAA221; }
+
+.card {
+  padding: 1em;
+  margin: 1em;
+}
+a { color:#dcdcdc; }
+a:hover { color: #EAA221; }
+
+.card-img { max-width: 250px; }
+.card { 
+  background-color: transparent; 
+  max-width: 45%;
+  border:none;
+}
+
+@media screen and (max-width: 600px) {
+  .headline {
+  }
+}