Add style to support Kanban and timeline

cuigh · Apr 8, 2022 · 3c3e1ba · 3c3e1ba
1 parent 3f0f72b
commit 3c3e1ba
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 8 deletions.
diff --git a/themes/willow/assets/css/app.css b/themes/willow/assets/css/app.css
@@ -901,6 +901,49 @@ div.links > ul {
     margin-top: 8px;
 }
 
+.timeline {
+    display: flex;
+    align-items: start;
+}
+.timeline-datetime {
+    width: 150px;
+    min-width: 150px;
+    text-align: right;
+}
+.timeline-date,.timeline-time {
+    padding-right: 12px;
+    font-weight: 500;
+    font-size: 1.2em;
+    font-style: italic;
+    color: var(--color-text-light);
+}
+.timeline-date {
+    background-color: var(--color-border);
+    border-radius: 5px 0 0 5px;
+}
+.timeline-info {
+    border-left: 5px solid var(--color-border);
+    padding-left: 12px;
+    overflow-x: auto;
+    flex-grow: 1;
+}
+.timeline-divider {
+    margin: 1em 0;
+    border-bottom: 1px dashed var(--color-border);
+}
+.timeline > .timeline-info > h2 {
+    font-size: 1.2em;
+    margin: 0;
+    line-height: unset;
+}
+.timeline > .timeline-info > ul {
+    padding-left: 1em;
+    margin: 0.5em 0;
+}
+.timeline > .timeline-info > p {
+    margin: 0.5em 0;
+}
+
 /* Container > Main > Article */
 article {
     flex-grow: 1;
@@ -917,6 +960,24 @@ article {
     word-wrap: break-word;
 }
 
+.content .embed {
+    border: 1px solid var(--color-border);
+    border-radius: 5px;
+    padding: 12px;
+    position: relative;
+}
+.content .embed > :first-child {
+    margin-top: 0;
+}
+.content .embed > :last-child {
+    margin-bottom: 0;
+}
+/*.content .embed .embed-link {*/
+/*    position: absolute;*/
+/*    right: 12px;*/
+/*    top: 12px;*/
+/*}*/
+
 .content .footnotes p {
     margin: 8px 0;
 }
@@ -980,14 +1041,27 @@ article {
     font-size: 1em;
 }
 
+.content p.images {
+    display: flex;
+    gap: 0.5rem;
+}
 .content span.image {
     margin: 1em auto;
     display: block;
     text-align: center;
 }
-
+.content p.images > span.image {
+    margin: 0;
+}
+/*.content p.images :is(img,svg):hover {*/
+/*    transform: scale(1.1);*/
+/*    transition: transform 0.2s var(--bezier);*/
+/*    filter: drop-shadow(2px 4px 6px);*/
+/*}*/
 .content span.image > :is(img,svg) {
     max-width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .content hr {
@@ -1345,6 +1419,7 @@ article {
     border: 1px solid #d6d6d6;
     width: 18px;
     height: 18px;
+    min-width: 18px;
 }
 
 .content .task-item-checkbox:checked {
@@ -1412,6 +1487,13 @@ article {
         display: flex;
         flex-direction: column;
     }
+
+    .content p.images {
+        display: block;
+    }
+    .content p.images > span.image {
+        margin: 1em auto;
+    }
 }
 
 @media (min-width: 1280px) {

diff --git a/themes/willow/templates/menu.html b/themes/willow/templates/menu.html
@@ -1,12 +1,12 @@
 <ul class="menu">
-    {{- range .Children -}}
-    <li class="menu-{{if .IsFolder}}folder{{else}}file{{end}}{{if not (parent .)}} collapsed{{end}}{{if current .}} active{{end}}">
+    {{- range .Value.Children -}}
+    <li class="menu-{{if .IsFolder}}folder{{else}}file{{end}}{{if not (.ParentOf $.Context.Node)}} collapsed{{end}}{{if eq . $.Context.Node}} active{{end}}">
         <div>
             {{- .Icon -}}
             <a{{- if not .IsFolder }} href="{{url .URL}}"{{end}}>{{.Title}}</a>
             {{- if .IsFolder}}<svg><use xlink:href="#arrow"/></svg>{{end -}}
         </div>
-        {{- if .IsFolder}}{{template "menu.html" .}}{{end -}}
+        {{- if .IsFolder}}{{template "menu.html" (wrap $.Context .)}}{{end -}}
     </li>
     {{end -}}
 </ul>
diff --git a/themes/willow/templates/page.html b/themes/willow/templates/page.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     {{- if .Vault.Favicon}}<link rel="icon" href="{{url .Vault.Favicon}}" />{{end -}}
     <title>{{ .Page.Title }}</title>
-    <link href="{{url "assets/css/app.css"}}" rel="stylesheet">
+    <link href="{{url "assets/css/app.css"}}?v={{.Timestamp}}" rel="stylesheet">
 </head>
 
 <body>
@@ -43,7 +43,7 @@
 <div class="container">
     <aside id="aside">
         <nav id="nav">
-            {{- template "menu.html" .Menu -}}
+            {{- template "menu.html" (wrap .Page .Menu) -}}
         </nav>
         <div class="obelisk">Powered by <a href="https://github.com/cuigh/obelisk" target="_blank">Obelisk</a></div>
     </aside>
@@ -138,8 +138,8 @@
 {{- if .Page.Data.MathJax}}<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>{{end -}}
 {{- if .Page.Data.Excalidraw}}<script src="{{url "assets/js/excalidraw-utils.min.js"}}"></script>{{end -}}
 <script async src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
-<script src="{{url "assets/js/data.js"}}"></script>
-<script src="{{url "assets/js/app.js"}}"></script>
+<script src="{{url "assets/js/data.js"}}?v={{.Timestamp}}"></script>
+<script src="{{url "assets/js/app.js"}}?v={{.Timestamp}}"></script>
 </body>
 
 </html>
diff --git a/themes/willow/theme.yml b/themes/willow/theme.yml
@@ -1,4 +1,5 @@
 name: Willow
+version: 0.6.0
 author: cuigh
 url: github.com/cuigh/obelisk
 assets: