Changed folder icon to use css only and not a character #7

JohnRoos · Nov 24, 2020 · e494711 · e494711
1 parent 6561c90
commit e494711
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -25,8 +25,7 @@
         </div>
     </div>
         <div class="main-path">
-
-            <a class="path-link" href="{{ .Site.BaseURL }}">{{if .Site.Params.displayedSiteName }}{{ .Site.Params.displayedSiteName }}{{ else }}blog{{ end }}</a> > content > Home.md
+            <span><a class="path-link" href="{{ .Site.BaseURL }}">{{if .Site.Params.displayedSiteName }}{{ .Site.Params.displayedSiteName }}{{ else }}blog{{ end }}</a></span><span class="folder">content</span><span class="folder">Home.md</span>
         </div>
         <div class="main-content-toggle">
 

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -29,7 +29,7 @@
             </div>
         </div>
         <div class="main-path">
-            <a class="path-link" href="{{ .Site.BaseURL }}">{{if .Site.Params.displayedSiteName }}{{ .Site.Params.displayedSiteName }}{{ else }}blog{{ end }}</a> > content > {{ replace .File.Path "\\" " > " }}
+            <span><a class="path-link" href="{{ .Site.BaseURL }}">{{if .Site.Params.displayedSiteName }}{{ .Site.Params.displayedSiteName }}{{ else }}blog{{ end }}</a></span><span class="folder">content</span>{{ range (split .File.Path "\\") }}<span class="folder">{{ . }}</span>{{end}}
         </div>
         <div class="main-content-toggle">
 

diff --git a/layouts/partials/explorer.html b/layouts/partials/explorer.html
@@ -9,18 +9,18 @@
 <diV class='left-menu'>
     {{ $currentPage := .  }}
     <ul class="root">
-        <li class="root"><span class="rotate-letter">></span><span class="menu-item"><a class="menu-item-site" href="{{ .Site.BaseURL }}">{{if .Site.Params.displayedSiteName }}{{ .Site.Params.displayedSiteName }}{{ else }}blog{{ end }} (HUGOVSCODE)</a></span>
+        <li class="root"><div class="menu-item folder open"><a class="menu-item-site" href="{{ .Site.BaseURL }}">{{if .Site.Params.displayedSiteName }}{{ .Site.Params.displayedSiteName }}{{ else }}blog{{ end }} (HUGOVSCODE)</a></div>
             <ul>  
-                <li><span class="rotate-letter">></span><span class="menu-item">content</span>
+                <li><span class="menu-item folder open">content</span>
                     <ul>
-                        <li><span class="rotate-letter">></span><span class="menu-item">posts</span>
+                        <li><span class="menu-item folder open">posts</span>
                             <ul>
                                 {{ range where .Site.RegularPages "Type" "posts" }}
                                 <li {{ if (eq $currentPage.RelPermalink .RelPermalink ) }}class="current"{{ end }}><a href="{{ .RelPermalink }}"><span class="rotate-letter md-icon">&#10144;</span><span class="menu-item">{{ .Title }}.md</span></a></li>
                                 {{ end }}
                             </ul>
                         </li>
-                        <li><span class="rotate-letter">></span><span class="menu-item">pages</span>
+                        <li><span class="menu-item folder open">pages</span>
                             <ul>
                                 {{ range where .Site.RegularPages "Type" "page" }}
                                 <li {{ if (eq $currentPage.RelPermalink .RelPermalink ) }}class="current"{{ end }}><a href="{{ .RelPermalink }}"><span class="rotate-letter md-icon">&#10144;</span><span class="menu-item">{{ .Title }}.md</span></a></li>
@@ -29,11 +29,11 @@
                         </li>
                     </ul>
                 </li>
-                <li>><span class="menu-item">data</span></li>
-                <li>><span class="menu-item">layouts</span></li>
-                <li>><span class="menu-item">resources</span></li>
-                <li>><span class="menu-item">static</span></li>
-                <li>><span class="menu-item">themes</span></li>
+                <li><span class="menu-item folder">data</span></li>
+                <li><span class="menu-item folder">layouts</span></li>
+                <li><span class="menu-item folder">resources</span></li>
+                <li><span class="menu-item folder">static</span></li>
+                <li><span class="menu-item folder">themes</span></li>
                 <li>config.toml</li>
             </ul>
         </li>

diff --git a/static/css/style.css b/static/css/style.css
@@ -131,6 +131,24 @@ li.current {
     margin-top: 0px;
 }
 
+.folder::before {
+    margin-right: 5px;
+    margin-left: -1px;
+    margin-top: 8px;
+    display: block;
+    float: left;
+    width: 5px;  
+    height: 5px;
+    border-right: 2px #cccccc solid;
+    border-bottom: 2px #cccccc solid;
+    transform: rotate(-45deg);
+    content: " ";
+}
+
+.folder.open::before {
+    transform: rotate(45deg)
+}
+
 .menu-item-site {
     text-transform: uppercase;
     font-weight: 700;
@@ -177,6 +195,11 @@ li.current {
     overflow-x: hidden;
 }
 
+.main-path span {
+    float:left;
+    padding-right: 3px;
+}
+
 .path-link {
     color: #C9D4D4;
     text-decoration: none;