feat: css projects

layouts/partials/sections/projects.html

@@ -23,11 +23,19 @@
                     {{ if or (.links) (.featured) }}
                     <div class="card-footer py-3">
                         {{ range .links }}
-                        <span class="m-1 mx-2">
-                            <a href="{{ .url }}" target="_blank">
-                                <i class="{{ .icon }}"></i>
-                            </a>
-                        </span>
+                            {{ if .icon }}
+                                <span class="m-1 mx-2">
+                                    <a href="{{ .url }}" target="_blank" class="btn social-icon" target="_blank">
+                                    <i class="{{ .icon }}"></i>
+                                </a>
+                                </span>
+                            {{ else if  .iconURL }}
+                                <span class="px-1">
+                                    <a href="{{ .url }}" target="_blank" class="btn social-icon">
+                                        <img  src="{{ .iconURL }}">
+                                    </a>
+                                </span>
+                            {{ end }} 
                         {{ end }}
                         {{ if .featured }}
                         <span class="float-end">
@@ -62,8 +70,12 @@
                     <div class="card-footer py-3">
                         {{ range .Params.links }}
                         <span class="m-1 mx-2">
-                            <a href="{{ .url }}">
-                                <i class="{{ .icon }}"></i>
+                            <a target="_blank" target="_blank" class="btn social-icon" href="{{ .url }}">
+                                {{ if .icon }}
+                                    <i class="{{ .icon }}"></i>
+                                {{ else if  .iconURL }}
+                                    <img src="{{ .iconURL }}">
+                                {{ end }} 
                             </a>
                         </span>
                         {{ end }}

static/css/index.css

@@ -194,6 +194,52 @@ header .navbar.animate {
     width: 100%;
 }
 
+/* Projects */
+
+
+#projects a.btn.social-icon {
+    color: var(--primary-color) !important;
+    line-height: 0%;
+    border-radius: 50%;
+    margin-top: 50px;
+    padding: 0.7rem;
+    border: 1px solid var(--primary-color);
+    transition: none;
+}
+
+#projects a.btn.social-icon img {
+    width: 1em;
+}
+
+#projects a.btn.social-icon:hover {
+    opacity: 0.8;
+}
+
+#projects a.btn {
+    margin-top: 50px;
+    padding: 0.7rem 1.75rem;
+    border: 1px solid var(--primary-color);
+    color: var(--text-color) !important;
+    border-radius: .75rem;
+    transition: none;
+}
+
+#projects a.btn:focus {
+    box-shadow: none;
+}
+
+#projects a.btn:hover {
+    background-color: var(--secondary-color) !important;
+    color: var(--text-color) !important;
+    opacity: 0.9;
+}
+
+#projects a.btn.social-icon:hover {
+    background-color: var(--background-color) !important;
+    opacity: 0.7;
+}
+
+
 
 
 /* about me */