imp: Revamp the initial page

docs/assets/css/extensions/tabbed.css

@@ -0,0 +1,41 @@
+.tabbed-set {
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+.tabbed-set .highlight {
+  background: #ddd;
+}
+
+.tabbed-set .tabbed-content {
+  display: none;
+  order: 99;
+  width: 100%;
+}
+
+.tabbed-set label {
+  width: auto;
+  margin: 0 0.5em;
+  padding: 0.25em;
+  font-size: 120%;
+  cursor: pointer;
+  color: #ffffff !important;
+}
+
+.tabbed-set input {
+  position: absolute;
+  opacity: 0;
+}
+
+.tabbed-set input:nth-child(n+1) {
+  color: #333333;
+}
+
+.tabbed-set input:nth-child(n+1):checked + label {
+    color: cyan !important;
+}
+
+.tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
+    display: block;
+}

docs/assets/css/extra.css

@@ -0,0 +1,6 @@
+@import "style/admonition.css";
+@import "style/blog.css";
+@import "style/colors.css";
+@import "style/comments.css";
+@import "style/frontpage.css";
+@import "style/padding.css";

docs/assets/css/style/admonition.css

@@ -0,0 +1,23 @@
+:root {
+    --admonition-icon--file: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M3 3a2 2 0 0 1 2-2h9.982a2 2 0 0 1 1.414.586l4.018 4.018A2 2 0 0 1 21 7.018V21a2 2 0 0 1-2 2H4.75a.75.75 0 0 1 0-1.5H19a.5.5 0 0 0 .5-.5V8.5h-4a2 2 0 0 1-2-2v-4H5a.5.5 0 0 0-.5.5v6.25a.75.75 0 0 1-1.5 0Zm12-.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0-.146-.336l-4.018-4.018A.5.5 0 0 0 15 2.5Z"></path><path d="M4.53 12.24a.75.75 0 0 1-.039 1.06l-2.639 2.45 2.64 2.45a.75.75 0 1 1-1.022 1.1l-3.23-3a.75.75 0 0 1 0-1.1l3.23-3a.75.75 0 0 1 1.06.04Zm3.979 1.06a.75.75 0 1 1 1.02-1.1l3.231 3a.75.75 0 0 1 0 1.1l-3.23 3a.75.75 0 1 1-1.021-1.1l2.639-2.45-2.64-2.45Z"></path></svg>');
+
+    --admonition-color-fg--file: #00c853;
+    --admonition-color-bg--file: #00c8531a;
+}
+
+.md-typeset .admonition.file,
+.md-typeset details.file {
+    border-color: var(--admonition-color-fg--file);
+}
+
+.md-typeset .file > .admonition-title,
+.md-typeset .file > summary {
+    background-color: var(--admonition-color-bg--file);
+}
+
+.md-typeset .file > .admonition-title::before,
+.md-typeset .file > summary::before {
+    background-color: var(--admonition-color-fg--file);
+    -webkit-mask-image: var(--admonition-icon--file);
+            mask-image: var(--admonition-icon--file);
+}

docs/assets/css/style/blog.css

@@ -0,0 +1,12 @@
+.md-meta__item > .twemoji svg {
+    fill: currentColor;
+    max-height: 100%;
+    width: 1.125em;
+    vertical-align: text-top;
+}
+
+hr {
+    border-bottom: .05rem solid var(--md-default-fg-color--lightest);
+    display: flow-root;
+    margin: 1.5em 0;
+}

docs/assets/css/style/colors.css

@@ -0,0 +1,25 @@
+:root {
+    --md-primary-fg-color: #2e2e2e;
+}
+
+@media screen {
+    [data-md-color-scheme="slate"] {
+        --md-typeset-a-color: #526cfe;
+    }
+}
+
+div.footnote > hr {
+    display: none;
+}
+
+.octicons-true {
+    color: #3FB950;
+}
+
+.octicons-false {
+    color: #F85149;
+}
+
+.md-typeset .md-button {
+    color: var(--md-typeset-a-color);
+}

docs/assets/css/style/comments.css

@@ -0,0 +1,170 @@
+:root{
+  --mastodon-comment-indent: 40px;
+  --mastodon-comment-border-radius: .2rem;
+
+  --mastodon-comment-bg-color: #313543;
+  --mastodon-comment-border-color: #393f4f;
+
+  --mastodon-comment-username-color: #fff;
+  --mastodon-comment-usertag-color: #d9e1e8;
+
+  --mastodon-comment-date-color: #606984;
+  --mastodon-comment-link-color: #8c8dff;
+  --mastodon-comment-hashtag-color: #d9e1e8;
+
+  --mastodon-comment-status-inactive: #606984;
+  --mastodon-comment-status-inactive__hover: #707b97;
+  --mastodon-comment-status-inactive-bg__hover: rgba(96,105,132,.15);
+
+  --mastodon-comment-status-replies--active: #448aff;
+  --mastodon-comment-status-favourite--active: #ca8f04;
+  --mastodon-comment-status-reblog--active: #8c8dff;
+}
+
+[data-md-color-scheme="default"] :root {
+  --mastodon-comment-bg-color: #fff;
+  --mastodon-comment-border-color: #c0cdd9;
+
+  --mastodon-comment-username-color: #000;
+  --mastodon-comment-usertag-color: #282c37;
+
+  --mastodon-comment-date-color: #444b5d;
+  --mastodon-comment-link-color: #3a3bff;
+  --mastodon-comment-hashtag-color: #3a3bff;
+
+  --mastodon-comment-status-inactive__hover: #51596f;
+}
+
+@media only screen and (max-width: 1024px){
+  :root{
+    --mastodon-comment-indent: 20px;
+  }
+}
+
+@media only screen and (max-width: 640px){
+  :root{
+    --mastodon-comment-indent: 0px;
+  }
+}
+
+.mastodon-comment{
+  background-color: var(--mastodon-comment-bg-color);
+  border-radius: var(--mastodon-comment-border-radius);
+  border: 1px var(--mastodon-comment-border-color) solid;
+  padding: 20px;
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.mastodon-comment p{
+  margin-bottom: 0px;
+}
+
+.mastodon-comment .content{
+  margin: 15px 20px;
+}
+
+.mastodon-comment .content p:first-child{
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.mastodon-comment .content a {
+  color: var(--mastodon-comment-link-color);
+}
+
+.mastodon-comment .content a:hover {
+  text-decoration: underline;
+}
+
+.mastodon-comment .attachments{
+  max-width: 0px 10px;
+}
+
+.mastodon-comment .attachments > *{
+  max-width: 0px 10px;
+}
+
+.mastodon-comment .author{
+  padding-top: 0;
+  display: flex;
+}
+
+.mastodon-comment .author a{
+  text-decoration: none;
+}
+
+.mastodon-comment .author .avatar img{
+  margin-right: 1rem;
+  min-width: 60px;
+  border-radius: 5px;
+}
+
+.mastodon-comment .author .details{
+  display: flex;
+  flex-direction: column;
+}
+
+.mastodon-comment .author .details .name{
+  font-weight: bold;
+  color: var(--mastodon-comment-username-color);
+}
+
+a.name:hover {
+  text-decoration: underline;
+}
+
+a.mention.hashtag {
+  color: var(--mastodon-comment-hashtag-color);
+}
+
+.mastodon-comment .author .details .user{
+  color: var(--mastodon-comment-usertag-color);
+}
+
+.mastodon-comment .author .date{
+  margin-left: auto;
+  font-size: small;
+  color: var(--mastodon-comment-date-color);
+}
+
+.mastodon-comment .status > div{
+  display: inline-block;
+  margin-right: 15px;
+}
+
+.mastodon-comment .status {
+  margin-left: 15px;
+}
+
+.mastodon-comment .status a{
+  color: var(--mastodon-comment-status-inactive);
+  text-decoration: none;
+
+  padding: .2rem;
+  border-radius: .2rem;
+}
+
+.mastodon-comment .status a:hover {
+  color: var(--mastodon-comment-status-inactive__hover);
+  background-color: var(--mastodon-comment-status-inactive-bg__hover);
+  transition: all .2s ease-out;
+}
+
+.mastodon-comment .status .replies.active *{
+  color: var(--mastodon-comment-status-replies--active);
+}
+
+.mastodon-comment .status .reblogs.active a{
+  color: var(--mastodon-comment-status-reblog--active);
+}
+
+.mastodon-comment .status .favourites.active a{
+  color: var(--mastodon-comment-status-favourite--active);
+}
+
+.mastodon-comment .status svg{
+  margin: 0 0.2rem;
+  vertical-align: middle;
+}

docs/assets/css/style/frontpage.css

@@ -0,0 +1,52 @@
+:root {
+    --md-button-color--discord: #5865F2;
+    --md-button-color--mastodon: #6364FF;
+}
+
+.mdx-container {
+    display: block;
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    background: linear-gradient(var(--md-primary-fg-color), var(--md-primary-fg-color) 100px, var(--md-default-bg-color) 100px);
+
+}
+
+.mdx-container .mdx-hero {
+    text-align: center;
+}
+
+.mdx-container .mdx-hero img {
+    border-radius: 100%;
+}
+
+.mdx-container .mdx-hero .mdx-description {
+    max-width: 35rem;
+    font-size: 1.6rem;
+    line-height: 1.3;
+}
+
+.mdx-container .mdx-hero .mdx-description,
+.mdx-container .mdx-hero .mdx-button {
+    margin: 1.8rem auto;
+}
+
+.md-typeset .md-button--discord {
+    border-color: var(--md-button-color--discord);
+    color: var(--md-button-color--discord);
+}
+
+.md-typeset .md-button--discord:hover {
+    background-color: var(--md-button-color--discord);
+    border-color: var(--md-button-color--discord);
+}
+
+.md-typeset .md-button--mastodon {
+    border-color: var(--md-button-color--mastodon);
+    color: var(--md-button-color--mastodon);
+}
+
+.md-typeset .md-button--mastodon:hover {
+    background-color: var(--md-button-color--mastodon);
+    border-color: var(--md-button-color--mastodon);
+}

docs/assets/css/style/padding.css

@@ -0,0 +1,34 @@
+.md-tabs__item {
+    height: 2rem;
+}
+
+.md-tabs__link {
+    margin-top: .4rem;
+}
+
+.md-header__button.md-logo img, .md-header__button.md-logo svg {
+    width: 2.4rem;
+    height: 2.4rem;
+}
+
+.md-nav__item--section > .md-nav > .md-nav__list {
+    margin-left: 0.5rem;
+}
+
+.md-typeset .grid.cards > ul > li {
+    display: flex;
+    flex-direction: column;
+}
+
+.md-typeset .grid.cards > ul > li > hr {
+    margin-top: .5em;
+}
+
+.grid.cards li p:last-child {
+    flex-grow: 2;
+    display: flex;
+}
+
+.grid.cards li p:last-child a {
+    align-self: flex-end;
+}

docs/assets/img/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/assets/img/favicons/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"//assets/img/favicons/logo-small-3.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

docs/assets/js/timeago_mkdocs_material.js

@@ -0,0 +1,18 @@
+// Script to ensure timeago keeps working when 
+// used with mkdocs-material's instant loading feature 
+
+if (typeof document$ !== "undefined") {
+    document$.subscribe(function() {
+        var nodes = document.querySelectorAll('.timeago');
+        if (nodes.length > 0) {
+          var locale = nodes[0].getAttribute('locale');
+          timeago.render(nodes, locale);
+        }
+    })
+} else {
+    var nodes = document.querySelectorAll('.timeago');
+    if (nodes.length > 0) {
+      var locale = nodes[0].getAttribute('locale');
+      timeago.render(nodes, locale);
+    }
+}