Rename root folders

app/src/App.scss

@@ -0,0 +1,110 @@
+// Variables
+$padding: 20px;
+$navbar-height: 64px;
+
+.custom-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar {
+  overflow: auto;
+  padding: $padding;
+
+  .file-tree-container {
+    width: 100%;
+  }
+}
+
+.image-preview {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+}
+
+.image-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.page-content {
+  padding: 0 $padding;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 $padding;
+
+  .breadcrumbs-container {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+
+    .unsaved-indicator {
+      margin-left: 8px;
+    }
+  }
+
+  .tabs {
+    flex-shrink: 0;
+  }
+}
+
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.setting-group {
+  margin-bottom: 1rem;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.content-body {
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor-container,
+.markdown-preview {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: $padding;
+}
+
+.editor-container {
+  height: 100%;
+
+  .cm-editor {
+    height: 100%;
+  }
+
+  .cm-scroller {
+    overflow: auto;
+  }
+}
+
+.tree {
+  padding-top: $padding;
+}