Initial commit.0.8.5

22 files changed, 839 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..81a47aa
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "exampleSite"]
+	path = exampleSite
+	url = https://github.com/gohugoio/hugoBasicExample.git
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..062bb83
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 John Siu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f0211dc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,130 @@
+## Hugo Theme - SK3 (Skeleton 3)
+
+Fully functional basic Hugo theme build on top of [hugo-theme-sk2](https://github.com/J-Siu/hugo-theme-sk2).
+
+### Demo
+
+SK3 demo site: https://sk3.jsiu.dev/
+
+Example site content from [hugoBasicExample](https://github.com/gohugoio/hugoBasicExample)
+
+### Usage
+
+- Clone
+
+    In site directory:
+
+    ```sh
+    git clone https://github.com/J-Siu/hugo-theme-sk3 theme/sk3
+    ```
+
+- Submodule
+
+    In site directory:
+
+    ```sh
+    git submodule add https://github.com/J-Siu/hugo-theme-sk3 theme/sk3
+    ```
+
+### Testing
+
+In `exampleSite`:
+
+```sh
+git clone https://github.com/J-Siu/hugo-theme-sk3 sk3
+cd sk3
+
+# Pull example site.
+git submodule update --recursive --init
+
+cd exampleSite
+hugo server -D --bind :: \
+--disableFastRender \
+--theme sk3 \
+--themesDir ../../ \
+--config config.toml,../config.sk3.toml \
+--verbose
+```
+
+### Features
+
+- Card list
+- Card width (default:290px on computer screen)
+- Collapsible table of content
+- Color theme
+- Copyright start year
+- Disqus - Per page disable
+- Git modify date
+- Google AdSense
+- Google analytics
+- Menu sidebar
+- Mobile ready
+- Optional card date
+- Optional card summary
+- Optional page width
+- Optional prev/next
+- Optional sub-title
+- Social links
+- Social share
+
+### Site Config
+
+```toml
+baseURL = "https://sk3.jsiu.dev"
+title = "SK3"
+copyright = ""
+
+enableGitInfo = false
+relativeURLs = true
+theme = "sk3"
+
+[Params]
+startdate = "2012-12-02"
+subtitle  = "A Hugo Themes"
+toc       = true
+adsense   = ""
+homepage  = false
+maxwidth  = "1900"
+
+[Params.card]
+width = "290px"
+date  = true
+summary   = true
+
+[Params.color]
+bg-color     = "#181a1b"
+border-color = "white"
+link-color   = "#3d84ff"
+text-color   = "white"
+```
+
+### Front Matter
+
+```toml
+comment = false
+prevnext = false
+toc = false
+```
+
+### TODO
+
+- README.md
+- Meta
+- Optional Home page
+- Clean up css
+  - refactor margin, padding
+  - color conflict with markup
+- Include share button
+
+### Repository
+
+- [hugo-theme-sk3](https://github.com/J-Siu/hugo-theme-sk3)
+
+### Contributors
+
+- [John Sing Dao Siu](https://github.com/J-Siu)
+
+### Change Log
+
+- 0.8.5
+  - Initial Commit
\ No newline at end of file
diff --git a/archetypes/default.md b/archetypes/default.md
new file mode 100644
index 0000000..ac36e06
--- /dev/null
+++ b/archetypes/default.md
@@ -0,0 +1,2 @@
++++
++++
diff --git a/config.sk3.toml b/config.sk3.toml
new file mode 100644
index 0000000..b14bb26
--- /dev/null
+++ b/config.sk3.toml
@@ -0,0 +1,109 @@
+baseURL = "https://sk3.jsiu.dev"
+theme   = "sk3"
+title   = "SK3"
+
+enableGitInfo = true
+#paginate      = 24
+DefaultContentLanguage = "en"
+enableInlineShortcodes = true
+languageCode           = "en"
+paginate               = 3
+relativeURLs           = true
+
+#disqusShortname = ""
+#googleAnalytics = ""
+
+disqusShortname = "https-johnsiu-com"
+googleAnalytics = "UA-36805525-1"     # optional
+
+[Params]
+#maintype  = "post"
+pagewidth = "1024px"
+startdate = "2012-12-02"
+subtitle  = "A Hugo Themes"
+toc       = true
+
+homepage = false
+# AdSense
+adsense = ""
+
+opengraph   = false
+twitercards = false
+# Fill in following if using opengraph / twitter card
+description = "A Hugo Theme"
+images      = [ "site-feature-image.jpg" ]
+title       = "SK3"
+
+	[Params.sociallink]
+	facebook       = "john.siu.714"
+	flickr         = "johnsiu-com"
+	instagram      = "john.sd.siu"
+	linkedin       = "john-sing-dao-siu"
+	pinterest      = "johnsdsiu"
+	reddit         = "js1943"
+	tumblr         = "jsds"
+	twitter        = "JohnSiuCom"
+	vimeo          = "user88929197"
+	youtubechannel = "UC5LvdqfL2PubOp904UnUJAg"
+	youtubeuser    = "JohnSDSiu"
+
+	[Params.socialshare]
+	facebook  = true
+	instagram = true
+	linkedin  = true
+	pinterest = true
+	reddit    = true
+	telegram  = true
+	twitter   = true
+	vk        = true
+
+	[Params.card]
+	date    = true
+	summary = true
+	#width   = "100%"
+
+	[Params.color]
+	bg     = "#181a1b"
+	border = "white"
+	link   = "#3d84ff"
+	text   = "white"
+
+	# [menu]
+	# 	[[menu.main]]
+	# 	identifier = "about"
+	# 	name       = "About"
+	# 	url        = "/about/"
+	# 	weight     = 10
+	# 	[[menu.main]]
+	# 	name = "Tags"
+	# 	url  = "/tags/"
+
+[markup]
+  [markup.tableOfContents]
+    endLevel = 6
+    startLevel = 3
+  [markup.goldmark]
+    [markup.goldmark.extensions]
+      definitionList = true
+      footnote = true
+      linkify = true
+      strikethrough = true
+      table = true
+      taskList = true
+      typographer = true
+    [markup.goldmark.parser]
+      attribute = true
+      autoHeadingID = true
+    [markup.goldmark.renderer]
+      hardWraps = false
+      unsafe = true
+      xHTML = false
+  [markup.highlight]
+    codeFences = true
+    hl_Lines = ""
+    lineNoStart = 1
+    lineNos = true
+    lineNumbersInTable = true
+    noClasses = true
+    #style = "monokai"
+    tabWidth = 4
\ No newline at end of file
diff --git a/data/social.toml b/data/social.toml
new file mode 100644
index 0000000..57ceb6d
--- /dev/null
+++ b/data/social.toml
@@ -0,0 +1,44 @@
+[[site]]
+cls = "fa fa-facebook"
+id  = "facebook"
+url = "https://www.facebook.com/%s/"
+[[site]]
+cls = "fa fa-flickr"
+id  = "flickr"
+url = "https://www.flickr.com/photos/%s/"
+[[site]]
+cls = "fa fa-instagram"
+id  = "instagram"
+url = "https://www.instagram.com/%s/"
+[[site]]
+cls = "fa fa-linkedin"
+id  = "linkedin"
+url = "https://www.linkedin.com/in/%s/"
+[[site]]
+cls = "fa fa-pinterest"
+id  = "pinterest"
+url = "https://www.pinterest.com/%s/boards/"
+[[site]]
+cls = "fa fa-reddit"
+id  = "reddit"
+url = "https://www.reddit.com/user/%s"
+[[site]]
+cls = "fa fa-tumblr"
+id  = "tumblr"
+url = "https://www.tumblr.com/dashboard/blog/%s/"
+[[site]]
+cls = "fa fa-twitter"
+id  = "twitter"
+url = "https://twitter.com/%s"
+[[site]]
+cls = "fa fa-vimeo"
+id  = "vimeo"
+url = "https://vimeo.com/%s"
+[[site]]
+cls = "fa fa-youtube"
+id  = "youtubeuser"
+url = "https://www.youtube.com/user/%s"
+[[site]]
+cls = "fa fa-youtube"
+id  = "youtubechannel"
+url = "https://www.youtube.com/channel/%s"
diff --git a/exampleSite b/exampleSite
new file mode 160000
+Subproject e4440a1848c1780a45b8ff0508a1d9154c4665a
diff --git a/layouts/404.html b/layouts/404.html
new file mode 100644
index 0000000..14e4474
--- /dev/null
+++ b/layouts/404.html
@@ -0,0 +1,7 @@
+{{define "main"}}
+<div>
+
+	Page Not Found.
+
+</div>
+{{end}}
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..e43f994
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+{{- partial "head.html" . -}}
+
+<body>
+	{{- partial "header.html" . -}}
+	<div id="content">
+		{{- block "main" . }}{{- end }}
+	</div>
+	{{- partial "footer.html" . -}}
+</body>
+
+</html>
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
new file mode 100644
index 0000000..21c0d8a
--- /dev/null
+++ b/layouts/_default/list.html
@@ -0,0 +1,46 @@
+{{define "main"}}
+<div class="main">
+
+	{{with .Title}}<div><heading>{{.}}</heading></div>{{end}}
+	{{with .Content}}<div><article>{{.}}</article></div>{{end}}
+
+	<!--Set type-->
+	{{if .Site.Params.mainType}}
+	{{.Scratch.Set "type" .Site.Params.mainType}}
+	{{else}}
+	{{.Scratch.Set "type" "post"}}
+	{{end}}
+
+	<!--Set paginator base on .IsHome-->
+	{{if .IsHome}}
+	{{.Scratch.Set "Paginator" (.Paginate (where .Site.RegularPages "Type" (.Scratch.Get "type")))}}
+	{{else}}
+	{{.Scratch.Set "Paginator" .Paginator}}
+	{{end}}
+	{{$paginator:=(.Scratch.Get "Paginator")}}
+
+	<!--pagination-->
+	<div class="flex center">{{template "_internal/pagination.html" .}}</div>
+
+	<!--cards-->
+	<section class="flex center">
+	{{range $paginator.Pages}}
+	<div class="card box">
+		<div class="flex">
+		<h3><a href="{{.RelPermalink}}">{{.Title}}</a></h3>
+		{{if .Site.Params.card.date}}
+			{{with .Lastmod}}<div class="flex-right flex-down">{{dateFormat "2006-01-02" .}}</div>{{end}}
+		{{end}}
+	</div>
+		{{if .Site.Params.card.summary}}<div>{{.Summary}}</div>{{end}}
+	</div>
+	{{end}}
+	</section>
+
+	<!--pagination-->
+	<div class="flex center"><div>{{template "_internal/pagination.html" .}}</div></div>
+
+	{{partial "social-link.html" .}}
+
+</div>
+{{end}}
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..d61eed2
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,57 @@
+{{define "main"}}
+<div class="main">
+
+	{{with .Title}} <heading>
+		<h1>{{.}}</h1>
+	</heading> {{end}}
+
+	{{if and .Site.Params.toc (.Param "toc")}}
+	<div class="toc-box">
+		<div class="collapsible">Table of Content</div>
+		<toc>{{.TableOfContents}}</toc>
+	</div>
+	{{end}}
+
+	{{with .Content}}<content>{{.}}</content>{{end}}
+	{{with .Lastmod}}<div>Update: {{dateFormat "2006-01-02" .}}</div>{{end}}
+
+	<!--share-->
+	{{ partial "social-share.html" . }}
+
+	<!--tags-->
+	{{if (.GetTerms "tags")}}
+		<div class="flex">
+			<div class="pad-r-5px">Tags:</div>
+			{{range (.GetTerms "tags")}}
+			<div class="pad-r-5px"><a href="{{.RelPermalink}}">{{.LinkTitle}}</a></div>
+			{{end}}
+		</div>
+	{{end}}
+
+	<!--prev/next-->
+	{{if (.Param "prevnext")}}
+		{{if or .PrevInSection .NextInSection}}
+		<div class="flex">
+			{{with .PrevInSection}}<a href="{{.RelPermalink}}"><< {{.Title}}</a> {{end}}
+			{{with .NextInSection}}<a class="flex-right" href="{{.RelPermalink}}">{{.Title}} >></a>{{end}}
+		</div>
+		{{end}}
+	{{end}}
+
+	<!--related-->
+	{{$related := .Site.RegularPages.Related . | first 5}}
+	{{with $related}}
+	<h3>See Also</h3>
+	<ul>
+		{{range .}}
+		<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
+		{{end}}
+	</ul>
+	{{end}}
+
+	<!--disqus-->
+	{{if and .Site.DisqusShortname (.Param "comment")}}
+		{{template "_internal/disqus.html" .}}
+	{{end}}
+</div>
+{{end}}
\ No newline at end of file
diff --git a/layouts/partials/adsense.html b/layouts/partials/adsense.html
new file mode 100644
index 0000000..547a123
--- /dev/null
+++ b/layouts/partials/adsense.html
@@ -0,0 +1,9 @@
+{{if .Site.Params.adsense}}
+<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+<script>
+	(adsbygoogle = window.adsbygoogle || []).push({
+		google_ad_client: "{{.Site.Params.Adsense.ads_id}}",
+		enable_page_level_ads: true
+	});
+</script>
+{{end}}
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
new file mode 100644
index 0000000..0537059
--- /dev/null
+++ b/layouts/partials/footer.html
@@ -0,0 +1,22 @@
+<footer class="flex center">
+
+	{{if .Site.Copyright}}
+		<div class="pad-r-5px">{{.Site.Copyright}}</div>
+	{{else}}
+		<div class="pad-r-5px">
+		©
+		{{with .Site.Params.startdate}}
+			{{dateFormat "2006" .}}-
+		{{- end}}
+		{{- now.Format "2006"}} {{.Site.Title}}
+		</div>
+	{{end}}
+	<div class="pad-r-5px">Power by <a href="https://gohugo.io">Hugo</a>.</div>
+	<div>Theme <a href="https://github.com/J-Siu/hugo-theme-sk3/">SK3</a> by <a href="https://github.com/J-Siu/">J-Siu</a>.</div>
+
+</footer>
+
+<!--js-->
+{{with .Site.Menus.main}}
+<script src="{{relLangURL ""}}js/sk3.js"></script>
+{{end}}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
new file mode 100644
index 0000000..e5034da
--- /dev/null
+++ b/layouts/partials/head.html
@@ -0,0 +1,26 @@
+<head>
+	<!--Meta-->
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{.Site.Title}}{{if not .IsHome}} | {{.Title}}{{end}}</title>
+	<meta name="description" content="{{if .IsHome}}{{.Site.Params.description}}{{else}}{{.Description}}{{end}}">
+	<!--css-->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="{{relLangURL ""}}css/sk3.css">
+	<link rel="stylesheet" href="{{relLangURL ""}}css/social.css">
+	<!--.Site.Params-->
+	<style>
+		{{with .Site.Params.card.width}}@media only screen and (min-width: 993px){:root{--card-width: {{.}};}}{{end}}
+		{{with .Site.Params.pagewidth}}@media only screen and (min-width: 993px){:root{--html-width: {{.}};}}{{end}}
+		{{with .Site.Params.color.bg}}:root{--bg-color:{{.}};}{{end}}
+		{{with .Site.Params.color.border}}:root{--border-color:{{.}};}{{end}}
+		{{with .Site.Params.color.link}}:root{--link-color:{{.}};}{{end}}
+		{{with .Site.Params.color.text}}:root{--text-color:{{.}};}{{end}}
+	</style>
+	<!--hugo internal template-->
+	{{template "_internal/google_analytics_async.html" .}}
+	{{if .Site.Params.opengraph}}{{template "_internal/opengraph.html" .}}{{end}}
+	{{if .Site.Params.twittercards}}{{template "_internal/twitter_cards.html" .}}{{end}}
+	<!--AdSense-->
+	{{partial "adsense.html" .}}
+</head>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
new file mode 100644
index 0000000..7a6b860
--- /dev/null
+++ b/layouts/partials/header.html
@@ -0,0 +1,43 @@
+<header class="flex">
+
+<div class="flex">
+	<h1 class="flex-center-v menu-button">☰</h1>
+	<h1><a href="{{relLangURL ""}}">{{.Site.Title}}</a></h1>
+{{with .Site.Params.subtitle}}<h3 class="subtitle flex-center-v">{{.}}</h3>{{end}}
+</div>
+
+{{if .Site.Menus.main}}
+<nav class="sidebar box-right" id="menu-bar">
+	<h1 class="flex-center-v menu-button">☰</h1>
+	{{partial "social-link.html" .}}
+	<h4>
+	{{$currentPage := .}}
+	{{range .Site.Menus.main}}
+		{{if .HasChildren}}
+		<li class="{{if $currentPage.HasMenuCurrent "main" .}}active{{end}}">
+			<a href="#">
+				{{.Pre}}
+				<span>{{.Name}}</span>
+			</a>
+		</li>
+		<ul>
+			{{range .Children}}
+			<li class="{{if $currentPage.IsMenuCurrent "main" .}}active{{end}}">
+				<a href="{{.URL}}">{{.Name}}</a>
+			</li>
+			{{end}}
+		</ul>
+		{{else}}
+		<li>
+			<a href="{{.URL}}">
+				{{.Pre}}
+				<span>{{.Name}}</span>
+			</a>
+		</li>
+		{{end}}
+	{{end}}
+	</h4>
+</nav>
+{{end}}
+
+</header>
\ No newline at end of file
diff --git a/layouts/partials/social-link.html b/layouts/partials/social-link.html
new file mode 100644
index 0000000..1215989
--- /dev/null
+++ b/layouts/partials/social-link.html
@@ -0,0 +1,9 @@
+<div class="flex center">
+	<h2>
+		{{range .Site.Data.social.site}}
+		{{if isset $.Site.Params.sociallink .id}}
+		<a href="{{printf .url (index $.Site.Params.sociallink .id)}}" class="{{.cls}}"></a>
+		{{end}}
+		{{end}}
+	</h2>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/social-share.html b/layouts/partials/social-share.html
new file mode 100644
index 0000000..07b5828
--- /dev/null
+++ b/layouts/partials/social-share.html
@@ -0,0 +1,41 @@
+<div class="flex center">
+	{{if .Site.Params.socialshare.facebook}}
+	<a target="_blank" rel="noopener noreferrer" class="fa fa-facebook"
+		href="https://www.facebook.com/sharer/sharer.php?u={{.Permalink}}"
+		onclick="window.open(this.href, 'Facebook', 'width=800,height=600,toolbar=0,status=0'); return false"></a>
+	{{end}}
+	{{if .Site.Params.socialshare.twitter}}
+	<a target="_blank" rel="noopener noreferrer" class="fa fa-twitter"
+		href="https://twitter.com/intent/tweet/?url={{.Permalink}}&amp;text={{.Title}}"
+		onclick="window.open(this.href, 'Twitter', 'width=800,height=450,resizable=yes,toolbar=0,status=0'); return false"></a>
+	{{end}}
+	{{if .Site.Params.socialshare.reddit}}
+	<a target="_blank" rel="noopener noreferrer" class="fa fa-reddit"
+		href="https://www.reddit.com/submit?url={{.Permalink}}&amp;title={{.Title}}"
+		onclick="window.open(this.href, 'Reddit', 'width=832,height=624,toolbar=0,status=0'); return false"></a>
+	{{end}}
+	{{if .Site.Params.socialshare.telegram}}
+	<a target="_blank" rel="noopener noreferrer" class="fa fa-telegram"
+		href="https://t.me/share/url?url={{.Permalink}}&amp;title={{.Title}}"
+		onclick="window.open(this.href, 'Telegram', 'width=800,height=600,toolbar=0,status=0'); return false"></a>
+	{{end}}
+	{{if .Site.Params.socialshare.linkedin}}
+	<a target="_blank" rel="noopener noreferrer" class="fa fa-linkedin"
+		href="https://www.linkedin.com/shareArticle?mini=true&url={{.Permalink}}&title={{.Title}}"
+		onclick="window.open(this.href, 'LinkedIn', 'width=640,height=480,toolbar=0,status=0'); return false"></a>
+	{{end}}
+	{{if .Site.Params.socialshare.vk}}
+	<a target="_blank" rel="noopener noreferrer" class="fa fa-vk" href="https://vk.com/share.php?url={{.Permalink}}"
+		onclick="window.open(this.href, 'VK', 'width=640,height=480,toolbar=0,status=0'); return false"></a>
+	{{end}}
+	{{if .Site.Params.socialshare.pocket}}
+	<a target="_blank" rel="noopener noreferrer" class="fa fa-pocket"
+		href="https://getpocket.com/edit?url={{.Permalink}}&amp;title={{.Title}}"
+		onclick="window.open(this.href, 'Pocket', 'width=480,height=320,toolbar=0,status=0'); return false"></a>
+	{{end}}
+	{{if .Site.Params.socialshare.pinterest}}
+	<a target="_blank" rel="noopener noreferrer" class="fa fa-pinterest"
+		href="https://pinterest.com/pin/create/button/?url={{.Permalink}}&description={{.Title}}"
+		onclick="window.open(this.href, 'Pinterest', 'width=800,height=720,toolbar=0,status=0'); return false"></a>
+	{{end}}
+</div>
\ No newline at end of file
diff --git a/static/css/sk3.css b/static/css/sk3.css
new file mode 100644
index 0000000..f339dd3
--- /dev/null
+++ b/static/css/sk3.css
@@ -0,0 +1,216 @@
+:root {
+  --card-width: 290px;
+  --html-width: 100%;
+  --bg-color: #181a1b;
+  --border-color: white;
+  --text-color: white;
+  --link-color: #3d84ff;
+}
+
+@media only screen and (max-width: 992px) {
+  .card {
+    width: 100%
+  }
+}
+
+@media only screen and (min-width: 993px) {
+  .card {
+    width: var(--card-width);
+  }
+}
+
+* {
+  font-family: Arial, Helvetica, sans-serif;
+  color: var(--text-color);
+  /*border-color: var(--border-color);*/
+  border-color: blue;
+  background-color: var(--bg-color);
+  /*
+	border: 1px solid black;
+	*/
+}
+
+html {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--html-width);
+
+}
+
+.box {
+  border: 1px solid;
+  border-color: var(--border-color);
+}
+
+.box-right {
+  border-right: 1px solid;
+}
+
+.box-top {
+  border-top: 1px solid;
+}
+
+.center {
+  justify-content: center;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.no-dot {
+  list-style-type: none;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+header a,
+header h1,
+header h2,
+header h3,
+header h4 {
+  padding-block-start: 0;
+  padding-block-end: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding: 0px;
+  margin: 0px;
+}
+
+.flex-right {
+  display: flex;
+  margin-left: auto;
+  vertical-align: baseline;
+}
+
+.flex-down {
+  margin-top: auto;
+}
+
+.flex-up {
+  margin-bottom: auto;
+}
+
+.flex-center-v {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.pagination li {
+  list-style-type: none;
+  display: inline-block;
+  margin-left: 5px;
+  font-size: 1.17em;
+  font-weight: bold;
+  padding-left: 0.3em;
+  padding-right: 0.3em;
+}
+
+.pagination {
+  padding: 1px;
+}
+
+.subtitle {
+  margin-left: 5px;
+  margin-top: auto;
+}
+
+.main,
+header,
+footer {
+  margin-right: 10px;
+  margin-left: 10px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.card {
+  padding: 10px;
+  margin: 5px;
+  /*width: 300px;*/
+  box-sizing: border-box;
+}
+
+.card h3 {
+  margin-block-end: 1px;
+  margin-block-start: 1px;
+}
+
+.card p {
+  margin-block-end: 1px;
+  margin-block-start: 5px;
+}
+
+.toc-box {
+  border: 1px solid black;
+  padding: 5px;
+}
+
+toc {
+  display: none;
+}
+
+toc li {
+  list-style-type: none;
+}
+
+toc ul {
+  margin-left: 1px;
+  padding-left: 1;
+}
+
+toc ul ul {
+  margin-left: 1px;
+  padding-left: 15px;
+}
+
+toc ul ul ul {
+  margin-left: 1px;
+  padding-left: 30px;
+}
+
+toc ul ul ul ul {
+  margin-left: 1px;
+  padding-left: 45px;
+}
+
+toc ul ul ul ul ul {
+  margin-left: 1px;
+  padding-left: 60px;
+}
+
+toc ul ul ul ul ul ul {
+  margin-left: 1px;
+  padding-left: 75px;
+}
+
+.pad-l-5px {
+  padding-left: 5px;
+}
+
+.pad-r-5px {
+  padding-right: 5px;
+}
+
+.sidebar {
+  background-color: var(--bg-color);
+  height: 100%;
+  width: 200px;
+  position: fixed !important;
+  z-index: 1;
+  overflow: auto;
+  display: none;
+}
+
+.sidebar h1 {
+  font-size: 2em;
+}
\ No newline at end of file
diff --git a/static/css/social.css b/static/css/social.css
new file mode 100644
index 0000000..9f7c8c3
--- /dev/null
+++ b/static/css/social.css
@@ -0,0 +1,12 @@
+.fa {
+  padding: 5px;
+  text-align: center;
+  text-decoration: none;
+	margin: 5px 2px;
+	width: 16px;
+	opacity: 0.7;
+}
+
+.fa:hover {
+		opacity: 1;
+}
\ No newline at end of file
diff --git a/static/js/sk3.js b/static/js/sk3.js
new file mode 100644
index 0000000..a00e5a4
--- /dev/null
+++ b/static/js/sk3.js
@@ -0,0 +1,17 @@
+var m = document.getElementsByClassName("menu-button");
+for (var i = 0; i < m.length; i++) {
+	var e =  document.getElementById("menu-bar");
+	m[i].addEventListener("click", function () {
+		e.style.display === "block" ? e.style.display = "none" : e.style.display = "block";
+	},false)
+}
+
+var c = document.getElementsByClassName("collapsible");
+for (var i = 0; i < c.length; i++) {
+	c[i].display="none"
+	c[i].addEventListener("click", function () {
+		this.classList.toggle(false);
+		var e = this.nextElementSibling;
+		e.style.display === "block" ? e.style.display = "none" : e.style.display = "block";
+	},false)
+}
\ No newline at end of file
diff --git a/theme.toml b/theme.toml
new file mode 100644
index 0000000..ad887e0
--- /dev/null
+++ b/theme.toml
@@ -0,0 +1,12 @@
+name = "sk3"
+license = "MIT"
+licenselink = "https://github.com/J-Siu/hugo-theme-sk3/blob/master/LICENSE"
+description = "Fully functional basic Hugo theme, no css, no javascript."
+homepage = "https://sk3.jsiu.dev/"
+tags = ["blog"]
+features = []
+min_version = "0.65.0"
+
+[author]
+  name = "John Siu"
+  homepage = "https://github.com/J-Siu"
\ No newline at end of file