diff --git a/README.md b/README.md index 441faf7..cb46316 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,11 @@ This template should help get you started developing with Tauri in vanilla HTML, CSS and Javascript. +# Develop + +## Prerequisites +- [Tauri](https://tauri.app/start/prerequisites/) + ## Recommended IDE Setup - [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) diff --git a/src/images/graph_icon.svg b/src/images/graph_icon.svg new file mode 100644 index 0000000..631d56a --- /dev/null +++ b/src/images/graph_icon.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/index.html b/src/index.html index ce20adb..6988513 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,30 @@ - - - - - Tauri App - - + + + + + Tauri App + + + - -
-
-
-
+ +
+
+ +
+
+ +
+
+
+
+
-
- + diff --git a/src/main.js b/src/main.js index 2cee64c..fb89f82 100644 --- a/src/main.js +++ b/src/main.js @@ -30,3 +30,16 @@ textarea.addEventListener('input', ()=> { // }); }); +document.getElementById("hide-sidebar").onclick = function() {toggle_visibility("sidebar");}; +function toggle_visibility(id) { + if (document.getElementById(id).style.visibility == "hidden"){ + document.getElementById(id).style.visibility = "visible"; + var style = window.getComputedStyle(document.body); + document.getElementById(id).style.width = style.getPropertyValue("--sidebar-width"); + }else{ + + document.getElementById(id).style.visibility = "hidden"; + document.getElementById(id).style.width = 0; + } + +} diff --git a/src/styles.css b/src/styles.css index ea17fc3..ace75b4 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,23 +1,33 @@ + + .logo.vanilla:hover { filter: drop-shadow(0 0 2em #ffe21c); } :root { - font-family: Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; + --main-bg-color: #4f4f4f; + --sidebar-width: 3em; + font-family: Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; - color: #f6f6f6; - background-color: #2f2f2f; + color: #f6f6f6; + background-color: var(--main-bg-color); + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; } - +*{ + box-sizing: border-box; + padding: 0; + margin: 0; +} .container { - height: 90vh; + height: 100%; margin: 0; padding-top: 1vh; display: flex; @@ -26,40 +36,44 @@ text-align: left; } -.row { - display: flex; - justify-content: left; + +.col { + width: 50%; + padding: 0.5em; + margin: .1em; + border: solid; + border-radius: .5em; } -.markdown_input +#markdown_input { - border-style: solid; - width: 49%; - height: 100%; - text-align: left; - float:left; - color: #f6f6f6; - background: #2f2f2f; + grid-column: 1; + grid-row: 1; + text-align: left; + /*float:left;*/ + color: #f6f6f6; + background: var(--main-bg-color); } -.rendered_markdown { - - border-style: solid; - width: 49%; - height: 100%; - float:right; - text-align: left; - color: #f6f6f6; - background-color: #2f2f2f; +#rendered_markdown { + grid-column: 2; + grid-row: 1; + + + /*float:right;*/ + text-align: left; + color: #f6f6f6; + background-color: var(--main-bg-color); } .main_editor{ width: 100%; text-align: center; font-size: 16px; line-height: 18px; + display: flex; flex-direction: column; justify-content: center; color: #f6f6f6; - background-color: #2f2f2f; + background-color: var(--main-bg-color); } h1 { text-align: left; @@ -69,11 +83,44 @@ h1 { } +.sidebar_button { + width: 100%; + background-color: var(--main-bg-color); + border: none; +} +.sidebar_icon { + width: 100%; +} +.topbar_button { + height: 2em; + background-color: var(--main-bg-color); + /*border: none;*/ +} +.topbar_icon { + height: 100%; +} @media (prefers-color-scheme: dark) { :root { color: #f6f6f6; - background-color: #2f2f2f; + background-color: var(--main-bg-color); } } +#main_editor { + display: flex; + width: 100%; + height: 100%; +} + +.main { + display: flex; + height:100vh; + flex-direction: column; +} + +#sidebar { + visibility: visible; + width: var(--sidebar-width); +} +