valaxy 0.0.2 → 0.0.5

package/src/client/styles/common/button.scss

@@ -0,0 +1,29 @@
+@use "../palette.scss" as * ;
+
+.yun-icon-btn {
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  width: 3rem;
+  height: 3rem;
+
+  border-radius: 50%;
+
+  transition: var(--yun-transition);
+
+  div {
+    font-size: 1.2rem;
+  }
+
+  &:hover {
+    background-color: rgba(var(--yun-c-primary-rgb), 0.08);
+  }
+
+  &:active {
+    background-color: rgba(var(--yun-c-primary-rgb), 0.16);
+  }
+}

package/src/client/styles/common/code.scss

@@ -0,0 +1,35 @@
+html:not(.dark) {
+  --prism-foreground: #393a34;
+  --prism-background: #f8f8f8;
+  --prism-comment: #758575;
+  --prism-namespace: #444444;
+  --prism-string: #bc8671;
+  --prism-punctuation: #80817d;
+  --prism-literal: #36acaa;
+  --prism-keyword: #248459;
+  --prism-function: #4D9375;
+  --prism-deleted: #9a050f;
+  --prism-class: #2b91af;
+  --prism-builtin: #800000;
+  --prism-property: #ce9178;
+  --prism-regex: #ad502b;
+}
+
+html.dark {
+  --prism-foreground: #A6ACCD;
+  --prism-background: #242424;
+  --prism-namespace: #aaaaaa;
+  --prism-comment: #758575;
+  --prism-namespace: #444444;
+  --prism-string: #C3E88D;
+  --prism-punctuation: #A6ACCD;
+  --prism-literal: #36acaa;
+  --prism-keyword: #89DDFF;
+  --prism-function: #82AAFF;
+  --prism-deleted: #9a050f;
+  --prism-class: #4ec9b0;
+  --prism-builtin: #d16969;
+  --prism-property: #C792EA;
+  --prism-regex: #ad502b;
+  --prism-selector: #C3E88D;
+}

package/src/client/styles/common/hamburger.scss

@@ -0,0 +1,56 @@
+@use "sass:math";
+
+$hamburger-size: 22px;
+
+.vt-hamburger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vt-hamburger:hover .vt-hamburger-top    { transform: translateX(math.div(-$hamburger-size, 4)); }
+.vt-hamburger:hover .vt-hamburger-middle { transform: translateX(0); }
+.vt-hamburger:hover .vt-hamburger-bottom { transform: translateX(math.div(-$hamburger-size, 2)); }
+
+.vt-hamburger.is-active .vt-hamburger-top    { top: math.div($hamburger-size - 3px, 2); transform: translateX(0) rotate(225deg); }
+.vt-hamburger.is-active .vt-hamburger-middle { top: math.div($hamburger-size - 3px, 2); transform: translateX(-$hamburger-size); }
+.vt-hamburger.is-active .vt-hamburger-bottom { top: math.div($hamburger-size - 3px, 2); transform: translateX(0) rotate(135deg); }
+
+.vt-hamburger.is-active:hover .vt-hamburger-top,
+.vt-hamburger.is-active:hover .vt-hamburger-middle,
+.vt-hamburger.is-active:hover .vt-hamburger-bottom {
+  background-color: var(--yun-c-primary);
+  transition: top .25s, background-color .25s, transform .25s;
+}
+
+.vt-hamburger-container {
+  position: relative;
+  width: $hamburger-size;
+  height: $hamburger-size - 2px;
+  overflow: hidden;
+}
+
+.vt-hamburger-top,
+.vt-hamburger-middle,
+.vt-hamburger-bottom {
+  left: 0; 
+
+  position: absolute;
+  width: $hamburger-size;
+  height: 2px;
+  background-color: var(--yun-c-primary);
+  transition: top .25s, background-color .5s, transform .25s;
+}
+
+.vt-hamburger-top    { 
+  top: 0; 
+  transform: translateX(0);
+}
+.vt-hamburger-middle { 
+  top: math.div($hamburger-size - 4px, 2); 
+  transform: translateX(math.div(-$hamburger-size, 2)); 
+}
+.vt-hamburger-bottom { 
+  top: $hamburger-size - 4px; 
+  transform: translateX(math.div(-$hamburger-size, 4));
+}

package/src/client/styles/common/markdown.scss

@@ -0,0 +1,43 @@
+/* https://github.com/antfu/prism-theme-vars */
+@use 'prism-theme-vars/base.css' as *;
+@use './code.scss' as *;
+
+.markdown-body {
+  --prism-font-family: var(--yun-font-mono);
+
+  --smc-link-color: var(--yun-c-link);
+}
+
+// for anchor
+h1:hover .header-anchor,
+h1:focus .header-anchor,
+h2:hover .header-anchor,
+h2:focus .header-anchor,
+h3:hover .header-anchor,
+h3:focus .header-anchor,
+h4:hover .header-anchor,
+h4:focus .header-anchor,
+h5:hover .header-anchor,
+h5:focus .header-anchor,
+h6:hover .header-anchor,
+h6:focus .header-anchor {
+  opacity: 1;
+}
+
+a.header-anchor {
+  float: left;
+  margin-top: 0.125em;
+  margin-left: -0.87em;
+  padding-right: 0.23em;
+  font-size: 0.85em;
+  opacity: 0;
+
+  &::before {
+    content: none;
+  }
+}
+
+a.header-anchor:hover,
+a.header-anchor:focus {
+  text-decoration: none;
+}

package/src/client/styles/common/scrollbar.scss

@@ -0,0 +1,34 @@
+@use '~/styles/mixins' as *;
+
+.no-scroll {
+  position: fixed; 
+  overflow-y: scroll;
+  width: 100%;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: rgba(get-css-var('c', 'primary', 'rgb'), 0.3);
+
+  &:window-inactive {
+    background-color: rgba(get-css-var('c', 'primary', 'rgb'), 0.3);
+  }
+
+  &:hover {
+    background-color: rgba(get-css-var('c', 'primary', 'rgb'), 0.7);
+  }
+
+  &:active {
+    background-color: rgba(get-css-var('c', 'primary', 'rgb'), 0.9);
+  }
+}

package/src/client/styles/common/sidebar.scss

@@ -0,0 +1,30 @@
+@use "sass:map";
+
+@use "../vars.scss" as *;
+@use "../mixins/" as *;
+
+.sidebar {
+  position: fixed;
+  overflow-y: auto;
+  top: 0;
+  bottom: 0;
+  left: 0;
+
+  width: calc(100vw - 64px);
+  max-width: var(--yun-sidebar-width-mobile);
+
+  background-image: var(--yun-sidebar-bg-image);
+  background-color: var(--yun-sidebar-bg-color);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: bottom 1rem center;
+  text-align: center;
+  z-index: map.get($z-index, 'sidebar');
+
+  transform: translateX(-100%);
+  transition: transform var(--yun-transition-duration);
+
+  &.open {
+    transform: translateX(0);
+  }
+}

package/src/client/styles/common/transition.scss

@@ -0,0 +1,23 @@
+.v {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 0.5s ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+.fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 0.5s ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}

package/src/client/styles/css-vars/dark.scss

@@ -0,0 +1,17 @@
+@use "../palette" as *;
+@use "../mixins" as *;
+
+::-webkit-input-placeholder {
+  color: white;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+.dark {
+  @include set-css-var-from-map($dark);
+
+  // star-markdown-css
+  --smc-link-color: lighten($colors.primary, 30%);
+}

package/src/client/styles/css-vars/index.scss

@@ -0,0 +1,18 @@
+@use "sass:map";
+@use "../mixins" as *;
+@use "../vars" as *;
+@use "../palette" as *;
+
+:root {
+  // palette different with colors
+  @include set-css-var-from-map($palette, 'c');
+}
+
+:root {
+  @include set-css-var-from-map($common);
+  @include set-css-var-from-map($border, 'border');
+  @include set-css-var-from-map($font, 'font');
+  @include set-css-var-from-map($z-index, 'z');
+  @include set-css-var-from-map($transition, 'transition'); 
+}
+

package/src/client/styles/css-vars/light.scss

@@ -0,0 +1,9 @@
+@use "../palette" as *;
+@use "../mixins" as *;
+
+:root {
+  color-scheme: light;
+
+  @include set-css-var-from-map($colors, 'c');
+  @include set-css-var-from-map($light);
+}

package/src/client/styles/global/helper.scss

@@ -0,0 +1,3 @@
+.val-card {
+  background-color: var(--yun-c-bg-light);
+}

package/src/client/styles/global/index.scss

@@ -0,0 +1,38 @@
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+
+  line-height: 2;
+}
+
+body {
+  background-color: var(--yun-c-bg);
+  
+  &::before {
+    content: '';
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-image: var(--yun-bg-image);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    animation-name: bgFadeIn;
+    animation-duration: 2s;
+    opacity: 1;
+  }
+}
+
+@keyframes bgFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/client/styles/global/nprogress.scss

@@ -0,0 +1,14 @@
+#nprogress {
+  pointer-events: none;
+
+  .bar {
+    background: var(--yun-c-primary);
+    opacity: 0.75;
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+  }
+}

package/src/client/styles/global/reset.scss

@@ -0,0 +1,20 @@
+@use '../mixins' as *;
+
+html {
+  scroll-behavior: smooth;
+
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  color: var(--yun-c-link);
+}
+
+* {
+  outline: none;
+}
+
+hr {
+  opacity: 0.2;
+  margin: 1rem;
+}

package/src/client/styles/index.scss

@@ -0,0 +1,18 @@
+// import common and light/dark css vars in main.ts
+
+// global css
+@use './global/reset.scss' as *;
+@use './global/helper.scss' as *;
+@use './global/index.scss' as *;
+@use './global/nprogress.scss' as *;
+
+// common
+@use './common/button.scss' as *;
+@use './common/hamburger.scss' as *;
+@use './common/markdown.scss' as *;
+@use "./common/scrollbar.scss" as *;
+@use "./common/sidebar.scss" as *;
+@use "./common/transition.scss" as *;
+
+// banner
+@use './widgets/banner.scss' as *;

package/src/client/styles/mixins/config.scss

@@ -0,0 +1 @@
+$namespace: 'yun';

package/src/client/styles/mixins/index.scss

@@ -0,0 +1,2 @@
+@forward './size.scss';
+@forward './variable.scss';

package/src/client/styles/mixins/size.scss

@@ -0,0 +1,49 @@
+@use "sass:map";
+
+$breakpoints: (
+  'sm': 640px,
+  'md': 768px,
+  'lg': 1024px,
+  'xl': 1280px,
+  '2xl': 1536px,
+);
+
+// for mobile
+@mixin mobile {
+  @media screen and (max-width: map.get($breakpoints, 'sm')) {
+    @content;
+  }
+}
+
+// for tablet
+@mixin tablet {
+  @media screen and (min-width: map.get($breakpoints, 'sm')) and (max-width: map.get($breakpoints, 'lg')) {
+    @content;
+  }
+}
+
+// for desktop
+@mixin desktop {
+  @media screen and (min-width: map.get($breakpoints, 'lg')) {
+    @content;
+  }
+}
+
+
+@mixin sm-md {
+  @media screen and (min-width: map.get($breakpoints, 'sm')) and (max-width: map.get($breakpoints, 'md')) {
+    @content;
+  }
+}
+
+@mixin md-lg {
+  @media screen and (min-width: map.get($breakpoints, 'md')) and (max-width: map.get($breakpoints, 'lg')) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media screen and (min-width: map.get($breakpoints, 'xl')) {
+    @content;
+  }
+}

package/src/client/styles/mixins/variable.scss

@@ -0,0 +1,30 @@
+@use 'config';
+
+// join var name
+// join-var-name(('button', 'text-color')) => '--#{namespace}-button-text-color'
+@function join-var-name($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// get-css-var('button', 'text-color') => var(--el-button-text-color)
+@function get-css-var($args...) {
+  @return var(#{join-var-name($args)});
+}
+
+// get-css-var-name(('button', 'text-color')) => '--#{namespace}-button-text-color'
+@function get-css-var-name($args...) {
+  @return join-var-name($args);
+}
+
+// @include set-css-var-from-map($colors)
+@mixin set-css-var-from-map($map, $prefix: '') {
+  @each $key, $value in $map {
+    #{get-css-var-name($prefix, $key)}: #{$value};
+  }
+}

package/src/client/styles/palette.scss

@@ -0,0 +1,61 @@
+@use "sass:map";
+
+@use "./mixins" as *;
+
+$palette: () !default;
+$palette: map.merge((
+  'white': #ffffff,
+  'black': #1a1a1a,
+  'gray': #8e8e8e,
+  'danger': #db2828,
+  'warning': #f2711c
+), $palette);
+
+$colors: () !default;
+$colors: map.merge((
+  'primary': #0078E7,
+), $colors);
+
+$c-primary: map.get($colors, 'primary');
+
+$colors: map.merge((
+  'primary-light': lighten($c-primary, 15%),
+  'primary-lighter': lighten($c-primary, 30%),
+), $colors);
+
+
+$light: () !default;
+$light: map.merge((
+  'bg-image': url('https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg'),
+  'border-color': #e6e6e6,
+
+  'c-bg': white,
+  'c-bg-light': white,
+  'c-bg-dark': #fafafa,
+  'c-text': #333,
+  'c-text-light': #555,
+  'c-text-dark': #111,
+
+  'c-primary-rgb': #{red($c-primary), green($c-primary), blue($c-primary)},
+
+  'c-link': $c-primary,
+
+  'sidebar-bg-color': #{get-css-var('c-bg-light')}
+), $light);
+
+$dark: () !default;
+$dark: map.merge((
+  'bg-image': none,
+  'border-color': #222,
+
+  'c-bg': #1a1a1a,
+  'c-bg-light': #22252e,
+  'c-bg-dark': #1a1a1a,
+
+  'c-text': #f2f2f2,
+  'c-text-light': #eee,
+  'c-text-lighter': #ddd,
+  'c-text-dark': rgba(#ebebeb, 0.8),
+
+  'c-link': map.get($colors, 'primary-light'),
+), $dark);

package/src/client/styles/vars.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+
+$common: () !default;
+$common: map.merge((
+  'sidebar-width-mobile': 320px,
+), $common);
+
+$border: () !default;
+$border: map.merge((
+  'width': 1px
+), $border);
+
+$font: () !default;
+$font: map.merge((
+  'sans': 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  'mono': 'Menlo, Monaco, Consolas, "Courier New", monospace',
+  'serif': "'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif",
+  'serif-weight': 900,
+), $font);
+
+$z-index: () !default;
+$z-index: map.merge((
+  'cloud': 8,
+  'go-down': 9,
+  'sidebar': 10,
+  'fireworks': 11,
+  'menu-btn': 20,
+  'go-up-btn': 20,
+  'search-popup': 30,
+  'search-btn': 31,
+), $z-index);
+
+$transition: () !default;
+$transition: map.merge((
+  'duration-fast': 0.2s,
+  'duration': 0.4s,
+  'duration-slow': 0.6s,
+  '': all var(--yun-transition-duration-fast) ease-in-out
+), $transition);