diff options
Diffstat (limited to 'src/App.svelte')
| -rw-r--r-- | src/App.svelte | 61 |
1 files changed, 59 insertions, 2 deletions
diff --git a/src/App.svelte b/src/App.svelte index 4fbef54..a9084c4 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,5 +1,62 @@ +<!-- This is the Root component that loads other components --> <script lang="ts"> - import Editor from "./components/Editor.svelte"; + import Sidebar from "./components/Sidebar.svelte"; </script> -<Editor /> +<Sidebar /> + +<style global> + @tailwind base; + @tailwind components; + @tailwind utilities; + + @layer base { + html { + font-family: sans-serif, Proxima Nova; + } + } + + /* Custom Styles */ + @layer utilities { + .assign-box { + /* w-1/3 bg-green-500 flex flex-col border-solid hover:border-4 border-2 border-slate-400 */ + flex: none; + flex-direction: column; + width: 33.33%; + display: flex; + border-width: 4px; + border-color: rgb(148 163 184); + } + .assign-box:hover { + /* border-width: 6px; */ + border-color: black; + border-width: 6px; + /* border-width: 8px; */ + /* transition-timing-function: ease-in-out; */ + } + + .assign-box:hover > .assign-box-header { + border-bottom-color: black; + border-bottom-width: 6px; + } + + .assign-box-header { + font-size: 1.5rem; + font-family: sans; + border-bottom-color: rgb(148 163 184); + border-bottom-width: 4px; + text-align: center; + /* height: 9%; */ + height: 10vh; + overflow: hidden; + flex: none; + } + + .assign-box-body { + /* flex-direction: row; */ + flex: 1 1 auto; + overflow-y: auto; + height: 100%; + } + } +</style> |