eclipse/sr2ini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

custom font is now a regular npm dependency declared in package.json and "@import"ed in sr2ini.scss; also cleaned up the scss code

Browse Source
This commit is contained in:
Tobias 2023-09-18 11:51:40 +02:00
parent bce5ff10e6
commit 195e343d30
2 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -48,6 +48,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fontsource/electrolize": "^5.0.12",
"augmented-ui": "^2.0.0", "augmented-ui": "^2.0.0",
"bootstrap": "^5.2.3", "bootstrap": "^5.2.3",
"jquery": "^3.6.3" "jquery": "^3.6.3"

48
src/css/sr2ini.scss
View File

@ -1,30 +1,39 @@
/* *************************
* Import font (Electrolize)
*************************** */
@font-face {
font-family: "Electrolize";
src: local("Electrolize"), url("../../node_modules/@fontsource/electrolize/files/electrolize-latin-400-normal.woff2") format("woff2");
}
/* *********************** /* ***********************
* Non-bootstrap variables * Non-bootstrap variables
************************* */ ************************* */
// foreground colors
$fg: gold; $fg: gold;
$fg-bright: yellow; $fg-bright: yellow;
$fg-dark: orange; $fg-dark: orange;
// old fg-colors: deeppink, lightpink, #b3005f; // old fg-colors: deeppink, lightpink, #b3005f;
// background colors
$bg: cyan; // #00ffff $bg: cyan; // #00ffff
$bg-bright: lightcyan; // #e0ffff $bg-bright: lightcyan; // #e0ffff
$bg-dark: darkcyan; // #008b8b $bg-dark: darkcyan; // #008b8b
// base font size
$html-font-size: 14px; $html-font-size: 14px;
/* ****************************** /* ******************************
* Overriding Bootstrap variables * Override Bootstrap variables
******************************** */ ******************************** */
@import "../../node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/functions";
// fonts // font
@font-face {
font-family: "Electrolize";
src: local("Electrolize"), url("../img/Electrolize-Regular.ttf") format("truetype"), url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
}
$font-family-base: "Electrolize"; $font-family-base: "Electrolize";
// colors // colors
@ -75,9 +84,9 @@ $form-feedback-icon-invalid: none;
@import "../../node_modules/bootstrap/scss/reboot"; @import "../../node_modules/bootstrap/scss/reboot";
/* ****** /* *************
* Mixins * Custom mixins
******** */ *************** */
@mixin aug() { @mixin aug() {
--aug-b: 5px; --aug-b: 5px;
@ -102,9 +111,9 @@ $form-feedback-icon-invalid: none;
} }
/* ******************* /* **************
* Responsive styles * Responsiveness
********************* */ **************** */
@media (width <= 500px) { @media (width <= 500px) {
html { font-size: $html-font-size; } html { font-size: $html-font-size; }
@ -158,13 +167,13 @@ body {
margin: .2rem; margin: .2rem;
} }
//button { font-family: Electrolize; }
.container { .container {
padding: .2rem; padding: .2rem;
position: relative; position: relative;
} }
button { font-family: Electrolize; }
.sr2-button { .sr2-button {
background: transparent; background: transparent;
border: .07rem solid $bg; border: .07rem solid $bg;
@ -532,9 +541,14 @@ header.navbar {
color: black; color: black;
} }
&[type="number"]::-webkit-inner-spin-button, &[type="number"] {
&[type="number"]::-webkit-outer-spin-button { -moz-appearance: textfield;
appearance: none;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
} }
&:focus:invalid { box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark !important; } &:focus:invalid { box-shadow: 0 0 .25rem $fg-bright, 0 0 .5rem $fg, 0 0 1rem $fg-dark !important; }