t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Style] Reorganize

Browse Source
This commit is contained in:
hyperbola
2021-01-19 19:26:33 +08:00
parent ffdf3df1dd
commit e427a878d9
15 changed files with 613 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/assets/scss/CFP/card.scss
View File

@@ -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;
}
}

15
src/assets/scss/CFP/intro.scss
View File

@@ -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,7 +33,7 @@ $buttonLetterSpace: 0;
$hyperlinkLetterSpace: 0;
// background
$buttonHoverBg: #226BB4;
$buttonHoverBg: #226bb4;
#cfp {
.introduction-container {
@@ -193,7 +193,12 @@ $buttonHoverBg: #226BB4;
}
}
h1, h2, h3, p, span {
#cfp-intro {
h1,
h2,
h3,
p,
span {
font-family: $fontFamily;
color: $fontColor;
}
@@ -514,7 +519,6 @@ p.small-tag {
padding-top: -565px;
margin-bottom: -665px;
}
}
.des-blue-bar {
@@ -581,7 +585,7 @@ p.small-tag {
@media screen and(max-width: 414px) {
margin-top: -20%;
transform: scale(0.60);
transform: scale(0.6);
}
}
@@ -680,3 +684,4 @@ p.small-tag {
transform: scale(0.6);
}
}
}

46
src/assets/scss/CFP/topic.scss
View File

@@ -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;
}
}
}

9
src/assets/scss/CFP/agenda.scss → src/assets/scss/news/agenda.scss
View File

@@ -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,7 +134,6 @@ $limitWidth: 80vw;
letter-spacing: normal;
text-align: center;
font-size: 34px;
}
&-text {
width: 100%;
@@ -143,7 +142,7 @@ $limitWidth: 80vw;
text-align: left;
font-size: 19px;
P {
p {
color: $white;
font-family: $fontFamily-NotoSansTC;
margin: 15px 0;
@@ -167,8 +166,6 @@ $limitWidth: 80vw;
// }
}
// &__itemBox {
// float: left;
// padding: 26px 20px 34px 20px;

34
src/assets/scss/news/card.scss Normal file
View File

@@ -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;
}
}

22
src/assets/scss/news.scss → src/assets/scss/news/header.scss
View File

@@ -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 {

4
src/assets/scss/CFP/schedule.scss → src/assets/scss/news/schedule.scss
View File

@@ -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;

47
src/assets/scss/news/topic.scss Normal file
View File

@@ -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;
}
}
}

21
src/components/CFP/Agenda.vue → src/components/news/Agenda.vue
View File

@@ -211,32 +211,38 @@ export default class Agenda extends Vue {
private QA = [
{
Q: '先備知識與目標受眾有何不同？',
A: '「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。',
A:
'「目標受眾」表示您預期何種人將會前來參與該場議程，此欄位可能表示為與會者的興趣、生活環境抑或年齡層。「先備知識」表示對該議程有興趣者，您建議須先備哪些基礎技術、能力或經驗，有助於了解與吸收該場議程的知識精華。舉例而言，若一講題為「在營隊中使用虛擬貨幣」，則先備知識可能是「沒有」，目標受眾可能是「有想要辦營隊的人」。而如果是有關Julia 程式語言的演講，則先備知識可能是「知道平行運算是什麼」，目標受眾可能是「想用 Julia 做資料科學的人」。',
v: false
},
{
Q: '投稿主題是否有必要切合年會主題（算盤的後裔）？',
A: '不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。',
A:
'不用。審稿時僅會依照上文所述方式審查，不會因為切合主題就拿到比較高分，或因為與 主題無關就被扣分。',
v: false
},
{
Q: '先備知識與目標受眾有何不同？',
A: '若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。',
A:
'若我們認為您的稿件很優秀，但可能比較適合另一種形式，或者該形式的名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型。',
v: false
},
{
Q: '如果我的稿件預計會有多個講者，投稿時需要注意什麼？',
A: '請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。',
A:
'請在「暱稱/名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一張講者識別證、一份午餐餐盒與一份講者專屬迎賓禮。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。',
v: false
},
{
Q: '如果我入選第二階段，可以提供哪些補充資料？',
A: '您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。',
A:
'您可以提供簡報檔案、講稿、演講錄音搭配簡報畫面製成影片，或是實際錄影，您可以自行決定是否提供上述的任何一項，作為補充資料。',
v: false
},
{
Q: '還有疑問怎麼辦？',
A: '歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。',
A:
'歡迎來投稿者小聚與我們聊聊，或寄信至 session[at]sitcon.org 詢問，我們會儘速回應。',
v: false
}
];
@@ -244,10 +250,9 @@ export default class Agenda extends Vue {
private fade = (index: number) => {
this.QA[index].v = !this.QA[index].v;
}
}
</script>
<style lang="scss">
@import '@/assets/scss/CFP/agenda';
@import "@/assets/scss/news/agenda";
</style>

2
src/components/CFP/AgendaCard.vue → src/components/news/AgendaCard.vue
View File

@@ -20,5 +20,5 @@ export default class AgendaCard extends Vue {
</script>
<style lang="scss">
@import '@/assets/scss/CFP/card';
@import '@/assets/scss/news/card';
</style>

4
src/components/NewsHeader.vue → src/components/news/Header.vue
View File

@@ -114,3 +114,7 @@ export default class CfpHeader extends Vue {
}
}
</script>
<style lang="scss">
@import '@/assets/scss/news/header'
</style>

4
src/components/CFP/Schedule.vue → src/components/news/Schedule.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="info-schedule">
<div>
<!-- 重要時程 -->
<section id="schedule">
<h1>重要時程</h1>
@@ -77,5 +77,5 @@ export default class Schedule extends Vue {
</script>
<style lang="scss">
@import '@/assets/scss/CFP/schedule';
@import '@/assets/scss/news/schedule';
</style>

2
src/components/CFP/Topic.vue → src/components/news/Topic.vue
View File

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

2
src/pages/CFP.vue
View File

@@ -1,7 +1,7 @@
<template>
<div id="cfp" class="cfp cfp-background">
<!-- CfpHeader id="cfp-header"/ -->
<IntrodContainer></IntrodContainer>
<IntrodContainer id="cfp-intro"></IntrodContainer>
</div>
</template>

14
src/pages/News.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="news">
<NewsHeader id="news-header" />
<Schedule/>
<Agenda/>
<Schedule id="news-schedule"/>
<Agenda id="news-agenda"/>
<!-- <Footer></Footer> should be put at App.vue (?) -->
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import NewsHeader from '@/components/NewsHeader.vue';
import Schedule from '../components/CFP/Schedule.vue';
import Agenda from '../components/CFP/Agenda.vue';
import NewsHeader from '@/components/news/Header.vue';
import Schedule from '@/components/news/Schedule.vue';
import Agenda from '@/components/news/Agenda.vue';
@Component({
components: {
@@ -24,7 +24,3 @@ export default class News extends Vue {
@Prop() private msg!: string;
}
</script>
<style lang="scss">
@import '@/assets/scss/news'
</style>