Merge branch 'layout'

src/App.vue

@@ -48,11 +48,11 @@ nav a:first-of-type {
   border: 0;
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 624px) {
   header {
     display: flex;
     place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+    padding-right: calc(var(--section-gap) / 8);
   }
 
   header .wrapper {

src/assets/main.css

@@ -2,6 +2,7 @@
 
 #app {
   max-width: 100%;
+  width: 100%;
   margin: 0 2%;
   padding: 2rem 0rem 0 0.4rem;
 
@@ -31,6 +32,5 @@ a,
     display: grid;
     grid-template-columns: 0.25fr 2fr;
     padding: 0 0 0 0.7rem;
-    max-width: 95%;
   }
 }

src/components/ControlPanel.vue

@@ -176,10 +176,10 @@ function fetchingListsAfterSelection() {
 </script>
 <template>
   <section>
-    <h2>Control Panel</h2>
+    <h1>Control Panel</h1>
     <button @click="refresh" class="refresh">Refresh</button>
     <button @click="clear" class="clear">Clear</button>
-    <ul class="descriptionsOfSelected">
+    <ul>
       Selected:
       <li v-for="description in descriptions" :key="description">{{ description }}</li>
     </ul>
@@ -201,88 +201,66 @@ function fetchingListsAfterSelection() {
   </section>
 </template>
 <style scoped>
-h2 {
+h1 {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
 }
-.controlPanel {
+section {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
-  :is(button) {
-    margin: 5px auto;
-    height: 4ex;
-    background-image: linear-gradient(135deg, #00f059 60%, #42f0a5);
-    border: none;
-    border-radius: 5px;
-    font-weight: bold;
-    color: white;
-  }
+  width: 200px;
+}
+button {
+  width: 120px;
+  margin: 5px auto;
+  height: 4ex;
+  background-image: linear-gradient(135deg, #00f059 60%, #42f0a5);
+  border: none;
+  border-radius: 5px;
+  font-weight: bold;
+  color: white;
 }
 @media (min-width: 624px) {
-  /* width>624px */
-  .controlPanel {
-    position: fixed;
-    margin: 0 0 10% 0;
-    width: 200px;
-    :is(select) {
-      margin: 5% 0;
-      max-width: 165px;
-      height: 230px;
-    }
-    :is(button) {
-      width: 120px;
-      margin: 5px auto;
-      height: 4ex;
-      background-image: linear-gradient(135deg, #00f059 60%, #42f0a5);
-      border: none;
-      border-radius: 5px;
-      font-weight: bold;
-      color: white;
-      cursor: pointer;
-      z-index: 2;
-    }
-    :is(button):active {
+  button {
+    cursor: pointer;
+    &:active {
       box-shadow: 2px 2px 5px #00ff00;
     }
   }
-  .settingItems,
-  article {
-    margin-left: 22%;
-    margin-bottom: 1%;
-  }
-  .selectedLists {
-    max-width: 35%;
-    float: left;
+
+  select {
+    margin: 5% 0;
+    max-width: 165px;
+    height: 230px;
   }
-  .descriptionsOfSelected {
+
+  ul {
     display: none;
   }
-  .refresh {
-    margin: 5% 0 0 11%;
-  }
 }
 @media (max-width: 624px) {
-  /* width <= 624 */
-  .controlPanel {
+  section {
     align-items: center;
     justify-content: center;
-    width: 200px;
-    :is(button) {
-      width: 120px;
-    }
-    /* TODO Long press the button to open control panel
+  }
+  /* TODO Long press the button to open control panel
      */
-    :is(button).fetchMore {
+  button {
+    &.fetchMore {
       width: 50px;
       height: 40px;
       position: fixed;
       right: 0%;
     }
+    &.refresh {
+      margin: 0%;
+    }
   }
-  .refresh {
-    margin: 0%;
+  select {
+    max-width: 55%;
+    float: left;
   }
 }
 </style>

src/components/ItemPost.vue

@@ -17,7 +17,7 @@ function displayingLink(item: Item): boolean {
 </script>
 <template>
   <article>
-    <h2 v-show="settings.displayingItemTitle.value" class="itemTitle">
+    <h2 v-show="settings.displayingItemTitle.value">
       <a :href="setUrl(item)"> {{ item.title }}</a>
     </h2>
     <ul>
@@ -39,27 +39,18 @@ h2 {
   text-decoration: none;
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
-}
-.itemTitle:hover {
-  background-color: hsla(160, 100%, 37%, 0.2);
-  cursor: pointer;
+  &:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+    cursor: pointer;
+  }
 }
 * {
-  /* So that _ in long link on mobile phone wrapped */
+  /* Wrap "_", etc. in long link on mobile phone  */
   word-break: break-all;
 }
 @media (max-width: 624px) {
-  /* width <= 624 */
   h2 {
     font-size: 120%;
   }
 }
-.itemText {
-  position: relative;
-  margin-top: 10%;
-}
-article {
-  margin-left: 22%;
-  margin-bottom: 1%;
-}
 </style>

src/components/SettingItems.vue

@@ -29,7 +29,6 @@ function reset() {
 <style scoped>
 button {
   border-radius: 5px;
-  z-index: 2;
 }
 :is(button):hover {
   cursor: pointer;

src/views/HackerNewsView.vue

@@ -22,45 +22,60 @@ function fold() {
 }
 </script>
 <template>
-  <main>
+  <nav>
     <ControlPanel
       class="controlPanel"
       @show-prompt="promptForFetching = 'Fetching selected lists...'"
       @clear-prompt="promptForFetching = ''"
     />
-    <h2 class="settingItems">
-      <button @click="fold">Settings {{ foldSign }}</button>
-    </h2>
-    <SettingItems class="settingItems" v-show="!folded" />
-    <ItemPost v-for="item in items" :key="item.id" :item="item" />
+  </nav>
+  <main>
+    <section class="settingItems">
+      <h2>
+        <button @click="fold">Settings {{ foldSign }}</button>
+      </h2>
+      <SettingItems v-show="!folded" />
+    </section>
+    <ItemPost class="itemPost" v-for="item in items" :key="item.id" :item="item" />
     <div>
       {{ promptForFetching }}
     </div>
   </main>
 </template>
 <style scoped>
-main {
-  margin-bottom: 11%;
+@media (min-width: 624px) {
+  main {
+    margin: 0 5% 10% 20%;
+  }
+  nav {
+    position: fixed;
+    margin: 0 0 0 9%;
+  }
 }
-
-h2.settingItems {
-  margin-left: 22%;
+.settingItems {
+  display: flex;
+  flex-flow: column;
   margin-bottom: 1%;
-  color: hsla(160, 92%, 27%, 1);
-  :is(button) {
-    border-radius: 5px;
-    z-index: 2;
-    background-color: transparent;
-    border: none;
+  :is(h2) {
+    color: hsla(160, 92%, 27%, 1);
   }
+  /*
+      FIXME: Invalid
+    */
   :is(button):hover {
     color: #00aa00;
     font-weight: bold;
-    cursor: pointer;
   }
 }
-.settingItems {
-  margin-left: 22%;
-  margin-bottom: 1%;
+@media (max-width: 624px) {
+  nav section {
+    margin: auto auto;
+  }
+  main {
+    margin: 0 1% 30% 1%;
+    .settingItems {
+      margin: auto 4%;
+    }
+  }
 }
 </style>