From 4d8e0ac09110ae2e00f924cd33173cc50af911b0 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:25:36 +0800 Subject: [PATCH 01/13] [Style] Rename CFP.scss to header.scss; sparate from main --- src/assets/scss/CFP/{CFP.scss => header.scss} | 0 src/assets/scss/main.scss | 2 +- src/components/CFP/Header.vue | 4 ++++ 3 files changed, 5 insertions(+), 1 deletion(-) rename src/assets/scss/CFP/{CFP.scss => header.scss} (100%) diff --git a/src/assets/scss/CFP/CFP.scss b/src/assets/scss/CFP/header.scss similarity index 100% rename from src/assets/scss/CFP/CFP.scss rename to src/assets/scss/CFP/header.scss diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 1904279..8013329 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -7,7 +7,7 @@ // components @import './footer.scss'; @import './CFP/cfp_introduction.scss'; -@import './CFP/CFP.scss'; +// @import './CFP/CFP.scss'; @import './CFP/cfpSubNew.scss'; @import "./news.scss"; diff --git a/src/components/CFP/Header.vue b/src/components/CFP/Header.vue index e70cf10..7a754bb 100644 --- a/src/components/CFP/Header.vue +++ b/src/components/CFP/Header.vue @@ -77,3 +77,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class CfpHeader extends Vue {} + + From 517b1b7ab0c3bcbc675e365eb5ba7296cbd1ba0c Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:26:53 +0800 Subject: [PATCH 02/13] [Style] Separate footer.scss from main --- src/assets/scss/main.scss | 2 +- src/components/Footer.vue | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 8013329..54f6382 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -5,7 +5,7 @@ @import './util.scss'; // components -@import './footer.scss'; +// @import './footer.scss'; @import './CFP/cfp_introduction.scss'; // @import './CFP/CFP.scss'; @import './CFP/cfpSubNew.scss'; diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 8466b2b..3779c27 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -68,4 +68,8 @@ export default class CFP extends Vue { } ]; } - \ No newline at end of file + + + From 3a923c164ac78b907852347724d9638283324ff0 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:32:23 +0800 Subject: [PATCH 03/13] [Style] Rename cfp_introduction.scss to intro.scss; Separate from main --- src/assets/scss/CFP/cfpSubNew.scss | 2 ++ src/assets/scss/CFP/{cfp_introduction.scss => intro.scss} | 4 ++-- src/assets/scss/main.scss | 2 +- src/components/CFP/IntrodContainer.vue | 4 ++++ 4 files changed, 9 insertions(+), 3 deletions(-) rename src/assets/scss/CFP/{cfp_introduction.scss => intro.scss} (98%) diff --git a/src/assets/scss/CFP/cfpSubNew.scss b/src/assets/scss/CFP/cfpSubNew.scss index a5dad19..aa204e9 100644 --- a/src/assets/scss/CFP/cfpSubNew.scss +++ b/src/assets/scss/CFP/cfpSubNew.scss @@ -1,3 +1,5 @@ +$fontColor: #226bb4; // added to solve unnamed color error + //import google font @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); diff --git a/src/assets/scss/CFP/cfp_introduction.scss b/src/assets/scss/CFP/intro.scss similarity index 98% rename from src/assets/scss/CFP/cfp_introduction.scss rename to src/assets/scss/CFP/intro.scss index c0d16c0..10e217e 100644 --- a/src/assets/scss/CFP/cfp_introduction.scss +++ b/src/assets/scss/CFP/intro.scss @@ -510,7 +510,7 @@ p.small-tag { margin-top: 40px; margin-left: -80px; transform: scale(0.9); - background: url(./assets/images/cfp/Mobile/Path_763.svg) no-repeat; + background: url(~@/assets/images/cfp/Mobile/Path_763.svg) no-repeat; padding-top: -565px; margin-bottom: -665px; } @@ -561,7 +561,7 @@ p.small-tag { @media screen and(max-width: 414px){ //content: url() no-repeat;//../../assets/images/cfp/Mobile/Mobile-background.svg //visibility: hidden; - background: url(./assets/images/cfp/Mobile/Mobile-background.svg) !important; + background: url(~@/assets/images/cfp/Mobile/Mobile-background.svg) !important; object-position: -99999px 99999px; overflow: hidden; margin-left: -20%; diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 54f6382..8cd6cb7 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -6,7 +6,7 @@ // components // @import './footer.scss'; -@import './CFP/cfp_introduction.scss'; +// @import './CFP/cfp_introduction.scss'; // @import './CFP/CFP.scss'; @import './CFP/cfpSubNew.scss'; @import "./news.scss"; diff --git a/src/components/CFP/IntrodContainer.vue b/src/components/CFP/IntrodContainer.vue index cae7920..c71bf94 100644 --- a/src/components/CFP/IntrodContainer.vue +++ b/src/components/CFP/IntrodContainer.vue @@ -137,3 +137,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class IntrodContainer extends Vue {} + + From 73716ef8d132a59079715759dbe5578542a86593 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:34:36 +0800 Subject: [PATCH 04/13] [Fix] fix @import "xxx.scss" to @import "xxx" --- src/components/CFP/AgendaCard.vue | 2 +- src/components/CFP/Header.vue | 2 +- src/components/CFP/Schedule.vue | 2 +- src/components/CFP/Topic.vue | 2 +- src/components/Footer.vue | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CFP/AgendaCard.vue b/src/components/CFP/AgendaCard.vue index 619a194..6aa05df 100644 --- a/src/components/CFP/AgendaCard.vue +++ b/src/components/CFP/AgendaCard.vue @@ -20,5 +20,5 @@ export default class AgendaCard extends Vue { \ No newline at end of file diff --git a/src/components/CFP/Header.vue b/src/components/CFP/Header.vue index 7a754bb..4b2715b 100644 --- a/src/components/CFP/Header.vue +++ b/src/components/CFP/Header.vue @@ -79,5 +79,5 @@ export default class CfpHeader extends Vue {} diff --git a/src/components/CFP/Schedule.vue b/src/components/CFP/Schedule.vue index fb1fd7f..48cff68 100644 --- a/src/components/CFP/Schedule.vue +++ b/src/components/CFP/Schedule.vue @@ -77,5 +77,5 @@ export default class Schedule extends Vue { \ No newline at end of file diff --git a/src/components/CFP/Topic.vue b/src/components/CFP/Topic.vue index 769d496..75de3d5 100644 --- a/src/components/CFP/Topic.vue +++ b/src/components/CFP/Topic.vue @@ -21,5 +21,5 @@ export default class Topic extends Vue { \ No newline at end of file diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 3779c27..6561434 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -71,5 +71,5 @@ export default class CFP extends Vue { From 5b51ee8655a8bf5edc0b4f7370c5580dd706ae20 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:37:07 +0800 Subject: [PATCH 05/13] [Style] Separate news.scss from main --- src/assets/scss/main.scss | 2 +- src/pages/News.vue | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 8cd6cb7..c98c86d 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -9,7 +9,7 @@ // @import './CFP/cfp_introduction.scss'; // @import './CFP/CFP.scss'; @import './CFP/cfpSubNew.scss'; -@import "./news.scss"; +// @import "./news.scss"; .sitcon-burnfont { color: $mid-blue; diff --git a/src/pages/News.vue b/src/pages/News.vue index 1d8ec6c..45fe8d2 100644 --- a/src/pages/News.vue +++ b/src/pages/News.vue @@ -26,4 +26,5 @@ export default class News extends Vue { From eae16f4262250c8debbe42eed3d125718bef6aeb Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:39:35 +0800 Subject: [PATCH 06/13] [Style] Rename cfpSubNew.scss to agenda.scss used by CFP/Agenda.vue; separate from main --- src/assets/scss/CFP/{cfpSubNew.scss => agenda.scss} | 0 src/assets/scss/main.scss | 2 +- src/components/CFP/Agenda.vue | 6 +++++- 3 files changed, 6 insertions(+), 2 deletions(-) rename src/assets/scss/CFP/{cfpSubNew.scss => agenda.scss} (100%) diff --git a/src/assets/scss/CFP/cfpSubNew.scss b/src/assets/scss/CFP/agenda.scss similarity index 100% rename from src/assets/scss/CFP/cfpSubNew.scss rename to src/assets/scss/CFP/agenda.scss diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index c98c86d..425d138 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -8,7 +8,7 @@ // @import './footer.scss'; // @import './CFP/cfp_introduction.scss'; // @import './CFP/CFP.scss'; -@import './CFP/cfpSubNew.scss'; +// @import './CFP/cfpSubNew.scss'; // @import "./news.scss"; .sitcon-burnfont { diff --git a/src/components/CFP/Agenda.vue b/src/components/CFP/Agenda.vue index b4ea9b5..56af629 100644 --- a/src/components/CFP/Agenda.vue +++ b/src/components/CFP/Agenda.vue @@ -246,4 +246,8 @@ export default class Agenda extends Vue { } } - \ No newline at end of file + + + From 61338668dad737f39d51a4c5e965b23e3ebe1fc6 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:41:55 +0800 Subject: [PATCH 07/13] [Fix] Duplicated font import --- src/assets/scss/CFP/agenda.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/assets/scss/CFP/agenda.scss b/src/assets/scss/CFP/agenda.scss index aa204e9..563a59b 100644 --- a/src/assets/scss/CFP/agenda.scss +++ b/src/assets/scss/CFP/agenda.scss @@ -1,7 +1,8 @@ $fontColor: #226bb4; // added to solve unnamed color error -//import google font -@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); +// import google font +// This font has been imported in main.scss linked to App.vue; no need to import +// @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); //my variable $color-pale-grey: #f0f7fd; From cf103b70f5bf905fd0b080c02cc8f8ff65334731 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:46:47 +0800 Subject: [PATCH 08/13] [Style] Unify colors --- src/assets/scss/CFP/agenda.scss | 33 ++++++++++++++++++--------------- src/assets/scss/color.scss | 4 ++++ 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/assets/scss/CFP/agenda.scss b/src/assets/scss/CFP/agenda.scss index 563a59b..f5d404f 100644 --- a/src/assets/scss/CFP/agenda.scss +++ b/src/assets/scss/CFP/agenda.scss @@ -1,16 +1,19 @@ +@import '../color.scss'; + $fontColor: #226bb4; // added to solve unnamed color error // import google font // This font has been imported in main.scss linked to App.vue; no need to import // @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); -//my variable -$color-pale-grey: #f0f7fd; -$color-dark-slate-blue: #1f4163; -$color-dark-sky-blue: #3d93e9; -$color-white: #ffffff; -$color-slate-blue: #5f7a95; -$color-mid-blue: #226bb4; +// my variable +// There colors have been moved to scss/color.scss to share with others +// $color-pale-grey: #f0f7fd; +// $color-dark-slate-blue: #1f4163; +// $color-dark-sky-blue: #3d93e9; +// $color-white: #ffffff; +// $color-slate-blue: #5f7a95; +// $color-mid-blue: #226bb4; $fontFamily-NotoSansTC: "Noto Sans TC"; @@ -41,7 +44,7 @@ $limitWidth: 80vw; line-height: 1.9; letter-spacing: normal; text-align: left; - color: $color-mid-blue; + color: $mid-blue; margin: 10px 0; } &__content { @@ -55,7 +58,7 @@ $limitWidth: 80vw; line-height: 2.1; letter-spacing: 0.2px; text-align: left; - color: $color-mid-blue; + color: $mid-blue; } strong { @@ -75,7 +78,7 @@ $limitWidth: 80vw; height: 4px; width: 4px; transform: translate(-200%, -150%); - background-color: $color-mid-blue; + background-color: $mid-blue; border-radius: 50%; } } @@ -93,7 +96,7 @@ $limitWidth: 80vw; line-height: 2.2; letter-spacing: normal; text-align: left; - color: $color-mid-blue; + color: $mid-blue; margin: 10px 0; } } @@ -113,14 +116,14 @@ $limitWidth: 80vw; &__itemBox { width: 330px; border-radius: 13px; - background-color: $color-mid-blue; + background-color: $mid-blue; padding: 26px 20px 34px 20px; @media screen and (max-width: 1200px) { width: 90%; margin: 20px auto; } &-title { - color: $color-white; + color: $white; display: inline-block; text-align: center; width: 100%; @@ -141,7 +144,7 @@ $limitWidth: 80vw; font-size: 19px; P { - color: $color-white; + color: $white; font-family: $fontFamily-NotoSansTC; margin: 15px 0; } @@ -220,7 +223,7 @@ $limitWidth: 80vw; &__itemBox { border-radius: 29px; box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - background-color: $color-white; + background-color: $white; margin: 20px 0; padding: 10px 20px; cursor: pointer; diff --git a/src/assets/scss/color.scss b/src/assets/scss/color.scss index f8a0778..6689b38 100644 --- a/src/assets/scss/color.scss +++ b/src/assets/scss/color.scss @@ -1,2 +1,6 @@ $mid-blue: #226bb4; $white: white; +$pale-grey: #f0f7fd; +$dark-slate-blue: #1f4163; +$dark-sky-blue: #3d93e9; +$slate-blue: #5f7a95; \ No newline at end of file From 0a6271fe5dc19153481f81f15b45609b50b97841 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:48:31 +0800 Subject: [PATCH 09/13] [Fix] import font --- src/assets/scss/main.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 425d138..3e47969 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -3,6 +3,7 @@ @import './variable.scss'; @import './color.scss'; @import './util.scss'; +@import './font.scss'; // components // @import './footer.scss'; From c507d187911b3375041838ed12fd52ce91dc0fa9 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:50:53 +0800 Subject: [PATCH 10/13] [Delete] CFP/cfpBackground.scss unused --- .../scss/CFP/{cfpBackground.scss => cfpBackground.scss.backup} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/assets/scss/CFP/{cfpBackground.scss => cfpBackground.scss.backup} (100%) diff --git a/src/assets/scss/CFP/cfpBackground.scss b/src/assets/scss/CFP/cfpBackground.scss.backup similarity index 100% rename from src/assets/scss/CFP/cfpBackground.scss rename to src/assets/scss/CFP/cfpBackground.scss.backup From ffdf3df1dd1cfc818ef607d4628a2913e55ada57 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 18:54:44 +0800 Subject: [PATCH 11/13] [Fix] Coding style --- src/assets/scss/CFP/card.scss | 4 +- src/assets/scss/CFP/schedule.scss | 221 +++++++++++++++--------------- src/assets/scss/CFP/topic.scss | 4 +- src/assets/scss/footer.scss | 2 +- src/assets/scss/main.scss | 10 +- src/assets/scss/news.scss | 4 +- src/components/CFP/Agenda.vue | 2 +- 7 files changed, 127 insertions(+), 120 deletions(-) diff --git a/src/assets/scss/CFP/card.scss b/src/assets/scss/CFP/card.scss index a1c28a6..c7d37e7 100644 --- a/src/assets/scss/CFP/card.scss +++ b/src/assets/scss/CFP/card.scss @@ -1,5 +1,5 @@ -@import '@/assets/scss/breakpoint.scss'; -@import '@/assets/scss/color.scss'; +@import '../breakpoint.scss'; +@import '../color.scss'; .agenda.card:not(.container) { a.image.container { diff --git a/src/assets/scss/CFP/schedule.scss b/src/assets/scss/CFP/schedule.scss index a1b0c36..2089cef 100644 --- a/src/assets/scss/CFP/schedule.scss +++ b/src/assets/scss/CFP/schedule.scss @@ -1,126 +1,133 @@ -@import '@/assets/scss/breakpoint.scss'; -@import '@/assets/scss/color.scss'; -@import '@/assets/scss/font.scss'; +@import '../breakpoint'; +@import '../color'; +// No need to import font; the fonts have been imported in App.vue +// @import '@/assets/scss/font'; $fontFamily: Noto Sans CJK TC, monospace; #info-schedule { - max-width: 80vw; - margin: 0 auto; + max-width: 80vw; + margin: 0 auto; - font-family: $fontFamily; - font-size: 20px; - line-height: 2.1em; - letter-spacing: 0.2px; + font-family: $fontFamily; + font-size: 20px; + line-height: 2.1em; + letter-spacing: 0.2px; + color: $mid-blue; + + * { + position: relative; + } + + a { color: $mid-blue; + text-decoration: underline; + } - * { - position: relative; + h1 { + font-size: 48px; + line-height: 70px; + margin: 15px 0; + } + + h2 { + font-size: 36px; + line-height: 70px; + } + + h3 { + font-size: 24px; + line-height: 30px; + } + + 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; + } + + #presentation-example, + #espresso-example { + > p { + padding-bottom: 40px; } - a { - color: $mid-blue; - text-decoration: underline; - } - - h1 { - font-size: 48px; - line-height: 70px; - margin: 15px 0; - } - - h2 { - font-size: 36px; - line-height: 70px; - } - - h3 { - font-size: 24px; - line-height: 30px; - } - - 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; - } - - #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; - } + .agenda.card.container { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 62px; + row-gap: 40px; } + } } #code-of-conduct a { - font-weight: 900; + font-weight: 900; } - @include md { - #info-schedule { - margin: 0 auto; - font-size: 14px; + #info-schedule { + margin: 0 auto; + font-size: 14px; - h1, h2 { - font-size: 26px; - line-height: 2.69em; - } - - h3 { - font-size: 20px; - line-height: 30px; - } - - h1, h2, h3 { - margin: 0; - } - - #schedule { - margin-bottom: unset; - } - - #theme-example ~ p { - padding: 15px 0; - } - - #presentation-example, #espresso-example { - margin-bottom: unset; - .agenda.card.container { - grid-template-columns: repeat(2, 1fr); - column-gap: 42px; - row-gap: 30px; - } - } + h1, + h2 { + font-size: 26px; + line-height: 2.69em; } -} \ No newline at end of file + h3 { + font-size: 20px; + line-height: 30px; + } + + h1, + h2, + h3 { + margin: 0; + } + + #schedule { + margin-bottom: unset; + } + + #theme-example ~ p { + padding: 15px 0; + } + + #presentation-example, + #espresso-example { + margin-bottom: unset; + .agenda.card.container { + grid-template-columns: repeat(2, 1fr); + column-gap: 42px; + row-gap: 30px; + } + } + } +} diff --git a/src/assets/scss/CFP/topic.scss b/src/assets/scss/CFP/topic.scss index 629e8cb..ae36d91 100644 --- a/src/assets/scss/CFP/topic.scss +++ b/src/assets/scss/CFP/topic.scss @@ -1,5 +1,5 @@ -@import '@/assets/scss/breakpoint.scss'; -@import '@/assets/scss/color.scss'; +@import '../breakpoint.scss'; +@import '../color.scss'; .topic { padding: 30px 0; diff --git a/src/assets/scss/footer.scss b/src/assets/scss/footer.scss index d32a2fc..805fbd3 100644 --- a/src/assets/scss/footer.scss +++ b/src/assets/scss/footer.scss @@ -1,4 +1,4 @@ -@import './breakpoint.scss'; +@import 'breakpoint.scss'; // varible declare $fontColor: white; diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss index 3e47969..e8fe555 100644 --- a/src/assets/scss/main.scss +++ b/src/assets/scss/main.scss @@ -1,9 +1,9 @@ // global -@import './reset.scss'; -@import './variable.scss'; -@import './color.scss'; -@import './util.scss'; -@import './font.scss'; +@import 'reset.scss'; +@import 'variable.scss'; +@import 'color.scss'; +@import 'util.scss'; +@import 'font.scss'; // components // @import './footer.scss'; diff --git a/src/assets/scss/news.scss b/src/assets/scss/news.scss index aa7ffbb..cca02b7 100644 --- a/src/assets/scss/news.scss +++ b/src/assets/scss/news.scss @@ -1,5 +1,5 @@ -@import './hyperpoint.scss'; -@import './color.scss'; +@import 'hyperpoint.scss'; +@import 'color.scss'; // desktop mode #news-header { diff --git a/src/components/CFP/Agenda.vue b/src/components/CFP/Agenda.vue index 56af629..207a02d 100644 --- a/src/components/CFP/Agenda.vue +++ b/src/components/CFP/Agenda.vue @@ -249,5 +249,5 @@ export default class Agenda extends Vue { From e427a878d9390955a8d315140e083ea8f907a928 Mon Sep 17 00:00:00 2001 From: hyperbola Date: Tue, 19 Jan 2021 19:26:33 +0800 Subject: [PATCH 12/13] [Style] Reorganize --- src/assets/scss/CFP/card.scss | 34 - src/assets/scss/CFP/intro.scss | 887 +++++++++--------- src/assets/scss/CFP/topic.scss | 46 - src/assets/scss/{CFP => news}/agenda.scss | 37 +- src/assets/scss/news/card.scss | 34 + .../scss/{news.scss => news/header.scss} | 22 +- src/assets/scss/{CFP => news}/schedule.scss | 4 +- src/assets/scss/news/topic.scss | 47 + src/components/{CFP => news}/Agenda.vue | 71 +- src/components/{CFP => news}/AgendaCard.vue | 2 +- .../{NewsHeader.vue => news/Header.vue} | 4 + src/components/{CFP => news}/Schedule.vue | 4 +- src/components/{CFP => news}/Topic.vue | 2 +- src/pages/CFP.vue | 2 +- src/pages/News.vue | 14 +- 15 files changed, 613 insertions(+), 597 deletions(-) delete mode 100644 src/assets/scss/CFP/card.scss delete mode 100644 src/assets/scss/CFP/topic.scss rename src/assets/scss/{CFP => news}/agenda.scss (93%) create mode 100644 src/assets/scss/news/card.scss rename src/assets/scss/{news.scss => news/header.scss} (94%) rename src/assets/scss/{CFP => news}/schedule.scss (98%) create mode 100644 src/assets/scss/news/topic.scss rename src/components/{CFP => news}/Agenda.vue (84%) rename src/components/{CFP => news}/AgendaCard.vue (95%) rename src/components/{NewsHeader.vue => news/Header.vue} (97%) rename src/components/{CFP => news}/Schedule.vue (98%) rename src/components/{CFP => news}/Topic.vue (94%) diff --git a/src/assets/scss/CFP/card.scss b/src/assets/scss/CFP/card.scss deleted file mode 100644 index c7d37e7..0000000 --- a/src/assets/scss/CFP/card.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import '../breakpoint.scss'; -@import '../color.scss'; - -.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.0); - transition-duration: .25s; - - img { - border-radius: 11px; - width: 100%; - } - - &:hover { - transform: scale(1.04); - transition-duration: .25s; - } - } - - p.description { - line-height: 1.55em; - text-align: center; - font-weight: 900; - } -} \ No newline at end of file diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss index 10e217e..e3267d4 100644 --- a/src/assets/scss/CFP/intro.scss +++ b/src/assets/scss/CFP/intro.scss @@ -1,7 +1,7 @@ // font $fontFamily: 'Noto Sans TC', sans-serif; $fontStyle: normal; -$light-blue: #3D93E9; +$light-blue: #3d93e9; $fontColor: #226bb4; $buttonHoverColor: #ffffff; @mixin Font() { @@ -33,14 +33,14 @@ $buttonLetterSpace: 0; $hyperlinkLetterSpace: 0; // background -$buttonHoverBg: #226BB4; +$buttonHoverBg: #226bb4; #cfp { .introduction-container { overflow-x: hidden; - overflow-y: hidden; + overflow-y: hidden; margin: -8px; - position:relative; + position: relative; } .introduction { @@ -56,7 +56,7 @@ $buttonHoverBg: #226BB4; margin-top: 50%; @media screen and(max-width: 414px) { - width:100%; + width: 100%; } } @@ -65,11 +65,11 @@ $buttonHoverBg: #226BB4; font-size: $contextFontSize; letter-spacing: $contextLetterSpace; line-height: 42px; - width:90%; + width: 90%; @media screen and(max-width: 414px) { font-size: $mcontextFontSize; - width:160%; + width: 160%; } } @@ -80,7 +80,7 @@ $buttonHoverBg: #226BB4; @media screen and(max-width: 414px) { font-size: $mcontextFontSize; - width:80%; + width: 80%; } } @@ -132,7 +132,7 @@ $buttonHoverBg: #226BB4; border-radius: 8px; // display display: inline-block; - + position: relative; z-index: 5; @@ -184,139 +184,144 @@ $buttonHoverBg: #226BB4; vertical-align: bottom; line-height: 30px; - @media screen and(max-width:414px){ + @media screen and(max-width:414px) { font-size: 30px; margin-right: 10px; line-height: 50px; - vertical-align:middle; + vertical-align: middle; } } } -h1, h2, h3, p, span { - font-family: $fontFamily; - color: $fontColor; -} +#cfp-intro { + h1, + h2, + h3, + p, + span { + font-family: $fontFamily; + color: $fontColor; + } -h1 { - // font - font-size: $h1FontSize; - line-height: 70px; - font-weight: 900; - letter-spacing: $titleLetterSpace; + h1 { + // font + font-size: $h1FontSize; + line-height: 70px; + font-weight: 900; + letter-spacing: $titleLetterSpace; + + .enlarge { + font-size: $enlargeFontSize; + @media screen and (max-width: 414px) { + line-height: 80px; + } + } + + .sub { + font-size: $subFontSize; + } - .enlarge { - font-size: $enlargeFontSize; @media screen and (max-width: 414px) { - line-height: 80px; + line-height: 20px; } } - .sub { - font-size: $subFontSize; + .right { + text-align: left; + + @media screen and (max-width: 414px) { + text-align: right; + margin-right: 30%; + } } - @media screen and (max-width: 414px) { - line-height: 20px; + h2 { + // font + font-size: $h2FontSize; + letter-spacing: $titleLetterSpace; + font-weight: 900; + line-height: 70px; + margin: 0px; } -} -.right { - text-align: left; + h3 { + // Font + font-size: $h3FontSize; + letter-spacing: $titleLetterSpace; + font-weight: 900; + line-height: 15px; + margin: 0px; + } - @media screen and (max-width: 414px) { - text-align: right; + .about-section > .context { + margin-right: 50%; + } + + .topic-intro > .context { margin-right: 30%; } -} -h2 { - // font - font-size: $h2FontSize; - letter-spacing: $titleLetterSpace; - font-weight: 900; - line-height: 70px; - margin: 0px; -} - -h3 { - // Font - font-size: $h3FontSize; - letter-spacing: $titleLetterSpace; - font-weight: 900; - line-height: 15px; - margin: 0px; -} - -.about-section > .context { - margin-right: 50%; -} - -.topic-intro > .context { - margin-right: 30%; -} - -.context { - // font - font-size: $contextFontSize; - line-height: 30px; - letter-spacing: $contextLetterSpace; - font-weight: normal; -} - -.detail { - // display - display: inline; - // font - font-size: $contextFontSize; - line-height: 20px; - letter-spacing: $contextLetterSpace; - font-weight: normal; - // align - vertical-align: bottom; - // size - - @media screen and (max-width: 414px) { - margin-right: 25%; - line-height: 35px; - font-size: $mcontextFontSize; + .context { + // font + font-size: $contextFontSize; + line-height: 30px; + letter-spacing: $contextLetterSpace; + font-weight: normal; } -} -.context-span { - // font - font-size: $contextFontSize; - font-weight: 900; - letter-spacing: $contextLetterSpace; - line-height: 42px; -} + .detail { + // display + display: inline; + // font + font-size: $contextFontSize; + line-height: 20px; + letter-spacing: $contextLetterSpace; + font-weight: normal; + // align + vertical-align: bottom; + // size -.context-hyperlink { - // font - font-size: $hyperlinkFontSize; - letter-spacing: $hyperlinkLetterSpace; - color: $light-blue; - font-weight: normal; - line-height: 42px; -} - -p.tag { - // font - font-size: 14px; - line-height: 15px; - letter-spacing: 0; - font-weight: 900; - // align - text-align: center; - margin-top: 0px; - margin-bottom: 5px; - - @media screen and (max-width: 414px) { - font-size: 16px; + @media screen and (max-width: 414px) { + margin-right: 25%; + line-height: 35px; + font-size: $mcontextFontSize; + } } -} -p.tag.sub { + .context-span { + // font + font-size: $contextFontSize; + font-weight: 900; + letter-spacing: $contextLetterSpace; + line-height: 42px; + } + + .context-hyperlink { + // font + font-size: $hyperlinkFontSize; + letter-spacing: $hyperlinkLetterSpace; + color: $light-blue; + font-weight: normal; + line-height: 42px; + } + + p.tag { + // font + font-size: 14px; + line-height: 15px; + letter-spacing: 0; + font-weight: 900; + // align + text-align: center; + margin-top: 0px; + margin-bottom: 5px; + + @media screen and (max-width: 414px) { + font-size: 16px; + } + } + + p.tag.sub { font-size: 12px; line-height: 10px; @@ -324,359 +329,359 @@ p.tag.sub { font-size: 12px; margin-top: 8px; } -} - -p.small-tag { - margin-block-start: 0em; - margin-block-end: 0.5em; - font-size: 12px; - text-align: center; - - @media screen and (max-width: 414px) { - line-height:12px; - font-size: 10px; } -} -//NOTE: the size should be smaller, this temporary size is provided to support min font size of browser -.cfp-img { - // box - border-radius: 4px; - margin-bottom: 12px; - // size - width: 175px; - height: 118px; - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - - @media screen and (max-width:414px){ - border-radius: 2px; - margin-bottom: 12px; - width: 111px; - height: 75px; - box-shadow: 0px 1px 6px rgba(89, 120, 206, 0.56); - } -} - -.thumbnails { - // box - margin-left: -25.5px; - - @media screen and (max-width:414px){ - margin-left: -9px; - } -} - -.img-table { - // box - border-style: none; - border-spacing: 25.5px 0px; //25.5 - - @media screen and (max-width: 414px) { - width: 87%; - align-content: center; - border-spacing: 0px 0px; - } -} - -.td-width { - vertical-align: top; - - @media screen and (max-width: 414px){ + p.small-tag { + margin-block-start: 0em; + margin-block-end: 0.5em; + font-size: 12px; text-align: center; - width: 123px; - } -} -.tag-table{ - // box - border-style: none; - border-spacing: 0px 0px; //25.5 - // size - width: 500px; -} - -.first-box { - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - border-radius: 60px; - transform: rotate(15deg); - margin-bottom: -900px; - margin-left: -200px; - margin-top: -300px; - z-index: 1; - - @media screen and(max-width: 960px){ - border-radius: 40px; - margin-bottom: -800px; - transform: rotate(13deg); + @media screen and (max-width: 414px) { + line-height: 12px; + font-size: 10px; + } } - @media screen and(max-width: 414px){ - border-radius: 27px; - margin-top: 200px; - margin-bottom: -870px; - margin-left: -150px; - transform:scale(1); - transform: rotate(12deg); + //NOTE: the size should be smaller, this temporary size is provided to support min font size of browser + .cfp-img { + // box + border-radius: 4px; + margin-bottom: 12px; + // size + width: 175px; + height: 118px; + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + + @media screen and (max-width: 414px) { + border-radius: 2px; + margin-bottom: 12px; + width: 111px; + height: 75px; + box-shadow: 0px 1px 6px rgba(89, 120, 206, 0.56); + } } -} -.second-box { - box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); - border-radius: 32px; - transform: rotate(15deg); - margin-top: 270px; - margin-bottom: -1900px; - margin-left: -700px; - z-index: 1; + .thumbnails { + // box + margin-left: -25.5px; - @media screen and(max-width: 414px){ - box-shadow: -10px 30px 30px 0 rgba(135, 152, 199, 0.56); - margin-top: 5px; - margin-left: -415px; - margin-bottom: -1560px; - transform: rotate(12deg) scale(0.6); + @media screen and (max-width: 414px) { + margin-left: -9px; + } + } + + .img-table { + // box + border-style: none; + border-spacing: 25.5px 0px; //25.5 + + @media screen and (max-width: 414px) { + width: 87%; + align-content: center; + border-spacing: 0px 0px; + } + } + + .td-width { + vertical-align: top; + + @media screen and (max-width: 414px) { + text-align: center; + width: 123px; + } + } + + .tag-table { + // box + border-style: none; + border-spacing: 0px 0px; //25.5 + // size + width: 500px; + } + + .first-box { + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + border-radius: 60px; + transform: rotate(15deg); + margin-bottom: -900px; + margin-left: -200px; + margin-top: -300px; + z-index: 1; + + @media screen and(max-width: 960px) { + border-radius: 40px; + margin-bottom: -800px; + transform: rotate(13deg); + } + + @media screen and(max-width: 414px) { + border-radius: 27px; + margin-top: 200px; + margin-bottom: -870px; + margin-left: -150px; + transform: scale(1); + transform: rotate(12deg); + } + } + + .second-box { + box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); + border-radius: 32px; + transform: rotate(15deg); + margin-top: 270px; + margin-bottom: -1900px; + margin-left: -700px; + z-index: 1; + + @media screen and(max-width: 414px) { + box-shadow: -10px 30px 30px 0 rgba(135, 152, 199, 0.56); + margin-top: 5px; + margin-left: -415px; + margin-bottom: -1560px; + transform: rotate(12deg) scale(0.6); + z-index: 2; + } + } + + .hiden-box { + position: absolute; + margin-top: 1200px; + margin-left: -300px; + margin-bottom: 0px; + z-index: -1; + @media screen and(max-width: 414px) { + margin-top: 1400px; + transform: rotate(12deg); + z-index: -1; + } + } + + .box-back { z-index: 2; - } -} -.hiden-box { - position: absolute; - margin-top: 1200px; - margin-left:-300px; - margin-bottom: 0px; - z-index: -1; - @media screen and(max-width: 414px){ - margin-top: 1400px; - transform: rotate(12deg); - z-index: -1; - } -} + @media screen and(max-width: 960px) { + margin-top: -10%; + margin-left: -10%; + } -.box-back { - z-index: 2; - - @media screen and(max-width: 960px) { - margin-top: -10%; - margin-left: -10%; + @media screen and(max-width: 414px) { + margin-top: -10%; + margin-left: -10%; + } } - @media screen and(max-width: 414px) { - margin-top: -10%; - margin-left: -10%; - } -} + .box-back2 { + z-index: 2; -.box-back2 { - z-index: 2; + @media screen and(max-width: 960px) { + margin-top: -10%; + margin-left: -10%; + } - @media screen and(max-width: 960px) { - margin-top: -10%; - margin-left: -10%; + @media screen and(max-width: 414px) { + margin-top: -10%; + margin-left: -10%; + } } - @media screen and(max-width: 414px) { - margin-top: -10%; - margin-left: -10%; - } -} - -.SITCON-text-path { - transform: scale(0.7); - padding-left: 300px; - margin-right: -550px; - margin-bottom: -600px; - padding-top: 300px; - z-index: 2; - @media screen and(max-width: 414px) { - z-index: -2; - } -} - -.des-text-path { - //background: url(../../assets/images/cfp/Path_762.svg) no-repeat; - transform: scale(0.7); - margin-bottom: -565px; - padding-top: 65px; - margin-left: -350px; - z-index: 2; - - @media screen and(max-width: 960px){ - margin-left: -150px; - margin-bottom: -545px; + .SITCON-text-path { + transform: scale(0.7); + padding-left: 300px; + margin-right: -550px; + margin-bottom: -600px; + padding-top: 300px; + z-index: 2; + @media screen and(max-width: 414px) { + z-index: -2; + } } - @media screen and(max-width: 414px){ - //background-image: url(../../assets/images/cfp/Mobile/Path_763.svg); - margin-top: 40px; - margin-left: -80px; - transform: scale(0.9); - background: url(~@/assets/images/cfp/Mobile/Path_763.svg) no-repeat; - padding-top: -565px; - margin-bottom: -665px; + .des-text-path { + //background: url(../../assets/images/cfp/Path_762.svg) no-repeat; + transform: scale(0.7); + margin-bottom: -565px; + padding-top: 65px; + margin-left: -350px; + z-index: 2; + + @media screen and(max-width: 960px) { + margin-left: -150px; + margin-bottom: -545px; + } + + @media screen and(max-width: 414px) { + //background-image: url(../../assets/images/cfp/Mobile/Path_763.svg); + margin-top: 40px; + margin-left: -80px; + transform: scale(0.9); + background: url(~@/assets/images/cfp/Mobile/Path_763.svg) no-repeat; + padding-top: -565px; + margin-bottom: -665px; + } } - -} -.des-blue-bar { - transform: rotate(15deg); - margin-left: -400px; - margin-top: 360px; - margin-bottom: -1360px; + .des-blue-bar { + transform: rotate(15deg); + margin-left: -400px; + margin-top: 360px; + margin-bottom: -1360px; - @media screen and(max-width: 414px){ - margin-left: -600px; - margin-top: 160px; - transform: rotate(12deg) scale(0.6); + @media screen and(max-width: 414px) { + margin-left: -600px; + margin-top: 160px; + transform: rotate(12deg) scale(0.6); + } } -} -.paper-image { - transform: scale(0.75); - margin-top: -240px; - margin-left: 270px; - margin-bottom: -710px; - z-index: 1; + .paper-image { + transform: scale(0.75); + margin-top: -240px; + margin-left: 270px; + margin-bottom: -710px; + z-index: 1; - @media screen and(max-width: 414px){ - z-index: 3; - margin-top: -890px; - margin-left: -150px; - margin-bottom: -1030px; - transform: rotate(-7deg) scale(0.35); + @media screen and(max-width: 414px) { + z-index: 3; + margin-top: -890px; + margin-left: -150px; + margin-bottom: -1030px; + transform: rotate(-7deg) scale(0.35); + } } -} -.background { - //background: url(../../assets/images/cfp/Background.svg) no-repeat; - //content: url("../../assets/images/cfp/Background.svg") no-repeat; - position: absolute; - top: 0; - width:200%; - //max-height: 2000px; - margin-left: -69%; - margin-top: -30%; - text-align: center; - z-index: -2; - - @media screen and(max-width: 414px){ - //content: url() no-repeat;//../../assets/images/cfp/Mobile/Mobile-background.svg - //visibility: hidden; - background: url(~@/assets/images/cfp/Mobile/Mobile-background.svg) !important; - object-position: -99999px 99999px; - overflow: hidden; - margin-left: -20%; - margin-top: -20%; - z-index: -1; - transform: scale(1); - } -} - -.ellipse { - position: absolute; - width: 100%; - margin-top: -75%; - margin-left: -14%; - align-content: center; - transform: scale(0.31); - - @media screen and(max-width: 414px){ - margin-top: -20%; - transform: scale(0.60); - } -} - -.sitcon-icon { - position: absolute; - width: 100%; - margin-top: -98%; - margin-left: -14%; - align-content: center; - transform: scale(0.14); - - @media screen and(max-width: 414px){ - margin-top: -42%; - transform: scale(0.3); - } -} - -.sitcon-pic-2021 { - position: absolute; - width: 100%; - margin-top: -49%; - margin-left: -14%; - align-content: center; - transform: scale(0.18); - - @media screen and(max-width: 414px){ - margin-top: -40%; - transform: scale(0.5); - } -} - -.sitcon-title-zh { - position: absolute; - width: 100%; - margin-top: -46%; - margin-left: -14%; - align-content: center; - transform: scale(0.11); - - @media screen and(max-width: 414px){ + .background { + //background: url(../../assets/images/cfp/Background.svg) no-repeat; + //content: url("../../assets/images/cfp/Background.svg") no-repeat; + position: absolute; + top: 0; + width: 200%; + //max-height: 2000px; + margin-left: -69%; margin-top: -30%; - transform: scale(0.4); + text-align: center; + z-index: -2; + + @media screen and(max-width: 414px) { + //content: url() no-repeat;//../../assets/images/cfp/Mobile/Mobile-background.svg + //visibility: hidden; + background: url(~@/assets/images/cfp/Mobile/Mobile-background.svg) !important; + object-position: -99999px 99999px; + overflow: hidden; + margin-left: -20%; + margin-top: -20%; + z-index: -1; + transform: scale(1); + } + } + + .ellipse { + position: absolute; + width: 100%; + margin-top: -75%; + margin-left: -14%; + align-content: center; + transform: scale(0.31); + + @media screen and(max-width: 414px) { + margin-top: -20%; + transform: scale(0.6); + } + } + + .sitcon-icon { + position: absolute; + width: 100%; + margin-top: -98%; + margin-left: -14%; + align-content: center; + transform: scale(0.14); + + @media screen and(max-width: 414px) { + margin-top: -42%; + transform: scale(0.3); + } + } + + .sitcon-pic-2021 { + position: absolute; + width: 100%; + margin-top: -49%; + margin-left: -14%; + align-content: center; + transform: scale(0.18); + + @media screen and(max-width: 414px) { + margin-top: -40%; + transform: scale(0.5); + } + } + + .sitcon-title-zh { + position: absolute; + width: 100%; + margin-top: -46%; + margin-left: -14%; + align-content: center; + transform: scale(0.11); + + @media screen and(max-width: 414px) { + margin-top: -30%; + transform: scale(0.4); + } + } + + .sitcon-topic { + position: absolute; + width: 100%; + margin-top: -45%; + margin-left: -14%; + align-content: center; + transform: scale(0.23); + + @media screen and(max-width: 414px) { + margin-top: -20%; + transform: scale(0.65); + } + } + + .sitcon-date { + position: absolute; + width: 100%; + margin-top: -31%; + margin-left: -44%; + transform: scale(0.13); + + @media screen and(max-width: 414px) { + margin-top: 65%; + transform: scale(0.35); + } + } + + .sitcon-place { + position: absolute; + width: 100%; + margin-top: -36.5%; + margin-left: -44%; + transform: scale(0.13); + + @media screen and(max-width: 414px) { + margin-top: 73%; + margin-left: -40%; + transform: scale(0.45); + } + } + + .sitcon-qeury { + position: absolute; + width: 100%; + margin-top: -18.5%; + margin-left: -14%; + transform: scale(0.2); + + @media screen and(max-width: 414px) { + margin-top: 50%; + transform: scale(0.6); + } } } - -.sitcon-topic { - position: absolute; - width: 100%; - margin-top: -45%; - margin-left: -14%; - align-content: center; - transform: scale(0.23); - - @media screen and(max-width: 414px){ - margin-top: -20%; - transform: scale(0.65); - } -} - -.sitcon-date { - position: absolute; - width: 100%; - margin-top: -31%; - margin-left: -44%; - transform: scale(0.13); - - @media screen and(max-width: 414px){ - margin-top: 65%; - transform: scale(0.35); - } -} - -.sitcon-place { - position: absolute; - width: 100%; - margin-top: -36.5%; - margin-left: -44%; - transform: scale(0.13); - - @media screen and(max-width: 414px){ - margin-top: 73%; - margin-left: -40%; - transform: scale(0.45); - } -} - -.sitcon-qeury { - position: absolute; - width: 100%; - margin-top: -18.5%; - margin-left: -14%; - transform: scale(0.2); - - @media screen and(max-width: 414px){ - margin-top: 50%; - transform: scale(0.6); - } -} \ No newline at end of file diff --git a/src/assets/scss/CFP/topic.scss b/src/assets/scss/CFP/topic.scss deleted file mode 100644 index ae36d91..0000000 --- a/src/assets/scss/CFP/topic.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import '../breakpoint.scss'; -@import '../color.scss'; - -.topic { - padding: 30px 0; - - 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; - } - } -} \ No newline at end of file diff --git a/src/assets/scss/CFP/agenda.scss b/src/assets/scss/news/agenda.scss similarity index 93% rename from src/assets/scss/CFP/agenda.scss rename to src/assets/scss/news/agenda.scss index f5d404f..c03edbf 100644 --- a/src/assets/scss/CFP/agenda.scss +++ b/src/assets/scss/news/agenda.scss @@ -1,4 +1,4 @@ -@import '../color.scss'; +@import '../color'; $fontColor: #226bb4; // added to solve unnamed color error @@ -15,7 +15,7 @@ $fontColor: #226bb4; // added to solve unnamed color error // $color-slate-blue: #5f7a95; // $color-mid-blue: #226bb4; -$fontFamily-NotoSansTC: "Noto Sans TC"; +$fontFamily-NotoSansTC: 'Noto Sans TC'; //@mixin @mixin clearFloat() { @@ -134,16 +134,15 @@ $limitWidth: 80vw; letter-spacing: normal; text-align: center; font-size: 34px; - } &-text { width: 100%; //height: 172px; margin: 0 auto; text-align: left; - + font-size: 19px; - P { + p { color: $white; font-family: $fontFamily-NotoSansTC; margin: 15px 0; @@ -153,21 +152,19 @@ $limitWidth: 80vw; } } - // p { - // color: $color-white; - // font-family: $fontFamily-NotoSansTC; - // font-size: 19px; - // font-weight: 500; - // font-stretch: normal; - // font-style: normal; - // line-height: 2.1; - // letter-spacing: 0.2px; - // } - // - // } + // p { + // color: $color-white; + // font-family: $fontFamily-NotoSansTC; + // font-size: 19px; + // font-weight: 500; + // font-stretch: normal; + // font-style: normal; + // line-height: 2.1; + // letter-spacing: 0.2px; + // } + // + // } } - - // &__itemBox { // float: left; @@ -288,4 +285,4 @@ $limitWidth: 80vw; // } // } // } -} \ No newline at end of file +} diff --git a/src/assets/scss/news/card.scss b/src/assets/scss/news/card.scss new file mode 100644 index 0000000..7cbc1b2 --- /dev/null +++ b/src/assets/scss/news/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: 900; + } +} diff --git a/src/assets/scss/news.scss b/src/assets/scss/news/header.scss similarity index 94% rename from src/assets/scss/news.scss rename to src/assets/scss/news/header.scss index cca02b7..9419632 100644 --- a/src/assets/scss/news.scss +++ b/src/assets/scss/news/header.scss @@ -1,5 +1,5 @@ -@import 'hyperpoint.scss'; -@import 'color.scss'; +@import '../hyperpoint'; +@import '../color'; // desktop mode #news-header { @@ -27,14 +27,22 @@ 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;} + 0% { + position: relative; + bottom: 0px; + } + 50% { + position: relative; + bottom: 20px; + } + 100% { + position: relative; + bottom: 0px; + } } &:hover { - animation: jump .6s ease-in 0s infinite reverse; - + animation: jump 0.6s ease-in 0s infinite reverse; } .text-wrapper { diff --git a/src/assets/scss/CFP/schedule.scss b/src/assets/scss/news/schedule.scss similarity index 98% rename from src/assets/scss/CFP/schedule.scss rename to src/assets/scss/news/schedule.scss index 2089cef..cecffe1 100644 --- a/src/assets/scss/CFP/schedule.scss +++ b/src/assets/scss/news/schedule.scss @@ -5,7 +5,7 @@ $fontFamily: Noto Sans CJK TC, monospace; -#info-schedule { +#news-schedule { max-width: 80vw; margin: 0 auto; @@ -91,7 +91,7 @@ $fontFamily: Noto Sans CJK TC, monospace; } @include md { - #info-schedule { + #news-schedule { margin: 0 auto; font-size: 14px; diff --git a/src/assets/scss/news/topic.scss b/src/assets/scss/news/topic.scss new file mode 100644 index 0000000..8b19f84 --- /dev/null +++ b/src/assets/scss/news/topic.scss @@ -0,0 +1,47 @@ +@import '../breakpoint'; +@import '../color'; + +.topic { + padding: 30px 0; + + 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; + } + } +} diff --git a/src/components/CFP/Agenda.vue b/src/components/news/Agenda.vue similarity index 84% rename from src/components/CFP/Agenda.vue rename to src/components/news/Agenda.vue index 207a02d..2759283 100644 --- a/src/components/CFP/Agenda.vue +++ b/src/components/news/Agenda.vue @@ -209,45 +209,50 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; @Component({}) export default class Agenda extends Vue { private QA = [ - { - Q: '先備知識與目標受眾有何不同？', - A: '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。', - v: false - }, - { - Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？', - A: '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。', - v: false - }, - { - Q: '先備知識與目標受眾有何不同？', - A: '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。', - v: false - }, - { - Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？', - A: '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。', - v: false - }, - { - Q: '如果我入選第二階段，可以提供哪些補充資料？', - A: '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。', - v: false - }, - { - Q: '還有疑問怎麼辦？', - A: '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。', - v: false - } + { + Q: '先備知識與目標受眾有何不同？', + A: + '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。', + v: false + }, + { + Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？', + A: + '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。', + v: false + }, + { + Q: '先備知識與目標受眾有何不同？', + A: + '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。', + v: false + }, + { + Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？', + A: + '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。', + v: false + }, + { + Q: '如果我入選第二階段，可以提供哪些補充資料？', + A: + '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。', + v: false + }, + { + Q: '還有疑問怎麼辦？', + A: + '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。', + v: false + } ]; private fade = (index: number) => { - this.QA[index].v = !this.QA[index].v; + this.QA[index].v = !this.QA[index].v; } - } diff --git a/src/components/CFP/AgendaCard.vue b/src/components/news/AgendaCard.vue similarity index 95% rename from src/components/CFP/AgendaCard.vue rename to src/components/news/AgendaCard.vue index 6aa05df..c40951c 100644 --- a/src/components/CFP/AgendaCard.vue +++ b/src/components/news/AgendaCard.vue @@ -20,5 +20,5 @@ export default class AgendaCard extends Vue { \ No newline at end of file diff --git a/src/components/NewsHeader.vue b/src/components/news/Header.vue similarity index 97% rename from src/components/NewsHeader.vue rename to src/components/news/Header.vue index dcf5d4b..ed74bc0 100644 --- a/src/components/NewsHeader.vue +++ b/src/components/news/Header.vue @@ -114,3 +114,7 @@ export default class CfpHeader extends Vue { } } + + diff --git a/src/components/CFP/Schedule.vue b/src/components/news/Schedule.vue similarity index 98% rename from src/components/CFP/Schedule.vue rename to src/components/news/Schedule.vue index 48cff68..cbcb88e 100644 --- a/src/components/CFP/Schedule.vue +++ b/src/components/news/Schedule.vue @@ -1,5 +1,5 @@