initial version of own template

2 files changed, 160 insertions, 0 deletions

diff --git a/sass/_zola.scss b/sass/_zola.scss
new file mode 100644
index 0000000..01fc954
--- /dev/null
+++ b/sass/_zola.scss
@@ -0,0 +1,30 @@
+// -- zola syntax highlighting (https://www.getzola.org/documentation/content/syntax-highlighting/#styling-codeblocks)
+
+pre {
+  padding: 0.5rem;
+  overflow: auto;
+  border-radius: 0.25rem;
+}
+
+pre[data-linenos] {
+  padding: 1rem 0;
+}
+
+pre table td {
+  padding: 0;
+}
+
+pre table td:nth-of-type(1) {
+  text-align: center;
+  user-select: none;
+}
+
+pre mark {
+  display: block;
+  background-color: rgba(254, 252, 232, 0.9);
+}
+
+pre table {
+  width: 100%;
+  border-collapse: collapse;
+}
diff --git a/sass/site.scss b/sass/site.scss
new file mode 100644
index 0000000..c3a3398
--- /dev/null
+++ b/sass/site.scss
@@ -0,0 +1,130 @@
+@import "zola";
+
+// -- color definitions
+
+//$color-bg   : #000000;
+$color-bg   : #202124;
+$color-fg   : #ffffff;
+$color-link : #50fa7b;
+//$color-link : #c792ea;
+
+// -- root style
+
+html {
+  background-color: $color-bg;
+  color: $color-fg;
+  font-family:  "Source Code Pro", "Liberation Mono", "JetBrains Mono", monospace, sans-serif;
+  font-size: clamp(13px, 2vw, 16px);
+}
+
+// -- body style
+
+body {
+  max-width: 80ch;
+  padding: 2ch;
+  margin: auto;
+}
+
+// -- header style
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: 1rem;
+}
+
+h1 {
+  padding-top: 1rem;
+}
+
+h2 {
+  padding-top: 1rem;
+}
+
+h1::after {
+  content: "--------------------------------------------------------------------------------";
+  display:block;
+  overflow: hidden;
+  white-space:nowrap;
+}
+
+h2::before {
+  content: "# "
+}
+
+h3::before {
+  content: "## "
+}
+
+h4::before {
+  content: "### "
+}
+
+h5::before {
+  content: "#### "
+}
+
+h6::before {
+  content: "##### "
+}
+
+// -- link settings
+
+a {
+  color: $color-link;
+  text-decoration: none;
+  border-bottom: 1px solid $color-link;
+}
+
+a:hover {
+  background-color: $color-link;
+  color: $color-bg;
+}
+
+h1 a, h2 a, h3 a, h4 a, h5 a {
+  color: $color-fg;
+}
+
+// -- list style
+
+ul {
+  list-style-type: "- ";
+  padding-left: 2ch;
+}
+
+// -- code style
+
+code {
+  font-weight: bold;
+}
+
+code::before, code::after {
+  content: "*";
+}
+
+pre code {
+  font-weight: normal;
+}
+
+pre code::before, pre code::after {
+  content: none;
+}
+
+// -- misc classes
+
+.extra-notes {
+  color: $color-fg;
+  opacity: 0.5;
+}
+
+// -- playground
+
+//nav {
+//  display: flex;
+//  flex-direction: row;
+//}
+//nav a {
+//  margin: auto;
+//}
+
+//pre {
+//  max-width: 100ch;
+//}