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

[Style] Reorganize Intro; desktop simple bg complete

Browse Source
This commit is contained in:
hyperbola 2021-01-20 16:57:06 +08:00
parent f4f6fa9ce4
commit 2d23cbfac3
5 changed files with 327 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/assets/scss/CFP/bg.scss
View File

@ -1,37 +1,102 @@
@import '../hyperpoint'; @import "../hyperpoint";
@import "../color";
#cfp { #cfp {
position: relative; position: relative;
} }
// The Korea Fish // z-indecies
$z-section: -1;
$z-korea-fish: -10;
$z-first-card: -8;
$z-blue-bar: -9;
$z-second-card: -8;
// for mobile
$zm-section: -1;
$zm-korea-fish: -10;
$zm-first-card: -9;
$zm-blue-bar: -8;
$zm-second-card: -7;
#cfp-bg { #cfp-bg {
width: 100vw; width: 100vw;
z-index: -1; z-index: $z-section;
position: absolute; position: absolute;
// left: -12px; // offset
.korea-fish { .korea-fish {
top: 0;
left: 0;
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
height: 960px;
.sitcon-apple { .sitcon-apple {
position: absolute; position: absolute;
margin-top: 360px; margin-top: 360px;
width: 250px; width: 250px;
z-index: -10;
} }
.ellipse { .ellipse {
position: absolute; position: absolute;
margin-top: 200px; margin-top: 200px;
width: 640px; width: 640px;
z-index: -10;
} }
.radial { .radial {
width: 1920px; width: 1920px;
position: absolute; position: absolute;
z-index: -10;
}
}
.cards {
.first-card {
transform: rotate(15deg);
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
border-radius: 30px;
position: relative;
top: 72px;
right: 0px;
z-index: $z-first-card;
}
.blue-bar {
z-index: $z-blue-bar;
width: 3600px; // this is enough
height: 300px;
background: rgba(34, 107, 180, 1);
position: relative;
right: 160px;
top: 300px;
transform: rotate(15deg);
opacity: 1;
p {
padding-top: 160px;
padding-left: 240px;
color: $white;
font-size: 48pt;
font-weight: 700;
letter-spacing: 0.08em;
z-index: $z-blue-bar;
}
}
.card2-wrapper {
height: 1300px;
overflow: hidden;
position: relative;
margin-top: -300px;
z-index: $z-second-card;
.second-card {
transform: rotate(15deg);
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
border-radius: 30px;
z-index: $z-second-card;
position: relative;
top: 240px;
right: 240px;
}
} }
} }
} }

2
src/assets/scss/CFP/header.scss
View File

@ -16,7 +16,7 @@ $width-svg-news: 259px;
img.svg { img.svg {
height: auto; height: auto;
} }
z-index: 1; // z-index: 1;
.spot-box { .spot-box {
padding-bottom: 260px; padding-bottom: 260px;

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

@ -1,13 +1,11 @@
@import '../hyperpoint'; @import "../hyperpoint";
@import '../color'; @import "../color";
$fontFamily: Noto Sans TC; $fontFamily: Noto Sans TC;
$fontColor: $mid-blue; $fontColor: $mid-blue;
// General settings: // General settings:
// font-size and paragraph spacing for headers and paragraph text // font-size and paragraph spacing for headers and paragraph text
#cfp-intro { #cfp-intro {
margin-top: 90px;
h1, h1,
h2, h2,
h3 { h3 {
@ -37,22 +35,6 @@ $fontColor: $mid-blue;
font-weight: 900; font-weight: 900;
} }
} }
.introduction {
height: 2400px;
overflow: hidden;
padding-bottom: 0;
}
@media screen and (max-width: 1021px) {
.introduction {
height: 2230px;
}
}
@media screen and (max-width: 891px) {
.introduction {
height: 2200px;
}
}
// Utiliy // Utiliy
#cfp-intro { #cfp-intro {
@ -68,41 +50,22 @@ $fontColor: $mid-blue;
} }
#cfp-intro { #cfp-intro {
padding-top: 72px;
.box-back { padding-bottom: 72px;
// width: 880px; padding-left: 135px;
margin-bottom: -40em;
font-family: $fontFamily;
color: $fontColor; color: $fontColor;
width: 700px; .box-back {
padding: 20px; padding-top: 180px;
padding-bottom: 180px;
width: 800px;
.first-box {
transform: rotate(15deg);
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
border-radius: 30px;
position: relative;
bottom: 620px;
right: 50px;
z-index: 0;
}
.introd-text {
position: relative;
top: 200px;
left: 150px;
z-index: 2;
}
.about-sitcon { .about-sitcon {
margin-bottom: 0 auto 2em; // empty
} }
.past-sitcon { .past-sitcon {
margin-bottom: 2em; .cfp-img {
width: 60vw;
height: 13em;
.cfp-img{
width: 180px; //225 width: 180px; //225
height: 121px; //152 height: 121px; //152
} }
@ -111,6 +74,7 @@ $fontColor: $mid-blue;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0.25em 0; padding: 0.25em 0;
margin-bottom: 2em;
.thumb-wrapper { .thumb-wrapper {
.thumb-title, .thumb-title,
@ -126,7 +90,7 @@ $fontColor: $mid-blue;
} }
&:not(:last-child) { &:not(:last-child) {
margin-right: 1em; margin-right: 2em;
} }
} }
} }
@ -137,51 +101,17 @@ $fontColor: $mid-blue;
} }
} }
.box-bluearea {
width: 150vw;
height: 450px;
background: rgba(34, 107, 180, 1);
right: 25%;
position: relative;
z-index: -1;
transform: rotate(15deg);
opacity: 1;
}
.box-back2 { .box-back2 {
// width: 760px; width: 1050px;
font-family: $fontFamily; padding-top: 180px;
color: $fontColor;
width: 900px;
padding: 20px 20px 168px 20px;
height: 2350px;
.about-topic { .about-topic {
margin-bottom: 2em; // empty
position: relative;
bottom: 75px;
z-index: 2;
left: 50px;
}
.second-box {
transform: rotate(15deg);
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
border-radius: 30px;
position: relative;
bottom: 1100px;
right: 120px;
z-index: 0;
} }
.cfp-deadline { .cfp-deadline {
margin-bottom: 2em; margin-bottom: 2.5em;
margin-bottom: 2em;
position: relative;
z-index: 2;
left: 50px;
bottom: 75px;
.cfp-deadline-content { .cfp-deadline-content {
margin-top: -1.5em; margin-top: -1.5em;
display: flex; display: flex;
@ -191,10 +121,6 @@ $fontColor: $mid-blue;
} }
.give-me-money { .give-me-money {
position: relative;
z-index: 2;
left: 50px;
bottom: 75px;
.whisper { .whisper {
font-weight: 900; font-weight: 900;
font-size: 1.25em; font-size: 1.25em;
@ -204,8 +130,9 @@ $fontColor: $mid-blue;
} }
} }
@include md{ //for width 786px @include md {
#cfp-intro{ //for width 786px
#cfp-intro {
h1, h1,
h2, h2,
h3 { h3 {
@ -215,21 +142,21 @@ $fontColor: $mid-blue;
p { p {
font-size: 14pt; font-size: 14pt;
line-height: 1.75; line-height: 1.75;
width:85vw; width: 85vw;
} }
p:not(:last-child) { p:not(:last-child) {
margin-bottom: 2em; margin-bottom: 2em;
} }
} }
#cfp-intro{ #cfp-intro {
.box-back { .box-back {
margin-bottom: -42em; margin-bottom: -42em;
margin-left:-6em; margin-left: -6em;
.first-box { .first-box {
transform: rotate(12deg) scale(1.2); transform: rotate(12deg) scale(1.2);
bottom: 590px; bottom: 520px;
left: 100px; left: 100px;
} }
@ -240,10 +167,10 @@ $fontColor: $mid-blue;
.past-sitcon { .past-sitcon {
.thumbnails { .thumbnails {
.thumb-wrapper { .thumb-wrapper {
width:200.5px;//25vw; width: 200.5px; //25vw;
.thumb-title, .thumb-title,
.thumb-subtitle { .thumb-subtitle {
width:185.5px; //25vw; width: 185.5px; //25vw;
} }
} }
} }
@ -251,7 +178,7 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-bluearea { .box-bluearea {
height: 200px; height: 200px;
z-index: 0; z-index: 0;
@ -259,7 +186,7 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-back2 { .box-back2 {
margin-top: 1em; margin-top: 1em;
margin-left: -2em; margin-left: -2em;
@ -267,10 +194,9 @@ $fontColor: $mid-blue;
.second-box { .second-box {
transform: rotate(12deg); transform: rotate(12deg);
bottom: 1030px; bottom: 1030px;
left:-5em; left: -5em;
} }
} }
} }
#cfp-intro { #cfp-intro {
@ -287,9 +213,10 @@ $fontColor: $mid-blue;
} }
} }
@include sm { //for width 600px @include sm {
//for width 600px
#cfp-intro{ #cfp-intro {
h1, h1,
h2, h2,
h3 { h3 {
@ -299,7 +226,7 @@ $fontColor: $mid-blue;
p { p {
font-size: 13pt; font-size: 13pt;
line-height: 1.5; line-height: 1.5;
width:70vw; width: 70vw;
} }
p:not(:last-child) { p:not(:last-child) {
@ -307,10 +234,10 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-back { .box-back {
margin-bottom: -45em; margin-bottom: -45em;
margin-left:-5em; margin-left: -5em;
.first-box { .first-box {
transform: rotate(12deg) scale(1.1); transform: rotate(12deg) scale(1.1);
@ -322,18 +249,18 @@ $fontColor: $mid-blue;
} }
.past-sitcon { .past-sitcon {
margin-bottom:-1em; margin-bottom: -1em;
.thumbnails { .thumbnails {
.thumb-wrapper { .thumb-wrapper {
width:122.5px;//25vw; width: 122.5px; //25vw;
.thumb-title, .thumb-title,
.thumb-subtitle { .thumb-subtitle {
width:132.5px; //25vw; width: 132.5px; //25vw;
} }
} }
} }
.cfp-img{ .cfp-img {
width: 128.5px; //225 width: 128.5px; //225
height: 80px; //152 height: 80px; //152
margin-left: 0em; margin-left: 0em;
@ -342,7 +269,7 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-bluearea { .box-bluearea {
height: 300px; height: 300px;
z-index: 0; z-index: 0;
@ -350,9 +277,9 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-back2 { .box-back2 {
margin-top:-6em; margin-top: -6em;
.second-box { .second-box {
transform: rotate(12deg); transform: rotate(12deg);
bottom: 1060px; bottom: 1060px;
@ -375,7 +302,7 @@ $fontColor: $mid-blue;
} }
@include ss { @include ss {
#cfp-intro{ #cfp-intro {
h1, h1,
h2, h2,
h3 { h3 {
@ -403,7 +330,7 @@ $fontColor: $mid-blue;
p { p {
font-size: 12pt; font-size: 12pt;
line-height: 1.65; line-height: 1.65;
width:80vw; width: 80vw;
} }
p:not(:last-child) { p:not(:last-child) {
@ -411,10 +338,10 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-back { .box-back {
margin-bottom: -45em; margin-bottom: -45em;
margin-left:-7em; margin-left: -7em;
.first-box { .first-box {
transform: rotate(12deg); transform: rotate(12deg);
@ -425,20 +352,20 @@ $fontColor: $mid-blue;
top: 100px; top: 100px;
} }
.past-sitcon { .past-sitcon {
margin-top:1em; margin-top: 1em;
} }
.past-sitcon { .past-sitcon {
.thumbnails { .thumbnails {
.thumb-wrapper { .thumb-wrapper {
width:122.5px;//25vw; width: 122.5px; //25vw;
.thumb-title, .thumb-title,
.thumb-subtitle { .thumb-subtitle {
width:132.5px; //25vw; width: 132.5px; //25vw;
} }
} }
} }
.cfp-img{ .cfp-img {
width: 128.5px; //225 width: 128.5px; //225
height: 80px; //152 height: 80px; //152
margin-left: 0em; margin-left: 0em;
@ -447,7 +374,7 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-bluearea { .box-bluearea {
height: 280px; height: 280px;
z-index: 0; z-index: 0;
@ -455,7 +382,7 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-back2 { .box-back2 {
margin-top: -5em; margin-top: -5em;
margin-left: -1em; margin-left: -1em;
@ -463,7 +390,7 @@ $fontColor: $mid-blue;
.second-box { .second-box {
transform: rotate(12deg) scale(0.65); transform: rotate(12deg) scale(0.65);
bottom: 1270px; bottom: 1270px;
left:-14em; left: -14em;
} }
} }
@ -477,7 +404,7 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.past-sitcon { .past-sitcon {
margin-bottom: 2em; margin-bottom: 2em;
width: 40vw; width: 40vw;
@ -489,10 +416,10 @@ $fontColor: $mid-blue;
padding: 0.25em 0; padding: 0.25em 0;
.thumb-wrapper { .thumb-wrapper {
width:225px;//25vw; width: 225px; //25vw;
.thumb-title, .thumb-title,
.thumb-subtitle { .thumb-subtitle {
width:190px; //25vw; width: 190px; //25vw;
text-align: center; text-align: center;
margin: 0; margin: 0;
font-size: 0.8em; font-size: 0.8em;
@ -514,7 +441,7 @@ $fontColor: $mid-blue;
} }
@include xs { @include xs {
#cfp-intro{ #cfp-intro {
h1, h1,
h2, h2,
h3 { h3 {
@ -542,7 +469,7 @@ $fontColor: $mid-blue;
p { p {
font-size: 11pt; font-size: 11pt;
line-height: 1.65; line-height: 1.65;
width:80vw; width: 80vw;
} }
p:not(:last-child) { p:not(:last-child) {
@ -550,10 +477,10 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-back { .box-back {
margin-bottom: -45em; margin-bottom: -45em;
margin-left:-8em; margin-left: -8em;
.first-box { .first-box {
transform: rotate(12deg); transform: rotate(12deg);
@ -564,24 +491,24 @@ $fontColor: $mid-blue;
top: 100px; top: 100px;
} }
.past-sitcon { .past-sitcon {
margin-top:1em; margin-top: 1em;
.thumbnails { .thumbnails {
margin-left: -0.5em; margin-left: -0.5em;
padding: 0.25em 0; padding: 0.25em 0;
.thumb-wrapper { .thumb-wrapper {
width:110px;//25vw; width: 110px; //25vw;
.thumb-title, .thumb-title,
.thumb-subtitle { .thumb-subtitle {
width:130px; //25vw; width: 130px; //25vw;
text-align: center; text-align: center;
margin: 0; margin: 0;
font-size: 0.1em; font-size: 0.1em;
line-height: 10em; line-height: 10em;
font-weight: 900; font-weight: 900;
} }
.cfp-img{ .cfp-img {
width: 110.5px; //225 width: 110.5px; //225
height: 63px; //152 height: 63px; //152
margin-left: 0.6em; margin-left: 0.6em;
@ -592,7 +519,7 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-bluearea { .box-bluearea {
height: 220px; height: 220px;
z-index: 0; z-index: 0;
@ -600,7 +527,7 @@ $fontColor: $mid-blue;
} }
} }
#cfp-intro{ #cfp-intro {
.box-back2 { .box-back2 {
margin-top: 3em; margin-top: 3em;
margin-left: -1em; margin-left: -1em;
@ -608,7 +535,7 @@ $fontColor: $mid-blue;
.second-box { .second-box {
transform: rotate(12deg) scale(0.63); transform: rotate(12deg) scale(0.63);
bottom: 1250px; bottom: 1250px;
left:-15em; left: -15em;
} }
} }

30
src/components/CFP/Intro.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<main class="introduction-container"> <main class="introduction-container">
<div class="introduction"> <!--<div class="introduction">-->
<div class="box-back box"> <div class="box-back box">
<div class="introd-text"> <!--<div class="introd-text">-->
<div class="about-sitcon"> <div class="about-sitcon">
<h2>關於 SITCON</h2> <h2>關於 SITCON</h2>
<p> <p>
@ -67,14 +67,14 @@
> >
</div> </div>
</div> </div>
<!--</div>-->
<!--<svg width="1000" height="950" class="first-box"><rect width="1500" height="1200" style="fill: rgb(255, 255, 255);"></rect></svg>-->
</div> </div>
<svg width="1000" height="950" class="first-box"><rect width="1500" height="1200" style="fill: rgb(255, 255, 255);"></rect></svg> <!-- ==================================================================================================== -->
</div> <!--<div class="box-bluearea">-->
<!-- ==================================================================================================== -->
<div class="box-bluearea">
</div>
<div class="box-back2 box"> <div class="box-back2 box">
<div class="introd-text"> <!--<div class="introd-text">-->
<div class="topic-intro"> <div class="topic-intro">
<div class="about-topic"> <div class="about-topic">
<h2>2021 年會主題</h2> <h2>2021 年會主題</h2>
@ -92,7 +92,10 @@
<div class="cfp-deadline-content"> <div class="cfp-deadline-content">
<span class="h3">01/15 ～ 02/22</span <span class="h3">01/15 ～ 02/22</span
><span class="ml-2 mr-2">詳細時程請見</span ><span class="ml-2 mr-2">詳細時程請見</span
><a class="btn btn-primary mr-2" rel="noopener" href="/2021/cfp/news" ><a
class="btn btn-primary mr-2"
rel="noopener"
href="/2021/cfp/news"
>投稿資訊</a >投稿資訊</a
><a ><a
class="btn btn-primary" class="btn btn-primary"
@ -104,7 +107,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="give-me-money"> <div class="give-me-money">
<p class="whisper">最後...</p> <p class="whisper">最後...</p>
<h2>SITCON 贊助徵求</h2> <h2>SITCON 贊助徵求</h2>
@ -132,16 +134,16 @@
>個人贊助方案</a >個人贊助方案</a
> >
</div> </div>
<!--</div>-->
</div> <!--<svg width="1100" height="1200" class="second-box"><rect width="1500" height="1500" style="fill: rgb(255, 255, 255);"></rect></svg>-->
<svg width="1100" height="1200" class="second-box"><rect width="1500" height="1500" style="fill: rgb(255, 255, 255);"></rect></svg>
</div> </div>
</div> </div>
<!--</div>-->
</main> </main>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
export default class IntrodContainer extends Vue {} export default class IntrodContainer extends Vue {}
</script> </script>

39
src/pages/CFP.vue
View File

@ -6,23 +6,50 @@
<img class="ellipse" src="~@/assets/images/CFP/ellipse.svg" /> <img class="ellipse" src="~@/assets/images/CFP/ellipse.svg" />
<img class="sitcon-apple" src="~@/assets/images/CFP/sitcon-apple.svg" /> <img class="sitcon-apple" src="~@/assets/images/CFP/sitcon-apple.svg" />
</div> </div>
<div class="cards">
<svg width="1000" height="950" class="first-bozzx first-card">
<rect
width="1000"
height="950"
style="fill: rgb(255, 255, 255)"
></rect>
</svg>
<div class="box-bluearea blue-bar">
<p>Descendents of The Abacus</p>
</div> </div>
<div class="card2-wrapper">
<svg
width="1500"
height="1200"
class="second-box second-card"
>
<rect
width="1500"
height="1200"
style="fill: rgb(255, 255, 255)"
></rect>
</svg>
</div>
</div>
</div>
<div class="cfp-fg">
<!-- WTF = = --> <!-- WTF = = -->
<CfpHeader id="cfp-header" /> <CfpHeader id="cfp-header" />
<Intro id="cfp-intro"></Intro> <Intro id="cfp-intro" />
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from "vue-property-decorator";
import CfpHeader from '@/components/CFP/Header.vue'; import CfpHeader from "@/components/CFP/Header.vue";
import Intro from '@/components/CFP/Intro.vue'; import Intro from "@/components/CFP/Intro.vue";
@Component({ @Component({
components: { components: {
CfpHeader, CfpHeader,
Intro Intro,
} },
}) })
export default class CFP extends Vue { export default class CFP extends Vue {
@Prop() private msg!: string; @Prop() private msg!: string;