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;

117
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,40 +50,21 @@ $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;
width: 60vw;
height: 13em;
.cfp-img { .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,7 +130,8 @@ $fontColor: $mid-blue;
} }
} }
@include md{ //for width 786px @include md {
//for width 786px
#cfp-intro { #cfp-intro {
h1, h1,
h2, h2,
@ -229,7 +156,7 @@ $fontColor: $mid-blue;
.first-box { .first-box {
transform: rotate(12deg) scale(1.2); transform: rotate(12deg) scale(1.2);
bottom: 590px; bottom: 520px;
left: 100px; left: 100px;
} }
@ -270,7 +197,6 @@ $fontColor: $mid-blue;
left: -5em; left: -5em;
} }
} }
} }
#cfp-intro { #cfp-intro {
@ -287,7 +213,8 @@ $fontColor: $mid-blue;
} }
} }
@include sm { //for width 600px @include sm {
//for width 600px
#cfp-intro { #cfp-intro {
h1, h1,

28
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> <!--</div>-->
<svg width="1000" height="950" class="first-box"><rect width="1500" height="1200" style="fill: rgb(255, 255, 255);"></rect></svg> <!--<svg width="1000" height="950" class="first-box"><rect width="1500" height="1200" style="fill: rgb(255, 255, 255);"></rect></svg>-->
</div> </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;