Initial commit

assets/css/_vars.scss

@@ -0,0 +1,27 @@
+$cl_black: rgb(0, 0, 0);
+$cl_gray: rgb(128, 128, 128);
+$cl_white: rgb(255, 255, 255);
+
+$cl_anemo: rgb(39, 161, 146);
+$cl_pyro: rgb(190, 40, 40);
+$cl_hydro: rgb(34, 143, 186);
+$cl_electro: rgb(109, 81, 184);
+$cl_cryo: rgb(128, 172, 211);
+$cl_dendro: rgb(83, 153, 100);
+$cl_geo: rgb(214, 153, 64);
+
+$cl_common: rgb(55, 180, 140);
+$cl_rare: rgb(80, 130, 205);
+$cl_epic: rgb(160, 65, 225);
+$cl_legendary: rgb(215, 125, 55);
+$cl_challenge: rgb(190, 40, 40);
+$cl_seelie: rgb(25, 225, 215);
+
+$cl_sand: rgb(120, 106, 80);
+$cl_sea: rgb(27, 40, 59);
+
+$cl_ui_dark: rgb(74, 83, 102);
+$cl_ui_darker: rgb(40, 46, 61);
+$cl_ui_shell: rgb(183, 186, 194);
+$cl_ui_light: rgb(236, 229, 216);
+$cl_ui_hover: rgb(217, 167, 98);

assets/css/font.scss

@@ -0,0 +1,31 @@
+@font-face {
+    font-family: 'ptsans_regular';
+    src: url('../font/ptsans-regular.woff2') format('woff2'),
+    url('../font/ptsans-regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'ptsans_bold';
+    src: url('../font/ptsans-bold.woff2') format('woff2'),
+    url('../font/ptsans-bold.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'ptsans_italic';
+    src: url('../font/ptsans-italic.woff2') format('woff2'),
+    url('../font/ptsans-italic.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'ptsans_bold_italic';
+    src: url('../font/ptsans-bolditalic.woff2') format('woff2'),
+    url('../font/ptsans-bolditalic.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}

assets/css/layout.scss

@@ -0,0 +1,53 @@
+body {
+    overflow: hidden;
+}
+
+#page-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+    width: 100vw;
+}
+
+#header-container, #footer-container {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    padding: 0 20px;
+    z-index: 2;
+}
+
+#header-container {
+    max-height: 64px;
+}
+
+#main-container {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    z-index: 1;
+}
+
+#main-left-container, #main-center-container, #main-right-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+#main-left-container, #main-right-container {
+    flex-shrink: 0;
+}
+
+#main-center-container {
+    flex-grow: 1;
+    max-width: 100%;
+}
+
+#footer-container {
+    max-height: 32px;
+}

assets/css/normalize.scss

@@ -0,0 +1,198 @@
+html {
+    box-sizing: border-box;
+    font-size: 16px;
+    height: 100vh;
+    line-height: 1.15;
+    -webkit-text-size-adjust: 100%;
+    width: 100vw;
+}
+
+* {
+    box-sizing: border-box;
+    position: relative;
+    &:before, &:after {
+        box-sizing: border-box;
+    }
+    //&:focus {
+    //    outline: none;
+    //}
+}
+
+body {
+    height: 100vh;
+    margin: 0;
+    width: 100vw;
+}
+
+main {
+    display: block;
+}
+
+a {
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+    &:visited, &:hover, &:active, &:focus {
+        color: inherit;
+    }
+}
+
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline dotted;
+}
+
+b, strong {
+    font-weight: bolder;
+}
+
+button, input, optgroup, select, textarea {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+    margin: 0;
+}
+
+button, input {
+    overflow: visible;
+}
+
+button, select {
+    text-transform: none;
+}
+
+details {
+    display: block;
+}
+
+div, textarea, table, td, th, code, pre, samp {
+    word-wrap: break-word;
+    hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+}
+
+img {
+    border-style: none;
+    max-width: 100%;
+    height: auto;
+}
+
+a, button, input, select, textarea {
+    &:focus {
+        outline: none;
+    }
+}
+
+legend {
+    box-sizing: border-box;
+    color: inherit;
+    display: table;
+    max-width: 100%;
+    padding: 0;
+    white-space: normal;
+}
+
+pre, code, kbd, samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+    white-space: pre-wrap;
+}
+
+progress {
+    vertical-align: baseline;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+summary {
+    display: list-item;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+textarea {
+    overflow: auto;
+}
+
+template {
+    display: none;
+}
+
+button, [type="button"], [type="reset"], [type="submit"] {
+    -webkit-appearance: button;
+    &:hover {
+        cursor: pointer;
+    }
+    &::-moz-focus-inner, &::-moz-focus-inner, &::-moz-focus-inner, &::-moz-focus-inner {
+        border-style: none;
+        padding: 0;
+    }
+    &:-moz-focusring, &:-moz-focusring, &:-moz-focusring, &:-moz-focusring {
+        outline: 1px dotted ButtonText;
+    }
+}
+
+[type="checkbox"], [type="radio"] {
+    padding: 0;
+}
+
+[type="number"] {
+    //-moz-appearance: textfield;
+    &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+        height: auto;
+        //-webkit-appearance: none;
+    }
+}
+
+[type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+    &::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+}
+
+[hidden] {
+    display: none !important;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}