Initial commit

.gitignore

@@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

README.md

@@ -0,0 +1,3 @@
+# Shian
+
+A common component library for nanao.moe

gulpfile.js

@@ -0,0 +1,31 @@
+const {series, watch, src, dest, parallel} = require('gulp');
+
+const sass = require('gulp-sass');
+const livereload = require('gulp-livereload');
+const zip = require('gulp-zip');
+const concat = require('gulp-concat');
+const uglify = require('gulp-uglify');
+const cleancss = require('gulp-clean-css');
+
+function serve(done) {
+    livereload.listen();
+    done();
+}
+
+function css () {
+
+  return src('src/sass/app.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(cleancss({compatibility: 'ie8'}))
+    .pipe(dest('dist/'))
+    .pipe(livereload())
+}
+const cssWatcher = () => watch('src/sass/**', css);
+const watcher = cssWatcher;
+const build = css;
+const dev = series(build, serve, watcher);
+
+exports.build = build;
+exports.dev = dev;
+exports.default = build;
+

package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@damillora/shian",
+    "description": "Common component library for nanao.moe",
+    "version": "0.2.0",
+    "license": "MIT",
+    "author": {
+        "email": "developer@damillora.com"
+    },
+    "scripts": {
+        "build": "gulp build"
+    },
+    "dependencies": {
+    },
+    "devDependencies": {
+        "@fullhuman/postcss-purgecss": "^1.3.0",
+        "autoprefixer": "^10.2.1",
+        "gulp": "^4.0.2",
+        "gulp-clean-css": "^4.2.0",
+        "gulp-concat": "^2.6.1",
+        "gulp-livereload": "^4.0.2",
+        "gulp-postcss": "^9.0.0",
+        "gulp-sass": "^4.1.0",
+        "gulp-uglify": "^3.0.2",
+        "gulp-zip": "^5.0.1",
+        "postcss": "^8.2.3",
+        "typeface-exo-2": "^0.0.72"
+    },
+    "files": [
+      "dist/**"
+    ]
+}

src/sass/app.scss

@@ -0,0 +1,19 @@
+@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';

src/sass/common/_base.scss

@@ -0,0 +1,122 @@
+
+
+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;
+}

src/sass/common/_theme.scss

@@ -0,0 +1,30 @@
+$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;

src/sass/components/_copyarea.scss

@@ -0,0 +1,8 @@
+.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;
+}

src/sass/components/_floatingyuriko.scss

@@ -0,0 +1,28 @@
+.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);
+}

src/sass/components/_gallery.scss

@@ -0,0 +1,51 @@
+
+.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;
+    }    
+}

src/sass/components/_gameitem.scss

@@ -0,0 +1,37 @@
+.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;
+    }
+}

src/sass/components/_header.scss

@@ -0,0 +1,99 @@
+
+.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);
+    }
+}

src/sass/components/_mediaitem.scss

@@ -0,0 +1,24 @@
+.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);
+        }
+    }
+}

src/sass/components/_menu.scss

@@ -0,0 +1,50 @@
+.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;
+    }
+}

src/sass/components/_pageheader.scss

@@ -0,0 +1,37 @@
+.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;
+        }
+    }
+}
+

src/sass/components/_projectitem.scss

@@ -0,0 +1,25 @@
+.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%;
+    }
+}

src/sass/utilities/_normalize.scss

@@ -0,0 +1,537 @@
+/*! 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 <details> 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;
+}

src/sass/utilities/_responsive.scss

@@ -0,0 +1,14 @@
+@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 ; }
+    }
+}

src/sass/utilities/_spacing.scss

@@ -0,0 +1,35 @@
+@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;
+    }
+}

src/sass/utilities/_transition.scss

@@ -0,0 +1,5 @@
+@mixin transition {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-property: all;
+}