mirror of
https://github.com/Mr-Wiseguy/Zelda64Recomp.git
synced 2024-11-18 03:39:16 +01:00
init sass rework
This commit is contained in:
thecozies
parent
31e9d729c2
commit
6af312470a
2
.gitignore
vendored
2
.gitignore
vendored
@ -50,3 +50,5 @@ vcpkg_installed/
|
|||||||
# Runtime files
|
# Runtime files
|
||||||
imgui.ini
|
imgui.ini
|
||||||
rt64.log
|
rt64.log
|
||||||
|
|
||||||
|
node_modules/
|
||||||
|
|||||||
BIN
assets/ChiaroBold.otf
Normal file
BIN
assets/ChiaroBold.otf
Normal file
Binary file not shown.
BIN
assets/ChiaroNormal.otf
Normal file
BIN
assets/ChiaroNormal.otf
Normal file
Binary file not shown.
@ -3,6 +3,7 @@
|
|||||||
<title>Launcher</title>
|
<title>Launcher</title>
|
||||||
<link type="text/rcss" href="rml.rcss"/>
|
<link type="text/rcss" href="rml.rcss"/>
|
||||||
<link type="text/rcss" href="recomp.rcss"/>
|
<link type="text/rcss" href="recomp.rcss"/>
|
||||||
|
<link type="text/rcss" href="main.rcss"/>
|
||||||
<style>
|
<style>
|
||||||
body
|
body
|
||||||
{
|
{
|
||||||
@ -13,9 +14,14 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="window">
|
<div id="window">
|
||||||
|
<h1>Header-1</h1><br />
|
||||||
|
<h2>Header-2</h2><br />
|
||||||
|
<h3>Header-3</h3><br />
|
||||||
|
<h4>Label-LG</h4><br />
|
||||||
|
<h5>Label-MD</h5><br />
|
||||||
|
<h6>Label-SM</h6><br />
|
||||||
|
<div>Body</div><br />
|
||||||
<button onclick="start_game" style="align-self: center;">Start Game</button>
|
<button onclick="start_game" style="align-self: center;">Start Game</button>
|
||||||
This is a sample.<br/>
|
|
||||||
Test text
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</rml>
|
</rml>
|
||||||
|
|||||||
1
assets/main.rcss
Normal file
1
assets/main.rcss
Normal file
@ -0,0 +1 @@
|
|||||||
|
h1{font-size:64dp;font-style:normal;font-weight:700;letter-spacing:4.48dp;line-height:64dp}h2{font-size:48dp;font-style:normal;font-weight:700;letter-spacing:3.36dp;line-height:48dp}h3{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:2.24dp;line-height:32dp}h4{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:3.52dp;line-height:32dp}h5{font-size:20dp;font-style:normal;font-weight:700;letter-spacing:2.2dp;line-height:20dp}h6{font-size:12dp;font-style:normal;font-weight:700;letter-spacing:1.32dp;line-height:12dp;text-transform:uppercase}body{font-size:16dp;font-style:normal;font-weight:400;letter-spacing:1.32dp;line-height:16dp}h1{font-size:64dp;font-style:normal;font-weight:700;letter-spacing:4.48dp;line-height:64dp}h2{font-size:48dp;font-style:normal;font-weight:700;letter-spacing:3.36dp;line-height:48dp}h3{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:2.24dp;line-height:32dp}h4{font-size:32dp;font-style:normal;font-weight:700;letter-spacing:3.52dp;line-height:32dp}h5{font-size:20dp;font-style:normal;font-weight:700;letter-spacing:2.2dp;line-height:20dp}h6{font-size:12dp;font-style:normal;font-weight:700;letter-spacing:1.32dp;line-height:12dp;text-transform:uppercase}body{font-size:16dp;font-style:normal;font-weight:400;letter-spacing:1.32dp;line-height:16dp}body{box-sizing:border-box;color:#f2f2f2;font-family:chiaro}*,*:before,*:after{box-sizing:inherit}button{background-color:#4e1b7e}/*# sourceMappingURL=main.rcss.map */
|
||||||
1
assets/scss/.nvmrc
Normal file
1
assets/scss/.nvmrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
iron
|
||||||
94
assets/scss/.stylelintrc
Normal file
94
assets/scss/.stylelintrc
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"stylelint-config-recommended",
|
||||||
|
"stylelint-config-standard",
|
||||||
|
"stylelint-config-sass-guidelines",
|
||||||
|
"stylelint-config-property-sort-order-smacss",
|
||||||
|
"stylelint-config-standard-scss"
|
||||||
|
],
|
||||||
|
"plugins": ["stylelint-scss"],
|
||||||
|
"overrides": [{
|
||||||
|
"files": ["**/*.scss"],
|
||||||
|
"customSyntax": "postcss-scss"
|
||||||
|
}],
|
||||||
|
"rules": {
|
||||||
|
"no-descending-specificity": null,
|
||||||
|
"declaration-empty-line-before": null,
|
||||||
|
"declaration-colon-newline-after": null,
|
||||||
|
"declaration-block-no-duplicate-properties": true,
|
||||||
|
"declaration-block-trailing-semicolon": null,
|
||||||
|
"declaration-no-important": true,
|
||||||
|
"declaration-property-value-disallowed-list": {
|
||||||
|
"/^transition/": ["/all/"]
|
||||||
|
},
|
||||||
|
"block-closing-brace-newline-after": null,
|
||||||
|
"max-empty-lines": null,
|
||||||
|
"selector-list-comma-newline-after": null,
|
||||||
|
"at-rule-empty-line-before": null,
|
||||||
|
"at-rule-semicolon-newline-after": null,
|
||||||
|
"selector-pseudo-element-colon-notation": "single",
|
||||||
|
"color-no-hex": true,
|
||||||
|
"function-url-quotes": "always",
|
||||||
|
"max-nesting-depth": [
|
||||||
|
3,
|
||||||
|
{
|
||||||
|
"ignoreAtRules": ["each", "media", "supports", "include"],
|
||||||
|
"severity": "warning"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"number-leading-zero": null,
|
||||||
|
"order/order": [
|
||||||
|
[
|
||||||
|
"custom-properties",
|
||||||
|
"dollar-variables",
|
||||||
|
{
|
||||||
|
"type": "at-rule",
|
||||||
|
"name": "extend"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "at-rule",
|
||||||
|
"name": "include"
|
||||||
|
},
|
||||||
|
"declarations",
|
||||||
|
"rules"
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"order/properties-alphabetical-order": null,
|
||||||
|
"property-no-vendor-prefix": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"severity": "warning"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"value-no-vendor-prefix": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"severity": "warning"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"scss/selector-no-redundant-nesting-selector": null,
|
||||||
|
"selector-class-pattern": null,
|
||||||
|
"selector-max-compound-selectors": [
|
||||||
|
3,
|
||||||
|
{
|
||||||
|
"severity": "warning"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"selector-no-qualifying-type": null,
|
||||||
|
"string-quotes": null,
|
||||||
|
"max-line-length": null,
|
||||||
|
"keyframes-name-pattern": null,
|
||||||
|
"scss/double-slash-comment-empty-line-before": null,
|
||||||
|
"scss/double-slash-comment-whitespace-inside": null,
|
||||||
|
"scss/dollar-variable-empty-line-before": null,
|
||||||
|
"scss/dollar-variable-pattern": "[a-z-]",
|
||||||
|
"scss/at-import-partial-extension": null,
|
||||||
|
"declaration-block-no-redundant-longhand-properties": [true, { "severity": "warning" }],
|
||||||
|
"color-function-notation": null,
|
||||||
|
"alpha-value-notation": null,
|
||||||
|
"at-rule-no-unknown": null,
|
||||||
|
"scss/at-rule-no-unknown": true,
|
||||||
|
"scss/no-global-function-names": null,
|
||||||
|
"unit-no-unknown": [true, { "ignoreUnits": ["dp"] }]
|
||||||
|
}
|
||||||
|
}
|
||||||
2
assets/scss/main.scss
Normal file
2
assets/scss/main.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import "styles/base";
|
||||||
|
@import "styles/global";
|
||||||
2166
assets/scss/package-lock.json
generated
Normal file
2166
assets/scss/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
assets/scss/package.json
Normal file
23
assets/scss/package.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "mmrecomp-ui-scss",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "sass --no-source-map --style=compressed main.scss ..\\main.rcss",
|
||||||
|
"watch": "sass --no-source-map --style=compressed main.scss ..\\main.rcss --watch",
|
||||||
|
"lint": "stylelint '.\\**\\*.scss'"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"postcss-scss": "^4.0.9",
|
||||||
|
"stylelint": "^15.11.0",
|
||||||
|
"stylelint-config-property-sort-order-smacss": "^9.1.0",
|
||||||
|
"stylelint-config-sass-guidelines": "^10.0.0",
|
||||||
|
"stylelint-config-scss": "^1.0.0-security",
|
||||||
|
"stylelint-config-standard": "^34.0.0",
|
||||||
|
"stylelint-config-standard-scss": "^11.1.0",
|
||||||
|
"stylelint-scss": "^5.3.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
2
assets/scss/styles/base.scss
Normal file
2
assets/scss/styles/base.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import "./vars/colors";
|
||||||
|
@import "./mixins/typography";
|
||||||
45
assets/scss/styles/global.scss
Normal file
45
assets/scss/styles/global.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@import "./base";
|
||||||
|
|
||||||
|
|
||||||
|
$font-stack: chiaro;
|
||||||
|
$font-size: 20dp;
|
||||||
|
|
||||||
|
body
|
||||||
|
{
|
||||||
|
@extend %body;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: $color-text;
|
||||||
|
font-family: $font-stack;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
@extend %header-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@extend %header-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@extend %header-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
@extend %label-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
@extend %label-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
@extend %label-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: $color-primary-d;
|
||||||
|
}
|
||||||
57
assets/scss/styles/mixins/_typography.scss
Normal file
57
assets/scss/styles/mixins/_typography.scss
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
|
||||||
|
%header-1 {
|
||||||
|
font-size: 64dp;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 4.48dp;
|
||||||
|
line-height: 64dp;
|
||||||
|
}
|
||||||
|
|
||||||
|
%header-2 {
|
||||||
|
font-size: 48dp;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 3.36dp;
|
||||||
|
line-height: 48dp;
|
||||||
|
}
|
||||||
|
|
||||||
|
%header-3 {
|
||||||
|
font-size: 32dp;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 2.24dp;
|
||||||
|
line-height: 32dp;
|
||||||
|
}
|
||||||
|
|
||||||
|
%label-lg {
|
||||||
|
font-size: 32dp;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 3.52dp;
|
||||||
|
line-height: 32dp;
|
||||||
|
}
|
||||||
|
|
||||||
|
%label-md {
|
||||||
|
font-size: 20dp;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 2.2dp;
|
||||||
|
line-height: 20dp;
|
||||||
|
}
|
||||||
|
|
||||||
|
%label-sm {
|
||||||
|
font-size: 12dp;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 1.32dp;
|
||||||
|
line-height: 12dp;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
%body {
|
||||||
|
font-size: 16dp;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 1.32dp;
|
||||||
|
line-height: 16dp;
|
||||||
|
}
|
||||||
28
assets/scss/styles/vars/_colors.scss
Normal file
28
assets/scss/styles/vars/_colors.scss
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/* stylelint-disable color-no-hex, color-hex-length */
|
||||||
|
|
||||||
|
$color-background-1: #08070D;
|
||||||
|
$color-background-2: #121018;
|
||||||
|
$color-background-3: #191622;
|
||||||
|
$color-bg-overlay: rgba(190, 184, 219, 0.0500);
|
||||||
|
$color-bg-shadow: rgba(0, 0, 0, 0.3500);
|
||||||
|
$color-text: #F2F2F2;
|
||||||
|
$color-text-dim: #CCCCCC;
|
||||||
|
$color-text-inactive: rgba(255, 255, 255, 0.6000);
|
||||||
|
$color-primary: #B97DF2;
|
||||||
|
$color-primary-l: #DABAF7;
|
||||||
|
$color-primary-d: #4E1B7E;
|
||||||
|
$color-secondary: #17D6E8;
|
||||||
|
$color-secondary-l: #A2EFF6;
|
||||||
|
$color-secondary-d: #124E54;
|
||||||
|
$color-warning: #E9CD35;
|
||||||
|
$color-warning-l: #F9E57C;
|
||||||
|
$color-warning-d: #8A770F;
|
||||||
|
$color-error: #F86039;
|
||||||
|
$color-error-l: #FE8667;
|
||||||
|
$color-error-d: #591C0D;
|
||||||
|
$color-success: #45D043;
|
||||||
|
$color-success-l: #AAEAA9;
|
||||||
|
$color-success-d: #207A1F;
|
||||||
|
$color-border: rgba(255, 255, 255, 0.2000);
|
||||||
|
$color-border-soft: rgba(255, 255, 255, 0.1000);
|
||||||
|
$color-border-hard: rgba(255, 255, 255, 0.3000);
|
||||||
@ -774,6 +774,8 @@ void init_hook(RT64::RenderInterface* interface, RT64::RenderDevice* device) {
|
|||||||
};
|
};
|
||||||
FontFace font_faces[] = {
|
FontFace font_faces[] = {
|
||||||
{"LatoLatin-Regular.ttf", false},
|
{"LatoLatin-Regular.ttf", false},
|
||||||
|
{"ChiaroNormal.otf", false},
|
||||||
|
{"ChiaroBold.otf", false},
|
||||||
{"LatoLatin-Italic.ttf", false},
|
{"LatoLatin-Italic.ttf", false},
|
||||||
{"LatoLatin-Bold.ttf", false},
|
{"LatoLatin-Bold.ttf", false},
|
||||||
{"LatoLatin-BoldItalic.ttf", false},
|
{"LatoLatin-BoldItalic.ttf", false},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user