Merge branch 'dev2' into master
This commit is contained in:
commit
3e1bc1a99d
46 files changed
+1126
-967
No files matched your search
@@ -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.
File renamed without changes.
File renamed without changes.
@@ -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;
|
||||
}
|
||||
}
|
||||
File renamed without changes.
@@ -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.
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,2 +1,6 @@
|
||||
$mid-blue: #226bb4;
|
||||
$white: white;
|
||||
$pale-grey: #f0f7fd;
|
||||
$dark-slate-blue: #1f4163;
|
||||
$dark-sky-blue: #3d93e9;
|
||||
$slate-blue: #5f7a95;
|
||||
@@ -1,4 +1,4 @@
|
||||
@import './breakpoint.scss';
|
||||
@import 'breakpoint.scss';
|
||||
|
||||
// varible declare
|
||||
$fontColor: white;
|
||||
|
||||
@@ -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 google font
|
||||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
|
||||
@import '../color';
|
||||
|
||||
//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;
|
||||
$fontColor: #226bb4; // added to solve unnamed color error
|
||||
|
||||
$fontFamily-NotoSansTC: "Noto Sans TC";
|
||||
// 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
|
||||
// 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';
|
||||
|
||||
//@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;
|
||||
@@ -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 {
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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
@@ -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
@@ -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
@@ -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
@@ -26,7 +26,7 @@ export const routes: RouteConfig[] = [
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
path: '/cfp/news',
|
||||
name: 'news',
|
||||
component: News,
|
||||
meta: {
|
||||
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in new issue
Block a user