Merge branch 'dev2' into master

This commit is contained in:
mysper committed 2021-01-19 20:33:43 +08:00
commit 3e1bc1a99d
46 files changed
+1124 -965

No files matched your search

+1
View File
@@ -16,6 +16,7 @@
</head>
<body>
<noscript>{{{ %GA_TEMPLATE% }}}</noscript>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
-34
View File
@@ -1,34 +0,0 @@
@import '@/assets/scss/breakpoint.scss';
@import '@/assets/scss/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;
}
}
-686
View File
@@ -1,686 +0,0 @@
// font
$fontFamily: 'Noto Sans TC', sans-serif;
$fontStyle: normal;
$light-blue: #3D93E9;
$fontColor: #226bb4;
$buttonHoverColor: #ffffff;
@mixin Font() {
font-family: $fontFamily;
}
@mixin hyperlinkFont() {
text-decoration: underline;
}
// font size
$h1FontSize: 30px;
$h2FontSize: 24px;
$h3FontSize: 16px;
$contextFontSize: 13px;
$buttonFontSize: 24px;
$mh1FontSize: 26px;
$mh2FontSize: 20px;
$mh3FontSize: 14px;
$mcontextFontSize: 14px;
$mbuttonFontSize: 18px;
$hyperlinkFontSize: 14px;
$enlargeFontSize: 55px;
$subFontSize: 30px;
// letter spacing
$titleLetterSpace: 0;
$contextLetterSpace: 0.2px;
$buttonLetterSpace: 0;
$hyperlinkLetterSpace: 0;
// background
$buttonHoverBg: #226BB4;
#cfp {
.introduction-container {
overflow-x: hidden;
overflow-y: hidden;
margin: -8px;
position:relative;
}
.introduction {
// flex
display: flex;
flex-direction: column;
align-items: left;
// font
@include Font;
color: $fontColor;
// size
margin-left: 15%;
margin-top: 50%;
@media screen and(max-width: 414px) {
width:100%;
}
}
.about-section {
// font
font-size: $contextFontSize;
letter-spacing: $contextLetterSpace;
line-height: 42px;
width:90%;
@media screen and(max-width: 414px) {
font-size: $mcontextFontSize;
width:160%;
}
}
.discuss-section {
font-size: $contextFontSize;
letter-spacing: $contextLetterSpace;
line-height: 42px;
@media screen and(max-width: 414px) {
font-size: $mcontextFontSize;
width:80%;
}
}
.topic-intro {
// size
margin-top: 130px;
// font
font-size: $contextFontSize;
letter-spacing: $contextLetterSpace;
line-height: 42px;
width: 1100px;
@media screen and(max-width: 414px) {
margin-top: 60%;
width: 110%;
}
}
.last-part {
// size
margin-top: 70px;
height: 325px;
// font
font-size: $contextFontSize;
letter-spacing: $contextLetterSpace;
line-height: 42px;
@media screen and(max-width: 414px) {
margin-top: 30%;
width: 70%;
margin-bottom: 30%;
}
}
.buttons {
// font
color: $fontColor;
font-size: $buttonFontSize;
font-weight: 900;
letter-spacing: $buttonLetterSpace;
line-height: 30px;
// size
margin-right: 37px;
padding: 12px 15px 12px 15px;
// box
background-color: #ffffff;
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
transition-duration: 0.2s;
border: none;
border-radius: 8px;
// display
display: inline-block;
position: relative;
z-index: 5;
@media screen and (max-width: 414px) {
font-size: $mbuttonFontSize;
font-weight: 900;
letter-spacing: 0px;
color: $fontColor;
text-align: center;
opacity: 1;
border-radius: 6px;
padding: 10px 8px 10px 8px;
margin-right: 15px;
margin-top: 20px;
}
}
.button-post {
// display
display: inline;
// size
margin-left: 40px;
margin-top: -20px;
z-index: 2;
@media screen and (max-width: 414px) {
width: 414px;
margin-left: 0px;
}
}
.buttons:hover {
// box
background-color: $buttonHoverBg;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
// font
h3 {
color: $buttonHoverColor;
}
}
.date {
// display
display: inline;
// size
margin-right: 35px;
// align
vertical-align: bottom;
line-height: 30px;
@media screen and(max-width:414px){
font-size: 30px;
margin-right: 10px;
line-height: 50px;
vertical-align:middle;
}
}
}
h1, h2, h3, p, span {
font-family: $fontFamily;
color: $fontColor;
}
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;
}
@media screen and (max-width: 414px) {
line-height: 20px;
}
}
.right {
text-align: left;
@media screen and (max-width: 414px) {
text-align: right;
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-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;
@media screen and (max-width: 414px) {
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: -20.5px;
@media screen and (max-width:414px){
margin-left: -9px;
}
}
.img-table {
// box
border-style: none;
border-spacing: 25.5px 0px; //25.5
text-align: center;
width: 640px;
@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: -800px;
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;
@media screen and(max-width: 960px) {
margin-top: -10%;
margin-left: -10%;
}
@media screen and(max-width: 414px) {
margin-top: -10%;
margin-left: -10%;
}
}
.box-back2 {
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%;
}
}
.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;
}
@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;
@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;
@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){
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: -13%;
transform: scale(0.2);
@media screen and(max-width: 414px){
margin-top: 50%;
transform: scale(0.6);
}
}
File renamed without changes.
+691
View File
@@ -0,0 +1,691 @@
// font
$fontFamily: 'Noto Sans TC', sans-serif;
$fontStyle: normal;
$light-blue: #3d93e9;
$fontColor: #226bb4;
$buttonHoverColor: #ffffff;
@mixin Font() {
font-family: $fontFamily;
}
@mixin hyperlinkFont() {
text-decoration: underline;
}
// font size
$h1FontSize: 30px;
$h2FontSize: 24px;
$h3FontSize: 16px;
$contextFontSize: 13px;
$buttonFontSize: 24px;
$mh1FontSize: 26px;
$mh2FontSize: 20px;
$mh3FontSize: 14px;
$mcontextFontSize: 14px;
$mbuttonFontSize: 18px;
$hyperlinkFontSize: 14px;
$enlargeFontSize: 55px;
$subFontSize: 30px;
// letter spacing
$titleLetterSpace: 0;
$contextLetterSpace: 0.2px;
$buttonLetterSpace: 0;
$hyperlinkLetterSpace: 0;
// background
$buttonHoverBg: #226bb4;
#cfp {
.introduction-container {
overflow-x: hidden;
overflow-y: hidden;
margin: -8px;
position: relative;
}
.introduction {
// flex
display: flex;
flex-direction: column;
align-items: left;
// font
@include Font;
color: $fontColor;
// size
margin-left: 15%;
margin-top: 50%;
@media screen and(max-width: 414px) {
width: 100%;
}
}
.about-section {
// font
font-size: $contextFontSize;
letter-spacing: $contextLetterSpace;
line-height: 42px;
width: 90%;
@media screen and(max-width: 414px) {
font-size: $mcontextFontSize;
width: 160%;
}
}
.discuss-section {
font-size: $contextFontSize;
letter-spacing: $contextLetterSpace;
line-height: 42px;
@media screen and(max-width: 414px) {
font-size: $mcontextFontSize;
width: 80%;
}
}
.topic-intro {
// size
margin-top: 130px;
// font
font-size: $contextFontSize;
letter-spacing: $contextLetterSpace;
line-height: 42px;
width: 1100px;
@media screen and(max-width: 414px) {
margin-top: 60%;
width: 110%;
}
}
.last-part {
// size
margin-top: 70px;
height: 325px;
// font
font-size: $contextFontSize;
letter-spacing: $contextLetterSpace;
line-height: 42px;
@media screen and(max-width: 414px) {
margin-top: 30%;
width: 70%;
margin-bottom: 30%;
}
}
.buttons {
// font
color: $fontColor;
font-size: $buttonFontSize;
font-weight: 900;
letter-spacing: $buttonLetterSpace;
line-height: 30px;
// size
margin-right: 37px;
padding: 12px 15px 12px 15px;
// box
background-color: #ffffff;
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
transition-duration: 0.2s;
border: none;
border-radius: 8px;
// display
display: inline-block;
position: relative;
z-index: 5;
@media screen and (max-width: 414px) {
font-size: $mbuttonFontSize;
font-weight: 900;
letter-spacing: 0px;
color: $fontColor;
text-align: center;
opacity: 1;
border-radius: 6px;
padding: 10px 8px 10px 8px;
margin-right: 15px;
margin-top: 20px;
}
}
.button-post {
// display
display: inline;
// size
margin-left: 40px;
margin-top: -20px;
z-index: 2;
@media screen and (max-width: 414px) {
width: 414px;
margin-left: 0px;
}
}
.buttons:hover {
// box
background-color: $buttonHoverBg;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
// font
h3 {
color: $buttonHoverColor;
}
}
.date {
// display
display: inline;
// size
margin-right: 35px;
// align
vertical-align: bottom;
line-height: 30px;
@media screen and(max-width:414px) {
font-size: 30px;
margin-right: 10px;
line-height: 50px;
vertical-align: middle;
}
}
}
#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;
.enlarge {
font-size: $enlargeFontSize;
@media screen and (max-width: 414px) {
line-height: 80px;
}
}
.sub {
font-size: $subFontSize;
}
@media screen and (max-width: 414px) {
line-height: 20px;
}
}
.right {
text-align: left;
@media screen and (max-width: 414px) {
text-align: right;
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-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;
@media screen and (max-width: 414px) {
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: -20.5px;
@media screen and (max-width: 414px) {
margin-left: -9px;
}
}
.img-table {
// box
border-style: none;
border-spacing: 25.5px 0px; //25.5
text-align: center;
width: 640px;
@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: -800px;
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;
@media screen and(max-width: 960px) {
margin-top: -10%;
margin-left: -10%;
}
@media screen and(max-width: 414px) {
margin-top: -10%;
margin-left: -10%;
}
}
.box-back2 {
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%;
}
}
.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;
}
@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;
@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;
@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.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: -13%;
transform: scale(0.2);
@media screen and(max-width: 414px) {
margin-top: 50%;
transform: scale(0.6);
}
}
}
-126
View File
@@ -1,126 +0,0 @@
@import '@/assets/scss/breakpoint.scss';
@import '@/assets/scss/color.scss';
@import '@/assets/scss/font.scss';
$fontFamily: Noto Sans CJK TC, monospace;
#info-schedule {
max-width: 80vw;
margin: 0 auto;
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;
}
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;
}
}
}
#code-of-conduct a {
font-weight: 900;
}
@include md {
#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;
}
}
}
}
-46
View File
@@ -1,46 +0,0 @@
@import '@/assets/scss/breakpoint.scss';
@import '@/assets/scss/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;
}
}
}
+4
View File
@@ -1,2 +1,6 @@
$mid-blue: #226bb4;
$white: white;
$pale-grey: #f0f7fd;
$dark-slate-blue: #1f4163;
$dark-sky-blue: #3d93e9;
$slate-blue: #5f7a95;
+1 -1
View File
@@ -1,4 +1,4 @@
@import './breakpoint.scss';
@import 'breakpoint.scss';
// varible declare
$fontColor: white;
+10 -9
View File
@@ -1,15 +1,16 @@
// global
@import './reset.scss';
@import './variable.scss';
@import './color.scss';
@import './util.scss';
@import 'reset.scss';
@import 'variable.scss';
@import 'color.scss';
@import 'util.scss';
@import 'font.scss';
// components
@import './footer.scss';
@import './CFP/cfp_introduction.scss';
@import './CFP/CFP.scss';
@import './CFP/cfpSubNew.scss';
@import "./news.scss";
// @import './footer.scss';
// @import './CFP/cfp_introduction.scss';
// @import './CFP/CFP.scss';
// @import './CFP/cfpSubNew.scss';
// @import "./news.scss";
.sitcon-burnfont {
color: $mid-blue;
@@ -1,15 +1,21 @@
@import '../color';
$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");
// 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;
// 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";
$fontFamily-NotoSansTC: 'Noto Sans TC';
//@mixin
@mixin clearFloat() {
@@ -38,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 {
@@ -52,7 +58,7 @@ $limitWidth: 80vw;
line-height: 2.1;
letter-spacing: 0.2px;
text-align: left;
color: $color-mid-blue;
color: $mid-blue;
}
strong {
@@ -72,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%;
}
}
@@ -90,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;
}
}
@@ -110,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%;
@@ -128,7 +134,6 @@ $limitWidth: 80vw;
letter-spacing: normal;
text-align: center;
font-size: 34px;
}
&-text {
width: 100%;
@@ -137,8 +142,8 @@ $limitWidth: 80vw;
text-align: left;
font-size: 19px;
P {
color: $color-white;
p {
color: $white;
font-family: $fontFamily-NotoSansTC;
margin: 15px 0;
}
@@ -161,8 +166,6 @@ $limitWidth: 80vw;
// }
}
// &__itemBox {
// float: left;
// padding: 26px 20px 34px 20px;
@@ -217,7 +220,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;
+34
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;
}
}
@@ -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 {
+133
View File
@@ -0,0 +1,133 @@
@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;
#news-schedule {
max-width: 80vw;
margin: 0 auto;
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;
}
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;
}
}
}
#code-of-conduct a {
font-weight: 900;
}
@include md {
#news-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;
}
}
}
}
+47
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;
}
}
}
+11 -7
View File
@@ -4,7 +4,7 @@
<div class="sitcon-2021 text-center spot-box-row">
<img
alt="SITCON2021"
src="~@/assets/image/burnfont/2021.svg"
src="~@/assets/images/burnfont/2021.svg"
class="svg"
id="svg-sitcon2021"
/>
@@ -12,7 +12,7 @@
<div class="sitcon-name text-center spot-box-row">
<img
alt="學生計算機年會"
src="~@/assets/image/burnfont/sitcon.svg"
src="~@/assets/images/burnfont/sitcon.svg"
class="svg"
id="svg-sitcon"
/>
@@ -20,7 +20,7 @@
<h1 class="sitcon-topic text-center spot-box-row">
<img
alt="算盤的後裔"
src="~@/assets/image/burnfont/topic.svg"
src="~@/assets/images/burnfont/topic.svg"
class="svg"
id="svg-topic"
/>
@@ -30,7 +30,7 @@
<div class="cfp-title">
<div class="cfp-svg-wrapper text-center">
<img
src="~@/assets/image/burnfont/cfp.svg"
src="~@/assets/images/burnfont/cfp.svg"
class="svg"
id="svg-cfp"
/>
@@ -40,14 +40,14 @@
<div class="date-location-wrapper">
<div class="date-wrapper">
<img
src="~@/assets/image/burnfont/date.svg"
src="~@/assets/images/burnfont/date.svg"
class="svg"
id="svg-date"
/>
</div>
<div class="location-wrapper">
<img
src="~@/assets/image/burnfont/location.svg"
src="~@/assets/images/burnfont/location.svg"
class="svg"
id="svg-location"
/>
@@ -59,7 +59,7 @@
<div class="hexagon">
<a href="/news" rel="noopener" class="btn">
<img
src="~@/assets/image/burnfont/news.svg"
src="~@/assets/images/burnfont/news.svg"
class="svg"
id="svg-news"
/>
@@ -77,3 +77,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class CfpHeader extends Vue {}
</script>
<style lang="scss">
@import '@/assets/scss/CFP/header';
</style>
@@ -109,7 +109,7 @@
<div class="button-post">
<button
class="buttons"
onclick="window.location.href='/news'"
onclick="window.location.href='/cfp/news'"
><h3>投稿資訊</h3></button>
<!-- NOTE: this button's hover won't work because paper.png is too big -->
<button
@@ -152,3 +152,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class IntrodContainer extends Vue {}
</script>
<style lang="scss">
@import '@/assets/scss/CFP/intro';
</style>
+4
View File
@@ -69,3 +69,7 @@ export default class CFP extends Vue {
];
}
</script>
<style lang="scss">
@import '@/assets/scss/footer';
</style>
@@ -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,6 +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/news/agenda";
</style>
@@ -20,5 +20,5 @@ export default class AgendaCard extends Vue {
</script>
<style lang="scss">
@import '@/assets/scss/CFP/card.scss';
@import '@/assets/scss/news/card';
</style>
@@ -7,7 +7,7 @@
>
</div>
<div class="title-wrapper text-center">
<img src="~@/assets/image/burnfont/news.svg" class="svg svg-cfp-news" />
<img src="~@/assets/images/burnfont/news.svg" class="svg svg-cfp-news" />
</div>
<div class="contribute-wrapper">
<a class="btn-contribute" href="#">我要投稿</a>
@@ -114,3 +114,7 @@ export default class CfpHeader extends Vue {
}
}
</script>
<style lang="scss">
@import '@/assets/scss/news/header'
</style>
@@ -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.scss';
@import '@/assets/scss/news/schedule';
</style>
@@ -21,5 +21,5 @@ export default class Topic extends Vue {
</script>
<style lang="scss">
@import '@/assets/scss/CFP/topic.scss';
@import '@/assets/scss/news/topic';
</style>
+1 -1
View File
@@ -17,5 +17,5 @@ new Vue({
router,
store,
render: (h) => h(App),
mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
mounted: () => document.dispatchEvent(new Event('x-app-rendered'))
}).$mount('#app');
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<div id="cfp" class="cfp cfp-background">
<!-- CfpHeader id="cfp-header"/ -->
<IntrodContainer></IntrodContainer>
<Intro id="cfp-intro"></Intro>
</div>
</template>
@@ -10,12 +10,12 @@
import { Component, Prop, Vue } from 'vue-property-decorator';
// components
import CfpHeader from '@/components/CFP/Header.vue';
import IntrodContainer from '@/components/CFP/IntrodContainer.vue';
import Intro from '@/components/CFP/Intro.vue';
@Component({
components: {
CfpHeader,
IntrodContainer
Intro
}
})
export default class CFP extends Vue {
+5 -8
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,6 +24,3 @@ export default class News extends Vue {
@Prop() private msg!: string;
}
</script>
<style lang="scss">
</style>
+1 -1
View File
@@ -26,7 +26,7 @@ export const routes: RouteConfig[] = [
}
},
{
path: '/news',
path: '/cfp/news',
name: 'news',
component: News,
meta: {
+98
View File
@@ -0,0 +1,98 @@
<!-- Google Tag Manager -->
<script type=application/ld+json>
{
"@context": "https://schema.org",
"@type": "Event",
"name": "SITCON 學生計算機年會 2021",
"startDate": "2021-05-29T08:30+08:00",
"location": {
"@type": "Place",
"name": "中央研究院人文社會科學館",
"address": {
"@type": "PostalAddress",
"streetAddress": "研究院路二段 128 號",
"addressLocality": "Nangang District",
"postalCode": "115",
"addressRegion": "Taipei",
"addressCountry": "TW"
}
},
"organizer": {
"@type": "Organization",
"url": "https://sitcon.org",
"name": "SITCON 學生計算機年會",
"logo": "https://sitcon.org/branding/withname.png",
"sameAs": [
"https://www.youtube.com/user/SITCONArchive",
"https://www.facebook.com/SITCONtw/",
"https://twitter.com/sitcontw"
]
},
"image": [
"https://sitcon.org/2021/OG-image.png"
],
"description": "二十一世紀已經過了五分之一,今年,我們期待帶著豐沛熱情的你,能和我們一起在 2021 年這麼一個「承先啟後」的年份,綜觀不同領域發展與事件脈絡,自主學習感興趣之專長與技術,彼此分享、相濡以沫。在 SITCON 學生計算機年會 2020 裡,願所有與會者皆能拓展視野,鍛鍊與發展自我,找到向前邁步的勇氣與目標。相信身為學生的我們,也將能重新定義自我、定義未來!",
"endDate": "2021-05-29T18:00+08:00",
"offers": [
{
"@type": "Offer",
"name": "個人贊助票",
"url": "https://sitcon.kktix.cc/events/sitcon2020-individual-sponsor",
"price": "1000",
"priceCurrency": "TWD",
"availability": "http://schema.org/InStock",
"validFrom": "2019-10-14T00:00+08:00"
},
{
"@type": "Offer",
"name": "個人贊助票(純粹贊助)",
"url": "https://sitcon.kktix.cc/events/sitcon2021-individual-sponsor1",
"price": "500",
"priceCurrency": "TWD",
"availability": "http://schema.org/InStock",
"validFrom": "2019-10-14T00:00+08:00"
}
],
"performer": {
"@type": "Organization",
"url": "https://sitcon.org",
"name": "SITCON 學生計算機年會",
"logo": "https://sitcon.org/logo/sitcon.png",
"sameAs": [
"https://www.youtube.com/user/SITCONArchive",
"https://www.facebook.com/SITCONtw/",
"https://twitter.com/sitcontw"
]
},
"eventStatus": "EventRescheduled",
"previousStartDate": "2021-05-29T08:30+08:00"
}
</script>
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-NPVBCDZ');
</script>
<!-- End Google Tag Manager -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-34467841-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-34467841-1');
</script>
+12 -3
View File
@@ -1,7 +1,7 @@
const path = require("path");
const fs = require("fs");
//const gaTempHTML = fs.readFileSync(path.join(__dirname, "./template/ga.html"));
const gaTempHTML = fs.readFileSync(path.join(__dirname, "./template/ga.html"));
//const sessionData = require(path.join(__dirname, "./public/json/session.json"));
@@ -14,11 +14,20 @@ module.exports = {
'/2021/',
'/2021/cfp',
'/2021/cfp/',
'/'
'/2021/cfp/news',
'/2021/cfp/news/'
],
useRenderEvent: true,
headless: true,
onlyProduction: true
onlyProduction: true,
postProcess: (route) => {
// Auto inject GA template
route.html = route.html.replace(
"<noscript>{{{ %GA_TEMPLATE% }}}</noscript>",
gaTempHTML
);
return route;
}
},
},
};