Aesthetic adjustments throughout

layouts/_default/single.html

@@ -21,120 +21,27 @@
         {{ if .Date }}
         <p><small>Last updated: {{ .Date.Format "January 2, 2006" }}</small></p>
         {{ end }}
-        {{ if .Params.tags }}
-        <div class="tags">
-            {{ range .Params.tags }}
-            <a href="/{{ $.Section }}/?tag={{ . | urlize }}" class="tag">{{ . }}</a>
+        <div class="tags-and-button">
+            {{ if .Params.tags }}
+            <div class="tags">
+                {{ range .Params.tags }}
+                <a href="/{{ $.Section }}/?tag={{ . | urlize }}" class="tag">{{ . }}</a>
+                {{ end }}
+            </div>
+            {{ end }}
+            {{ if .Params.external_url }}
+            <div class="article-external-button"><a href="{{ .Params.external_url }}" target="_blank" class="btn">Project Website</a></div>
+            {{ else if .Params.url_external }}
+            <div class="article-external-button"><a href="{{ .Params.url_external }}" target="_blank" class="btn">Project Website</a></div>
             {{ end }}
         </div>
-        {{ end }}
     </header>
     
     <div class="article-content">
         {{ .Content }}
     </div>
-    
-    {{ if .Params.external_url }}
-    <p><a href="{{ .Params.external_url }}" target="_blank" class="btn">Visit External Site</a></p>
-    {{ end }}
-    {{ if .Params.url_external }}
-    <p><a href="{{ .Params.url_external }}" target="_blank" class="btn">Visit External Site</a></p>
-    {{ end }}
 </article>
 
+{{ partial "explore-e2c.html" . }}
 
-<style>
-.lead {
-    font-size: 1.125rem;
-    color: #666;
-    margin-bottom: 1rem;
-}
-
-.article-header {
-    margin-bottom: 2rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid #e9ecef;
-}
-
-.article-content {
-    margin-bottom: 2rem;
-}
-
-.article-content h2,
-.article-content h3,
-.article-content h4 {
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-}
-
-.article-nav {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 2rem;
-    padding-top: 1rem;
-    border-top: 1px solid #e9ecef;
-}
-
-.article-nav a {
-    text-decoration: none;
-    color: #007bff;
-    padding: 0.5rem 0;
-}
-
-.article-nav a:hover {
-    color: #0056b3;
-}
-
-
-.tags {
-    margin: 0.5rem 0;
-}
-
-.tag {
-    display: inline-block;
-    background: #e9ecef;
-    color: #495057;
-    padding: 0.25rem 0.5rem;
-    margin: 0.25rem 0.25rem 0 0;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    text-decoration: none;
-    transition: all 0.2s ease;
-}
-
-.tag:hover {
-    background: var(--e2c-yellow);
-    color: var(--text-primary);
-    transform: translateY(-1px);
-}
-
-.article-banner {
-    position: relative;
-    margin-bottom: 2rem;
-    border-radius: 16px;
-    overflow: hidden;
-    aspect-ratio: 16/9;
-    max-height: 300px;
-}
-
-.case-detail-banner {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-
-.case-detail-logo-overlay {
-    position: absolute;
-    bottom: 20px;
-    right: 20px;
-    width: 96px;
-    height: 96px;
-    object-fit: contain;
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 16px;
-    padding: 12px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-}
-</style>
 {{ end }}