From b85c38a468ee9d6ce289f485aad3124220d61b6e Mon Sep 17 00:00:00 2001 From: Damillora Date: Wed, 14 Apr 2021 12:08:09 +0700 Subject: [PATCH] Decouple style files to Shian --- package.json | 1 + src/routes/_layout.svelte | 2 +- src/style/app.scss | 19 - src/style/common/_base.scss | 122 ---- src/style/common/_theme.scss | 30 - src/style/components/_copyarea.scss | 8 - src/style/components/_floatingyuriko.scss | 28 - src/style/components/_gallery.scss | 51 -- src/style/components/_gameitem.scss | 37 -- src/style/components/_header.scss | 99 ---- src/style/components/_mediaitem.scss | 24 - src/style/components/_menu.scss | 50 -- src/style/components/_pageheader.scss | 37 -- src/style/components/_projectitem.scss | 25 - src/style/utilities/_normalize.scss | 537 ------------------ src/style/utilities/_responsive.scss | 14 - src/style/utilities/_spacing.scss | 35 -- src/style/utilities/_transition.scss | 5 - .../utilities/backgrounds/_283-yuika.scss | 17 - .../utilities/backgrounds/_765-yuriko.scss | 17 - yarn.lock | 5 + 21 files changed, 7 insertions(+), 1156 deletions(-) delete mode 100644 src/style/app.scss delete mode 100644 src/style/common/_base.scss delete mode 100644 src/style/common/_theme.scss delete mode 100644 src/style/components/_copyarea.scss delete mode 100644 src/style/components/_floatingyuriko.scss delete mode 100644 src/style/components/_gallery.scss delete mode 100644 src/style/components/_gameitem.scss delete mode 100644 src/style/components/_header.scss delete mode 100644 src/style/components/_mediaitem.scss delete mode 100644 src/style/components/_menu.scss delete mode 100644 src/style/components/_pageheader.scss delete mode 100644 src/style/components/_projectitem.scss delete mode 100644 src/style/utilities/_normalize.scss delete mode 100644 src/style/utilities/_responsive.scss delete mode 100644 src/style/utilities/_spacing.scss delete mode 100644 src/style/utilities/_transition.scss delete mode 100644 src/style/utilities/backgrounds/_283-yuika.scss delete mode 100644 src/style/utilities/backgrounds/_765-yuriko.scss diff --git a/package.json b/package.json index 268ee78..f7b0409 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "start": "node __sapper__/build" }, "dependencies": { + "@damillora/shian": "^0.1.2", "compression": "^1.7.1", "dayjs": "^1.10.4", "howler": "^2.2.1", diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index eafd9a7..044aa2e 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -5,7 +5,7 @@
diff --git a/src/style/app.scss b/src/style/app.scss deleted file mode 100644 index 16d0377..0000000 --- a/src/style/app.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import './utilities/normalize'; -@import './utilities/responsive'; -@import './utilities/transition'; -@import './utilities/spacing'; -@import './utilities/backgrounds/283-yuika'; -@import './utilities/backgrounds/765-yuriko'; - -@import './common/theme'; -@import './common/base'; - -@import './components/pageheader'; -@import './components/header'; -@import './components/menu'; -@import './components/gallery'; -@import './components/mediaitem'; -@import './components/projectitem'; -@import './components/gameitem'; -@import './components/copyarea'; -@import './components/floatingyuriko'; \ No newline at end of file diff --git a/src/style/common/_base.scss b/src/style/common/_base.scss deleted file mode 100644 index 2810c8b..0000000 --- a/src/style/common/_base.scss +++ /dev/null @@ -1,122 +0,0 @@ - - -html { - font-family: 'Exo 2',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - -} -:root, [data-theme="light"] { - --text-color: #{$text-light}; - --bg-color: #{$bg-light}; - --accent-color: #{$accent-light}; - --accent-bg-color: #{$accent-bg-light}; - --highlight-color: #{$highlight-light}; - --highlight-bg-color: #{$highlight-bg-light}; -} - -[data-theme="dark"] { - --text-color: #{$text-dark}; - --bg-color: #{$bg-dark}; - --accent-color: #{$accent-dark}; - --accent-bg-color: #{$accent-bg-dark}; - --highlight-color: #{$highlight-dark}; - --highlight-bg-color: #{$highlight-bg-dark}; -} - -@media (prefers-color-schme: dark) { - :root:not[data-theme="light"] { - --text-color: #{$text-dark}; - --bg-color: #{$bg-dark}; - --accent-color: #{$accent-dark}; - --accent-bg-color: #{$accent-bg-dark}; - --highlight-color: #{$highlight-dark}; - --highlight-bg-color: #{$highlight-bg-dark}; - } -} - -body { - color: var(--text-color); - background-color: var(--bg-color); -} - -.main { - padding: 1rem; - @include screen(md) { - @include px(2rem); - } - @include screen(lg) { - @include px(4rem); - } - @include screen(xl) { - @include px(4rem); - } -} -.page { - width: 100%; -} -.main { - margin-left: auto; - margin-right: auto; - - - p, h1, h2, h3, h4, h5, h6 { - @include my(1rem); - } - h1, h2, h3, h4, h5, h6 { - font-weight: 300; - } - h1 { - font-size: $text-4xl; - } - h2 { - font-size: $text-3xl; - } - h3 { - font-size: $text-2xl; - } - h4 { - font-size: $text-xl; - } - h5 { - font-size: $text-lg; - } - h6 { - font-size: $text-base; - } - - a { - color: var(--accent-color); - &:hover { - text-decoration: underline; - } - } - ul { - list-style-type: disc; - li p { - @include my(0rem); - } - } - ol { - list-style-type: decimal; - } - code { - background-color: var(--accent-bg-color); - color: var(--accent-color); - white-space: pre-wrap; - } - blockquote { - border-left: 0.5rem solid var(--accent-color); - @include my(2rem); - padding: 0.5rem 0 0.5rem 2rem; - } - pre { - background: var(--accent-bg-color); - color: var(--accent-color); - padding: 0.5rem; - border: 1px solid var(--accent-color); - } -} - -.card-list { - display: flex; - flex-direction: column; -} diff --git a/src/style/common/_theme.scss b/src/style/common/_theme.scss deleted file mode 100644 index d750a37..0000000 --- a/src/style/common/_theme.scss +++ /dev/null @@ -1,30 +0,0 @@ -$text-4xl: 2.25rem; -$text-3xl: 1.875rem; -$text-2xl: 1.5rem; -$text-xl: 1.25rem; -$text-lg: 1.125rem; -$text-base: 1rem; -$text-sm: 0.875rem; -$text-xs: 0.75rem; - -$font-light: 300; -$font-base: 400; -$font-medium: 500; - -$white: #FFFFFF; -$black: #000000; -$theme-blue: #22558C; - -$text-light: #000000; -$bg-light: #FFFFFF; -$accent-light: #22558C; -$accent-bg-light: #E5E7EB; -$highlight-light: #22558C; -$highlight-bg-light: #9FD3F0; - -$text-dark: #FFFFFF; -$bg-dark: #263238; -$accent-dark: #9FD3F0; -$accent-bg-dark: #455A64; -$highlight-dark: #9FD3F0; -$highlight-bg-dark: #3B90C6; \ No newline at end of file diff --git a/src/style/components/_copyarea.scss b/src/style/components/_copyarea.scss deleted file mode 100644 index 2c5e9af..0000000 --- a/src/style/components/_copyarea.scss +++ /dev/null @@ -1,8 +0,0 @@ -.copyarea { - background: var(--accent-bg-color); - color: var(--accent-color); - padding: 0.5rem; - border: 1px solid var(--accent-color); - font-family: 'Courier New', Courier, monospace; - cursor: pointer; -} \ No newline at end of file diff --git a/src/style/components/_floatingyuriko.scss b/src/style/components/_floatingyuriko.scss deleted file mode 100644 index 1c18d1e..0000000 --- a/src/style/components/_floatingyuriko.scss +++ /dev/null @@ -1,28 +0,0 @@ -.floating-yuriko { - position: fixed; - right: 1rem; - bottom: 1rem; - margin-bottom: 0px; - cursor: pointer; - img { - height: 20vh; - } -} - -.hvr-float { - display: inline-block; - vertical-align: middle; - -webkit-transform: perspective(1px) translateZ(0); - transform: perspective(1px) translateZ(0); - box-shadow: 0 0 1px rgba(0, 0, 0, 0); - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; - -webkit-transition-property: transform; - transition-property: transform; - -webkit-transition-timing-function: ease-out; - transition-timing-function: ease-out; -} -.hvr-float:hover, .hvr-float:focus, .hvr-float:active { - -webkit-transform: translateY(-8px); - transform: translateY(-8px); -} \ No newline at end of file diff --git a/src/style/components/_gallery.scss b/src/style/components/_gallery.scss deleted file mode 100644 index 4e107b3..0000000 --- a/src/style/components/_gallery.scss +++ /dev/null @@ -1,51 +0,0 @@ - -.gallery { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - - &__image { - width: 100%; - padding: 1rem; - } - - &__popup { - position: fixed; - height: 100vh; - width: 100vw; - visibility: visible; - @include transition; - left: 0; - top: 0; - padding: 4rem; - z-index: 20; - background-color: rgba(0,0,0,0.7); - - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - - &.hidden { - height: 0; - opacity: 0; - visibility: hidden; - } - - img { - max-height: 100%; - } - } - - &__exit { - position: fixed; - right: 0; - top: 0; - margin: 1rem 2rem; - font-size: $text-2xl; - color: $white; - z-index: 30; - cursor: pointer; - } -} \ No newline at end of file diff --git a/src/style/components/_gameitem.scss b/src/style/components/_gameitem.scss deleted file mode 100644 index 195744c..0000000 --- a/src/style/components/_gameitem.scss +++ /dev/null @@ -1,37 +0,0 @@ -.game-item { - padding: 0.25rem 1rem; - width: 100%; - display: flex; - flex-direction: column; - @include transition; - - @include screen(lg) { - flex-direction: row; - } - &:hover { - background-color: var(--highlight-bg-color); - } - - &__title { - flex-grow: 1; - } - &__caption { - font-size: $text-2xl; - @include my(0.25rem); - } - - &__content { - @include my(0.5rem); - display: block; - - p { - @include my(0.25rem); - text-align: right; - } - flex-shrink: 1; - } - &__icon { - padding: 0.5rem; - vertical-align: middle; - } -} \ No newline at end of file diff --git a/src/style/components/_header.scss b/src/style/components/_header.scss deleted file mode 100644 index d0d037e..0000000 --- a/src/style/components/_header.scss +++ /dev/null @@ -1,99 +0,0 @@ - -.site-header { - position: fixed; - z-index: 10; - height: 4rem; - width: 100vw; - overflow: hidden; - @include transition; - &.enabled { - height: 100vh; - width: 100vw; - } - - &__background { - z-index: -1; - width: 100vw; - height: 100vh; - position: absolute; - @include transition; - @include bg-283-yuika; - - opacity: 0%; - top: -23vh; - &--yuriko { - @include bg-765-yuriko; - } - &--enabled { - opacity: 100%; - top: 0; - } - } - &__overlay { - opacity: 50%; - background-color: $black; - } - - &__inner { - z-index: 1; - width: 100%; - height: 100%; - @include transition; - } - - &.enabled &__inner { - background: rgba(0,0,0,0.5); - } - &.detached &__inner { - background: rgba(0,0,0,0.5); - } -} - -.header { - display: flex; - flex-direction: column; - @include transition; - &__top { - display: flex; - flex-direction: row; - } - - &__title { - flex-grow: 1; - @include transition; - a { - display: flex; - flex-direction: row; - align-items: center; - @include py(1rem); - color: $white; - font-size: $text-lg; - padding-left: 1rem; - height: 100%; - } - &:hover { - background-color: $theme-blue; - } - } - - &__nav-button { - width: 4rem; - height: 4rem; - position: relative; - cursor: pointer; - padding: 0.5rem; - text-align: center; - white-space: nowrap; - @include transition; - &:hover { - background-color: $theme-blue; - } - } - &__icon { - width: 3rem; - height: 3rem; - color: $white; - @include px(0.50rem); - @include py(0.75rem); - } -} \ No newline at end of file diff --git a/src/style/components/_mediaitem.scss b/src/style/components/_mediaitem.scss deleted file mode 100644 index a74d1ec..0000000 --- a/src/style/components/_mediaitem.scss +++ /dev/null @@ -1,24 +0,0 @@ -.media-item { - padding: 0.25rem 1rem; - width: 100%; - @include transition; - - &:hover { - background-color: var(--highlight-bg-color); - } - - &__caption { - font-size: $text-2xl; - @include my(0.25rem); - } - - &__content { - width: 100%; - @include my(0.5rem); - display: block; - - p { - @include my(0.25rem); - } - } -} \ No newline at end of file diff --git a/src/style/components/_menu.scss b/src/style/components/_menu.scss deleted file mode 100644 index 2dcac94..0000000 --- a/src/style/components/_menu.scss +++ /dev/null @@ -1,50 +0,0 @@ -.menu { - max-height: 0px; - display: block; - @include transition; - overflow: hidden; - - &.enabled { - max-height: 100vh; - } - &__item { - color: $white; - height: 3rem; - display: flex; - flex-direction: row; - align-items: center; - cursor: pointer; - @include transition; - - &:hover { - background-color: $theme-blue; - } - - a { - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - height: 100%; - } - i { - display: inline-block; - width: 4rem; - height: 3rem; - color: $white; - text-align: center; - @include px(0.50rem); - @include py(0.75rem); - } - p { - display: inline-block; - flex-grow: 1; - @include px(1rem); - } - } - &__separator { - margin-left: 5rem; - margin-right: 4rem; - border-top: 0.125rem solid $white; - } -} \ No newline at end of file diff --git a/src/style/components/_pageheader.scss b/src/style/components/_pageheader.scss deleted file mode 100644 index 7bf21e3..0000000 --- a/src/style/components/_pageheader.scss +++ /dev/null @@ -1,37 +0,0 @@ -.page-header { - position: relative; - width: 100%; - min-height: 200px; - height: 70vh; - color: $white; - font-weight: 300; - min-height: 300px; - height: 70vh; - - &__background { - width: 100%; - height: 100%; - @include bg-283-yuika; - &--yuriko { - @include bg-765-yuriko; - } - } - &__overlay { - width: 100%; - height: 100%; - background-color: $black; - opacity: 50%; - } - - &__contents { - position: absolute; - bottom: 0; - left: 0; - right: 0; - @include py(0.5rem); - a { - color: $white; - } - } -} - diff --git a/src/style/components/_projectitem.scss b/src/style/components/_projectitem.scss deleted file mode 100644 index d040700..0000000 --- a/src/style/components/_projectitem.scss +++ /dev/null @@ -1,25 +0,0 @@ -.project-item { - padding: 1rem; - width: 100%; - display: flex; - flex-direction: row; - @include transition; - min-height: 12rem; - - &:hover { - background-color: var(--highlight-bg-color); - } - - &__image { - width: 25%; - display: flex; - flex-direction: col; - align-items: center; - justify-content: center; - margin-right: 2rem; - } - - &__text { - width: 75%; - } -} \ No newline at end of file diff --git a/src/style/utilities/_normalize.scss b/src/style/utilities/_normalize.scss deleted file mode 100644 index 2a80de5..0000000 --- a/src/style/utilities/_normalize.scss +++ /dev/null @@ -1,537 +0,0 @@ -/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ - -/* -Document -======== -*/ - -/** -Use a better box model (opinionated). -*/ - -*, -*::before, -*::after { - box-sizing: border-box; -} - -/** -Use a more readable tab size (opinionated). -*/ - -:root { - -moz-tab-size: 4; - tab-size: 4; -} - -/** -1. Correct the line height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -*/ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* -Sections -======== -*/ - -/** -Remove the margin in all browsers. -*/ - -body { - margin: 0; -} - -/** -Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -*/ - -body { - font-family: - system-ui, - -apple-system, /* Firefox supports this but not yet `system-ui` */ - 'Segoe UI', - Roboto, - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji'; -} - -/* -Grouping content -================ -*/ - -/** -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -*/ - -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ -} - -/* -Text-level semantics -==================== -*/ - -/** -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/** -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: - ui-monospace, - SFMono-Regular, - Consolas, - 'Liberation Mono', - Menlo, - monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -Tabular data -============ -*/ - -/** -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -*/ - -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ -} - -/* -Forms -===== -*/ - -/** -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** -Remove the inheritance of text transform in Edge and Firefox. -1. Remove the inheritance of text transform in Firefox. -*/ - -button, -select { /* 1 */ - text-transform: none; -} - -/** -Correct the inability to style clickable types in iOS and Safari. -*/ - -button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; -} - -/** -Remove the inner border and padding in Firefox. -*/ - -::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** -Restore the focus styles unset by the previous rule. -*/ - -:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - -legend { - padding: 0; -} - -/** -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/** -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/** -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* -Interactive -=========== -*/ - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ - -/** - * Removes the default spacing and border for appropriate elements. - */ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -button { - background-color: transparent; - background-image: none; -} - -/** - * Work around a Firefox/IE bug where the transparent `button` background - * results in a loss of the default `button` focus styles. - */ - -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; -} - -fieldset { - margin: 0; - padding: 0; -} - -ol, -ul { - list-style: none; - margin: 0; - padding: 0; -} - -/** - * Tailwind custom reset styles - */ - -/** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ - -html { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ - line-height: 1.5; /* 2 */ -} - -/** - * Inherit font-family and line-height from `html` so users can set them as - * a class directly on the `html` element. - */ - -body { - font-family: inherit; - line-height: inherit; -} - -/** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ - -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ -} - -/* - * Ensure horizontal rules are visible by default - */ - -hr { - border-top-width: 1px; -} - -/** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ - -img { - border-style: solid; -} - -textarea { - resize: vertical; -} - -input::placeholder, -textarea::placeholder { - color: #9ca3af; -} - -button, -[role="button"] { - cursor: pointer; -} - -table { - border-collapse: collapse; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ - -a { - color: inherit; - text-decoration: inherit; -} - -/** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ - -button, -input, -optgroup, -select, -textarea { - padding: 0; - line-height: inherit; - color: inherit; -} - -/** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ - -pre, -code, -kbd, -samp { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; -} - -/** - * Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; -} - -/** - * Constrain images and videos to the parent width and preserve - * their instrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -img, -video { - max-width: 100%; - height: auto; -} \ No newline at end of file diff --git a/src/style/utilities/_responsive.scss b/src/style/utilities/_responsive.scss deleted file mode 100644 index f1c3b23..0000000 --- a/src/style/utilities/_responsive.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin screen($point) { - @if $point == xl { - @media screen and (min-width: 1280px) { @content ; } - } - @else if $point == lg { - @media (min-width: 1024px) { @content ; } - } - @else if $point == md { - @media (min-width: 768px) { @content ; } - } - @else if $point == sm { - @media (min-width: 640px) { @content ; } - } -} \ No newline at end of file diff --git a/src/style/utilities/_spacing.scss b/src/style/utilities/_spacing.scss deleted file mode 100644 index 5a3b9bb..0000000 --- a/src/style/utilities/_spacing.scss +++ /dev/null @@ -1,35 +0,0 @@ -@mixin px($size) { - padding-left: $size; - padding-right: $size; -} - -@mixin py($size) { - padding-top: $size; - padding-bottom: $size; -} - -@mixin mx($size) { - margin-left: $size; - margin-right: $size; -} - -@mixin my($size) { - margin-top: $size; - margin-bottom: $size; -} - -.container { - width: 100%; - @include screen(sm) { - max-width: 640px; - } - @include screen(md) { - max-width: 768px; - } - @include screen(lg) { - max-width: 1024px; - } - @include screen(xl) { - max-width: 1280px; - } -} \ No newline at end of file diff --git a/src/style/utilities/_transition.scss b/src/style/utilities/_transition.scss deleted file mode 100644 index cdbeeff..0000000 --- a/src/style/utilities/_transition.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin transition { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 300ms; - transition-property: all; -} \ No newline at end of file diff --git a/src/style/utilities/backgrounds/_283-yuika.scss b/src/style/utilities/backgrounds/_283-yuika.scss deleted file mode 100644 index a2d35b9..0000000 --- a/src/style/utilities/backgrounds/_283-yuika.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin bg-283-yuika() { - background-image: url('/images/bg/283-yuika/bg-sm.jpg'); - background-size: cover; - background-position: right 25% top 20%; - @include screen(sm) { - background-image: url('/images/bg/283-yuika/bg-md.jpg'); - } - @include screen(md) { - background-image: url('/images/bg/283-yuika/bg-lg.jpg'); - } - @include screen(lg) { - background-image: url('/images/bg/283-yuika/bg-xl.jpg'); - } - @include screen(xl) { - background-image: url('/images/bg/283-yuika/bg-xxl.jpg') - } -} \ No newline at end of file diff --git a/src/style/utilities/backgrounds/_765-yuriko.scss b/src/style/utilities/backgrounds/_765-yuriko.scss deleted file mode 100644 index b2b1765..0000000 --- a/src/style/utilities/backgrounds/_765-yuriko.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin bg-765-yuriko() { - background-image: url('/images/bg/765-yuriko/bg-sm.jpg'); - background-size: cover; - background-position: right 25% top 20%; - @include screen(sm) { - background-image: url('/images/bg/765-yuriko/bg-md.jpg'); - } - @include screen(md) { - background-image: url('/images/bg/765-yuriko/bg-lg.jpg'); - } - @include screen(lg) { - background-image: url('/images/bg/765-yuriko/bg-xl.jpg'); - } - @include screen(xl) { - background-image: url('/images/bg/765-yuriko/bg-xxl.jpg') - } -} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index d01177b..42b6f95 100644 --- a/yarn.lock +++ b/yarn.lock @@ -823,6 +823,11 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@damillora/shian@^0.1.2": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@damillora/shian/-/shian-0.1.2.tgz#bd0cfe32ba52601b9845336cf8659c52595abeb1" + integrity sha512-dVZ0mTH7csD6OxbFMPrWbcaDV2lI1l3wzCDLz0J/YFEH4m8zF5m/8V1Z7xN1HhwC3z6pVvC+tCC+yQ7iP7HlnA== + "@polka/url@^1.0.0-next.11", "@polka/url@^1.0.0-next.9": version "1.0.0-next.11" resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.11.tgz#aeb16f50649a91af79dbe36574b66d0f9e4d9f71"