From ae614c0d1174d3b5527f1fb3dc6e339d7ad6a10b Mon Sep 17 00:00:00 2001
From: physcik <mynameisgennadiy@vk.com>
Date: Sat, 11 Apr 2026 01:55:54 +0500
Subject: CSS pt 1

---
 front/src/Emelents/Elements.css | 56 +++++++++++++++++++++++++++++++++++++++++
 front/src/Emelents/Sidebar.tsx  | 13 ++++++----
 front/src/Emelents/Topbar.tsx   | 12 +++++++++
 3 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 front/src/Emelents/Elements.css
 create mode 100644 front/src/Emelents/Topbar.tsx

(limited to 'front/src/Emelents')

diff --git a/front/src/Emelents/Elements.css b/front/src/Emelents/Elements.css
new file mode 100644
index 0000000..8a50296
--- /dev/null
+++ b/front/src/Emelents/Elements.css
@@ -0,0 +1,56 @@
+.Sidebar {
+    --width: 300px;
+    height: 100%;
+    min-width: var(--width);
+    max-width: var(--width);
+    min-height: 1000px;
+    background-color: var(--colorscheme-white);
+    border: 2px solid var(--colorscheme-gray);
+    color: var(--colorscheme-gray);
+
+
+    background: var(--colorscheme-white);
+    background-image: radial-gradient(var(--colorscheme-gray) 1px, transparent 0);
+    background-size: 4px 4px;
+}
+
+.Topbar {
+    text-transform: uppercase;
+    display: flex;
+    flex-direction: column;
+}
+
+.Topbar > h1 {
+    margin-bottom: 0px;
+}
+
+.TopbarContents {
+    border-top: 2px solid var(--colorscheme-black);
+    display: flex;
+}
+
+.TopbarContents > h2 {
+    --width: 280px;
+    min-width: var(--width);
+    max-width: var(--width);
+    min-height: 30px;
+    padding: 5px;
+    margin-top: 0px;
+    background-color: var(--colorscheme-black);
+    color: var(--colorscheme-white);
+    text-align: center;
+}
+
+.SidebarContents {
+    --width: 260px;
+    min-width: var(--width);
+    max-width: var(--width);
+    background-color: var(--colorscheme-white);
+    color: var(--colorscheme-gray);
+    margin: 20px;
+}
+
+.SidebarContents > h1 {
+    color: var(--colorscheme-gray);
+    text-align: center;
+}
diff --git a/front/src/Emelents/Sidebar.tsx b/front/src/Emelents/Sidebar.tsx
index c5a4a9c..b138de6 100644
--- a/front/src/Emelents/Sidebar.tsx
+++ b/front/src/Emelents/Sidebar.tsx
@@ -1,12 +1,15 @@
+import './Elements.css';
+
 function Sidebar() {
     return (
         <nav className='Sidebar'>
-            <h1> Test </h1>
-            <ul>
-            <li> <a href="/classes"> Class list </a> </li>
-            </ul>
+            <div className='SidebarContents'>
+                <h1> Contents </h1>
+                <ul>
+                </ul>
+            </div>
         </nav>
-    )
+    );
 }
 
 export default Sidebar;
diff --git a/front/src/Emelents/Topbar.tsx b/front/src/Emelents/Topbar.tsx
new file mode 100644
index 0000000..6c4ef74
--- /dev/null
+++ b/front/src/Emelents/Topbar.tsx
@@ -0,0 +1,12 @@
+function Topbar() {
+    return (
+        <div className="Topbar">
+            <h1> View from the edge </h1>
+            <div className="TopbarContents">
+                <h2> Lifepath </h2>
+            </div>
+        </div>
+    );
+}
+
+export default Topbar;
-- 
cgit v1.3