diff --git a/package.json b/package.json index 42d586f..5d5dc70 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,8 @@ "css-loader": "^3.4.2", "file-loader": "^5.0.2", "history": "^4.10.1", + "less": "^3.11.1", + "less-loader": "^5.0.0", "preact": "^10.3.1", "preact-render-to-string": "^5.1.4", "preact-router": "^3.2.1", diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 60c14d3..0000000 --- a/src/index.css +++ /dev/null @@ -1,55 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - background-color: #0d193b; - color: #a0ccff; - font-family: sans-serif; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 4px; - margin-bottom: 4px; - color: #ffffff; - font-weight: normal; -} - -h1, h2, h3 { - text-align: center; -} - -h4, h5, h6 { - font-weight: bold; -} - - -a { - color: #00caca; - text-decoration: none; -} - -a:hover { - color: #4affff; -} - -a:active { - color: #ffffff; -} - -img { - max-width: 100%; -} - -code { - font-family: "Consolas", monospace; -} - -blockquote { - border-left: 3px solid #a0ccff; - padding: 4px; - margin-left: 12px; - background-color: rgba(62.7%, 80%, 100%, 0.1); - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} \ No newline at end of file diff --git a/src/index.js b/src/index.js index b87acd2..5c528b4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import { Component } from 'preact'; // noinspection ES6UnusedImports -import _style from './index.css'; +import _style from './index.less'; // noinspection ES6UnusedImports import _manifest from './meta/manifest.json'; // noinspection ES6UnusedImports diff --git a/src/index.less b/src/index.less new file mode 100644 index 0000000..8b384ba --- /dev/null +++ b/src/index.less @@ -0,0 +1,136 @@ +@import "./styles/constants.less"; + +* { + box-sizing: border-box; +} + +body { + background-color: @bg; + color: @fg; + font-family: @sans; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 4px; + margin-bottom: 4px; + color: @accent; + font-weight: normal; + text-align: center; +} + +h1 { + font-size: xx-large; +} + +a { + color: @link; + text-decoration: none; + + &:hover { + color: #4affff; + } + + &:active { + color: #ffffff; + } +} + +img { + max-width: 100%; + max-height: 300px; +} + +b { + color: @accent; +} + +code { + font-family: @mono; +} + +blockquote { + color: @fg; + border-left: 3px solid @fg; + background-color: fade(@fg, 10%); + padding: 4px 4px 4px 8px; + margin: 8px; +} + +input[type="text"], input[type="password"] { + color: @fg; + background-color: @bg; + border: 1px solid @bg-lighter; + border-radius: 4px; + padding: 4px; + font-size: medium; + + &:disabled { + color: grey; + background-color: #1f1f1f; + cursor: not-allowed; + } +} + +button { + color: @fg; + background-color: @bg; + border: 1px solid @bg-lighter; + border-radius: 4px; + padding: 4px; + font-size: medium; + + &:hover { + background-color: @bg-light; + border: 1px solid @fg; + } + + &:active { + background-color: @bg-lighter; + border: 1px solid @fg; + } + + &.disabled { + color: grey; + background-color: #1f1f1f; + cursor: not-allowed; + } +} + +hr { + border: 1px solid @bg-light; + margin-top: 24px; + margin-bottom: 24px; +} + +table { + border-spacing: 0; + border: 2px solid @bg-lighter; + background-color: @bg-light; + border-radius: 4px; + border-collapse: collapse; + + thead, tbody { + th, td { + padding: 4px; + border: 1px solid @bg-lighter; + } + } + + thead { + background-color: @bg-lighter; + color: @accent; + border-radius: 4px 4px 0 0; + } +} + +.left { + text-align: left; +} + +.center { + text-align: center; +} + +.right { + text-align: right; +} diff --git a/src/routes/ottimizzazioneLineare.js b/src/routes/ottimizzazioneLineare.js index ae2753d..8291449 100644 --- a/src/routes/ottimizzazioneLineare.js +++ b/src/routes/ottimizzazioneLineare.js @@ -59,6 +59,111 @@ export default class OttimizzazioneLineare extends Component { + + +

+ Un sistema รจ in forma standard quando ha: +

+ + + +

+ Possiamo trasformare una disequazione in equazione introducendo variabili slack: +

+

+ {r`3x + 2y \leq 15 \implies 3x + 2y + s_1 = 15`} +

+

+ In seguito, possiamo riscrivere tutte le funzioni in termini delle variabili slack. +

+ + Si ottiene qualcosa come {r`z = -2 s_1 - 3 s_2 + 40`}. + + + +

+ Un modo per rappresentare sistemi in forma standard. +

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ xys_1s_2
ob.807000
+ 3210
+ 2301
+

+

+ Riscrivendo in termini delle variabili slack, otteniamo: +

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ xys_1s_2
ob.00-20-10
+ 10{r`\frac{3}{5}`}{r`-\frac{2}{5}`}
+ 01{r`-\frac{2}{5}`}{r`\frac{3}{5}`}
+

+ + ) } diff --git a/src/styles/constants.less b/src/styles/constants.less new file mode 100644 index 0000000..8ceeb85 --- /dev/null +++ b/src/styles/constants.less @@ -0,0 +1,17 @@ +@bg: #0d193b; +@bg-light: #1c2b4f; +@bg-lighter: #2a3d62; +@fg: #a0ccff; +@accent: #ffffff; +@link: #00caca; + +@red: #ff7d7d; +@orange: #ffbb7d; +@yellow: #ffff7d; +@lime: #7dff7d; +@cyan: #7dffff; +@blue: #7d7dff; +@magenta: #ff7dff; + +@sans: sans-serif; +@mono: "Consolas", "SFMono-Regular", "Liberation Mono", "Menlo", monospace; diff --git a/src/styles/override-easymde.less b/src/styles/override-easymde.less new file mode 100644 index 0000000..13bcd7b --- /dev/null +++ b/src/styles/override-easymde.less @@ -0,0 +1,121 @@ +@import "./constants.less"; + +.CodeMirror { + font-family: "Consolas", monospace !important; + background-color: @bg !important; + color: @fg !important; + border-top: 0 !important; + border-bottom: 0 !important; + border-left: 1px solid @bg-lighter !important; + border-right: 1px solid @bg-lighter !important; + border-radius: 0 !important; + caret-color: white; + + .cm-link { + color: @cyan !important; + } + + .cm-url { + color: @link !important; + } + + .cm-tag { + color: @magenta !important; + } + + .cm-strong { + color: @yellow !important; + } + + .cm-em { + color: @orange !important; + } + + .cm-quote { + color: @lime !important; + } + + .cm-comment { + color: lightgray !important; + } + + .cm-header { + color: @accent !important; + } + + .CodeMirror-cursor { + border-left: 1px solid @fg !important; + } +} +.editor-toolbar, .editor-statusbar { + background-color: @bg-light !important; + color: @fg !important; + opacity: 1 !important; + + a { + color: @fg !important; + border: 0 !important; + + &:hover { + background-color: @bg-lighter !important; + color: lighten(@fg, 25%) !important; + } + + &.active { + background-color: fade(@fg, 30%) !important; + color: white !important; + + &:hover { + background-color: @bg-lighter !important; + color: lighten(@fg, 25%) !important; + } + } + } + + .fas, .far, .fab { + color: @fg !important; + + &:hover { + color: @fg !important; + } + + &:active { + color: white !important; + } + } +} + +.editor-toolbar { + border-top: 1px solid @bg-lighter !important; + border-left: 1px solid @bg-lighter !important; + border-right: 1px solid @bg-lighter !important; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + + button { + color: @fg; + + &:hover { + background-color: @bg-lighter; + border: none; + } + + &:active, &.active { + background-color: @bg-lighter; + border: none; + color: @accent; + } + } + + i.separator { + border-color: @bg-lighter; + } +} + +.editor-statusbar { + border-bottom: 1px solid @bg-lighter !important; + border-left: 1px solid @bg-lighter !important; + border-right: 1px solid @bg-lighter !important; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +}