Merge pull request #107 from zetxek/update/dark-theme

Dark theme improvements, "bootstrapization" and layout improvements
zetxek · Dec 22, 2024 · 42b45e7 · 42b45e7
2 parents 8c65417 + 1fe4b77
commit 42b45e7
Show file tree

Hide file tree

Showing 10 changed files with 198 additions and 82 deletions.
diff --git a/.github/workflows/test-example-site.yml b/.github/workflows/test-example-site.yml
@@ -1,5 +1,5 @@
 # Workflow to verify that the exampleSite runs ok
-name: Verify example site
+name: Dry-run example site
 
 on:
     # Runs on pull requests targeting the default branch

diff --git a/.github/workflows/update-demo-pr.yml b/.github/workflows/update-demo-pr.yml
@@ -114,20 +114,34 @@ jobs:
           echo "Logging in to GitHub CLI."
           gh auth login --with-token < token.txt
 
-          echo "Creating pull-request..."
-          PR_TITLE='preview: update theme to `'$SOURCE_BRANCH_NAME'`'
-          echo 'PR title: '$PR_TITLE
-          PR_BODY="⚠️ The source PR is not merged yet - this is a preview PR.
-          🤖 This automated PR updates the theme submodule to a PR in the source repo: $PR_URL.
-          🔗 Triggered by https://github.com/zetxek/adritian-free-hugo-theme/actions/workflows/update-demo-pr.yml"
-          echo "PR body: "$PR_BODY
-
-          gh pr create \
-            --title "$PR_TITLE" \
-            --body "$PR_BODY" \
-            --head $BRANCH_NAME \
-            --base $BASE_BRANCH \
-            --assignee $ASSIGNEE \
-            --label preview
-
-          echo "✅ Pull-request created - done! "
+          # Check if the PR already exists
+          PR_EXISTS=$(gh pr list --state open --base $BASE_BRANCH --head $BRANCH_NAME --json number | jq '.[0].number')
+          # If the PR exists, update it
+          if [ -n "$PR_EXISTS" ]; then
+            echo "PR Exists. Updating pull-request..."
+            gh pr view
+            
+            echo "✅ Pull-request created - done! "
+            
+          # Else, we create it
+          else
+            echo "Creating pull-request..."
+            PR_TITLE='preview: update theme to `'$SOURCE_BRANCH_NAME'`'
+            echo 'PR title: '$PR_TITLE
+            PR_BODY="⚠️ The source PR is not merged yet - this is a preview PR.
+            🤖 This automated PR updates the theme submodule to a PR in the source repo: $PR_URL.
+            🔗 Triggered by https://github.com/zetxek/adritian-free-hugo-theme/actions/workflows/update-demo-pr.yml"
+            echo "PR body: "$PR_BODY
+
+            gh pr create \
+              --title "$PR_TITLE" \
+              --body "$PR_BODY" \
+              --head $BRANCH_NAME \
+              --base $BASE_BRANCH \
+              --assignee $ASSIGNEE \
+              --label preview
+
+            echo "✅ Pull-request created - done! "
+          fi
+
+          
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1403,7 +1403,7 @@ body.home div.experience{
 .experience:active a > .experience__company,
 .experience a:hover > .experience__company,
 .experience a:active > .experience__company{
-    color: white;
+    color: white !important;
 }
 
 .all-experience-container{
@@ -1430,6 +1430,9 @@ body.home div.experience{
 article.post.summary h2{
     font-size: 24px
 }
+.post-summary{
+    margin-top: 20px;
+}
 .post-content{
     margin-bottom: 20px;
 }
@@ -1452,12 +1455,16 @@ article.post.summary h2{
 #blog-single #meta section{
     font-weight: lighter;
 }
-#blog-single #meta h4{
+#blog-single #meta h4,
+article.summary .post-meta h4
+{
     font-size: 16px;
     font-weight: light;
     display: inline;
 }
-#blog-single #meta h5{
+#blog-single #meta h5,
+article.summary .post-meta h5
+{
     font-size: 14px;
     font-weight: light;
     display: inline;

diff --git a/assets/css/adritian.css → assets/scss/adritian.scss b/assets/css/adritian.css → assets/scss/adritian.scss
@@ -1,3 +1,7 @@
+@import "./bootstrap/bootstrap.scss";
+@import "./menu.scss";
+
+
 .container {
     padding-left: 24px;
     padding-right: 24px
@@ -136,131 +140,156 @@ br {
 
 
 /* dark mode */
-@media (prefers-color-scheme: dark) {
+/** Media-query based color switching **/
+$color-mode-type: media-query;
+@include color-mode(dark) {
+
     html body, body {
-        color: #fff;
-        background-color: #181818;
+        color: #fff !important;
+        background-color: #181818 !important;
     }
     .header .navbar-brand span:nth-child(2){
-        color: #fff;
+        color: #fff !important;
     }
     .header .navbar .nav-item .nav-link::after{
-        background-color: #fff;
+        background-color: #fff !important;
     }
     .navbar-light .navbar-toggler-icon{
-        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
     }
     .header.collapse.show::before, .header.collapsing::before{
-        background-color: #181818;
+        background-color: #181818 !important;
     }
     @media (min-width: 992px) {
         .header .navbar .nav-item:hover .nav-link::after {
-            background-color: #fff;
+            background-color: #fff !important;
         }
     }
 
     @media only screen and (max-width : 990px) {
         .header .navbar .nav-item:first-child{
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
+            border-top: 1px solid rgba(255, 255, 255, 0.1)  !important;
         }
         .header .navbar .nav-item{
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
         }    
     }
     .header--sticky-triggered{
-        background: #181818;
+        background: #181818  !important;
     }
     .header .navbar-light .navbar-nav .nav-link{
-        color: #fff;
+        color: #fff !important;
     }
     .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
-        color: #fff;
+        color: #fff !important;
     }
     .section li{
-        color: #a6a6a6
+        color: $light-text-emphasis-dark !important;
     }
     .section li::before{
-        background-color: #a6a6a6
+        background-color: $light-text-emphasis-dark !important;
     }
     .display-1{
-        color: #fff;
+        color: #fff !important;
     }
     .lead{
-        color: #fff;
+        color: #fff !important;
     }
     p a, span a{
-        color: #fff;
+        color: #fff !important;
     }
     p{
-        color: #a6a6a6;
+        color: $light-text-emphasis-dark !important;
     }
     .rad-showcase .platform-links [class^="icon-"]{
-        color: #fff;
+        color: #fff !important;
     }
     .experience a{
-        color: #fff;
+        color: #fff !important;
     }
     .experience__company{
-        color: #6EAFAA;
+        color: #6EAFAA !important;
     }
-
     .education__degree, .experience__date{
-        color: #a6a6a6;
+        color: #a6a6a6 !important;
     }
     .education__title{
-        color: #fff;
+        color: #fff !important;
     }
     .education__date{
-        color: #d5d5d5;
+        color: #d5d5d5 !important;
     }
     .education::before{
-        background-color: #202020;
+        background-color: #202020 !important;
     }
     .testimonial__author-info span{
-        color: #F18983;
+        color: #F18983 !important;
     }
     .section--contact .container{
-        background-color: #181818;
+        background-color: #181818 !important;
     }
     .contact__info span{
-        color: #fff;
+        color: #fff !important;
     }
     .contact__info h3{
-        color: #bebdbd;
+        color: #bebdbd !important;
     }
     .section--contact {
-       background-image: url(../img/contact-bg-dark.png);
+       background-image: url(../img/contact-bg-dark.png) !important;
     }
     .btn-primary{
-        background-color: #fff;
-        color: #000;
+        background-color: #fff !important;
+        color: #000 !important;
     }
     .btn-primary:hover{
-        border-color: #fff;
-        color: #fff;
+        border-color: #fff !important;
+        color: #fff !important;
+        background: transparent !important;
     }
     .btn-frameless{
-        color: #fff;
-        border-color: #fff;
+        color: #fff !important;
+        border-color: #fff !important;
     }
     .btn-frameless.disabled, .btn-frameless.focus, .btn-frameless:disabled, .btn-frameless:focus, .btn-frameless:hover, .btn-frameless:not(:disabled):not(.disabled).active, .btn-frameless:not(:disabled):not(.disabled):active, .show > .btn-frameless.dropdown-toggle {
-        background-color: white;
-        border-color: #fff;
-        color: #181818;
+        background-color: white !important;
+        border-color: #fff !important;
+        color: #181818 !important;
     }
     input[type="text"], input[type="email"], textarea{
-        color: #fff;
-        border-bottom: 1px solid #fff;
-        background-color: #181818;
+        color: #fff !important;
+        border-bottom: 1px solid #fff !important;
+        background-color: #181818 !important;
     }
     input[type="text"]::placeholder, input[type="email"]::placeholder, textarea::placeholder{
-        color: #6e6e6e;
+        color: #6e6e6e !important;
     }
     input[type="text"]:focus, input[type="text"]:active, input[type="email"]:focus, input[type="email"]:active, textarea:focus, textarea:active{
-        border-bottom: 2px solid #fff;
+        border-bottom: 2px solid #fff !important;
+    }
+    .rad-subscription-group input, .rad-subscription-group textarea{
+        border: none !important;
+        background: none !important;
+    }
+    .rad-subscription-group input[type="text"]:focus, 
+    .rad-subscription-group input[type="email"]:focus, 
+    .rad-subscription-group input[type="password"]:focus, 
+    .rad-subscription-group textarea:focus{
+        outline: none !important;
+        box-shadow: none !important;
+        border: none !important;
     }
+
+
     .posts-list article.summary{
-        color: #c3c3c3;
+        color: #c3c3c3 !important;
+    }
+    .post-summary.post-content p,
+    .post-summary.post-content *{
+        color: white !important;
+    }
+
+    .text-muted{
+        color: rgba(255, 255, 255, .6) !important;
     }
 }
 /* end dark mode */
diff --git a/assets/scss/bootstrap/_variables.scss b/assets/scss/bootstrap/_variables.scss
@@ -299,7 +299,7 @@ $cyans: (
 
 // scss-docs-start theme-color-variables
 $primary:       $blue !default;
-$secondary:     $gray-600 !default;
+$secondary:     $gray-100 !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;

diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml
@@ -160,12 +160,10 @@ theme = "adritian-free-hugo-theme"
   [[params.plugins.css]]
   URL = "css/main.css"
   [[params.plugins.css]]
-  URL = "css/adritian.css"
+  URL = "css/custom.css"
   [[params.plugins.css]]
   URL = "css/adritian-icons.css"
-  [[params.plugins.css]]
-  URL = "css/custom.css"
-
+
   # JS Plugins
   [[params.plugins.js]]
   URL = "js/rad-animations.js"
@@ -176,9 +174,7 @@ theme = "adritian-free-hugo-theme"
 
   # SCSS Plugins
   [[params.plugins.scss]]
-  URL = "scss/menu.scss"
-  [[params.plugins.scss]]
-  URL = "scss/bootstrap/bootstrap.scss"
+  URL = "scss/adritian.scss"
 
 [params]
 

diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -154,7 +154,7 @@
   translation: "Read more"
 
 - id: "published_on"
-  translation: "Published en"
+  translation: "Published on"
 
 - id: "continue_reading"
   translation: "Continue reading"
diff --git a/layouts/blog/summary.html b/layouts/blog/summary.html
@@ -2,7 +2,26 @@
   <header>
     <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
     <div class="post-meta">
-      {{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words
+      <div>
+        <section>
+          {{ i18n "published_on" }}
+          <h4 id="date">{{ .Date.Format "Mon Jan 2, 2006" }}</h4>
+          <h4 id="wordcount">{{ .WordCount }} Words</h4>
+        </section>
+        {{ with .GetTerms "topics" }}
+        <ul id="topics">
+          {{ range . }}
+          <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+          {{ end }}
+        </ul>
+        {{ end }} {{ with .GetTerms "tags" }}
+        <ul id="tags">
+          {{ range . }}
+          <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+          {{ end }}
+        </ul>
+        {{ end }}
+      </div>
     </div>
   </header>
   <div class="post-summary post-content">