#3414 webpage: migrate styling

Signed-off-by: Patrizio Bekerle <[email protected]>

Author: pbek

webpage/README.md

@@ -28,5 +28,5 @@ If you run `npm run build` the webpage will be built in production mode in `webp
 
 ## Customization
 
-- Styles are mainly stored in [index.styl](https://github.com/pbek/QOwnNotes/blob/main/webpage/src/.vuepress/styles/index.styl)
+- Styles are mainly stored in [index.scss](https://github.com/pbek/QOwnNotes/blob/main/webpage/src/.vuepress/styles/index.scss)
 - Menus and configuration is stored are [config.js](https://github.com/pbek/QOwnNotes/blob/main/webpage/src/.vuepress/config.js)

webpage/src/.vuepress/styles/index.scss

@@ -0,0 +1,217 @@
+/**
+ * Custom Styles here.
+ *
+ * ref: https://v2.vuepress.vuejs.org/reference/default-theme/styles.html
+ */
+
+// .home .hero img {
+//   max-width: 450px !important;
+// }
+
+.home header.hero img {
+  max-height: 380px;
+}
+
+hr.v-divider {
+  margin: 20px;
+}
+
+// vuetify overrides * with margin 0
+p, ul, ol {
+  margin: 16px 0;
+}
+
+h2 {
+  margin-bottom: 2em;
+}
+
+ul ul, ol ol, ul ol, ol ul {
+  margin: 0;
+}
+
+kbd {
+  white-space: nowrap;
+  direction: ltr;
+}
+
+.v-subheader.blog {
+  padding: 0;
+}
+
+code {
+  direction: ltr;
+}
+
+div.line-numbers-mode {
+  /* fix the direction of the content in code blocks */
+  direction: ltr;
+  /* let the code not touch the right edge of the block */
+  padding-right: 1rem;
+}
+
+// add RTL styles
+// taken from: https://github.com/abbasifard/vuepress-rtl/blob/master/src/rtl.styl
+html[dir="rtl"] {
+  ul, ol {
+    padding-left: 0 !important;
+    padding-right: 1.2em;
+  }
+
+  div.line-numbers-wrapper {
+    /* fix the placement of the line numbers */
+    left: 0;
+  }
+
+  .page-nav > .inner > .prev {
+    float: right;
+  }
+
+  .page-nav > .inner > .next {
+    float: left;
+  }
+
+  .page-nav > .inner > .prev:before {
+    content: '→';
+  }
+
+  .page-nav > .inner > .next:after {
+    content: '←';
+  }
+
+  a.sidebar-link {
+    border-left: none;
+    border-right: 0.25rem solid transparent;
+  }
+
+  .sidebar .sidebar-sub-headers {
+    padding-left: 0;
+    padding-right: 1rem;
+  }
+
+  a.sidebar-link {
+    border-left: none;
+    border-right: 0.25rem solid transparent;
+
+    &.active {
+      border-left-color: #fff;
+      border-right-color: var(--c-brand);
+    }
+
+    .sidebar-group & {
+      padding-left: 0;
+      padding-right: 2rem;
+    }
+
+    .sidebar-sub-headers & {
+      border-left: none;
+      border-right: none;
+    }
+  }
+
+  .custom-block {
+    &.tip, &.warning, &.danger {
+      border-left-width: 0;
+      border-right-width: 0.5rem;
+      border-left-style: none;
+      border-right-style: solid;
+    }
+  }
+
+  .sidebar-heading {
+    padding-left: 0;
+    padding-right: 1.5rem;
+  }
+
+  .sidebar {
+    padding-left: 1.5rem;
+    padding-right: 0;
+  }
+
+  .sidebar-heading, .sidebar {
+    .arrow {
+      right: 0.35em;
+      margin-right: 0.35em;
+    }
+
+    .arrow.right {
+      transform: rotate(180deg);
+    }
+  }
+
+  .nav-links {
+    .nav-item {
+      margin-left: 0;
+      margin-right: 1.5rem;
+    }
+
+    .repo-link {
+      margin-left: 0;
+      margin-right: 1.5rem;
+    }
+  }
+
+  .page-nav.content {
+    .next {
+      float: left;
+    }
+  }
+
+  .dropdown-wrapper {
+    .dropdown-title {
+      .arrow {
+        margin-left: 0;
+        margin-right: 0.4rem;
+      }
+    }
+  }
+
+  .content pre, .content pre[class*="language-"] {
+    direction: ltr;
+  }
+
+  body {
+    direction: rtl;
+  }
+
+  .page {
+    padding-left: 0 !important;
+    padding-right: var(--sidebar-width);
+    text-align: right;
+    direction: rtl;
+  }
+
+  .sidebar {
+    left: auto !important;
+    right: 0 !important;
+    border-right: none;
+    border-left: 1px solid var(--c-border);
+    direction: rtl;
+    transform: none;
+    transition: right 0.5s linear;
+  }
+
+  .theme-container.no-sidebar:not(.sidebar-open) .sidebar {
+    right: -100vw !important;
+  }
+
+  a.header-anchor {
+    float: right !important;
+    margin-left: 0 !important;
+    margin-right: -0.87em;
+    padding-right: 0 !important;
+    padding-left: 0.23em;
+  }
+
+  .search-box {
+    margin-right: 0 !important;
+    margin-left: 0.5rem;
+  }
+
+  .navbar {
+    .links {
+      left: 1.5rem;
+      right: auto;
+    }
+  }
+}
+

webpage/src/.vuepress/styles/index.styl

@@ -0,0 +1,14 @@
+/**
+ * Custom palette here.
+ *
+ * ref: https://v2.vuepress.vuejs.org/reference/default-theme/styles.html
+ */
+
+:root {
+  --c-brand: #3eaf7c;
+  --c-brand-light: #4abf8a;
+  --c-text: #2c3e50;
+  --c-border: #eaecef;
+  --code-bg-color: #282c34;
+}
+