From bc19ee1848d0163b25c2556bd157906a3c360932 Mon Sep 17 00:00:00 2001 From: Gator Date: Sat, 27 Apr 2024 13:42:43 +0200 Subject: [PATCH] feat: extract all css into dedicated file --- src/App.vue | 85 +---------- src/assets/css/main.css | 195 ++++++++++++++++++++++++++ src/assets/main.css | 0 src/components/CanvasBoard.vue | 6 - src/components/MainMenu.vue | 27 ---- src/components/MenuCellProperties.vue | 11 -- src/components/MenuElementaryCA.vue | 9 -- src/components/MenuReset.vue | 8 -- src/components/MenuRow.vue | 78 ----------- src/components/preset.js | 95 ------------- 10 files changed, 196 insertions(+), 318 deletions(-) create mode 100644 src/assets/css/main.css delete mode 100644 src/assets/main.css delete mode 100644 src/components/preset.js diff --git a/src/App.vue b/src/App.vue index 2ef7620..1d94c50 100644 --- a/src/App.vue +++ b/src/App.vue @@ -50,88 +50,5 @@ - diff --git a/src/assets/css/main.css b/src/assets/css/main.css new file mode 100644 index 0000000..a5f294d --- /dev/null +++ b/src/assets/css/main.css @@ -0,0 +1,195 @@ +:root { + --dark1: #000000; + --dark2: #333333; + --dark3: #666666; + --light1: #999999; + --light2: #cccccc; + --light3: #eeeeee; +} + +* { + margin: 0; + padding: 0; +} + +body { + background: var(--dark1); + color: var(--light3); + /* font-family: Courier New; */ + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; +} + +canvas { + flex: auto; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 1) 0%, + rgba(131, 131, 131, 1) 52%, + rgba(0, 0, 0, 1) 100% + ); +} + +h1, +h2 { + font-weight: bold; +} + +h1 { + margin: 10px auto; + font-size: larger; + text-transform: uppercase; +} + +#container { + display: flex; + height: calc(100vh - 100px); + overflow: hidden; + flex-direction: column; +} + +#burger-toggle { + display: none; + cursor: pointer; + font-size: 1.5em; + vertical-align: middle; + color: var(--light2); +} + +a { + font-weight: bold; + border: 1px solid white; + padding: 2px; +} + +a:hover { + cursor: pointer; + color: var(--light1); +} + +select { + margin-top: 10px; + padding: 5px; +} + +input[type="button"] { + min-width: 60px; + padding: 5px; + font-weight: bold; + margin-right: 10px; +} + +.form-field { + display: flex; + margin: 10px; + justify-content: space-between; +} + +.menu-row { + flex: 1; + position: relative; +} + +.menu-row h2 { + font-size: medium; + padding: 10px; + cursor: pointer; + border-bottom: 1px solid var(--dark3); + border-top: 1px solid var(--dark3); + margin: 0 0 10px 0; +} + +.menu-row a { + color: white; + font-weight: bold; + text-decoration: none; + font-size: small; +} + +.menu-row-content { + position: absolute; + background: var(--dark1); + width: 100%; +} + +label, +.form-field label { + margin-right: 10px; + font-weight: bold; +} + +#canvas-board { + flex: 1; + margin: 0 auto; +} + +#main-menu { + display: flex; + flex-direction: row; + width: 100%; + flex: 1; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +#main-menu::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +#main-menu { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.reset-menu { + display: flex; + justify-content: flex-end; + padding: 5px; +} + +@media screen and (max-width: 800px) { + h1 { + font-size: medium; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 10px; + } + + #burger-toggle { + display: inline; + } + + #main-menu { + background: var(--dark2); + margin: 0 auto; + flex-direction: column; + position: absolute; + } + + .menu-row { + margin: 0 auto; + width: 100%; + } + + .menu-row h2, + .form-field { + margin: 0; + } + + .menu-row h2 { + border-bottom: 1px solid var(--dark3); + border-top: none; + } + + .form-field { + padding: 10px; + } + + .menu-row-content { + position: relative; + width: 100%; + } +} diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue index d196ef8..82074d8 100644 --- a/src/components/CanvasBoard.vue +++ b/src/components/CanvasBoard.vue @@ -191,9 +191,3 @@ :height="store.renderer.height" /> - diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue index 438ad72..f0b634b 100644 --- a/src/components/MainMenu.vue +++ b/src/components/MainMenu.vue @@ -13,30 +13,3 @@ import MenuElementaryCA from "./MenuElementaryCA.vue"; import Menu2dCA from "./Menu2dCA.vue"; - - diff --git a/src/components/MenuCellProperties.vue b/src/components/MenuCellProperties.vue index 4a5d7d3..0846116 100644 --- a/src/components/MenuCellProperties.vue +++ b/src/components/MenuCellProperties.vue @@ -53,14 +53,3 @@ - - diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue index 79ca9e9..b7adc7a 100644 --- a/src/components/MenuElementaryCA.vue +++ b/src/components/MenuElementaryCA.vue @@ -105,12 +105,3 @@ - - diff --git a/src/components/MenuReset.vue b/src/components/MenuReset.vue index d0f1974..c719028 100644 --- a/src/components/MenuReset.vue +++ b/src/components/MenuReset.vue @@ -40,11 +40,3 @@ /> - - diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue index 94dab7d..0051fef 100644 --- a/src/components/MenuRow.vue +++ b/src/components/MenuRow.vue @@ -49,81 +49,3 @@ - - diff --git a/src/components/preset.js b/src/components/preset.js deleted file mode 100644 index 0eee491..0000000 --- a/src/components/preset.js +++ /dev/null @@ -1,95 +0,0 @@ -const presetRuleset = [ - { - name: "rule 73", - rules: { - 100: 0, - 101: 0, - 110: 1, - 111: 0, - "011": 1, - "010": 0, - "001": 0, - "000": 1, - }, - }, - { - name: "rule 86", - rules: { - 100: 1, - 101: 0, - 110: 0, - 111: 1, - "011": 0, - "010": 1, - "001": 0, - "000": 1, - }, - }, - { - name: "rule 90", - rules: { - 100: 1, - 101: 0, - 110: 1, - 111: 0, - "011": 0, - "010": 0, - "001": 1, - "000": 0, - }, - }, - { - name: "rule 45?", - rules: { - 100: 0, - 101: 0, - 110: 1, - 111: 0, - "011": 1, - "010": 0, - "001": 1, - "000": 1, - }, - }, - { - name: "rule 54?", - rules: { - 100: 1, - 101: 0, - 110: 1, - 111: 1, - "011": 0, - "010": 1, - "001": 1, - "000": 0, - }, - }, - { - name: "unknown rule", - rules: { - 100: 0, - 101: 0, - 110: 0, - 111: 1, - "011": 0, - "010": 0, - "001": 1, - "000": 1, - }, - }, -]; - -const initialStates = [ - { - id: "onecell", - name: "One cell at center", - description: "State with a single cell in the middle", - }, - { - id: "random", - name: "Random cell", - description: "State populated with random cells", - }, -]; - -export { presetRuleset, initialStates };