diff --git a/src/assets/scss/breakpoint.scss b/src/assets/scss/breakpoint.scss index 39ee62c..df6f398 100644 --- a/src/assets/scss/breakpoint.scss +++ b/src/assets/scss/breakpoint.scss @@ -6,6 +6,16 @@ $max-width-4: 415px; $max-width-35: 480px; +//agenda.scsss 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; + @mixin xs { @media (max-width: $max-width-4) { @content; diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss index 6689b38..3ef6624 100644 --- a/src/assets/scss/color.scss +++ b/src/assets/scss/color.scss @@ -3,4 +3,4 @@ $white: white; $pale-grey: #f0f7fd; $dark-slate-blue: #1f4163; $dark-sky-blue: #3d93e9; -$slate-blue: #5f7a95; \ No newline at end of file +$slate-blue: #5f7a95; diff --git a/src/assets/scss/font.scss b/src/assets/scss/font.scss index f8896f2..8e8030f 100644 --- a/src/assets/scss/font.scss +++ b/src/assets/scss/font.scss @@ -1,2 +1,4 @@ // import web font -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); + +$fontFamily: Noto Sans CJK TC, monospace; diff --git a/src/assets/scss/news/agenda.scss b/src/assets/scss/news/agenda.scss index 0715231..394eac7 100644 --- a/src/assets/scss/news/agenda.scss +++ b/src/assets/scss/news/agenda.scss @@ -1,20 +1,6 @@ -//import google font -@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); -$fontFamily-NotoSansTC: "Noto Sans TC"; - -//Color -$color-white: #ffffff; -$color-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; +@import "../breakpoint.scss"; +@import "../color.scss"; +@import "../font.scss"; // .info-container @mixin infoContainer() { @@ -354,7 +340,7 @@ $max-width-small-3: 360px; //cfp-sub-information .info { width: 100%; - font-family: $fontFamily-NotoSansTC; + font-family: $fontFamily; float: left; &-container { @@ -377,7 +363,7 @@ $max-width-small-3: 360px; line-height: 1.9; letter-spacing: normal; text-align: left; - color: $color-mid-blue; + color: $mid-blue; margin-block-start: 0.83em; margin-block-end: 0.83em; } @@ -394,7 +380,7 @@ $max-width-small-3: 360px; line-height: 2.1; letter-spacing: 0.2px; text-align: left; - color: $color-mid-blue; + color: $mid-blue; } strong { @@ -414,7 +400,7 @@ $max-width-small-3: 360px; height: 4px; width: 4px; transform: translate(-200%, -150%); - background-color: $color-mid-blue; + background-color: $mid-blue; border-radius: 50%; } } @@ -430,7 +416,7 @@ $max-width-small-3: 360px; line-height: 2.2; letter-spacing: normal; text-align: left; - color: $color-mid-blue; + color: $mid-blue; margin-block-start: 0.83em; margin-block-end: 0.83em; } @@ -459,7 +445,7 @@ $max-width-small-3: 360px; float: left; padding: 25px 1.5% 35px 1.5%; border-radius: 13px; - background-color: $color-mid-blue; + background-color: $mid-blue; width: 30%; &:not(:last-child) { margin-right: 5%; @@ -468,7 +454,7 @@ $max-width-small-3: 360px; &-title { @include kindTitleFontsize(); width: 100%; - color: $color-white; + color: $white; display: inline-block; text-align: center; font-weight: 900; @@ -487,7 +473,7 @@ $max-width-small-3: 360px; p { @include kindTextFontsize(); margin: 10px auto; - color: $color-white; + color: $white; font-weight: 500; font-stretch: normal; font-style: normal; @@ -512,7 +498,7 @@ $max-width-small-3: 360px; &__itemBox { border-radius: 29px; box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - background-color: $color-white; + background-color: $white; margin: 0 0 30px 0; position: relative; @@ -537,7 +523,7 @@ $max-width-small-3: 360px; line-height: 1.25; letter-spacing: normal; text-align: left; - color: $color-mid-blue; + color: $mid-blue; } span { @include qaIcon(); diff --git a/src/assets/scss/news/schedule.scss b/src/assets/scss/news/schedule.scss index cecffe1..f198f2b 100644 --- a/src/assets/scss/news/schedule.scss +++ b/src/assets/scss/news/schedule.scss @@ -1,10 +1,9 @@ -@import '../breakpoint'; -@import '../color'; +@import "../breakpoint"; +@import "../color"; +@import "../font.scss"; // No need to import font; the fonts have been imported in App.vue // @import '@/assets/scss/font'; -$fontFamily: Noto Sans CJK TC, monospace; - #news-schedule { max-width: 80vw; margin: 0 auto; @@ -49,7 +48,7 @@ $fontFamily: Noto Sans CJK TC, monospace; ul { li { &::before { - content: '•'; + content: "•"; margin: 2px; line-height: 42px; }