Merge branch 'main' of github.com:Aroy-Art/Rinkusu

assets/css/style.css

@@ -20,7 +20,8 @@ Author: Aroy (https://aroy-art.com)
     --neon-color: #39ff14;
     --neon-pink-color: #ff00d4;
 
-
+    --bg-light: #0f1e31;
+    --bg-dark: #040b1e;
 }
 
 
@@ -30,7 +31,7 @@ Author: Aroy (https://aroy-art.com)
 }
 
 html {
-    background-color: #0f1e31;
+    background-color: #040b1e;
     color: var(--text-light, #bad8dd);
     scrollbar-color: #ff00d4 #040b1e;
     scrollbar-width: thin;
@@ -196,6 +197,11 @@ table, td, th {
     padding: 6px; 
 }
 
+ol li::marker {
+    font-size: 18px;
+    font-weight: 700;
+}
+
 .hidden {
     display: none;
 }
@@ -486,7 +492,7 @@ table, td, th {
 }
 
 .breadcrumb {
-    background-color: #0f1e31;
+    background-color: var(--bg-dark, #040b1e);
 }
 
 nav[aria-label="breadcrumb"] li:last-child a{
@@ -570,6 +576,79 @@ nav[aria-label="breadcrumb"] li:last-child a{
     Shortcodes
 =================================================================*/
  
+details {
+    margin: 1rem auto;
+    padding: 0 1rem;
+    /* width: 35em; */
+    max-width: calc(100% - 2rem);
+    position: relative;
+    border: 1px solid #78909C;
+    border-radius: 6px;
+    background-color: #040b1e;
+    color: #c9a5e7;
+    transition: background-color 0.15s;
+}
+
+details > :last-child {
+    margin-bottom: 1rem;
+}
+
+details::before {
+    width: 100%;
+    height: 100%;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: inherit;
+    opacity: 0.15;
+    box-shadow: 0 0.25em 0.5em #263238;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    z-index: -1;
+}
+
+details[open] {
+    background-color: #040b1e;
+}
+
+details[open]::before {
+    opacity: 0.6;
+}
+  
+summary {
+    padding: 1rem 2em 1rem 0;
+    display: block;
+    position: relative;
+    font-size: 1.33em;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+summary::before, summary::after {
+    width: 0.75em;
+    height: 2px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    content: "";
+    background-color: currentColor;
+    text-align: right;
+    transform: translateY(-50%);
+    transition: transform 0.2s ease-in-out;
+}
+
+summary::after {
+    transform: translateY(-50%) rotate(90deg);
+}
+
+[open] summary::after {
+    transform: translateY(-50%) rotate(180deg);
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
 
 /*=================================================================
     Code Blocks
@@ -586,6 +665,7 @@ nav[aria-label="breadcrumb"] li:last-child a{
     padding: 0;
     margin: 0;
     border-radius: 0 4px 4px 4px;
+    border: 2px purple solid;
 }
   
 .highlight > .chroma {
@@ -624,13 +704,13 @@ pre.chroma {
 .chroma [data-lang]:before {
     position:absolute;
     z-index:0;
-    top: -24px;
+    top: -26px;
     left: 0;
     content:attr(data-lang);
     font-size:1em;
     font-weight:700;
     color: #00fff9;
-    background-color: #212121;
+    background-color: #575757;
     border-radius: 4px 4px 0 0;
     border:none;
     padding:5px 10px 7px;

assets/js/script.js

@@ -12,6 +12,23 @@ $(window).on('load', function () {
 const observer = lozad(); // lazy loads elements with default selector as ".lozad"
 observer.observe();
 
+/* ========================================================================= */
+/* init Masonry for blog list
+/* ========================================================================= */
+var grids = document.querySelectorAll('.masonry-grid');
+
+grids.forEach(function(grid) {
+  if (grid) {
+    var msnry = new Masonry(grid, {
+      percentPosition: true
+    });
+
+    imagesLoaded(grid).on('progress', function() {
+      // layout Masonry after each image loads
+      msnry.layout();
+    });
+  }
+});
 
 /* ========================================================================= */
 /*	Image Preloader
@@ -21,7 +38,6 @@ function imgIsLoaded(imgElement) {
 	$(imgElement).removeClass("unloaded");
 }
 
-
 /* ========================================================================= */
 /*	Code Copy Button
 /* ========================================================================= */
@@ -175,7 +191,7 @@ jQuery(function ($) {
 			target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
 			if (target.length) {
 				html_body.animate({
-					scrollTop: target.offset().top - 50
+					scrollTop: target.offset().top - 82 // Value for scroll-padding 
 				}, 1500, 'easeInOutExpo');
 				return false;
 			}

i18n/en.yaml

@@ -7,7 +7,7 @@
 - id: readMore
   translation: Read more
 - id: viewAllPost
-  translation: View All Post
+  translation: View All Posts
 - id: share
   translation: Share
 - id: aboutAuthor

layouts/_default/article.html

@@ -1,7 +1,7 @@
-<article class="col-lg-4 col-md-6 col-12 clearfix wow fadeInUp mb-4" data-wow-duration="500ms">
+<article class="col-sm-6 col-lg-4 mb-4 clearfix" data-wow-duration="500ms">
-    <div class="post-block border-glow-2">
+    <div class="card post-block border-glow-2">
-        <div class="media-wrapper">
+        <div class="card-img">
-            <img class="img-fluid lozad" src="{{ .Params.Image_webp | absURL }}" onerror="this.onerror=null;this.src='{{ .Params.image | absURL }}'">
+            <img class="img-fluid" src="{{ .Params.Image_webp | absURL }}" onerror="this.onerror=null;this.src='{{ .Params.image | absURL }}'">
         </div>
         
         {{ partial "get_tags.html" . }}

layouts/_default/list.html

@@ -10,26 +10,31 @@
         <div class="row">
             <div class="col-12">
                 {{"<!-- Section Title -->" | safeHTML }}
-                <dir class="title text-center wow fadeInDown">
+                <div class="title text-center wow fadeInDown">
                     <h2>{{ with i18n "blogTitle" }} {{ index (split . " ") 0 | safeHTML }} {{ end }}<span class="color">
                         {{ with i18n "blogTitle" }} {{ index (split . " ") 1 | safeHTML }} {{ end }}</span></h2>
                     <div class="border-Rinkusu"></div>
-                </dir>
+                </div>
+                {{"<!-- /Section Title -->" | safeHTML }}
+            </div>
         </div>    
             
         {{ partial "tagcloud.html" . }}
                 
-            {{"<!-- Section Title -->" | safeHTML }}
+        <div class="row masonry-grid" data-masonry='{ "percentPosition": true }'>
             {{ $paginator := .Paginate .Data.Pages}}
             {{ range $paginator.Pages }}
                 {{ .Render "article" }}
             {{ end }}
+        
             <div class="col-12">
                 {{ template "_internal/pagination.html" . }}
             </div>
         </div>
     </div>
+    <script src="/plugins/image-loaded/imagesloaded.pkgd.min.js"></script>
 </section>
 {{"<!-- /Blog Section -->" | safeHTML }}
 
 {{ end }}
+    

layouts/partials/bradcrumb.html

@@ -1,25 +1,14 @@
 {{ if site.Params.breadcrumbs }}
 {{"<!-- Bradcrumb Section -->" | safeHTML}}
-{{ $siteUrl := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
-{{ $.Scratch.Add "sitePath" .Site.BaseURL }}
-
-{{ $.Scratch.Add "siteBreadcrumbs" (slice (dict "url" .Site.BaseURL "name" "home" "position" 1 )) }}
-{{ range $index, $element := split $siteUrl "/" }}
-{{ $.Scratch.Add "sitePath" $element }}
-{{ $.Scratch.Add "sitePath" "/" }}
-{{ if ne $element "" }}
-{{ $.Scratch.Add "siteBreadcrumbs" (slice (dict "url" ($.Scratch.Get "sitePath") "name" . "position" (add $index 2))) }}
-{{ end }}
-{{ end }}
-
 <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
         <nav aria-label="breadcrumb">
             <!-- <p> You are hear ↓↓↓</p> -->
             <ol class="breadcrumb">
-                {{ range $.Scratch.Get "siteBreadcrumbs" }}          
+                {{- range .Ancestors.Reverse }}
-                <li class="breadcrumb-item"><a href="{{ .url }}">{{ .name }}</a></li>
+                <li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
-                {{ end }}
+                {{- end }}
+                <li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
             </ol>
         </nav>
     </div>

layouts/partials/head.html

@@ -13,6 +13,8 @@
     <meta name="theme-color" content="{{ site.Params.themeColor }}">
     {{ end }}
 
+    {{ template "partials/opengraph.html" . }}
+
     {{ "<!-- Plugins -->" | safeHTML }}
     {{ range site.Params.plugins.css }}
     <link rel="stylesheet" href="{{ .link | absURL }}">

layouts/partials/opengraph.html

@@ -0,0 +1,6 @@
+<meta property="og:title" content="{{ .Title }}" />
+<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
+<meta property="og:url" content="{{ .Permalink }}" />
+
+<meta property="og:image" content="{{ with .Params.image }}{{ . | absURL }}{{ else }}{{ with .Site.Params.logo }}{{ . | absURL }}{{ end }}{{ end }}" />

layouts/shortcodes/details.html

@@ -0,0 +1,4 @@
+<details class="">
+    <summary>{{ (.Get 0) | markdownify }}</summary>
+    {{ .Inner | $.Page.RenderString (dict "display" "block") }}
+</details>

layouts/shortcodes/toc.html

@@ -0,0 +1,4 @@
+<div style="margin: 24px 0;">
+    <h2>Table Of Contents</h2>
+    {{ .Page.TableOfContents }}
+</div>

layouts/static/portfolio.html

@@ -19,40 +19,49 @@
                         {{ with .title }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}</span></h2>
                     <div class="border-Rinkusu"></div>
                 </div>
+                <p class="text-center mb-4">
+                    {{ .description }}
+                </p>
                 {{"<!-- /Title -->" | safeHTML}}
             </div>
         </div>
+
+        
         {{ range .portfolio_categories }}
         {{ $text_color := .text_color}}
-        <div class="row portfolio-category">
+        <div class="row">    
-            
-            <div class="col-12">
             {{"<!-- Section Title -->" | safeHTML}}
-                <div class="title text-center">
+            <div class="pb-2 title text-center">
                 <h2 class="portfolio-category-title" style="background-color: {{ .bg_color }};">
-                        {{ with .name }} {{ index (split . " ") 0 | safeHTML }} {{ end }}<span style="color: {{ $text_color }};">
+                    {{ with .name }} {{ index (split . " ") 0 | safeHTML }} {{ end }}
-                        {{ with .name }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}</span></h2>
+                    <span style="color: {{ $text_color }};">
+                    {{ with .name }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}
+                    </span>
+                </h2>
                 <div class="border-Rinkusu"></div>
             </div>
             {{"<!-- /Section Title -->" | safeHTML}}
         </div>
             
-            <div class="masonry-wrapper">
+        <div class="row portfolio-category masonry-grid" data-masonry='{ "percentPosition": true }'>
-                <div class="masonry">
             {{ $category := .name }}
             {{ range .portfolio_items }}
             {{- $original := resources.Get .image -}}
             {{ $thumb := $original.Fit "512x512" }}
             {{ $image := $original.Fit "1080x1080" }}
-                        <a class="masonry-item" href="{{ $image.RelPermalink }}" data-lightbox="{{ $category }}" data-title="{{ .name }}">                            
+            <div class="col-sm-4 col-lg-3 my-2">
-                            <img src="{{ $thumb.RelPermalink }}" alt="" class="masonry-content">
+                <a class="card bg-transparent" href="{{ $image.RelPermalink }}" data-lightbox="{{ $category }}" data-title="{{ .name }}">                            
+                    <img class="card-img" src="{{ $thumb.RelPermalink }}" alt="">
                 </a>
-                    {{ end }}
-                </div>
-            </div>
             </div>
             {{ end }}
         </div>
+            
+        
+        {{ end }}
+    </div>
+        
+    </div>
     <script src="{{ .image_loaded_plugin }}"></script>
 </section>
 {{"<!-- /Portfolio Section -->" | safeHTML}}