[Fix] fix ocfp-news page on device

src/assets/scss/ocfp/agenda.scss

@@ -0,0 +1,601 @@
+// import google font
+// no need to import font; such font has been imported in App.vue
+// @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
+$fontFamily-NotoSansTC: 'Noto Sans TC', sans-serif;
+$fontFamily: 'Noto Sans TC', sans-serif;
+// Color
+// dont define private color if these are common ones 
+@import '../color';
+// $white: #ffffff;
+// $mid-blue: #226bb4;
+
+//Screen breakpoint
+$max-width-big-0: 1800px;
+$max-width-big: 1500px;
+$max-width-medium-0: 1100px;
+$max-width-medium-1: 900px;
+$max-width-small-0: 750px;
+$max-width-small-1: 500px;
+$max-width-small-2: 410px;
+$max-width-small-3: 360px;
+
+// .info-container
+@mixin infoContainer() {
+  max-width: 80%;
+  @media screen and (max-width: 1365px) {
+    margin: 0 120px;
+  }
+
+  @media screen and (max-width: 1023px) {
+    margin: 0 100px;
+  }
+  
+  @media screen and (max-width: $max-width-small-0) {
+    margin: 0;
+    max-width: 100%;
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+
+// .info-section
+@mixin sectionH1Fontsize() {
+  font-size: 32pt;
+  @media only screen and (min-width: $max-width-big-0) {
+    font-size: 36pt;
+    margin-bottom: 50px;
+  }
+  @media only screen and (max-width: $max-width-medium-0) {
+    font-size: 28pt;
+  }
+  @media only screen and (max-width: $max-width-medium-1) {
+    font-size: 24pt;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    font-size: 21pt;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    font-size: 19pt;
+  }
+}
+
+@mixin sectionH2Fontsize() {
+  font-size: 24pt;
+  @media only screen and (min-width: $max-width-big-0) {
+    font-size: 27pt;
+  }
+  @media only screen and (max-width: $max-width-medium-0) {
+    font-size: 22pt;
+  }
+  @media only screen and (max-width: $max-width-medium-1) {
+    font-size: 19pt;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    font-size: 18pt;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    font-size: 18pt;
+  }
+}
+
+//.info-section__content
+@mixin sectionContentParagraphWidth() {
+  // width: 92%;
+  @media only screen and (max-width: $max-width-small-0) {
+    width: 100%;
+    margin-left: 0;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+@mixin sectionContentParagraphFontsize() {
+  font-size: 15pt;
+  @media only screen and (max-width: $max-width-big-0) {
+    font-size: 14pt;
+  }
+  @media only screen and (max-width: $max-width-medium-0) {
+    font-size: 13pt;
+  }
+  @media only screen and (max-width: $max-width-medium-1) {
+    font-size: 12pt;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    font-size: 11pt;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    font-size: 10pt;
+  }
+}
+
+@mixin ulPadding {
+  padding: 0 0 0 20px;
+  @media only screen and (max-width: $max-width-big) {
+    padding: 0 0 0 5px;
+  }
+  @media only screen and (max-width: $max-width-medium-1) {
+    padding: 0;
+  }
+}
+
+@mixin sectionContentSubExtendWidth {
+  width: 107%;
+  @media only screen and (max-width: $max-width-small-0) {
+    width: 100%;
+  }
+}
+
+// .info-kind
+@mixin kind() {
+  @media only screen and (min-width: $max-width-big-0) {
+    padding-bottom: 330px;
+    &__itemBox {
+      height: 305px;
+      padding-top: 0;
+      padding-bottom: 0;
+      &-title {
+        margin-top: 30px;
+      }
+      &-text {
+        padding-top: 8px;
+      }
+    }
+  }
+
+  @media only screen and (max-width: $max-width-small-0) {
+    width: 100%;
+    &__itemBox {
+      width: 100%;
+      height: 201px;
+      margin-bottom: 20px;
+      margin-right: 0;
+      padding: 0;
+      &-title {
+        margin-top: 20px;
+      }
+      &-text {
+        width: 86%;
+      }
+    }
+  }
+}
+
+@mixin kindTitleFontsize() {
+  font-size: 27pt;
+  @media only screen and (max-width: $max-width-big-0) {
+    font-size: 21pt;
+  }
+  @media only screen and (max-width: $max-width-big) {
+    font-size: 19pt;
+  }
+  @media only screen and (max-width: $max-width-medium-0) {
+    font-size: 15pt;
+  }
+  @media only screen and (max-width: $max-width-medium-1) {
+    font-size: 12pt;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    font-size: 21pt;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    font-size: 15pt;
+  }
+}
+
+@mixin kindTextFontsize() {
+  font-size: 15pt;
+  @media only screen and (max-width: $max-width-big-0) {
+    font-size: 13pt;
+  }
+  @media only screen and (max-width: $max-width-big) {
+    font-size: 12pt;
+  }
+  @media only screen and (max-width: $max-width-medium-0) {
+    font-size: 11pt;
+  }
+  @media only screen and (max-width: $max-width-medium-1) {
+    font-size: 9pt;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    font-size: 13pt;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    font-size: 11pt;
+  }
+}
+
+// .info-qa
+@mixin qaLayout {
+  width: 86%;
+  margin-bottom: 120px;
+  @media only screen and (max-width: $max-width-big) {
+    width: 90%;
+    margin-bottom: 25px;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    width: 100%;
+    margin-bottom: 0px;
+  }
+}
+
+@mixin qaTitleFontsize() {
+  font-size: 18pt;
+  @media only screen and (max-width: $max-width-medium-0) {
+    font-size: 16pt;
+  }
+  @media only screen and (max-width: $max-width-medium-1) {
+    font-size: 14pt;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    font-size: 11pt;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    font-size: 9pt;
+  }
+  @media only screen and (max-width: $max-width-small-2) {
+    font-size: 8pt;
+  }
+  @media only screen and (max-width: $max-width-small-3) {
+    font-size: 7pt;
+  }
+}
+
+@mixin qaTextFontsize() {
+  font-size: 15pt;
+  @media only screen and (max-width: $max-width-medium-1) {
+    font-size: 14pt;
+  }
+  @media only screen and (max-width: $max-width-medium-0) {
+    font-size: 12pt;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    font-size: 11pt;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    font-size: 9pt;
+  }
+  @media only screen and (max-width: $max-width-small-2) {
+    font-size: 8pt;
+  }
+  @media only screen and (max-width: $max-width-small-3) {
+    font-size: 6.5pt;
+  }
+}
+
+@mixin qaTitleHeight {
+  height: 57px;
+  @media only screen and (max-width: $max-width-small-0) {
+    height: 45px;
+  }
+  @media only screen and (max-width: $max-width-small-1) {
+    height: 36px;
+  }
+  @media only screen and (max-width: $max-width-small-2) {
+    height: 32px;
+  }
+  @media only screen and (max-width: $max-width-small-3) {
+    height: 28px;
+  }
+}
+
+@mixin qaTitleMarginTop {
+  margin-top: 15px;
+  @media only screen and (max-width: $max-width-small-1) {
+    margin-top: 10px;
+  }
+  @media only screen and (max-width: $max-width-small-2) {
+    margin-top: 9px;
+  }
+}
+@mixin qaTextMarginTop {
+  margin-top: 25px;
+  @media only screen and (max-width: $max-width-small-1) {
+    margin-top: 15px;
+  }
+}
+
+@mixin qaQdisplay {
+  margin-left: 25px;
+
+  &::before {
+    content: "Q：";
+  }
+  @media only screen and (max-width: $max-width-medium-1) {
+    margin-left: 18px;
+    &::before {
+      content: "";
+    }
+  }
+}
+
+@mixin qaIconSize {
+  height: 25px;
+  width: 30px;
+  @media only screen and (max-width: $max-width-medium-1) {
+    height: 16px;
+    width: 19px;
+  }
+}
+
+@mixin qaIcon {
+  background-image: url("../../assets/images/CFP/Polygon-big.svg");
+
+  @media only screen and (max-width: $max-width-medium-1) {
+    background-image: url("../../assets/images/CFP/Polygon-small.svg");
+  }
+}
+
+@mixin sitconImg {
+  float: right;
+  margin-top: 382px;
+  margin-right: 15%;
+  margin-bottom: 30px;
+  @media only screen and (max-width: $max-width-big) {
+    margin-top: 0;
+    margin-right: 80%;
+  }
+  @media only screen and (max-width: $max-width-medium-0) {
+    width: 108px;
+    height: 135px;
+  }
+  @media only screen and (max-width: $max-width-small-0) {
+    margin-right: 15%;
+  }
+
+  @media only screen and (max-width: $max-width-small-1) {
+    width: 86px;
+    height: 107px;
+  }
+
+  @media only screen and (max-width: $max-width-small-2) {
+    width: 69px;
+    height: 86px;
+  }
+  @media only screen and (max-width: $max-width-small-3) {
+    width: 55px;
+    height: 68px;
+  }
+}
+
+//cfp-sub-information <subInformation>
+.info {
+  position: relative;
+  width: 100%;
+  font-family: $fontFamily;
+  float: left;
+
+  &-container {
+    @include infoContainer();
+    margin: 0 280px;
+    // float: left;
+  }
+
+  &-section {
+    float: left;
+    clear: both;
+    width: 100%;
+
+    h1 {
+      @include sectionH1Fontsize();
+      height: 70px;
+      font-weight: 900;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: 1.9;
+      letter-spacing: normal;
+      text-align: left;
+      color: $mid-blue;
+      margin-block-start: 0.83em;
+      margin-block-end: 0.83em;
+    }
+    &__content {
+      width: 100%;
+
+      p {
+        @include sectionContentParagraphWidth();
+        @include sectionContentParagraphFontsize();
+
+        font-weight: 500;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 2.1;
+        letter-spacing: 0.2px;
+        text-align: left;
+        color: $mid-blue;
+      }
+
+      strong {
+        font-weight: 900;
+      }
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+          @include ulPadding();
+          margin: 0;
+          span {
+            display: inline-block;
+            height: 4px;
+            width: 4px;
+            transform: translate(-200%, -150%);
+            background-color: $mid-blue;
+            border-radius: 50%;
+          }
+        }
+      }
+
+      &--sub {
+        h2 {
+          @include sectionH2Fontsize();
+          height: 60px;
+          font-weight: 900;
+          font-stretch: normal;
+          font-style: normal;
+          line-height: 2.2;
+          letter-spacing: normal;
+          text-align: left;
+          color: $mid-blue;
+          margin-block-start: 0.83em;
+          margin-block-end: 0.83em;
+        }
+
+        &-extend {
+          @include sectionContentSubExtendWidth();
+        }
+      }
+    }
+  }
+
+  &-sitcon-img {
+    &__box {
+      float: right;
+    }
+
+    @include sitconImg();
+  }
+
+  //cfp-sub-information <subInformation> kind, qa components
+  &-kind {
+    width: 100%;
+    margin-top: 45px;
+    padding-bottom: 300px;
+    &__itemBox {
+      float: left;
+      padding: 25px 1.5% 35px 1.5%;
+      border-radius: 13px;
+      background-color: $mid-blue;
+      width: 30%;
+      &:not(:last-child) {
+        margin-right: 5%;
+      }
+
+      &-title {
+        @include kindTitleFontsize();
+        width: 100%;
+        color: $white;
+        display: inline-block;
+        text-align: center;
+        font-weight: 900;
+        font-stretch: normal;
+        font-style: normal;
+        letter-spacing: normal;
+        text-align: center;
+        margin-top: 25px;
+      }
+      &-text {
+        width: 100%;
+        height: 172px;
+        margin: 0 auto;
+        text-align: left;
+
+        p {
+          @include kindTextFontsize();
+          margin: 10px auto;
+          color: $white;
+          font-weight: 500;
+          font-stretch: normal;
+          font-style: normal;
+          line-height: 2.1;
+          letter-spacing: 0.2px;
+        }
+
+        strong {
+          font-weight: 900;
+        }
+      }
+    }
+    //RWD for kind
+    @include kind();
+  }
+
+  &-qa {
+    @include qaLayout();
+    margin-bottom: 120px;
+    float: left;
+    // margin: 0 auto;
+    &__itemBox {
+      border-radius: 29px;
+      box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
+      background-color: $white;
+      margin: 0 0 30px 0;
+
+      position: relative;
+      &-title {
+        @include qaTitleHeight();
+        display: block;
+        width: 100%;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        p {
+          @include qaTitleFontsize();
+          @include qaTitleMarginTop();
+
+          @include qaQdisplay();
+          display: inline-block;
+          font-weight: bold;
+          font-stretch: normal;
+          font-style: normal;
+          line-height: 1.25;
+          letter-spacing: normal;
+          text-align: left;
+          color: $mid-blue;
+        }
+        span {
+          @include qaIcon();
+          background-repeat: no-repeat;
+          position: absolute;
+          top: 15px;
+          top: 50%;
+          transform: translateY(-45%);
+          right: 3.5%;
+        }
+      }
+
+      &-input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+      }
+
+      &-input:checked ~ &-text {
+        display: block;
+        width: 88%;
+        margin: 0 auto;
+        padding-bottom: 20px;
+
+        p {
+          width: 100%;
+          @include qaTextFontsize();
+        }
+      }
+
+      &-input:checked ~ &-title {
+        p {
+          @include qaTextMarginTop();
+        }
+        span {
+          transform: rotate(180deg);
+          position: absolute;
+          top: 20px;
+          right: 3.5%;
+        }
+      }
+
+      &-text {
+        display: none;
+      }
+    }
+
+    &-icon {
+      @include qaIconSize();
+    }
+  }
+}

src/assets/scss/ocfp/card.scss

@@ -0,0 +1,34 @@
+@import '../breakpoint';
+@import '../color';
+
+.agenda.card:not(.container) {
+  a.image.container {
+    display: inline-block;
+    width: 100%;
+    line-height: 0; // prevent background overflow
+    background-color: #ffffff;
+    border-radius: 11px;
+    box-shadow: 0 3px 15px 0 rgba(89, 120, 206, 0.56);
+
+    // smooth transition from hover -> default state
+    will-change: transform;
+    transform: scale(1);
+    transition-duration: 0.25s;
+
+    img {
+      border-radius: 11px;
+      width: 100%;
+    }
+
+    &:hover {
+      transform: scale(1.04);
+      transition-duration: 0.25s;
+    }
+  }
+
+  p.description {
+    line-height: 1.55em;
+    text-align: center;
+    font-weight: bold;
+  }
+}

src/assets/scss/ocfp/header.scss

@@ -0,0 +1,362 @@
+@import '../hyperpoint';
+@import '../color';
+$fontFamily: Noto Sans TC, monospace;
+
+
+// desktop mode
+#ocfp-header {
+  padding: 72px 280px;
+
+  * {
+    font-family: "Noto Sans TC";
+  }
+
+  .top-bar {
+    position: relative;
+    // background: red; // debug
+    height: 60px;
+
+    .return-wrapper {
+      // location
+      position: absolute;
+      left: -30px;
+      bottom: -4px;
+
+      .shape-wrapper {
+        background: $white;
+        border-radius: 12px;
+        -webkit-box-shadow: -18px 18px 0px -6px $mid-blue,
+          0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: -18px 18px 0px -6px $mid-blue,
+          0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+        box-shadow: -18px 18px 0px -6px $mid-blue,
+          0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+
+        @keyframes jump {
+          0% {
+            position: relative;
+            bottom: 0px;
+          }
+          50% {
+            position: relative;
+            bottom: 20px;
+          }
+          100% {
+            position: relative;
+            bottom: 0px;
+          }
+        }
+
+        &:hover {
+          animation: jump 0.6s ease-in 0s infinite reverse;
+        }
+
+        .text-wrapper {
+          width: 68px;
+          height: 68px;
+          line-height: 68px;
+          text-align: center;
+          color: $mid-blue;
+          font-weight: bold;
+          font-size: 16pt;
+        }
+      }
+    }
+    @media screen and (min-width: 1023px) {
+    .contribute-wrapper {
+        position:absolute;
+        background-color: #ffffff;
+        box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
+        transition-duration: 0.2s;
+        color: #226bb4;
+        width: 126px;
+        height: 50px;
+        border-radius: 8px;
+        top: 20px;
+        right: 25px;
+      .btn-contribute {
+        padding: 0.85em 1.25em;
+        font-size: 1.1em;
+        font-weight: 900;
+        border: none;
+        position: absolute;
+        color:$mid-blue;
+        top:0;
+        bottom:0;
+        margin:auto;
+        width: 100%;
+        &:hover {
+          background-color: #226bb4;
+          box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
+          color: white;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+    .title-wrapper {
+      .svg-cfp-news {
+        height: 60px;
+        width: auto;
+      }
+    }
+  }
+
+  .cfp-body {
+    padding: 40px 48px;
+    margin-top: 54px;
+    border-radius: 24px;
+
+    color: $white;
+
+    font-size: 14pt;
+    font-weight: bold;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .spot-wrapper {
+      margin-bottom: 2.25em;
+
+      h1 {
+        font-size: 26pt;
+        margin-bottom: 1em;
+      }
+
+      .countdown {
+        line-height: 1.5;
+      }
+    }
+
+    .time-wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      h2 {
+        height: 24pt;
+      }
+
+      p {
+        font-size: 1.44em;
+      }
+
+      .tilde-wrapper {
+        margin-right: 0.85em;
+      }
+    }
+  }
+}
+.cfp-body-gray {
+  background: #5F7A95;
+}
+.cfp-body-blue {
+  background: $mid-blue;
+}
+
+@include lg {
+  #ocfp-header {
+    padding-left: 120px;
+    padding-right: 120px;
+  }
+}
+
+// mobile mode
+@include md {
+  #ocfp-header {
+    font-size: 14pt;
+    padding: 72px 100px;
+
+    .top-bar {
+      position: initial;
+      height: 5em;
+      border-radius: 2.5em;
+      padding-left: 2.5em;
+      padding-right: 2.5em;
+
+      background: $white;
+      -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
+      -moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
+      box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .return-wrapper {
+        // location
+        position: initial;
+        flex: 1;
+
+        .shape-wrapper {
+          background: $white;
+          border-radius: 12px;
+          -webkit-box-shadow: -13px 13px 0px -6px $mid-blue,
+            0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+          -moz-box-shadow: -13px 13px 0px -6px $mid-blue,
+            0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+          box-shadow: -13px 13px 0px -6px $mid-blue,
+            0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+
+          .text-wrapper {
+            width: 3em;
+            height: 3em;
+            line-height: 3em;
+            text-align: center;
+            color: $mid-blue;
+            font-weight: bold;
+            font-size: 1em;
+          }
+        }
+      }
+
+      .title-wrapper {
+        flex: 1;
+        .svg-cfp-news {
+          height: 2.25em;
+          width: auto;
+        }
+      }
+
+      .contribute-wrapper {
+        display: initial;
+        flex: 1;
+        text-align: end;
+
+        .btn-contribute {
+          display: inline-block;
+          border-radius: 6px;
+          background: $mid-blue;
+          color: $white;
+          font-weight: 900;
+          padding: 0.5em;
+          font-size: 1.2em;
+        }
+      }
+    }
+
+    .cfp-body {
+      padding-top: 2em;
+      padding-left: 2em;
+      padding-right: 2em;
+      padding-bottom: 3.5em;
+      margin-top: 54px;
+      border-radius: 24px;
+
+      color: $white;
+      //background: $mid-blue;
+      font-weight: bold;
+      font-size: 1em;
+
+      .spot-wrapper {
+        h1 {
+          font-size: 2em;
+          margin-bottom: 1em;
+        }
+
+        margin-bottom: 2.25em;
+      }
+
+      .time-wrapper {
+        display: flex;
+        flex-direction: column;
+
+        h2 {
+          height: initial;
+        }
+        p {
+          font-size: 1.25em;
+        }
+
+        .start-time-wrapper {
+          h2,
+          p {
+            margin-bottom: 1.25em;
+          }
+        }
+
+        .end-time-wrapper {
+          h2 {
+            margin-bottom: 1.25em;
+          }
+        }
+
+        .tilde-wrapper {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@include sm {
+  #ocfp-header {
+    font-size: 11pt;
+    padding: 60px 40px;
+
+    .cfp-body {
+      font-size: 14pt;
+    }
+  }
+}
+
+// a 540px break point will be better = =
+@media screen and (max-width: 539px) {
+  #ocfp-header {
+    font-size: 9pt;
+    padding: 36px 18px;
+
+    .top-bar {
+      height: 4em;
+      border-radius: 2em;
+      padding-left: 1.66em;
+      padding-right: 1em;
+      -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
+      -moz-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
+      box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.5);
+
+      .return-wrapper {
+        .shape-wrapper {
+          .text-wrapper {
+            width: 2.4em;
+            height: 2.4em;
+            line-height: 2.4em;
+            text-align: center;
+            color: $mid-blue;
+            font-weight: bold;
+            font-size: 1em;
+          }
+        }
+      }
+
+      .title-wrapper {
+        flex: 1;
+        .svg-cfp-news {
+          height: 1.85em;
+          width: auto;
+        }
+      }
+
+      .contribute-wrapper {
+        display: initial;
+        flex: 1;
+        text-align: end;
+
+        .btn-contribute {
+          display: inline-block;
+          border-radius: 6px;
+          background: $mid-blue;
+          color: $white;
+          font-weight: 900;
+          padding: 0.5em;
+          font-size: 1.2em;
+        }
+      }
+    }
+
+    .cfp-body {
+      font-size: 12pt;
+    }
+  }
+}

src/assets/scss/ocfp/navbar.scss

@@ -0,0 +1,189 @@
+@import '../color';
+@import '../font';
+
+$mobileView: 1024px;
+$fixedTopPadding: 25px;
+$fixedRightPadding: 50px;
+
+#ocfp-nav {
+  font-size: 13pt;
+  line-height: 1em;
+  z-index: 2;
+
+  // prevent slow animation update
+  position: sticky;
+  top: $fixedTopPadding;
+
+  &.fixed {
+    position: fixed;
+    top: $fixedTopPadding;
+    right: $fixedRightPadding;
+
+    .news-nav.animating {
+      // from section to fixed
+      animation-name: move-to-side;
+    }
+  }
+
+  &.returning {
+    // prevent navbar overlap header
+    position: sticky;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .news-nav {
+    float: right;
+    text-align: end;
+    display: flex;
+    flex-direction: column;
+    border-radius: 15px;
+    padding: 10px;
+    box-shadow: 3px 3px 15px $mid-blue;
+    background: white;
+    z-index: 5;
+
+    margin-left: 25px;
+
+    animation-duration: 0.5s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+
+    &.animating {
+      // from fixed to section
+      animation-name: move-to-section;
+    }
+
+    &-item {
+      margin: 0 8px;
+      padding: 5px 1em;
+      color: $mid-blue;
+      font-family: $fontFamily;
+      cursor: pointer;
+      border-right: 3px solid $sky-blue;
+  
+      &.active {
+        font-weight: 900;
+        border-right: 3px solid $mid-blue;
+      }
+    }
+    &-button {
+      color: $mid-blue;
+      border: none;
+      background: transparent;
+      padding: 0.5em 0;
+      font-size: 20px;
+      cursor: pointer;
+      &:focus {
+        outline: none;
+      }
+    }
+    &-contribute-button {
+      display: inline-block;
+      border-radius: 6px;
+      background: $mid-blue;
+      color: $white;
+      font-weight: 900;
+      padding: 0.5em 1em;
+      font-size: 1.2em;
+      margin: 1em auto;
+    }
+  }
+  
+  .nav-control-button {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: $fixedTopPadding;
+    right: $fixedRightPadding;
+    z-index: 5;
+    padding: 0 15px;
+    width: 55px;
+    border: none;
+    border-radius: 5px;
+    color: $mid-blue;
+    font-size: 24px;
+    background-color: white;
+    box-shadow: -2px 0 15px $mid-blue;
+    cursor: pointer;
+    p {
+      text-align: end;
+    }
+  }
+
+  // narrower padding
+  @media screen and (max-width: 1365px) {
+    .news-nav.animating {
+      animation-name: slide-to-section;
+    }
+
+    &.fixed .news-nav.animating {
+      animation-name: slide-to-side;
+    }
+  }
+  
+  @media screen and (max-width: $mobileView) {
+    .nav-control-button {
+      top: 250px;
+      right: 0;
+      width: 35px;
+      font-size: 16px;
+      text-align: left;
+      padding: 0 10px;
+    }
+
+    .news-nav.animating,
+    &.fixed .news-nav.animating {
+      animation-name: none;
+    }
+  }
+}
+
+@media screen and (max-width: $mobileView) {
+  #ocfp-nav.fixed {
+    right: 20px;
+  }
+}
+
+@keyframes move-to-section {
+  0% {
+    transform: translateX(280px - $fixedRightPadding);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes move-to-side {
+  0% {
+    transform: translateX(-(280px - $fixedRightPadding));
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+// for narrower padding
+@keyframes slide-to-section {
+  0% {
+    transform: translateX(120px - $fixedRightPadding);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-to-side {
+  0% {
+    transform: translateX(-(120px - $fixedRightPadding));
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}

src/assets/scss/ocfp/schedule.scss

@@ -0,0 +1,155 @@
+@import "../breakpoint";
+@import "../color";
+@import "../font";
+// No need to import font; the fonts have been imported in App.vue
+// @import '@/assets/scss/font';
+
+#ocfp-schedule {
+  position: relative;
+  max-width: 80vw;
+  margin: 0 280px;
+
+  font-family: $fontFamily;
+  font-size: 15pt;
+  line-height: 2.1em;
+  letter-spacing: 0.2px;
+  color: $mid-blue;
+
+  * {
+    position: relative;
+  }
+
+  a {
+    color: $mid-blue;
+    text-decoration: underline;
+  }
+
+  h1 {
+    font-size: 36pt;
+    line-height: 1.45em;
+    padding: 15px 0;
+  }
+
+  h2 {
+    font-size: 27pt;
+    line-height: 2em;
+  }
+
+  h3 {
+    font-size: 18pt;
+    line-height: 1.25em;
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-weight: 900;
+  }
+
+  ul {
+    li {
+      &::before {
+        content: "•";
+        margin: 2px;
+        line-height: 42px;
+      }
+    }
+  }
+
+  section:not(:last-of-type),
+  article:not(:last-of-type) {
+    margin-bottom: 55px;
+  }
+
+  #theme-example {
+    > p {
+      padding: 20px 0;
+    }
+  }
+
+  #theme-example ~ p {
+    padding: 20px 0;
+  }
+
+  #example > p {
+    word-wrap: break-word;
+  }
+
+  #presentation-example,
+  #espresso-example {
+    > p {
+      padding-bottom: 40px;
+    }
+
+    .agenda.card.container {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      column-gap: 62px;
+      row-gap: 40px;
+    }
+  }
+}
+
+#code-of-conduct a {
+  font-weight: 900;
+}
+
+@media screen and (max-width: 1365px) {
+  #ocfp-schedule {
+    margin: 0 120px;
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  #ocfp-schedule {
+    margin: 0 100px;
+
+    h1 {
+      font-size: 28pt;
+    }
+
+    #presentation-example,
+    #espresso-example {
+      margin-bottom: unset;
+      .agenda.card.container {
+        grid-template-columns: repeat(2, 1fr);
+        column-gap: 42px;
+        row-gap: 30px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $max-width-small-0) {
+  #news-schedule {
+    margin: 0;
+    max-width: 100vw;
+    padding: 0 40px;
+    font-size: 11pt;
+
+    h1,
+    h2 {
+      font-size: 20pt;
+      line-height: 2.69em;
+    }
+
+    h3 {
+      font-size: 15pt;
+      line-height: 1.5em;
+    }
+
+    h1,
+    h2,
+    h3 {
+      padding: 0;
+    }
+
+    #schedule {
+      margin-bottom: unset;
+    }
+
+    #theme-example ~ p {
+      padding: 15px 0;
+    }
+  }
+}

src/assets/scss/ocfp/topic.scss

@@ -0,0 +1,47 @@
+@import '../breakpoint';
+@import '../color';
+
+.topic {
+  padding: 30px 0;
+  position: relative;
+  display: grid;
+  grid-template-columns: 256px min-content 1fr;
+
+  h3.title {
+    line-height: 1.67em;
+  }
+
+  .divider {
+    width: 0;
+    height: 100%;
+    border-left: 2px $mid-blue solid;
+    margin: 0 37px;
+  }
+
+  .title,
+  .description {
+    display: flex;
+    align-items: center;
+  }
+}
+
+@include md {
+  .topic {
+    grid-template-columns: 1fr;
+    padding: 20px 0;
+
+    h3.title {
+      br[data-delimiter='：'] {
+        display: none;
+      }
+    }
+
+    .divider {
+      width: 100%;
+      height: 0;
+      border-bottom: none;
+      border-top: 2px $mid-blue solid;
+      margin: 15px 0;
+    }
+  }
+}

src/components/ocfp-news/Agenda.vue

@@ -195,5 +195,5 @@ export default class Agenda extends Vue {}
 </script>
 
 <style lang="scss">
-@import "@/assets/scss/news/agenda";
+@import "@/assets/scss/ocfp/agenda";
 </style>

src/components/ocfp-news/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header id="ocfp-header">
     <div class="top-bar">
       <div class="return-wrapper">
         <a class="shape-wrapper diamond" href="/2021/cfp"
@@ -122,5 +122,5 @@ export default class CfpHeader extends Vue {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/news/header'
+@import '@/assets/scss/ocfp/header';
 </style>

src/components/ocfp-news/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav id="news-nav" :class="{ fixed: (isNavbarFixed || isMobileView), returning: isNavbarReturning }">
+  <nav id="ocfp-nav" :class="{ fixed: (isNavbarFixed || isMobileView), returning: isNavbarReturning }">
     <div 
       class="news-nav"
       :class="{ animating: isNavbarAnimating }"
@@ -111,5 +111,5 @@ export default class Navbar extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/news/navbar';
+@import '@/assets/scss/ocfp/navbar';
 </style>

src/components/ocfp-news/Schedule.vue

@@ -61,5 +61,5 @@ export default class Schedule extends Vue {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/news/schedule';
+@import '@/assets/scss/ocfp/schedule';
 </style>

src/components/ocfp-news/Topic.vue

@@ -21,5 +21,5 @@ export default class Topic extends Vue {
 </script>
 
 <style lang="scss">
-@import '@/assets/scss/news/topic';
+@import '@/assets/scss/ocfp/topic';
 </style>

src/pages/OCFP.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="news">
-    <NewsHeader id="news-header" />
+    <NewsHeader id="ocfp-header" />
-    <Schedule id="news-schedule" />
+    <Schedule id="ocfp-schedule" />
-    <Agenda id="news-agenda" />
+    <Agenda id="ocfp-agenda" />
     <!-- <Footer></Footer> should be put at App.vue (?) -->
   </div>
 </template>