[Update] Agenda event RWD

Layout: mobile event block container
Style: event block font size and icon scale RWD

src/assets/scss/agenda.scss

@@ -47,6 +47,7 @@ $fontFamilyVote: "Noto Serif CJK TC -Black";
   margin: 0 auto;
   @include RWDWidth;
   padding-top: 50px;
+  padding-bottom: 50px;
 
   font-family: $fontFamily;
   @include RWDFontSize;
@@ -88,11 +89,18 @@ $fontFamilyVote: "Noto Serif CJK TC -Black";
     }
   }
 
-  div.event.container {
+  div.event.container:not(.mobile) {
     display: grid;
     grid-template-columns: min-content repeat(6, 1fr) min-content;
     column-gap: 30px;
 
+    @media screen and (max-width: 1200px) {
+      column-gap: 20px;
+    }
+    @media screen and (max-width: 1024px) {
+      column-gap: 10px;
+    }
+
     img.arrow {
       margin: auto;
       width: fit-content;
@@ -100,10 +108,51 @@ $fontFamilyVote: "Noto Serif CJK TC -Black";
     }
   }
 }
+
 @media screen and (max-width: $max-width-medium-1) {
   #agenda {
     p.vote {
       padding: 0;
     }
+
+    div.mobile.event.container {
+      .column {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 100%;
+
+        .event.block {
+          width: 33%;
+        }
+
+        > :nth-child(2) {
+          margin-left: 20px;
+          margin-right: 20px;
+        }
+
+        // column with two item only
+        > :last-child:nth-child(2) {
+          margin-left: 10px;
+          margin-right: 0;
+        }
+
+        // column with one item and two arrows
+        > .arrow ~ :nth-child(2) {
+          margin-left: 30px;
+          margin-right: 30px;
+        }
+
+        &:not(:first-child) {
+          // more vertically compact column
+          margin-top: -20px;
+        }
+      }
+
+      img.arrow {
+        height: 80%;
+      }
+    }
   }
 }

src/assets/scss/eventblock.scss

@@ -1,4 +1,56 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap');
+@import './font';
+@import './breakpoint';
+
+$fontFamily: "Noto Serif CJK TC -Bold";
+
+@mixin RWDFontSize {
+  font-size: 18pt;
+
+  @media screen and (max-width: 1400px) {
+    font-size: 16pt;
+  }
+  @media screen and (max-width: 1200px) {
+    font-size: 15pt;
+  }
+  @media screen and (max-width: 1024px) {
+    font-size: 13pt;
+  }
+  @media screen and (max-width: $max-width-medium-1) {
+    font-size: 22pt;
+  }
+  @media screen and (max-width: 650px) {
+    font-size: 16pt;
+  }
+  @media screen and (max-width: 500px) {
+    font-size: 15pt;
+  }
+}
+
+@mixin RWDIconScale {
+  transform: scale(0.75);
+
+  @media screen and (max-width: 1300px) {
+    transform: scale(0.6);
+  }
+  @media screen and (max-width: 1200px) {
+    transform: scale(0.55);
+  }
+  @media screen and (max-width: 1024px) {
+    transform: scale(0.5);
+  }
+  @media screen and (max-width: $max-width-medium-1) {
+    transform: scale(1.25);
+  }
+  @media screen and (max-width: $max-width-small-0) {
+    transform: scale(1);
+  }
+  @media screen and (max-width: 600px) {
+    transform: scale(0.75);
+  }
+  @media screen and (max-width: 500px) {
+    transform: scale(0.55);
+  }
+}
 
 .event.block {
   position: relative;
@@ -9,10 +61,9 @@
   align-items: center;
   justify-content: center;
 
-  font-size: 24px;
+  @include RWDFontSize;
   line-height: 1.44;
-  font-family: 'Noto Serif TC', serif;
+  font-family: $fontFamily;
-  font-weight: bold;
 
   .background {
     width: 100%;
@@ -36,12 +87,26 @@
     span {
       white-space: pre;
       z-index: 1;
+
+      // for lightning talk block
+      &.special {
+        // visual adjustment
+        margin-top: 5%;
+
+      }
+      @media screen and (min-width: $max-width-medium-1) {
+        &.special {
+          transform: scale(0.75);
+        }
+      }
     }
   
     i.icon {
       position: absolute;
       z-index: 0;
-      transform: scale(0.75);
+
+      @include RWDIconScale();
+      // transform: scale(0.75);
   
       &::before {
         width: 100%;
@@ -91,7 +156,7 @@
       }
   
       &.guide-outline {
-        margin-right: 40px;
+        margin-right: 25%;
         width: 74px;
         height: 95px;
   

src/components/EventBlock.vue

@@ -1,11 +1,11 @@
 <template>
-    <a href="" class="event block">
+  <a href="" class="event block">
-        <img class="background" src="../assets/images/event-block-bg.svg">
+    <img class="background" src="../assets/images/event-block-bg.svg">
-        <div class="inner">
+    <div class="inner">
-            <i v-if="icon" :class="icon" class="icon" />
+      <i v-if="icon" :class="icon" class="icon" />
-            <span>{{ newlineText }}</span>
+      <span :class="{ special }">{{ newlineText }}</span>
-        </div>
+    </div>
-    </a>
+  </a>
 </template>
 
 <script lang="ts">
@@ -14,12 +14,13 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 @Component({
 })
 export default class EventBlock extends Vue {
-    @Prop({ default: '' }) private text!: string;
+  @Prop({ default: '' }) private text!: string;
-    @Prop({ default: '' }) private icon!: string;
+  @Prop({ default: '' }) private icon!: string;
+  @Prop({ default: false }) private special!: boolean;
 
-    get newlineText () {
+  get newlineText () {
-        return this.text.replace('\\n', '\n');
+    return this.text.replace('\\n', '\n');
-    }
+  }
 }
 </script>
 <style lang="scss">

src/pages/Agenda.vue

@@ -25,22 +25,34 @@
     </article>
     <!-- Vote Section End -->
     <!-- Event Section -->
-    <!-- wip
     <BlockTitle text="活動" id="#event" />
     <div v-if="!isMobile()" class="event container">
       <img class="arrow" src="@/assets/images/arrow-left.svg">
       <EventBlock icon="union" text="大地遊戲"/>
       <EventBlock icon="stall-outline" text="社群攤位"/>
       <EventBlock icon="group" text="天使計劃"/>
-      <EventBlock icon="lightning-outline" text="Lightning\nTalk" style="font-size: 20px"/>
+      <EventBlock icon="lightning-outline" text="Lightning\nTalk" :special="true"/>
       <EventBlock icon="guide-outline" text="導遊團"/>
       <EventBlock text="開放式\n議程"/>
       <img class="arrow" src="@/assets/images/arrow-right.svg">
     </div>
-    -->
+    <div v-else class="mobile event container">
-    <div v-if="isMobile()" class="mobile event container">
+      <div class="column">
-      <!-- TODO -->
+        <EventBlock icon="union" text="大地遊戲"/>
+        <EventBlock icon="stall-outline" text="社群攤位"/>
+        <EventBlock icon="group" text="天使計劃"/>
+      </div>
+      <div class="column">
+        <EventBlock icon="lightning-outline" text="Lightning\nTalk" :special="true"/>
+        <EventBlock icon="guide-outline" text="導遊團"/>
+      </div>
+      <div class="column">
+        <img class="arrow" src="@/assets/images/arrow-left.svg">
+        <EventBlock text="開放式\n議程"/>
+        <img class="arrow" src="@/assets/images/arrow-right.svg">
+      </div>
     </div>
+   
     <!-- Event Section End -->
   </div>
 </template>