Merge pull request #12 from ByteBakersCo/feat/tweak-css

feat: add mobile css + tweaks
ByteBakersCo · Mar 26, 2024 · 7d0b22b · 7d0b22b
2 parents 7e926eb + 0ec21d6
commit 7d0b22b
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 14 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 go.work
 NvimTree_1
 debug.sh
+
+babilema/**
diff --git a/blog-intro.html b/blog-intro.html
@@ -86,9 +86,9 @@
 <body>
 
     <header><div>
-    <a id="header-title" href="/">Babilema</a>
+    <a id="header-title" href="/babilema">Babilema</a>
     <a id="gh-cta" href="https://github.com/ByteBakersCo/babilema">
-        <img src="/templates/assets/gh-logo.png" alt="GitHub Logo" />
+        <img src="/babilema/templates/assets/gh-logo.png" alt="GitHub Logo" />
         <span>View on GitHub</span>
     </a>
 </div>

diff --git a/index.html b/index.html
@@ -35,9 +35,9 @@
 <body>
 
     <header><div>
-    <a id="header-title" href="/">Babilema</a>
+    <a id="header-title" href="/babilema">Babilema</a>
     <a id="gh-cta" href="https://github.com/ByteBakersCo/babilema">
-        <img src="/templates/assets/gh-logo.png" alt="GitHub Logo" />
+        <img src="/babilema/templates/assets/gh-logo.png" alt="GitHub Logo" />
         <span>View on GitHub</span>
     </a>
 </div>
@@ -47,7 +47,7 @@
 
         <article>
             <div class="post-image">
-                <a href="/babilema/blog-intro.html"><img width="200" src="https://github.com/ByteBakersCo/babilema/assets/2111910/351e35da-221a-4119-98d7-b08d2a5d3484" alt="This blog post is actually a GitHub issue" /></a>
+                <a href="/babilema/blog-intro.html"><img src="https://github.com/ByteBakersCo/babilema/assets/2111910/351e35da-221a-4119-98d7-b08d2a5d3484" alt="This blog post is actually a GitHub issue" /></a>
             </div>
             <div class="post-data">
                 <h2><a href="/babilema/blog-intro.html">This blog post is actually a GitHub issue</a></h2>

diff --git a/templates/css/style.css b/templates/css/style.css
@@ -1,12 +1,21 @@
 :root {
+    /* COLORS */
     --primary-bg-color: #252526;
     --secondary-bg-color: #1e1e1e;
     --tertiary-bg-color: #0e0e0e;
     --quaternary-bg-color: #303135;
-    --primary-text-colorn: #f8f8f2;
+    --primary-text-color: #f8f8f2;
     --link-color: #0061a3;
     --link-hover-color: #61dafb;
     --link-visited-color: #007acc;
+    --border-color: #f8f8f2;
+
+    /* SIZES */
+    --idx-article-images-width: 400px;
+    --border-width: 1px;
+
+    /* STYLES */
+    --border-style: solid;
 }
 
 a {
@@ -30,7 +39,7 @@ body {
     margin: 0;
     padding: 0;
     background-color: var(--primary-bg-color);
-    color: var(--primary-text-colorn);
+    color: var(--primary-text-color);
     font-size: 1.2rem;
 }
 
@@ -74,7 +83,7 @@ header a {
 
 #header-title {
     font-size: 2.5rem;
-    color: var(--primary-text-colorn);
+    color: var(--primary-text-color);
     text-decoration: none;
 }
 
@@ -84,7 +93,7 @@ header a {
     align-items: center;
     margin: 20px 0;
     gap: 1rem;
-    color: var(--primary-text-colorn);
+    color: var(--primary-text-color);
     text-decoration: none;
     background-color: var(--tertiary-bg-color);
     padding: 10px;
@@ -132,17 +141,49 @@ article {
     flex-direction: row;
     gap: 1rem;
     width: 50%;
-    height: 200px;
+    height: var(--idx-article-images-width);
+    width: calc(var(--idx-article-images-width)*2);
     padding-right: 1rem;
-    border-radius: 0 1rem 1rem 0;
     background-color: var(--quaternary-bg-color);
 }
 
-.post-image {
-    width: 200px;
+article a {
+    color: var(--primary-text-color) !important;
+    text-decoration: none;
+}
 
+.post-image img {
+    width: var(--idx-article-images-width);
 }
 
 p.author-info {
     font-size: 1rem;
 }
+
+
+@media only screen and (max-width: 820px) {
+    article {
+        align-items: center;
+        flex-direction: row-reverse;
+        width: 90%;
+        padding: 0;
+        padding: 0 1rem;
+        height: auto;
+        border-bottom-style: var(--border-style);
+        border-bottom-width: var(--border-width);
+        border-bottom-color: var(--border-color);
+    }
+
+    .post-image img {
+        width: calc(var(--idx-article-images-width)/3);
+        border-radius: 50%;
+    }
+
+    .post-data p:not(.author-info) {
+        display: none;
+    }
+
+    #gh-cta span {
+        display: none;
+    }
+}
diff --git a/templates/index.html b/templates/index.html
@@ -40,7 +40,7 @@
         {{range .Articles}}
         <article>
             <div class="post-image">
-                <a href="{{.URL}}"><img width="200" src="{{.Image}}" alt="{{.Title}}" /></a>
+                <a href="{{.URL}}"><img src="{{.Image}}" alt="{{.Title}}" /></a>
             </div>
             <div class="post-data">
                 <h2><a href="{{.URL}}">{{.Title}}</a></h2>