commit 42d1cbd3713fce2b60d65abee2f5c18fb21691d4
Author: Er2 <er2@dismail.de>
Date:   Sat Apr 2 10:49:36 2022 +0300

    init

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..79608ce
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+css/main.css
diff --git a/css/main.less b/css/main.less
new file mode 100644
index 0000000..e21168d
--- /dev/null
+++ b/css/main.less
@@ -0,0 +1,144 @@
+/* DisKort
+ * (c) Er2 2022 <er2@dismail.de>
+ * Zlib License
+ */
+
+// needed
+body { margin: 0; }
+
+#app,
+#title,
+#side,
+.wrapper {
+  display: flex;
+  overflow: hidden;
+}
+
+#app, .wrapper.ext {
+  width: 100%;
+  height: 100%;
+}
+
+#app, .wrapper.vert {
+  flex-direction: column;
+}
+
+#title {
+  min-height: 48px;
+  height: 48px;
+  padding: 0 16px;
+
+  button {
+    width: 32px;
+    height: 32px;
+    margin-right: 32px;
+  }
+}
+
+#title, .wrapper.vcenter {
+  align-items: center;
+}
+
+.wrapper.hcenter {
+  justify-content: center;
+}
+
+.bord-bot(@r: var(--radius)) {
+  border-bottom-left-radius: @r;
+  border-bottom-right-radius: @r;
+}
+
+.bord-top(@r: var(--radius)) {
+  border-top-left-radius: @r;
+  border-top-right-radius: @r;
+}
+
+.hscroll
+{ overflow-x: auto; }
+.vscroll
+{ overflow-y: auto; }
+
+#side {
+  #serv {
+    width: 60px;
+    height: 100%;
+  }
+
+  #serv button, #add {
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    min-height: 48px;
+    margin: 6px; //0 12px 8px 12px;
+  }
+
+  #add {
+    padding: 2px;
+    color: #04cc40;
+  }
+
+  #eside {
+    width: 240px;
+    max-width: 240px;
+    transition: width .1s ease-in;
+
+    #chan {
+      margin-left: 8px;
+      height: 100%;
+    }
+
+    #info {
+      min-height: 52px;
+      height: 52px;
+      .bord-bot();
+
+      button
+      { margin: 8px; }
+      :nth-child(1)
+      { margin-right: auto; }
+    }
+  }
+}
+
+#cont {
+  flex-grow: 1;
+  padding: 8px;
+}
+
+div, p, button {
+  font-family: sans-serif, Segoe UI;
+  scrollbar-width: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-col);
+}
+
+button {
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  font-size: 20pt;
+  border: none;
+  border-radius: 50%;
+
+  transition: background-color .1s ease-out, border-radius .1s ease-out;
+
+  width:  32px;
+  height: 32px;
+
+  & > .ext {
+    width:  100%;
+    height: 100%
+  }
+  & > :not(.ext) {
+    width:  50%;
+    height: 50%;
+  }
+
+  &.close {
+    position: absolute;
+    align-self: end;
+  }
+}
+
+@import "theme";
diff --git a/css/theme.less b/css/theme.less
new file mode 100644
index 0000000..cff9559
--- /dev/null
+++ b/css/theme.less
@@ -0,0 +1,60 @@
+/* Themes
+ * (c) Er2 2022 <er2@dismail.de>
+ * Zlib License
+ */
+
+:root, .thm-dis {
+  --pic-filt:  invert(100%);
+  --radius:    16px;
+  --bg-col:    #202225;
+  --light-col: #36393f;
+  --lhter-col: #585b5f;
+  --drker-col: #2f3136;
+  --dark-col:  #292b2f;
+  --text-col:  #ffffff;
+  --sep-color: rgba(255, 255, 255, 0.06);
+}
+
+.thm-disl {
+  --pic-filt:  invert(0%);
+  --bg-col:    #e3e5e8;
+  --light-col: #ffffff;
+  --lhter-col: #ffffff;
+  --drker-col: #f2f3f5;
+  --dark-col:  #ebedef;
+  --text-col:  #222222;
+  --sep-color: rgba(0,0,0, 0.06);
+}
+
+.thm-amol {
+  --bg-col:    #000000;
+  --light-col: #000000;
+  --lhter-col: #222222;
+  --drker-col: #000000;
+  --dark-col:  #000000;
+  --text-col:  #ffffff;
+}
+
+#app {
+  background-color: var(--bg-col);
+}
+
+#cont, button:not(.nofill) {
+  background-color: var(--light-col);
+}
+
+#info {
+  background-color: var(--dark-col);
+}
+
+button:hover, .selected {
+  background-color: var(--lhter-col);
+}
+
+#cont, button:hover, .selected {
+  border-radius: var(--radius);
+}
+
+img.mono, svg {
+  filter: var(--pic-filt);
+}
diff --git a/img/close.svg b/img/close.svg
new file mode 100644
index 0000000..145f4e4
--- /dev/null
+++ b/img/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="m9.108 7.776 4.709-4.709a.626.626 0 0 0-.884-.885L8.244 6.871h-.488L3.067 2.183a.625.625 0 1 0-.884.885L6.87 7.754v.491l-4.687 4.687a.626.626 0 0 0 .884.885L7.754 9.13h.491l4.687 4.687a.627.627 0 0 0 .885 0 .626.626 0 0 0 0-.885L9.108 8.223v-.447z"/></svg>
diff --git a/img/home.svg b/img/home.svg
new file mode 100644
index 0000000..ebb836d
--- /dev/null
+++ b/img/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M14.817 7.507 8.852 1.542a1.918 1.918 0 0 0-2.703 0L.183 7.507A.618.618 0 0 0 1 8.436V14a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8.436a.62.62 0 0 0 .375.139.626.626 0 0 0 .442-1.068zM8.75 14.75h-2.5v-4l.5-.5h1.5l.5.5v4zm4-.581-.6.581H10V11a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3.75H2.85l-.6-.581-.001-6.96 4.783-4.783a.663.663 0 0 1 .936 0L12.75 7.21v6.959z"/></svg>
diff --git a/img/menu.svg b/img/menu.svg
new file mode 100644
index 0000000..2565634
--- /dev/null
+++ b/img/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M13.375 4.25H2.625a.625.625 0 0 1 0-1.25h10.75a.625.625 0 0 1 0 1.25zM13.375 8.25H2.625a.625.625 0 0 1 0-1.25h10.75a.625.625 0 0 1 0 1.25zM13.375 12.25H2.625a.625.625 0 0 1 0-1.25h10.75a.625.625 0 0 1 0 1.25z"/></svg>
diff --git a/img/pref.svg b/img/pref.svg
new file mode 100644
index 0000000..8ca9343
--- /dev/null
+++ b/img/pref.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M10.791 20H9.217a2.009 2.009 0 0 1-1.922-1.448l-.51-1.777a7.641 7.641 0 0 1-1.037-.604l-1.801.448a2.01 2.01 0 0 1-2.215-.94l-.787-1.364a2.012 2.012 0 0 1 .281-2.377l1.299-1.37A6.652 6.652 0 0 1 2.528 9.4L1.241 8.067a2.008 2.008 0 0 1-.293-2.389l.787-1.363a2.009 2.009 0 0 1 2.199-.945l1.84.442c.326-.225.664-.42 1.01-.586l.51-1.777A2.011 2.011 0 0 1 9.217 0h1.574c.879 0 1.668.589 1.918 1.432l.535 1.805c.334.162.663.354.981.574l1.84-.442a2.02 2.02 0 0 1 2.199.945l.787 1.363c.444.768.323 1.75-.293 2.389L17.472 9.4a6.606 6.606 0 0 1 .003 1.168l1.299 1.37a2.01 2.01 0 0 1 .281 2.376l-.787 1.363a2.005 2.005 0 0 1-2.215.94l-1.801-.448a7.558 7.558 0 0 1-1.009.593l-.535 1.805A2.01 2.01 0 0 1 10.791 20zm-5.066-5.37.637.132c.423.323.872.585 1.336.778l.432.485.606 2.112a.503.503 0 0 0 .481.362h1.574c.22 0 .417-.147.479-.358l.632-2.134.428-.478c.45-.19.89-.448 1.307-.768l.637-.132 2.141.533a.504.504 0 0 0 .554-.236l.787-1.363a.503.503 0 0 0-.07-.594l-1.537-1.621-.201-.608c.031-.241.052-.488.052-.74a5.94 5.94 0 0 0-.056-.771l.204-.617 1.531-1.587a.5.5 0 0 0 .073-.596l-.787-1.364a.503.503 0 0 0-.55-.236l-2.175.522-.627-.131a6.042 6.042 0 0 0-1.283-.75l-.427-.478-.632-2.133a.503.503 0 0 0-.48-.359H9.217a.503.503 0 0 0-.481.362L8.13 3.974l-.433.485a5.972 5.972 0 0 0-1.31.759l-.628.133-2.175-.522a.504.504 0 0 0-.55.236l-.787 1.363a.503.503 0 0 0 .073.597l1.531 1.587.204.617A6.123 6.123 0 0 0 4 10c0 .252.021.499.051.742l-.2.608-1.537 1.621a.503.503 0 0 0-.07.594l.787 1.363a.503.503 0 0 0 .554.235l2.14-.533z"/><path d="M10 13.5c-1.93 0-3.5-1.57-3.5-3.5S8.07 6.5 10 6.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5zM10 8c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/></svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4ea5f02
--- /dev/null
+++ b/index.html
@@ -0,0 +1,45 @@
+<html>
+  <head>
+    <title>DisKort</title>
+    <link rel="stylesheet" href="./css/main.css">
+  </head>
+  <body class="thm-dis">
+    <div id="app">
+      <div id="title">
+         <button id="menu" class="nofill"><img class="mono" src="./img/menu.svg" /></button>
+         <p>DisKort</p>
+      </div>
+      <div class="ext wrapper">
+        <div id="side">
+          <div class="vert wrapper">
+            <div id="serv" class="vscroll">
+              <button class="selected"><img class="mono" src="./img/home.svg" /></button>
+            </div>
+            <button id="add">+</button>
+          </div>
+          <div id="eside" class="vert wrapper">
+            <div id="chan" class="vscroll"></div>
+            <div id="info" class="vcenter wrapper">
+              <button><img class="ext" src="https://cdn.discordapp.com/avatars/785219544364351499/df51c2fb82974d1c12e008ee6712cdeb.webp?size=40" /></button>
+              <button><img class="mono" src="./img/pref.svg" /></button>
+            </div>
+          </div>
+        </div>
+        <div id="cont">
+          <div class="vert vscroll vcenter wrapper">
+            <button class="close"><img class="mono" src="./img/close.svg" /></button>
+            <p>Create a server</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      // Shit begins
+      var menu  = document.getElementById("menu");
+      var eside = document.getElementById("eside");
+      menu.addEventListener("click", function() {
+        eside.style.width = eside.style.width? null: 0;
+      });
+    </script>
+  </body>
+</html>
diff --git a/readme.org b/readme.org
new file mode 100644
index 0000000..9ba37c4
--- /dev/null
+++ b/readme.org
@@ -0,0 +1,11 @@
+* DisKort
+
+This is custom web Discord client
+extends ideas from [[https://gitdab.com/er2/diskort][DisKort]].
+
+Codenamed DisKortIe.
+
+It is *VERY WIP!*
+
+To compile css, install less from npm
+and run ~lessc css/main.less > css/main.css~