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",
"dependencies": {
"@fontsource/electrolize": "^5.0.12",
"augmented-ui": "^2.0.0",
"bootstrap": "^5.2.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
************************* */
// foreground colors
$fg: gold;
$fg-bright: yellow;
$fg-dark: orange;
// old fg-colors: deeppink, lightpink, #b3005f;
// background colors
$bg: cyan; // #00ffff
$bg-bright: lightcyan; // #e0ffff
$bg-dark: darkcyan; // #008b8b
// base font size
$html-font-size: 14px;
/* ******************************
* Overriding Bootstrap variables
* Override Bootstrap variables
******************************** */
@import "../../node_modules/bootstrap/scss/functions";
// fonts
@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
$font-family-base: "Electrolize";
// colors
@ -75,9 +84,9 @@ $form-feedback-icon-invalid: none;
@import "../../node_modules/bootstrap/scss/reboot";
/* ******
* Mixins
******** */
/* *************
* Custom mixins
*************** */
@mixin aug() {
--aug-b: 5px;
@ -102,9 +111,9 @@ $form-feedback-icon-invalid: none;
}
/* *******************
* Responsive styles
********************* */
/* **************
* Responsiveness
**************** */
@media (width <= 500px) {
html { font-size: $html-font-size; }
@ -158,13 +167,13 @@ body {
margin: .2rem;
}
//button { font-family: Electrolize; }
.container {
padding: .2rem;
position: relative;
}
button { font-family: Electrolize; }
.sr2-button {
background: transparent;
border: .07rem solid $bg;
@ -532,9 +541,14 @@ header.navbar {
color: black;
}
&[type="number"]::-webkit-inner-spin-button,
&[type="number"]::-webkit-outer-spin-button {
appearance: none;
&[type="number"] {
-moz-appearance: textfield;
&::-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; }