minor refactoring

src/App.vue

@@ -177,10 +177,6 @@ export default {
 .collapsed #settings-button #text {
   display: none;
 }
-.r-sidebar {
-  position: relative;
-  margin-bottom: 0.5em;
-}
 .m-np {
   position: absolute;
   bottom: 0;

src/assets/css/global.css

@@ -1,13 +1,13 @@
 :root {
   --seperator: #ffffff46;
-    --green: #4AD168;
+  --green: #4ad168;
 }
 
 body {
   margin: 0;
   background: #0d0e0e;
   color: #fff;
-    font-family: 'Helvetica Neue', sans-serif;
+  font-family: "Helvetica Neue", sans-serif;
   font-size: 1rem;
 }
 
@@ -44,7 +44,7 @@ a {
 
 .l-container {
   display: grid;
-    grid-template-columns: min-content 4fr 30rem;
+  grid-template-columns: min-content 4fr min-content;
   grid-template-rows: 4rem 1fr 1fr;
   grid-auto-flow: row;
   grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
@@ -79,8 +79,8 @@ a {
   width: 250px;
   grid-area: l-sidebar;
   padding-top: 0.5rem;
-    margin: .5rem 0 .5rem .5rem;
-    border-radius: .5rem;
+  margin: 0.5rem 0 0.5rem 0.5rem;
+  border-radius: 0.5rem;
   background-color: #131313b2;
   transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
   transition-duration: 0.3s;
@@ -101,16 +101,25 @@ a {
 
 .content {
   grid-area: content;
-    border-radius: .25rem;
-    padding: .5rem;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
   overflow: hidden;
 }
 
 .r-sidebar {
   grid-area: r-sidebar;
   border-radius: 5px;
-    margin-right: .5rem;
+  margin-right: 0.5rem;
   overflow-y: auto;
+  width: 30em;
+  position: relative;
+  margin-bottom: 0.5em;
+}
+
+@media (max-width: 70em) {
+  .r-sidebar {
+    display: none;
+  }
 }
 
 .image {
@@ -125,17 +134,14 @@ a {
   white-space: nowrap;
 }
 
-
 /* scrollbars */
 
-
 /* width */
 
 ::-webkit-scrollbar {
-    width: .5rem;
+  width: 0.5rem;
 }
 
-
 /* Track */
 
 ::-webkit-scrollbar-track {
@@ -143,7 +149,6 @@ a {
   border-radius: 1rem;
 }
 
-
 /* Handle */
 
 ::-webkit-scrollbar-thumb {
@@ -151,7 +156,6 @@ a {
   border-radius: 1rem;
 }
 
-
 /* Handle on hover */
 
 ::-webkit-scrollbar-thumb:hover {

src/components/FolderView/SongList.vue

@@ -43,23 +43,22 @@ export default {
     const songtitle = ref(null);
     const songTitleWidth = ref(null);
 
-    const minWidth = ref(250);
+    const minWidth = ref(300);
 
     const songs = Songs.songs;
 
     const resizeSongTitleWidth = () => {
-      songTitleWidth.value =
-        songtitle.value.clientWidth > minWidth.value * 4
-          ? songtitle.value.clientWidth / 4
-          : (songTitleWidth.value = songtitle.value.clientWidth / 3);
+      let a = songtitle.value.clientWidth;
+
+      songTitleWidth.value = a > minWidth.value * 4 ? a / 4 : a / 3;
     };
 
     onMounted(() => {
       resizeSongTitleWidth();
+      
       window.addEventListener("resize", () => {
         resizeSongTitleWidth();
       });
-      console.log(songTitleWidth.value);
     });
 
     onUnmounted(() => {