excluded SASS watch file from version control

.gitignore

@@ -40,3 +40,6 @@ go.work.sum
 # env file
 .env
 
+**/*.bak
+**/*.bak/
+**/*.css.map

hugo.toml

@@ -1,4 +1,5 @@
-baseURL = "https://blog.sukaato.moe/"
+# baseURL = "https://blog.sukaato.moe/"
+baseURL = "http://localhost:1313"
 defaultContentLanguage = "en"
 languageCode = "en-us"
 languageName = "English"

themes/sukaato/archetypes/addenda.md

@@ -0,0 +1,10 @@
++++
+title = '' # should describe reason for this addendum
+date = {{ .Date }}
+publishDate = {{ .Date }}
+draft = true
+# @TODO find way to construct referene to post URL for below field
+ref = '' # link to post this is an addendum for
+fnote = 'a1' # should refer back to a footnote in given context--footnote must always have letter 'a' prefix integer
+editor = 'admin'
++++

themes/sukaato/archetypes/categories.md

@@ -0,0 +1,6 @@
++++
+title = '{{ index (split .Dir "/" | last 2) 0 | title }}'
+summary = ''
+draft = true
+image = '/images/{{ index (split .Dir "/" | last 2) 0 }}'
++++

themes/sukaato/archetypes/default.md

@@ -1,5 +1,9 @@
 +++
 title = '{{ replace .File.ContentBaseName "-" " " | title }}'
-date = {{ .Date }}
+# kind = ''
 draft = true
 +++
+
+Laborum voluptate pariatur ex culpa magna nostrud est incididunt fugiat
+pariatur do dolor ipsum enim. Consequat tempor do dolor eu. Non id id anim anim
+excepteur excepteur pariatur nostrud qui irure ullamco.

themes/sukaato/archetypes/posts.md

@@ -0,0 +1,13 @@
++++
+title = '{{ index (split .Dir "/" | last 2) 0 | replace "-" " " | title }}'
+date = {{ .Date }}
+publishDate = {{ .Date }}
+draft = true
+tags = []
+categories = []
+author = 'admin'
+editor = 'admin'
+type = 'post'
+# style = 'prose'
+hidden = false
++++

themes/sukaato/assets/css/abstracts/_fonts.sass

@@ -0,0 +1,12 @@
+@use 'fun'
+
+@include fun.create_font("headerTitle", "Cronicle.ttf")
+@include fun.create_font("postTitle", "Satanic_Demon.ttf")
+@include fun.create_font("postMatter", "erika-pl.regular.ttf")
+@include fun.create_font("postContent", "faustus.regular.ttf")
+@include fun.create_font("postFirstChar", "goudy-initialen.regular.ttf")
+@include fun.create_font("catTerm", "CaesarDressing.regular.ttf")
+@include fun.create_font("navFont", "black-magnet.regular.otf")
+@include fun.create_font("pageFont", "Almendra.regular.ttf")
+@include fun.create_font("encryptedFont", "Drachenklaue.ttf")
+@include fun.create_font("codeFont", "blockblueprint.medium.ttf")

themes/sukaato/assets/css/abstracts/_fun.sass

@@ -0,0 +1,4 @@
+@mixin create_font($name, $font_basename)
+    @font-face
+        font-family: $name
+        src: url('fonts/' + $font_basename)

themes/sukaato/assets/css/abstracts/_palette.sass

@@ -0,0 +1,9 @@
+@use 'sass:color' as brush
+
+$white: #ffffff
+$black: #000000
+$bg: #121212
+$accent: #9d1934
+$fg: #cccccc
+$state: #e9b074
+$canvas: brush.adjust(brush.adjust($bg, $lightness: 1.5%), $red: 3%, $green: 1.75%)

themes/sukaato/assets/css/base/_site.sass

@@ -0,0 +1,357 @@
+@use '../abstracts/palette' as c
+@use 'sass:color' as brush
+@forward '../abstracts/fonts'
+@forward '../components/cblocks'
+
+::selection
+    background-color: c.$state
+    color: c.$bg
+
+html
+    background-color: c.$canvas
+    background-image: url("images/rocky_wall.png")
+
+header
+    border-bottom: 5px solid c.$state
+    margin-bottom: 1rem
+
+    & h1
+        font-family: headerTitle
+        text-align: center
+        font-size: clamp(16pt, 3vw, 72pt)
+
+    & nav
+        text-align: center
+        font-family: navFont
+        font-size: clamp(16pt, 1.5vw, 24pt)
+        margin: 6%
+
+        & > a
+            padding: 3%
+            margin: 3%
+
+body
+    color: c.$fg
+    /* line-height: 1.5 */
+    /* margin: 1rem */
+    margin: 0 auto
+    // min-width: 33vw
+    width: 50vw
+    max-width: 900px
+
+    & main
+        background-color: rgba(c.$bg, 0.7)
+        border-radius: 2%
+
+.directory
+    padding: 3% 5%
+
+@keyframes rise-and-shine
+    0%
+        top: 0vh
+    100%
+        top: -15vh
+
+@keyframes morningside
+    0%
+        background: radial-gradient(circle at 15vw, c.$bg 60%, c.$accent)
+    100%
+        background: radial-gradient(circle at 7.5vw, c.$bg 66%, c.$accent)
+
+.black-hole.wrap
+    z-index: -1
+    position: absolute
+    top: -15vh
+    text-align: center
+    filter: drop-shadow(-5px 4px 20px rgba(c.$accent, 0.5))
+    animation: rise-and-shine 5s ease-out
+
+    & #black-hole
+        width: 50vw
+        max-width: 900px
+        height: 50vw
+        max-height: 900px
+        margin: 0 auto
+        shape-outside: circle(50%)
+        clip-path: circle(45vw)
+        background-color: c.$bg
+        border-radius: 50%
+        background: radial-gradient(circle at 7.5vw, c.$bg 66%, c.$accent)
+        animation: morningside 5s ease-in
+        transform: rotate(-90deg)
+
+#page #title
+    font-family: postTitle
+    margin-left: 1.5vw
+
+#content.page
+    font-family: pageFont
+    font-size: clamp(10pt, 1.5vw, 18pt)
+    margin: 5% 15% 0
+    padding: 5% 0 5%
+
+.expo > #title
+    padding-top: 0px
+
+#posts
+    padding: 3% 10%
+
+    & > a
+        &:has(.post)
+            display: block
+            transform: rotate(0deg)
+
+            & > .post
+                box-shadow: none
+                border: 1px solid rgba(brush.adjust(c.$state, $red: 50), 0.5)
+                transition: box-shadow 3s
+
+                & > p
+                    color: c.$fg
+                    font-family: postContent
+                    font-size: clamp(10pt,1.4vw, 18pt)
+                    margin: 2% 0
+                
+                & > h2
+                    // color: c.$state
+                    font-size: clamp(14pt, 2.5vw, 20pt)
+                    font-weight: 900
+                    margin: 0
+
+                &:hover
+                    box-shadow: inset 0 2px 16px brush.adjust(c.$state, $red: 95)
+
+            &:nth-child(even)
+                transform: rotate(3deg)
+                transition: transform 2s
+
+            &:nth-child(odd)
+                transform: rotate(-3deg)
+                transition: transform 2s
+
+            &:hover
+                transform: rotate(0deg)
+
+.post
+    background-image: linear-gradient(to top right, rgba(c.$bg, 1.0), rgba(brush.adjust(c.$bg, $lightness: 22%), 0.1))
+    // border: 1px solid c.$accent
+    font-family: postTitle
+    padding: 3%
+    margin: 2% 0
+    border-radius: 4%
+
+#post
+    font-family: postTitle
+
+    & #content
+        margin: 0 10%
+        font-family: postContent
+        font-size: clamp(12pt, 1.8vw, 18pt)
+
+        & img
+            filter: saturate(0) contrast(1.75)
+
+        & > img, & > p > img
+            margin: 2% auto
+            max-width: 75%
+            height: auto
+            display: block
+            border-top: 12px
+            border-right: 12px
+            border-left: 12px
+            border-bottom: 48px
+            border-color: #fff
+            border-style: solid
+            border-radius: 1%
+
+        & > img:nth-child(even), & > p > img:nth-child(even)
+            transform: rotate(2deg)
+
+        & > img:nth-child(odd), & > p > img:nth-child(odd)
+            transform: rotate(-2deg)
+
+        & > p:first-child::first-letter
+            font-family: postFirstChar
+            font-size: clamp(64pt, 3vw , 86pt)
+            float: left
+            color: c.$state
+
+        & figure
+            display: flex
+            flex-flow: column nowrap
+            margin: 2% auto
+            max-width: 50%
+            height: auto
+            border-top: 12px
+            border-right: 12px
+            border-left: 12px
+            border-bottom: 24px
+            border-color: #fff
+            border-style: solid
+            border-radius: 1%
+            background-color: #fff
+            text-align: center
+
+            & img
+                width: 100%
+
+            & figcaption
+                max-height: 10vh
+
+                & > p
+                    margin-top: 0
+                    margin-bottom: 0
+                    color: c.$bg
+                    font-family: postMatter
+                    font-size: clamp(9pt, 1.5vw, 14pt)
+                    text-align: justify
+
+    & h1:first-child
+        text-align: center
+        font-size: clamp(16pt, 24pt, 32pt)
+        color: c.$accent
+        font-weight: bold
+
+    & #frontmatter
+        width: 33%
+        margin: 0 0 0 auto
+        padding: 1%
+        font-family: postMatter
+
+    & .terms
+        max-width: 66%
+        margin: 25px auto 0
+        text-align: center
+
+        &#label
+            text-decoration: underline
+        
+        &#directory
+            font-family: postMatter
+            padding: 2% 0 4%
+
+        & li
+            display: inline-block
+            margin: 0.5%
+            font-weight: bold
+
+            & a
+                display: block
+                padding: 5px
+                background-color: c.$accent
+                color: c.$bg
+                text-decoration: none
+                border-radius: 5px
+                transition: background-color 3s
+
+                &:hover
+                    background-color: c.$state
+
+.page.category
+    & > div
+        display: flex
+        flex-flow: row nowrap
+        justify-content: space-evenly
+
+        & > h1
+            font-family: catTerm
+            flex-basis: 33vw
+            font-size: clamp(16pt, 1.3vw, 24pt)
+
+        & > p
+            font-family: pageFont
+            margin-left: 10%
+            margin-right: 5%
+            max-height: 15vh
+            overflow-y: scroll
+
+    & > img
+        max-width: 100%
+        filter: saturate(0) contrast(1.75)
+
+#categories.expo
+    & > h1
+        font-family: catTerm
+        font-size: clamp(24pt, 2vw, 32pt)
+
+#categories.directory
+    padding-top: 0px
+
+    & > .category
+        min-height: 66px
+        background-position-y: 34%
+        background-size: cover
+        background-blend-mode: saturation
+        filter: contrast(1.3)
+
+        & > h2
+            text-shadow: 2px 2px 5px c.$bg
+            font-family: catTerm
+
+            & + p
+                display: none
+
+        &:hover > h2 + p
+            display: initial
+            text-shadow: 2px 2px 5px c.$bg
+            font-family: pageFont
+
+.page.tag
+    & > h1
+        font-family: postMatter
+        font-size: clamp(24pt, 2vw, 32pt)
+
+#tags.expo
+    & > h1
+        font-family: postMatter
+        font-size: clamp(24pt, 2vw, 32pt)
+
+#tags.directory
+    padding-top: 0px
+
+    & > dl
+        display: flex
+        flex-wrap: wrap
+        justify-content: center
+        align-items: center
+        align-content: space-around
+        gap: 3%
+
+    & .tag.title
+        font-family: postMatter
+        font-weight: bold
+        font-size: clamp(12pt, 1.5vw, 16pt)
+        // float: left
+        background-color: c.$accent
+        cursor: pointer
+
+        & > a
+            padding: 5px
+            background-color: c.$accent
+            color: c.$bg
+            text-decoration: none
+            border-radius: 5px
+
+        &:hover + .tag.content::after
+            // content: "Lorem ipsum"
+            display: inline-block
+            position: absolute
+            z-index: 1
+            max-width: 10vw
+            max-height: 15vh
+            overflow: scroll
+            background-color: c.$state
+            color: c.$bg
+
+    // & .tag.content
+    //     visibility: collapse
+
+footer
+    border-top: 1px solid c.$state
+    margin-top: 1rem
+    font-family: postMatter
+    font-size: 14pt
+
+a
+    color: c.$accent
+    text-decoration: none

themes/sukaato/assets/css/components/_cblocks.sass

@@ -0,0 +1,23 @@
+@use '../abstracts/palette' as c
+@use 'sass:color' as brush
+@forward '../abstracts/fonts'
+
+pre:has(code)
+    padding: 15px
+    border-radius: 3%
+    // background-image: url('images/parchment.jpg')
+
+code
+    font-family: codeFont
+    font-size: clamp(10pt, 1.5vw, 14pt)
+
+.jtab
+    & path
+        stroke: c.$fg
+
+    & circle
+        fill: c.$fg
+        stroke: none
+
+        & + text
+            fill: c.$bg

themes/sukaato/assets/css/main.css

@@ -1,22 +1,430 @@
-body {
-  color: #222;
-  font-family: sans-serif;
-  line-height: 1.5;
-  margin: 1rem;
-  max-width: 768px;
+@font-face {
+  font-family: "headerTitle";
+  src: url("fonts/Cronicle.ttf");
+}
+@font-face {
+  font-family: "postTitle";
+  src: url("fonts/Satanic_Demon.ttf");
+}
+@font-face {
+  font-family: "postMatter";
+  src: url("fonts/erika-pl.regular.ttf");
+}
+@font-face {
+  font-family: "postContent";
+  src: url("fonts/faustus.regular.ttf");
+}
+@font-face {
+  font-family: "postFirstChar";
+  src: url("fonts/goudy-initialen.regular.ttf");
+}
+@font-face {
+  font-family: "catTerm";
+  src: url("fonts/CaesarDressing.regular.ttf");
+}
+@font-face {
+  font-family: "navFont";
+  src: url("fonts/black-magnet.regular.otf");
+}
+@font-face {
+  font-family: "pageFont";
+  src: url("fonts/Almendra.regular.ttf");
+}
+@font-face {
+  font-family: "encryptedFont";
+  src: url("fonts/Drachenklaue.ttf");
+}
+@font-face {
+  font-family: "codeFont";
+  src: url("fonts/blockblueprint.medium.ttf");
+}
+pre:has(code) {
+  padding: 15px;
+  border-radius: 3%;
+}
+
+code {
+  font-family: codeFont;
+  font-size: clamp(10pt, 1.5vw, 14pt);
+}
+
+.jtab path {
+  stroke: #cccccc;
+}
+.jtab circle {
+  fill: #cccccc;
+  stroke: none;
+}
+.jtab circle + text {
+  fill: #121212;
+}
+
+::-moz-selection {
+  background-color: #e9b074;
+  color: #121212;
+}
+
+::selection {
+  background-color: #e9b074;
+  color: #121212;
+}
+
+html {
+  background-color: #191816;
+  background-image: url("images/rocky_wall.png");
 }
 
 header {
-  border-bottom: 1px solid #222;
+  border-bottom: 5px solid #e9b074;
   margin-bottom: 1rem;
 }
+header h1 {
+  font-family: headerTitle;
+  text-align: center;
+  font-size: clamp(16pt, 3vw, 72pt);
+}
+header nav {
+  text-align: center;
+  font-family: navFont;
+  font-size: clamp(16pt, 1.5vw, 24pt);
+  margin: 6%;
+}
+header nav > a {
+  padding: 3%;
+  margin: 3%;
+}
+
+body {
+  color: #cccccc;
+  /* line-height: 1.5 */
+  /* margin: 1rem */
+  margin: 0 auto;
+  width: 50vw;
+  max-width: 900px;
+}
+body main {
+  background-color: rgba(18, 18, 18, 0.7);
+  border-radius: 2%;
+}
+
+.directory {
+  padding: 3% 5%;
+}
+
+@keyframes rise-and-shine {
+  0% {
+    top: 0vh;
+  }
+  100% {
+    top: -15vh;
+  }
+}
+@keyframes morningside {
+  0% {
+    background: radial-gradient(circle at 15vw, #121212 60%, #9d1934);
+  }
+  100% {
+    background: radial-gradient(circle at 7.5vw, #121212 66%, #9d1934);
+  }
+}
+.black-hole.wrap {
+  z-index: -1;
+  position: absolute;
+  top: -15vh;
+  text-align: center;
+  filter: drop-shadow(-5px 4px 20px rgba(157, 25, 52, 0.5));
+  animation: rise-and-shine 5s ease-out;
+}
+.black-hole.wrap #black-hole {
+  width: 50vw;
+  max-width: 900px;
+  height: 50vw;
+  max-height: 900px;
+  margin: 0 auto;
+  shape-outside: circle(50%);
+  -webkit-clip-path: circle(45vw);
+          clip-path: circle(45vw);
+  background-color: #121212;
+  border-radius: 50%;
+  background: radial-gradient(circle at 7.5vw, #121212 66%, #9d1934);
+  animation: morningside 5s ease-in;
+  transform: rotate(-90deg);
+}
+
+#page #title {
+  font-family: postTitle;
+  margin-left: 1.5vw;
+}
+
+#content.page {
+  font-family: pageFont;
+  font-size: clamp(10pt, 1.5vw, 18pt);
+  margin: 5% 15% 0;
+  padding: 5% 0 5%;
+}
+
+.expo > #title {
+  padding-top: 0px;
+}
+
+#posts {
+  padding: 3% 10%;
+}
+#posts > a:has(.post) {
+  display: block;
+  transform: rotate(0deg);
+}
+#posts > a:has(.post) > .post {
+  box-shadow: none;
+  border: 1px solid rgba(255, 176, 116, 0.5);
+  transition: box-shadow 3s;
+}
+#posts > a:has(.post) > .post > p {
+  color: #cccccc;
+  font-family: postContent;
+  font-size: clamp(10pt, 1.4vw, 18pt);
+  margin: 2% 0;
+}
+#posts > a:has(.post) > .post > h2 {
+  font-size: clamp(14pt, 2.5vw, 20pt);
+  font-weight: 900;
+  margin: 0;
+}
+#posts > a:has(.post) > .post:hover {
+  box-shadow: inset 0 2px 16px #ffb074;
+}
+#posts > a:has(.post):nth-child(even) {
+  transform: rotate(3deg);
+  transition: transform 2s;
+}
+#posts > a:has(.post):nth-child(odd) {
+  transform: rotate(-3deg);
+  transition: transform 2s;
+}
+#posts > a:has(.post):hover {
+  transform: rotate(0deg);
+}
+
+.post {
+  background-image: linear-gradient(to top right, #121212, rgba(74, 74, 74, 0.1));
+  font-family: postTitle;
+  padding: 3%;
+  margin: 2% 0;
+  border-radius: 4%;
+}
+
+#post {
+  font-family: postTitle;
+}
+#post #content {
+  margin: 0 10%;
+  font-family: postContent;
+  font-size: clamp(12pt, 1.8vw, 18pt);
+}
+#post #content img {
+  filter: saturate(0) contrast(1.75);
+}
+#post #content > img, #post #content > p > img {
+  margin: 2% auto;
+  max-width: 75%;
+  height: auto;
+  display: block;
+  border-top: 12px;
+  border-right: 12px;
+  border-left: 12px;
+  border-bottom: 48px;
+  border-color: #fff;
+  border-style: solid;
+  border-radius: 1%;
+}
+#post #content > img:nth-child(even), #post #content > p > img:nth-child(even) {
+  transform: rotate(2deg);
+}
+#post #content > img:nth-child(odd), #post #content > p > img:nth-child(odd) {
+  transform: rotate(-2deg);
+}
+#post #content > p:first-child::first-letter {
+  font-family: postFirstChar;
+  font-size: clamp(64pt, 3vw, 86pt);
+  float: left;
+  color: #e9b074;
+}
+#post #content figure {
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 2% auto;
+  max-width: 50%;
+  height: auto;
+  border-top: 12px;
+  border-right: 12px;
+  border-left: 12px;
+  border-bottom: 24px;
+  border-color: #fff;
+  border-style: solid;
+  border-radius: 1%;
+  background-color: #fff;
+  text-align: center;
+}
+#post #content figure img {
+  width: 100%;
+}
+#post #content figure figcaption {
+  max-height: 10vh;
+}
+#post #content figure figcaption > p {
+  margin-top: 0;
+  margin-bottom: 0;
+  color: #121212;
+  font-family: postMatter;
+  font-size: clamp(9pt, 1.5vw, 14pt);
+  text-align: justify;
+}
+#post h1:first-child {
+  text-align: center;
+  font-size: 24pt;
+  color: #9d1934;
+  font-weight: bold;
+}
+#post #frontmatter {
+  width: 33%;
+  margin: 0 0 0 auto;
+  padding: 1%;
+  font-family: postMatter;
+}
+#post .terms {
+  max-width: 66%;
+  margin: 25px auto 0;
+  text-align: center;
+}
+#post .terms#label {
+  text-decoration: underline;
+}
+#post .terms#directory {
+  font-family: postMatter;
+  padding: 2% 0 4%;
+}
+#post .terms li {
+  display: inline-block;
+  margin: 0.5%;
+  font-weight: bold;
+}
+#post .terms li a {
+  display: block;
+  padding: 5px;
+  background-color: #9d1934;
+  color: #121212;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 3s;
+}
+#post .terms li a:hover {
+  background-color: #e9b074;
+}
+
+.page.category > div {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+}
+.page.category > div > h1 {
+  font-family: catTerm;
+  flex-basis: 33vw;
+  font-size: clamp(16pt, 1.3vw, 24pt);
+}
+.page.category > div > p {
+  font-family: pageFont;
+  margin-left: 10%;
+  margin-right: 5%;
+  max-height: 15vh;
+  overflow-y: scroll;
+}
+.page.category > img {
+  max-width: 100%;
+  filter: saturate(0) contrast(1.75);
+}
+
+#categories.expo > h1 {
+  font-family: catTerm;
+  font-size: clamp(24pt, 2vw, 32pt);
+}
+
+#categories.directory {
+  padding-top: 0px;
+}
+#categories.directory > .category {
+  min-height: 66px;
+  background-position-y: 34%;
+  background-size: cover;
+  background-blend-mode: saturation;
+  filter: contrast(1.3);
+}
+#categories.directory > .category > h2 {
+  text-shadow: 2px 2px 5px #121212;
+  font-family: catTerm;
+}
+#categories.directory > .category > h2 + p {
+  display: none;
+}
+#categories.directory > .category:hover > h2 + p {
+  display: initial;
+  text-shadow: 2px 2px 5px #121212;
+  font-family: pageFont;
+}
+
+.page.tag > h1 {
+  font-family: postMatter;
+  font-size: clamp(24pt, 2vw, 32pt);
+}
+
+#tags.expo > h1 {
+  font-family: postMatter;
+  font-size: clamp(24pt, 2vw, 32pt);
+}
+
+#tags.directory {
+  padding-top: 0px;
+}
+#tags.directory > dl {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  align-content: space-around;
+  gap: 3%;
+}
+#tags.directory .tag.title {
+  font-family: postMatter;
+  font-weight: bold;
+  font-size: clamp(12pt, 1.5vw, 16pt);
+  background-color: #9d1934;
+  cursor: pointer;
+}
+#tags.directory .tag.title > a {
+  padding: 5px;
+  background-color: #9d1934;
+  color: #121212;
+  text-decoration: none;
+  border-radius: 5px;
+}
+#tags.directory .tag.title:hover + .tag.content::after {
+  display: inline-block;
+  position: absolute;
+  z-index: 1;
+  max-width: 10vw;
+  max-height: 15vh;
+  overflow: scroll;
+  background-color: #e9b074;
+  color: #121212;
+}
 
 footer {
-  border-top: 1px solid #222;
+  border-top: 1px solid #e9b074;
   margin-top: 1rem;
+  font-family: postMatter;
+  font-size: 14pt;
 }
 
 a {
-  color: #00e;
+  color: #9d1934;
   text-decoration: none;
-}
+}/*# sourceMappingURL=main.css.map */

themes/sukaato/assets/css/main.sass

@@ -0,0 +1 @@
+@forward './base/site'

themes/sukaato/content/_index.md

@@ -1,7 +1,7 @@
 +++
 title = 'Home'
-date = 2023-01-01T08:00:00-07:00
-draft = false
+kind = 'home'
+draft = true
 +++
 
 Laborum voluptate pariatur ex culpa magna nostrud est incididunt fugiat

themes/sukaato/content/categories/philosophy/_index.md

@@ -0,0 +1,6 @@
++++
+title = "Philosophy"
+summary = "The systematic normative study of the relationships among concepts, typically for purposes of sharpening discrimination of worldviews and developing perceptual or normative discernment"
+draft = true # @TODO creaste shortcode that toggles draft bool for each and every category
+image = "/images/philosophy"
++++

themes/sukaato/content/post-1.md

@@ -1,10 +0,0 @@
-+++
-title = 'Post 1'
-date = 2023-01-15T09:00:00-07:00
-draft = false
-tags = ['red']
-+++
-
-Tempor proident minim aliquip reprehenderit dolor et ad anim Lorem duis sint eiusmod. Labore ut ea duis dolor. Incididunt consectetur proident qui occaecat incididunt do nisi Lorem. Tempor do laborum elit laboris excepteur eiusmod do. Eiusmod nisi excepteur ut amet pariatur adipisicing Lorem.
-
-Occaecat nulla excepteur dolore excepteur duis eiusmod ullamco officia anim in voluptate ea occaecat officia. Cillum sint esse velit ea officia minim fugiat. Elit ea esse id aliquip pariatur cupidatat id duis minim incididunt ea ea. Anim ut duis sunt nisi. Culpa cillum sit voluptate voluptate eiusmod dolor. Enim nisi Lorem ipsum irure est excepteur voluptate eu in enim nisi. Nostrud ipsum Lorem anim sint labore consequat do.

themes/sukaato/content/post-3/index.md

@@ -1,12 +0,0 @@
-+++
-title = 'Post 3'
-date = 2023-03-15T11:00:00-07:00
-draft = false
-tags = ['red','green','blue']
-+++
-
-Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.
-
-![Bryce Canyon National Park](bryce-canyon.jpg)
-
-Sit excepteur do velit veniam mollit in nostrud laboris incididunt ea. Amet eu cillum ut reprehenderit culpa aliquip labore laborum amet sit sit duis. Laborum id proident nostrud dolore laborum reprehenderit quis mollit nulla amet veniam officia id id. Aliquip in deserunt qui magna duis qui pariatur officia sunt deserunt.

themes/sukaato/content/posts/post-1/index.md

@@ -0,0 +1,35 @@
++++
+title = 'Post 1'
+date = 2025-01-15T09:00:00-07:00
+draft = true
+tags = ['red']
+type = 'post'
+categories = ['philosophy']
+author = 'admin'
++++
+
+Tempor proident minim aliquip reprehenderit dolor et ad anim Lorem duis sint eiusmod. Labore ut ea duis dolor. Incididunt consectetur proident qui occaecat incididunt do nisi Lorem. Tempor do laborum elit laboris excepteur eiusmod do. Eiusmod nisi excepteur ut amet pariatur adipisicing Lorem.
+
+```mermaid {class="mermaid"}
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+Occaecat nulla excepteur dolore excepteur duis eiusmod ullamco officia anim in voluptate ea occaecat officia. Cillum sint esse velit ea officia minim fugiat. Elit ea esse id aliquip pariatur cupidatat id duis minim incididunt ea ea.
+
+```goat
+.---.     .-.       .-.       .-.     .---.
+| A +--->| 1 |<--->| 2 |<--->| 3 |<---+ B |
+'---'     '-'       '+'       '+'     '---'
+```
+
+Anim ut duis sunt nisi. Culpa cillum sit voluptate voluptate eiusmod dolor. Enim nisi Lorem ipsum irure est excepteur voluptate eu in enim nisi. Nostrud ipsum Lorem anim sint labore consequat do.

themes/sukaato/content/posts/post-2/index.md

@@ -1,11 +1,19 @@
 +++
 title = 'Post 2'
-date = 2023-02-15T10:00:00-07:00
-draft = false
-tags = ['red','green']
+date = 2025-02-15T10:00:00-07:00
+draft = true
+tags = ['red']
+type = 'post'
 categories = ['philosophy']
+author = 'admin'
 +++
 
 Anim eiusmod irure incididunt sint cupidatat. Incididunt irure irure irure nisi ipsum do ut quis fugiat consectetur proident cupidatat incididunt cillum. Dolore voluptate occaecat qui mollit laborum ullamco et. Ipsum laboris officia anim laboris culpa eiusmod ex magna ex cupidatat anim ipsum aute. Mollit aliquip occaecat qui sunt velit ut cupidatat reprehenderit enim sunt laborum. Velit veniam in officia nulla adipisicing ut duis officia.
 
+$$ E = mc^2 $$
+
 Exercitation voluptate irure in irure tempor mollit Lorem nostrud ad officia. Velit id fugiat occaecat do tempor. Sit officia Lorem aliquip eu deserunt consectetur. Aute proident deserunt in nulla aliquip dolore ipsum Lorem ut cupidatat consectetur sit sint laborum. Esse cupidatat sit sint sunt tempor exercitation deserunt. Labore dolor duis laborum est do nisi ut veniam dolor et nostrud nostrud.
+
+```javascript
+document.getElementById("test")
+```

themes/sukaato/content/posts/post-3/index.md

@@ -0,0 +1,39 @@
++++
+title = 'Post 3'
+date = 2025-03-15T11:00:00-07:00
+draft = true
+tags = ['red','green','blue']
+type = 'post'
+categories = ['philosophy']
+author = 'admin'
++++
+
+<!-- @TODO test use of snippets subdirectory in post page bundle, for the appending of addendums to this post -->
+
+Occaecat **aliqua consequat** laborum ut ex aute *aliqua* culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. 
+
+```abc {instrument="guitar"}
+X:1
+T:Grace notes
+M:6/8
+K:C
+{g}A3 A{g}AA|{gAGAG}A3 {g}A{d}A{e}A|]
+```
+
+```tab
+%7/2.X/X.7/3.7/4.6/1.X/X[Bm7b5]
+```
+
+Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.
+
+![Bryce Canyon National Park](bryce-canyon.jpg)
+
+Sit excepteur do velit veniam mollit in nostrud laboris incididunt ea. Amet eu cillum ut reprehenderit culpa aliquip labore laborum amet sit sit duis. Laborum id proident nostrud dolore laborum reprehenderit quis mollit nulla amet veniam officia id id. Aliquip in deserunt qui magna duis qui pariatur officia sunt deserunt.
+
+{{< figure
+  src="bryce-canyon.jpg"
+  alt="A photograph of Zion National Park"
+  link="https://www.nps.gov/zion/index.htm"
+  caption="Zion National Park"
+  class="ma0 w-75"
+>}}

themes/sukaato/hugo.toml

@@ -1,16 +1,35 @@
-baseURL = 'https://example.org/'
+# baseURL = 'https://example.org/'
 languageCode = 'en-US'
-title = 'My New Hugo Site'
+# title = 'My New Hugo Site'
+contentDir = "content"
+
+[markup]
+  [markup.highlight]
+    style = 'average'
+    lineNos = true
+
+  [markup.goldmark]
+    [markup.goldmark.extensions]
+      [markup.goldmark.extensions.passthrough]
+        enable = true
+        [markup.goldmark.extensions.passthrough.delimiters]
+          block = [['\[', '\]'], ['$$', '$$']]
+          inline = [['\(', '\)']]
+
+[pagination]
+disableAliases = false
+pagerSize = 10
+path = 'page'
 
 [[menus.main]]
 name = 'Home'
 pageRef = '/'
 weight = 10
 
-# [[menus.main]]
-# name = 'Posts'
-# pageRef = '/posts'
-# weight = 20
+[[menus.main]]
+name = 'Posts'
+pageRef = '/posts'
+weight = 20
 
 [[menus.main]]
 name = 'Tags'
@@ -22,7 +41,16 @@ name = 'Categories'
 pageRef = '/categories'
 weight = 30
 
+[taxonomies]
+category = "categories"
+# @TODO work on building below taxonomies
+# author = "authors"
+# style = "styles"
+
 [module]
   [module.hugoVersion]
   extended = false
   min = "0.116.0"
+
+[params]
+math = true

themes/sukaato/layouts/_default/_markup/render-codeblock-abc.html

@@ -0,0 +1,4 @@
+<pre class="abc">
+    {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasAbc" true }}

themes/sukaato/layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<pre class="mermaid">
+    {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}

themes/sukaato/layouts/_default/_markup/render-codeblock-tab.html

@@ -0,0 +1,4 @@
+<pre class="jtab">
+    {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasTab" true }}

themes/sukaato/layouts/_default/baseof.html

@@ -7,11 +7,29 @@
   <header>
     {{ partial "header.html" . }}
   </header>
+  <div>
+    <div class="black-hole wrap">
+      <div id="black-hole"></div>
+    </div>
+  </div>
   <main>
+    {{ block "expo" . }}{{ end }}
     {{ block "main" . }}{{ end }}
   </main>
   <footer>
     {{ partial "footer.html" . }}
   </footer>
+  {{ if .Param "math" }}
+    {{ partialCached "math.html" . }}
+  {{ end }}
+  {{ if .Store.Get "hasMermaid" }}
+    {{ partialCached "diagram.html" . }}
+  {{ end }}
+  {{ if .Store.Get "hasAbc" }}
+    {{ partialCached "music-notation.html" . }}
+  {{ end }}
+  {{ if .Store.Get "hasTab" }}
+    {{ partialCached "tablature-notation.html" . }}
+  {{ end }}
 </body>
 </html>

themes/sukaato/layouts/_default/home.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
+  <div id="{{ lower .Title }}" class="page">
+    <div id="content" class="page">
       {{ .Content }}
-  {{ range site.RegularPages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
-  {{ end }}
+    </div>
+  </div>
 {{ end }}

themes/sukaato/layouts/_default/home.html.bak

@@ -1,7 +0,0 @@
-{{ define "main" }}
-  {{ .Content }}
-  {{ range site.RegularPages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
-  {{ end }}
-{{ end }}

themes/sukaato/layouts/_default/list.html

@@ -1,8 +1,17 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
-  {{ .Content }}
-  {{ range .Pages }}
-    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-    {{ .Summary }}
+  {{ with .Content }}
+    <div id="content" class="page">
+        {{ . }}
+    </div>
   {{ end }}
+  <div id="posts" class="directory">
+    {{ range .Paginator.Pages }}
+    <a href="{{ .RelPermalink }}">
+      <article class="post">
+        <h2>{{ .LinkTitle }}</h2>
+        <p>{{ .Summary }}</p>
+      </article>
+    </a>
+    {{ end }}{{ template "_internal/pagination.html" . }}
+  </div>
 {{ end }}

themes/sukaato/layouts/_default/single.html

@@ -1,10 +1,39 @@
 {{ define "main" }}
+  <article id="post">
     <h1>{{ .Title }}</h1>
-
+    <section id="frontmatter">
+      {{ if ne .PublishDate nil }}
+        {{ $dateMachine := .PublishDate | time.Format "2006-01-02T15:04:05-07:00" }}
+        {{ $dateHuman := .PublishDate | time.Format "2 Jan 2006" }}
+        <time datetime="{{ $dateMachine }}">Published {{ $dateHuman }}</time>
+      {{ else }}
         {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
-  {{ $dateHuman := .Date | time.Format ":date_long" }}
-  <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
-
-  {{ .Content }}
-  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+        {{ $dateHuman := .Date | time.Format "2 Jan 2006" }}
+        <time datetime="{{ $dateMachine }}">Created {{ $dateHuman }}</time>
+      {{ end }}
+      {{ with .Params.author }}
+        <p>Written by {{ . }}</p>
+      {{ end }}
+      {{ with .Params.editor }}
+        {{ if ne .Params.editor .Params.author }}
+          <p>Edited by {{ .Params.editor }}</p>
+        {{ end }}
+      {{ end }}
+      {{ with .Params.translator }}
+        <p>Translated by {{ . }}</p>
+      {{ end }}
+    </section>
+    <section id="content">
+      {{ .Content }}
+    </section>
+    <!-- {{ range .Params.updates }}
+      <details>
+        <summary>{{ .mod }}</summary>
+        {{ with .comment }}
+          <p>{{ . }}</p>
+        {{ end }}
+      </details>
+    {{ end }} -->
+    {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+  </article>
 {{ end }}

themes/sukaato/layouts/categories/list.html

@@ -0,0 +1,31 @@
+{{ define "main" }}
+  <div id="{{ lower .Title }}" class="page category">
+    <div>
+      <h1>{{ .Title }}</h1>
+      {{ with .Summary }}
+        <p>{{ . }}</p>
+      {{ end }}
+    </div>
+    {{ if ne .Params.image nil }}
+      {{ $path := print ".." .Params.image }}
+      <img src="{{ $path }}" alt="{{ lower .Title }}_image">
+    {{ else }}
+      @TODO: 404 image goes here
+    {{ end }}
+  </div>
+  {{ with .Content }}
+    <div id="content" class="page">
+      {{ . }}
+    </div>
+  {{ end }}
+  <div id="posts" class="directory">
+    {{ range .Paginator.Pages }}
+    <a href="{{ .RelPermalink }}">
+      <article class="post">
+        <h2>{{ .LinkTitle }}</h2>
+        <p>{{ .Summary }}</p>
+      </article>
+    </a>
+    {{ end }}{{ template "_internal/pagination.html" . }}
+  </div>
+{{ end }}

themes/sukaato/layouts/categories/terms.html

@@ -0,0 +1,24 @@
+{{ define "expo" }}
+<div id="{{ lower .Title }}" class="expo site {{ lower .Title }}">
+  <h1 id="title" class="site {{ lower .Title }}">{{ .Title }}</h1>
+  <p id="summary" class="site {{ lower .Title }}">{{ .Content }}</p>
+</div>
+{{ end }}
+{{ define "main" }}
+<div id="{{ lower .Title }}" class="directory">
+  {{ range .Data.Pages }}
+    {{ if ne .Params.image nil }}
+    {{ $path := print "." .Params.image }}
+    <div style="background-image: linear-gradient(#121212, #121212), url({{ $path }});" class="category">
+    {{ else }}
+    <div style="background-image: linear-gradient(#121212, #121212);" class="category">
+    {{ end }}
+      <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+      <!-- <img src="images/{{ lower .LinkTitle }}" alt=""> -->
+      {{ with .Summary }}
+        <p>{{ . }}</p>
+      {{ end }}
+    </div>
+  {{ end }}
+</div>
+{{ end }}

themes/sukaato/layouts/partials/diagram.html

@@ -0,0 +1,7 @@
+<script id="mermaidjs" type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({
+        startOnLoad: true,
+        theme: 'dark',
+    });
+</script>

themes/sukaato/layouts/partials/header.html

@@ -1,2 +1,2 @@
-<h1>{{ site.Title }}</h1>
+<h1 id="title" class="site">{{ site.Title }}</h1>
 {{ partial "menu.html" (dict "menuID" "main" "page" .) }}

themes/sukaato/layouts/partials/math.html

@@ -0,0 +1,15 @@
+<script id="mathjax" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
+<script>
+    MathJax = {
+        tex: {
+            displayMath: [['\\[', '\\]'], ['$$', '$$']],  // block
+            inlineMath: [['$', '$']]                  // inline
+        },
+        loader: {
+            load: ['ui/safe']
+        },
+        output: {
+            font: 'mathjax-asana'
+        }
+    };
+</script>

themes/sukaato/layouts/partials/menu.html

@@ -12,9 +12,9 @@ Renders a menu for the given menu ID.
 
 {{- with index site.Menus $menuID }}
   <nav>
-    <ul>
+    <!-- <ul> -->
       {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-    </ul>
+    <!-- </ul> -->
   </nav>
 {{- end }}
 
@@ -33,7 +33,7 @@ Renders a menu for the given menu ID.
         {{- $name = . }}
       {{- end }}
     {{- end }}
-    <li>
+    <!-- <li> -->
       <a
         {{- range $k, $v := $attrs }}
           {{- with $v }}
@@ -46,6 +46,6 @@ Renders a menu for the given menu ID.
           {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
         </ul>
       {{- end }}
-    </li>
+    <!-- </li> -->
   {{- end }}
 {{- end }}

themes/sukaato/layouts/partials/music-notation.html

@@ -0,0 +1,10 @@
+<script id="abcjs" src="https://cdn.jsdelivr.net/npm/abcjs@6.5.0/dist/abcjs-plugin-min.js"></script>
+<script>
+    ABCJS.plugin.render_options = {
+        add_classes: true,
+        hint_measures: true,
+        responsive: 'resize',
+        tablature: [{instrument: 'guitar'}]
+    };
+    ABCJS.plugin.hide_abc = true;
+</script>

themes/sukaato/layouts/partials/tablature-notation.html

@@ -0,0 +1,3 @@
+<script src="https://jtab.tardate.com/javascripts/jquery.js"></script>
+<script src="https://jtab.tardate.com/javascripts/raphael.js"></script>
+<script src="https://jtab.tardate.com/javascripts/jtab.js"></script>

themes/sukaato/layouts/partials/terms.html

@@ -12,11 +12,11 @@ For a given taxonomy, renders a list of terms assigned to the page.
 
 {{- with $page.GetTerms $taxonomy }}
   {{- $label := (index . 0).Parent.LinkTitle }}
-  <div>
-    <div>{{ $label }}:</div>
-    <ul>
+  <div id="terms">
+    <div id="label" class="terms"><span>{{ $label }}:</span></div>
+    <ul id="directory" class="terms">
       {{- range . }}
-        <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+        <li class="term"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
       {{- end }}
     </ul>
   </div>

themes/sukaato/layouts/tags/list.html

@@ -0,0 +1,28 @@
+{{ define "main" }}
+  <div id="{{ lower .Title }}" class="page tag">
+    <h1>{{ .Title }}</h1>
+    {{ with .Summary }}
+      <p>{{ . }}</p>
+    {{ end }}
+    {{ with .Params.image }}
+      {{ $path := print ".." .Params.image }}
+      <img src="{{ $path }}" alt="{{ lower .Title }}_image">
+    {{ end }}
+      <!-- <img src="images/{{ lower .LinkTitle }}" alt=""> -->
+    </div>
+    {{ with .Content }}
+      <div id="content" class="page">
+        {{ . }}
+      </div>
+    {{ end }}
+    <div id="posts" class="directory">
+    {{ range .Paginator.Pages }}
+    <a href="{{ .RelPermalink }}">
+      <article class="post">
+        <h2>{{ .LinkTitle }}</h2>
+        <p>{{ .Summary }}</p>
+      </article>
+    </a>
+    {{ end }}{{ template "_internal/pagination.html" . }}
+  </div>
+{{ end }}

themes/sukaato/layouts/tags/terms.html

@@ -0,0 +1,18 @@
+{{ define "expo" }}
+<div id="{{ lower .Title }}" class="expo site">
+  <h1 id="title" class="site {{ lower .Title }}">{{ .Title }}</h1>
+  <p id="summary" class="site {{ lower .Title }}">{{ .Content }}</p>
+</div>
+{{ end }}
+{{ define "main" }}
+  <div id="{{ lower .Title }}" class="directory">
+    <dl>
+    {{ range .Data.Pages }}
+      <dt class="tag title"><a href="{{ .Permalink }}">{{ .Title }}</a></dt>
+      {{ with .Summary }}
+        <dd class="tag content">{{ . }}</dd>
+      {{ end }}
+    {{ end }}
+    </dl>
+  </div>
+{{ end }}