3 files changed, 145 insertions, 0 deletions
diff --git a/sass/uchu/core/_animation.scss b/sass/uchu/core/_animation.scss
new file mode 100644
index 0000000..5487ce4
--- /dev/null
+++ b/sass/uchu/core/_animation.scss
@@ -0,0 +1,23 @@
+@keyframes hovering {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  50% {
+    transform: translate(0, 8px);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
diff --git a/sass/uchu/core/_mixin.scss b/sass/uchu/core/_mixin.scss
new file mode 100644
index 0000000..618cbe6
--- /dev/null
+++ b/sass/uchu/core/_mixin.scss
@@ -0,0 +1,84 @@
+@mixin center {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+@mixin clearfix {
+  clear: both;
+  content: "";
+  display: block;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Smart font include
+/// Simply pass in the font-weight you want to use and the normal/italicized versions will be added
+/// No more weighing down the front-end with references to unused weights
+@mixin font($font-weight, $relative-font-path, $font-name) {
+  @font-face {
+    font-family: $font-name;
+    font-style: normal;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2");
+  }
+}
+
+@mixin font-plus-italics($font-weight, $relative-font-path, $font-name) {
+  @font-face {
+    font-family: $font-name;
+    font-style: normal;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: $font-name;
+    font-style: italic;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2");
+  }
+}
+
+@mixin mono-plus-italics($font-weight, $relative-font-path, $font-name) {
+  @font-face {
+    font-family: $font-name;
+    font-style: normal;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}.woff2") format("woff2");
+    unicode-range: U+24, U+30-39, U+A2-A5; // $, 0-9, ¢£¤¥
+  }
+
+  @font-face {
+    font-family: $font-name;
+    font-style: italic;
+    font-weight: $font-weight;
+    src: url("#{$relative-font-path}/#{$font-weight}i.woff2") format("woff2");
+    unicode-range: U+24, U+30-39, U+A2-A5; // $, 0-9, ¢£¤¥
+  }
+}
+
+@mixin hide-text {
+  border: none;
+  color: transparent;
+  font: 0 / 0 a;
+  text-shadow: none;
+}
+
+@mixin selection($background-color: var(--uchu-yang), $text-color: var(--uchu-gray-9)) {
+  &::selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+
+  &::-moz-selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+}
diff --git a/sass/uchu/core/_root.scss b/sass/uchu/core/_root.scss
new file mode 100644
index 0000000..ff0dc09
--- /dev/null
+++ b/sass/uchu/core/_root.scss
@@ -0,0 +1,38 @@
+:root {
+  --background-color: var(--uchu-gray-1);
+  --base-grid-color1: oklch(var(--uchu-blue-3-raw) / 30%);
+  --base-grid-color2: oklch(var(--uchu-purple-3-raw) / 30%);
+  --baseline: calc(var(--line-height) / 2);
+  --block-spacing-bottom: var(--line-height);
+  --block-spacing-top: 0;
+  --column-gap: calc(var(--line-height) * 2);
+  --display-scale: 1;
+  --font-mono: null;
+  --font-sans: null;
+  --font-serif: null;
+  --font-size: 12px;
+  --foreground-color: oklch(var(--uchu-yin-raw) / 80%);
+  --h1-size: 2.8rem;
+  --h2-size: 2.2rem;
+  --h3-size: 1.4rem;
+  --h4-size: 1.1rem;
+  --hr-thickness: 2px;
+  --line-height: calc(var(--font-size) * 1.5);
+  --pixel: 1px;
+  --row-gap: var(--line-height);
+
+  @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
+    --display-scale: 2;
+    --pixel: 0.5px;
+  }
+
+  @media only screen and (min-device-pixel-ratio: 2.5), only screen and (min-resolution: 2.5dppx) {
+    --display-scale: 3;
+    --pixel: 0.34px;
+  }
+
+  @media only screen and (min-device-pixel-ratio: 3.5), only screen and (min-resolution: 3.5dppx) {
+    --display-scale: 4;
+    --pixel: 0.25px;
+  }
+}