🎨 Moved History & Collection section to sticky right nav (initial upload).

assets/css/styles.scss

@@ -78,7 +78,7 @@ a {
 
 header,
 footer {
-  &>div {
+  & > div {
     display: flex;
     padding: 16px;
     width: 100%;
@@ -127,7 +127,8 @@ footer {
   color: var(--ac-color);
 }
 
-.nav-first {
+.nav-first,
+.sticky-inner {
   display: flex;
   order: 1;
   flex-flow: column;
@@ -521,7 +522,7 @@ input[type="checkbox"] {
   display: none;
 
   &,
-  &+label {
+  & + label {
     vertical-align: middle;
     cursor: pointer;
 
@@ -540,7 +541,7 @@ input[type="checkbox"] {
     }
   }
 
-  &:checked+label:before {
+  &:checked + label:before {
     background-color: var(--ac-color);
     border-color: var(--ac-color);
     color: var(--act-color);
@@ -600,6 +601,10 @@ ol li {
   display: none;
 }
 
+.show-on-large-screen {
+  display: inline-flex;
+}
+
 #installPWA {
   display: none;
 }
@@ -717,7 +722,7 @@ div.tab {
   display: none;
 }
 
-input[type="radio"]+label {
+input[type="radio"] + label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
@@ -730,11 +735,11 @@ input[type="radio"]+label {
   }
 }
 
-input[type="radio"]:checked+label {
+input[type="radio"]:checked + label {
   border-color: var(--fg-color);
 }
 
-input[type="radio"]:checked+label+div.tab {
+input[type="radio"]:checked + label + div.tab {
   display: block;
 }
 
@@ -751,7 +756,28 @@ input[type="radio"]:checked+label+div.tab {
   color: inherit !important;
 }
 
+.page-columns {
+  display: flex;
+  flex: 1;
+  flex-flow: column;
+}
+
+.inner-left {
+  display: flex;
+  order: 1;
+}
+
+.inner-right {
+  display: flex;
+  width: 25%;
+  order: 2;
+}
+
 @media (max-width: $responsiveWidth) {
+  .content {
+    flex-flow: column;
+  }
+
   .columns {
     flex-flow: column;
   }
@@ -791,4 +817,9 @@ input[type="radio"]:checked+label+div.tab {
   .show-on-small-screen {
     display: inline-flex;
   }
+
+  .sticky-inner {
+    position: relative;
+    width: 100%;
+  }
 }

components/history.vue

@@ -11,7 +11,7 @@
       </li>
     </ul>
     <ul v-if="history.length !== 0" class="labels">
-      <div class="show-on-small-screen">
+      <div class="show-on-large-screen">
         <li>
           <button class="icon">
             <i class="material-icons">star_half</i>
@@ -64,7 +64,7 @@
           </ul>
         </li>
       </transition>
-      <div class="show-on-small-screen">
+      <div class="show-on-large-screen">
         <li>
           <button
             class="icon"
@@ -93,7 +93,7 @@
       :remain="Math.min(5, filteredHistory.length)"
     >
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <button
               class="icon"
@@ -119,7 +119,7 @@
             </button>
           </li>
         </div>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <input
               aria-label="Label"
@@ -155,7 +155,7 @@
             >{{ entry.status }}</span
           >
         </li>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <input
               aria-label="URL"
@@ -176,7 +176,7 @@
           </li>
         </div>
         <transition name="smooth">
-          <div v-if="show" class="show-on-small-screen">
+          <div v-if="show" class="show-on-large-screen">
             <li>
               <input
                 aria-label="Duration"
@@ -197,7 +197,7 @@
             </li>
           </div>
         </transition>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <button
               v-tooltip="'Delete entry'"
@@ -302,6 +302,16 @@ label {
   color: #f8e81c !important;
 }
 
+ul,
+ol {
+  flex-direction: column;
+}
+
+ul li,
+ol li {
+  display: flex;
+}
+  
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;