misc small fixes

src/pages/Introduction.vue

@@ -80,10 +80,10 @@ export default {
 
   .page-intro {
     font-family: $font-family-text;
-    font-size: 3rem;
+    font-size: 2rem;
 
     @include media-breakpoint-up($size-bp) {
-      font-size: 5rem;
+      font-size: 3rem;
     }
   }
 }

src/pages/_partials/MainHeader.vue

@@ -46,7 +46,7 @@
         @click="optionsVisible = !optionsVisible"
         variant="outline-dark"
       >
-        Options <span class="collapse-icon" :class="optionsVisible ? null : 'collapsed'">></span>
+        Options <span class="collapse-icon" :class="{ collapsed: !optionsVisible }">></span>
       </b-button>
     </b-navbar>
 
@@ -178,6 +178,9 @@ export default {
   }
 
   .nav-list {
+    margin-left: auto;
+    margin-right: 1rem;
+
     ul {
       display: flex;
       padding: 0;
@@ -232,18 +235,6 @@ export default {
   }
 }
 
-.collapse-icon {
-  display: inline-block;
-  transform: translate(0, 2px) rotate(270deg);
-  line-height: 0;
-  font-size: 1.2rem;
-  font-weight: 200;
-
-  &.collapsed {
-    transform: translate(3px, 2px) rotate(90deg) ;
-  }
-}
-
 // #collapse-options {
 //   @include media-breakpoint-down(sm) {
 //     position: absolute;

src/pages/_partials/NodesHistory.vue

@@ -1,13 +1,18 @@
 <template>
   <footer class="nodes-history no-events-container" v-if="history.length">
     <b-dropdown
-      :text="$t('history')"
       variant="outline-dark"
-      dropup no-flip
+      dropup no-flip no-caret
       boundary="main"
       class="no-events-container"
       @shown="scrollToEnd"
+      @hide="shown = false"
     >
+      <template #button-content>
+        <span class="collapse-icon" :class="{ collapsed: shown }">></span>
+        {{ $t('history') }}
+      </template>
+
       <b-dropdown-text class="dropdown-item-arrow left">
         <b-button variant="link" @click="onArrowClick('left')" :disabled="leftDisabled">&lt;</b-button>
       </b-dropdown-text>
@@ -55,7 +60,8 @@ export default {
   data () {
     return {
       leftDisabled: false,
-      rightDisabled: false
+      rightDisabled: false,
+      shown: false
     }
   },
 
@@ -78,6 +84,7 @@ export default {
       const container = this.$el.querySelector('.dropdown-menu')
       container.scrollTo({ left: container.scrollWidth })
       this.updateBtnDir()
+      this.shown = true
     },
 
     onArrowClick (dir) {
@@ -224,5 +231,10 @@ export default {
     width: 100%;
     height: 100%;
   }
+
+  .collapse-icon {
+    margin-right: .25rem;
+    font-weight: 700;
+  }
 }
 </style>

src/pages/library/LibraryOptions.vue

@@ -61,7 +61,7 @@
         />
       </div>
 
-      <div class="filters-mini-group">
+      <div class="filters-mini-group align-items-center">
         <b-form-checkbox
           v-model="strangenessIsActive" name="tags-button"
           button class="toggle-btn"
@@ -277,8 +277,9 @@ export default {
     .filters-group {
       flex-grow: 2;
 
-      @include media-breakpoint-up($layout-bp) {
-        max-width: 450px;
+      @include media-breakpoint-up($size-bp) {
+        padding: 0 2rem;
+        max-width: 40%;
       }
 
       .filters-mini-group {