Mirrors
/
Zelda64Recomp
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2 from Mr-Wiseguy/sass-rework 

Sass rework
This commit is contained in:
thecozies 2024-01-02 11:06:39 -06:00 committed by GitHub
parent 31e9d729c2 8bb45dbacd
commit 62e70ab0a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 2433 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -50,3 +50,5 @@ vcpkg_installed/
# Runtime files
imgui.ini
rt64.log
node_modules/

BIN
assets/ChiaroBold.otf Normal file
View File

Binary file not shown.

BIN
assets/ChiaroNormal.otf Normal file
View File

Binary file not shown.

10
assets/launcher.rml
View File

@ -3,6 +3,7 @@
<title>Launcher</title>
<link type="text/rcss" href="rml.rcss"/>
<link type="text/rcss" href="recomp.rcss"/>
<link type="text/rcss" href="main.rcss"/>
<style>
body
{
@ -13,9 +14,14 @@
</head>
<body>
<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>
This is a sample.<br/>
Test text
</div>
</body>
</rml>

1
assets/main.rcss Normal file
View 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:border-box}button{background-color:#4e1b7e}

5
assets/recomp.rcss
View File

@ -1,6 +1,5 @@
* {
box-sizing:border-box;
font-effect: outline(2dp black);
}
hr {
@ -10,7 +9,7 @@ hr {
}
body {
font-family: LatoLatin;
font-family: chiaro;
font-weight: normal;
font-style: normal;
font-size: 20dp;
@ -649,4 +648,4 @@ textarea scrollbarhorizontal sliderbar:hover {
textarea scrollbarhorizontal sliderbar:active {
background-color: rgba(119, 0, 0, .8)
}
}

1
assets/scss/.nvmrc Normal file
View File

@ -0,0 +1 @@
iron

94
assets/scss/.stylelintrc Normal file
View 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
View File

@ -0,0 +1,2 @@
@import "styles/base";
@import "styles/global";

2166
assets/scss/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

23
assets/scss/package.json Normal file
View 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
View File

@ -0,0 +1,2 @@
@import "./vars/colors";
@import "./mixins/typography";

45
assets/scss/styles/global.scss Normal file
View 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: border-box;
}
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
View 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
View 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);

2
src/ui/ui_renderer.cpp
View File

@ -774,6 +774,8 @@ void init_hook(RT64::RenderInterface* interface, RT64::RenderDevice* device) {
};
FontFace font_faces[] = {
{"LatoLatin-Regular.ttf", false},
{"ChiaroNormal.otf", false},
{"ChiaroBold.otf", false},
{"LatoLatin-Italic.ttf", false},
{"LatoLatin-Bold.ttf", false},
{"LatoLatin-BoldItalic.ttf", false},