chore: add styles file and update npm script

discue · Jan 2, 2022 · 444b7ee · 444b7ee
1 parent 7cdb05a
commit 444b7ee
Show file tree

Hide file tree

Showing 2 changed files with 246 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "docs:dev": "nodemon --ext md,vue,js,scss --ignore docs/.vuepress/.cache --ignore docs/.vuepress/.temp --watch .vuepress --watch . --exec npx vuepress dev docs",
     "docs:build": "vuepress build docs",
-    "docs:styles": "postcss styles/styles.css -o docs/.vuepress/styles/index.scss"
+    "docs:styles": "postcss styles/styles.scss -o docs/.vuepress/styles/index.scss"
   },
   "keywords": [],
   "author": "Stefan Pfaffel",

diff --git a/styles/styles.scss b/styles/styles.scss
@@ -0,0 +1,245 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.sidebar-items>li>.sidebar-item-children>li>a.router-link-active.router-link-exact-active.sidebar-item {
+  @apply text-lg;
+}
+
+.sidebar-item.sidebar-heading {
+  @apply text-xl;
+}
+
+.navbar-items {
+  @apply space-x-12;
+}
+
+.navbar-item>a {
+  @apply text-black text-xl font-bold transition-transform transform;
+}
+
+.navbar-item>a:hover,
+.navbar-item>a.router-link-active {
+  @apply border-b-4 border-black pb-2 -translate-y-0.5 !important;
+}
+
+img.logo {
+  margin-right: 0 !important;
+}
+
+span.site-name {
+  @apply text-3xl text-black font-bold -top-1 !important;
+}
+
+span.site-name:before {
+  content: 'messaging and queueing';
+  @apply font-light text-black text-sm absolute transform transition-transform translate-x-1 translate-y-11 !important;
+}
+
+span.site-name:after {
+  content: '.io/docs';
+  @apply font-normal !important;
+}
+
+html.dark {
+  .navbar-item>a {
+    color: #adbac7 !important;
+  }
+
+  .navbar-item>a:hover,
+  .navbar-item>a.router-link-active {
+    color: #adbac7 !important;
+    border-color: #adbac7 !important;
+  }
+
+  span.site-name {
+    color: #adbac7 !important;
+  }
+
+  span.site-name:before {
+    color: #adbac7 !important;
+  }
+}
+
+@media screen and (max-width: 719px) {
+  .toggle-sidebar-button {
+    display: flex;
+    box-sizing: border-box;
+    top: var(--navbar-padding-v);
+    height: var(--navbar-line-height);
+    font-size: 0.9rem;
+    align-items: center;
+  }
+}
+
+:root {
+
+  --c-brand: #3eaf7c;
+  --c-brand-light: #4abf8a;
+
+
+  --c-bg: theme('colors.gray.50');
+  --c-bg-light: #f3f4f5;
+  --c-bg-lighter: #eeeeee;
+  --c-bg-navbar: var(--c-bg);
+  --c-bg-sidebar: var(--c-bg);
+  --c-bg-arrow: #cccccc;
+
+
+  --c-text: theme('colors.black');
+  --c-text-accent: var(--c-brand);
+  --c-text-light: #3a5169;
+  --c-text-lighter: #4e6e8e;
+  --c-text-lightest: #6a8bad;
+  --c-text-quote: #999999;
+
+
+  --c-border: #eaecef;
+  --c-border-dark: #dfe2e5;
+
+
+  --c-tip: #42b983;
+  --c-tip-bg: var(--c-bg-light);
+  --c-tip-title: var(--c-text);
+  --c-tip-text: var(--c-text);
+  --c-tip-text-accent: var(--c-text-accent);
+  --c-warning: #e7c000;
+  --c-warning-bg: #fffae3;
+  --c-warning-title: #ad9000;
+  --c-warning-text: #746000;
+  --c-warning-text-accent: var(--c-text);
+  --c-danger: #cc0000;
+  --c-danger-bg: #ffe0e0;
+  --c-danger-title: #990000;
+  --c-danger-text: #660000;
+  --c-danger-text-accent: var(--c-text);
+  --c-details-bg: #eeeeee;
+
+
+  --c-badge-tip: var(--c-tip);
+  --c-badge-warning: var(--c-warning);
+  --c-badge-danger: var(--c-danger);
+
+
+  --t-color: 0.3s ease;
+  --t-transform: 0.3s ease;
+
+
+  --code-bg-color: #282c34;
+  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
+  --code-ln-color: #9e9e9e;
+  --code-ln-wrapper-width: 3.5rem;
+
+
+  --font-family: theme('fontFamily.sans');
+  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+
+
+  --navbar-height: 7rem;
+  --navbar-padding-v: 1.25rem;
+  --navbar-padding-h: 1.5rem;
+  --sidebar-width: 25rem;
+  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
+  --content-width: 740px;
+  --homepage-width: 960px;
+}
+
+.back-to-top {
+  --back-to-top-color: var(--c-brand);
+  --back-to-top-color-hover: var(--c-brand-light);
+}
+
+.DocSearch {
+  --docsearch-primary-color: var(--c-brand);
+  --docsearch-text-color: var(--c-text);
+  --docsearch-highlight-color: var(--c-brand);
+  --docsearch-muted-color: var(--c-text-quote);
+  --docsearch-container-background: rgba(9, 10, 17, 0.8);
+  --docsearch-modal-background: var(--c-bg-light);
+  --docsearch-searchbox-background: var(--c-bg-lighter);
+  --docsearch-searchbox-focus-background: var(--c-bg);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
+  --docsearch-hit-color: var(--c-text-light);
+  --docsearch-hit-active-color: var(--c-bg);
+  --docsearch-hit-background: var(--c-bg);
+  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
+  --docsearch-footer-background: var(--c-bg);
+}
+
+.external-link-icon {
+  --external-link-icon-color: var(--c-text-quote);
+}
+
+.medium-zoom-overlay {
+  --medium-zoom-bg-color: var(--c-bg);
+}
+
+#nprogress {
+  --nprogress-color: var(--c-brand);
+}
+
+.pwa-popup {
+  --pwa-popup-text-color: var(--c-text);
+  --pwa-popup-bg-color: var(--c-bg);
+  --pwa-popup-border-color: var(--c-brand);
+  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
+  --pwa-popup-btn-text-color: var(--c-bg);
+  --pwa-popup-btn-bg-color: var(--c-brand);
+  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
+}
+
+.search-box {
+  --search-bg-color: var(--c-bg);
+  --search-accent-color: var(--c-brand);
+  --search-text-color: var(--c-text);
+  --search-border-color: var(--c-border);
+
+  --search-item-text-color: var(--c-text-lighter);
+  --search-item-focus-bg-color: var(--c-bg-light);
+}
+
+html.dark {
+
+  --c-brand: theme('colors.lime.500');
+  --c-brand-light: #AFE81A;
+
+
+  --c-bg: #22272e;
+  --c-bg-light: #2b313a;
+  --c-bg-lighter: #262c34;
+
+
+  --c-text: #adbac7;
+  --c-text-light: #96a7b7;
+  --c-text-lighter: #8b9eb0;
+  --c-text-lightest: #8094a8;
+
+
+  --c-border: #3e4c5a;
+  --c-border-dark: #34404c;
+
+
+  --c-tip: #318a62;
+  --c-warning: #ceab00;
+  --c-warning-bg: #7e755b;
+  --c-warning-title: #ceac03;
+  --c-warning-text: #362e00;
+  --c-danger: #940000;
+  --c-danger-bg: #806161;
+  --c-danger-title: #610000;
+  --c-danger-text: #3a0000;
+  --c-details-bg: #323843;
+
+
+  --code-hl-bg-color: #363b46;
+}
+
+html.dark .DocSearch {
+  --docsearch-logo-color: var(--c-text);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+    0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+}