docula 0.0.5

package/init/_includes/assets/css/highlight/styles/base16/dracula.min.css

@@ -0,0 +1,7 @@
+/*!
+  Theme: Dracula
+  Author: Mike Barkmin (http://github.com/mikebarkmin) based on Dracula Theme (http://github.com/dracula)
+  License: ~ MIT (or more permissive) [via base16-schemes-source]
+  Maintainer: @highlightjs/core-team
+  Version: 2021.09.0
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#e9e9f4;background:#282936}.hljs ::selection,.hljs::selection{background-color:#4d4f68;color:#e9e9f4}.hljs-comment{color:#626483}.hljs-tag{color:#62d6e8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#e9e9f4}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ea51b2}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#b45bcf}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#00f769}.hljs-strong{font-weight:700;color:#00f769}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#ebff87}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#a1efe4}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#62d6e8}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#b45bcf}.hljs-emphasis{color:#b45bcf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#00f769}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}

package/init/_includes/assets/css/styles/home.css

@@ -0,0 +1,256 @@
+.header-logo {
+  margin-right: 30px;
+}
+
+.home-header {
+  position: sticky;
+  background-color: var(--home-background);
+  border-bottom: 1px solid var(--border);
+}
+
+.home-hero {
+  padding: 56px 0;
+  background-color: var(--home-background)
+}
+
+.home-container {
+  margin-left: 32px;
+  margin-right: 32px;
+  color: var(--color-text);
+}
+
+.home-title {
+  text-align: center;
+  margin-bottom: 32px;
+  font-size: 30px;
+  background: linear-gradient(30deg, var(--color-primary) 40%, var(--color-secondary-dark) 70%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.home-hero {
+  text-align: center;
+}
+
+.home-hero img {
+  width: 100%;
+  max-width: 120px;
+  margin-bottom: 36px;
+}
+
+.content-container {
+  margin: 96px 0;
+}
+
+.facepile-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.facepile {
+  line-height: 2;
+  padding: 0 0 0 25px;
+}
+
+.facepile > a {
+  display: inline-block;
+  margin-left: -25px;
+  transition: opacity .3s;
+  opacity: .9;
+  color: var(--background);
+}
+
+.facepile img {
+  border-radius: 50%;
+  width: calc(30px + 5vw);
+  height: calc(30px + 5vw);
+  max-width: 60px;
+  max-height: 60px;
+  margin-bottom: 6px;
+  background-color: #ffffff;
+  border: 2px solid;
+  transition: border .3s;
+  object-fit: cover;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+
+.facepile > a:hover {
+  opacity: 1;
+  position: relative;
+  z-index: 1;
+}
+
+.release {
+  overflow: hidden;
+  width: 100%;
+  line-break: anywhere;
+  margin-top: 32px;
+  color: var(--color-text);
+}
+
+.release-header {
+  margin-bottom: 16px;
+}
+
+.release-title {
+  font-size: 22px;
+  color: var(--color-primary);
+  font-weight: 700;
+  transition: color .3s;
+  display: block;
+}
+
+.release-title:hover {
+  color: var(--color-secondary-dark);
+}
+
+.release-date {
+  font-size: 12px;
+}
+
+.release-btn {
+  padding: 12px;
+  border-radius: 8px;
+  border: 2px solid var(--color-secondary);
+  color: var(--color-text);
+}
+
+.release-btn span {
+  margin-left: 8px;
+  font-size: 12px;
+  transition: margin-left .3s;
+}
+
+.release-btn:hover span {
+  margin-left: 16px;
+}
+
+.release-body p {
+  margin: 8px 0;
+}
+
+.release-body pre {
+  margin-bottom: 32px;
+}
+
+.release-body h1 {
+ font-size: 22px;
+  margin-bottom: 16px;
+}
+
+.release-body h2 {
+  font-size: 18px;
+  margin-top: 28px;
+  margin-bottom: 16px;
+}
+
+.release-body ul {
+  padding-left: 16px;
+}
+
+.release-body ul > li {
+  margin-bottom: 12px;
+}
+
+.release-body ul > li a {
+  text-decoration: underline;
+}
+
+@media screen and (min-width: 640px) {
+  .home-hero {
+    padding: 64px 0;
+  }
+
+  .home-container {
+    margin-left: 64px;
+    margin-right: 64px;
+  }
+}
+
+
+@media screen and (min-width: 768px) {
+  .home-hero {
+    padding: 72px 0;
+  }
+
+  .header-logo {
+    margin-right: 56px;
+  }
+
+  .home-hero img {
+    max-width: 180px;
+  }
+
+  .content-container {
+    margin: 96px 0;
+  }
+
+  .versions-container {
+    margin: 72px 0;
+  }
+
+  .release {
+    margin-bottom: 64px;
+  }
+}
+@media screen and (min-width: 992px) {
+  .home-container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 70%;
+  }
+
+  .home-hero {
+    padding: 120px 0;
+  }
+
+  .nav {
+    padding-right: 56px;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .header-content {
+    height: 72px;
+  }
+
+  .home-hero img {
+    max-width: 250px;
+  }
+
+  .home-title {
+    margin-bottom: 64px;
+    font-size: 48px;
+  }
+
+  .content-container {
+    margin: 120px 0;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .home-container {
+    max-width: 950px;
+  }
+
+  .content-container {
+    margin: 160px 0;
+  }
+
+  .versions-container {
+    margin: 120px 0;
+  }
+
+  .facepile > a {
+    margin-left: -30px;
+  }
+
+  .facepile img {
+    max-width: 70px;
+    max-height: 70px;
+  }
+}