Merge branch 'dev2' of https://github.com/sitcon-tw/2021 into dev2
This commit is contained in:
mysper
3
src/assets/images/CFP/Polygon-big.svg
Normal file
3
src/assets/images/CFP/Polygon-big.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.0607 22.8044C15.8912 24.7206 13.1088 24.7206 11.9393 22.8044L1.26347 5.31291C0.043333 3.31381 1.48215 0.75 3.82419 0.75L25.1758 0.75C27.5179 0.75 28.9567 3.31381 27.7365 5.31292L17.0607 22.8044Z" fill="#226BB4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 329 B |
3
src/assets/images/CFP/Polygon-small.svg
Normal file
3
src/assets/images/CFP/Polygon-small.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.2016 13.7449C9.42007 15.0103 7.57993 15.0103 6.79839 13.7449L0.425077 3.42597C-0.397882 2.09352 0.560584 0.375 2.12668 0.375L14.8733 0.375C16.4394 0.375 17.3979 2.09352 16.5749 3.42597L10.2016 13.7449Z" fill="#226BB4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 336 B |
48
src/assets/images/CFP/sitcon-img.svg
Normal file
48
src/assets/images/CFP/sitcon-img.svg
Normal file
@@ -0,0 +1,48 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="135.712" height="169.401" viewBox="0 0 135.712 169.401">
|
||||
<defs>
|
||||
<clipPath id="clip-path">
|
||||
<path id="Rectangle_158" d="M0 0H135.712V169.401H0z" class="cls-1"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip-path-3">
|
||||
<path id="Rectangle_155" d="M0 0H28.852V70.105H0z" class="cls-1"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip-path-4">
|
||||
<path id="Rectangle_156" d="M0 0H93.212V46.379H0z" class="cls-1"/>
|
||||
</clipPath>
|
||||
<style>
|
||||
.cls-1{fill:none}.cls-3{clip-path:url(#clip-path)}.cls-5{fill:#5b5b5b}.cls-6{fill:#282828}.cls-7{fill:#fff}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Group_65" opacity="0.7">
|
||||
<g id="Group_64" class="cls-3">
|
||||
<g id="Group_63">
|
||||
<g id="Group_62" class="cls-3">
|
||||
<path id="Path_683" fill="#dbdbdb" d="M92.719 197.322l63.728 8.69a7.446 7.446 0 0 1 4.532 12.355l-23.635 26.3a7.446 7.446 0 0 0-.231 9.685l28.458 34.871a7.446 7.446 0 0 1-1.18 10.572l-39.845 31.183a7.446 7.446 0 0 1-5.635 1.509l-61.984-8.8a7.446 7.446 0 0 1-3.8-13.026l25.662-22a7.446 7.446 0 0 0 .54-10.795l-33.181-34.758a7.446 7.446 0 0 1 .638-10.876l40.18-33.267a7.446 7.446 0 0 1 5.755-1.642" transform="translate(-37.185 -166.371)"/>
|
||||
<path id="Path_684" d="M761.246 527.492c.5-2.882 3.394-7.4 6.332-7.657a3.928 3.928 0 0 0 3.856-3.856c0-1.964-1.759-4.038-3.856-3.856-6.591.573-12.651 6.866-13.769 13.319a3.937 3.937 0 0 0 2.693 4.744c1.876.516 4.384-.62 4.744-2.693" class="cls-5" transform="translate(-635.722 -431.933)"/>
|
||||
<path id="Path_685" d="M20.856 644.741c-4.907-4.122-13.456-6.067-19.1-2.282-4.108 2.754-.252 9.438 3.893 6.66 2.637-1.768 7.389-.912 9.756 1.076 3.781 3.176 9.267-2.251 5.454-5.453" class="cls-5" transform="translate(0 -540.161)"/>
|
||||
<path id="Path_686" d="M266.55 379.33a5.273 5.273 0 1 1-5.242-5.3 5.273 5.273 0 0 1 5.242 5.3" class="cls-6" transform="translate(-215.923 -315.468)"/>
|
||||
<path id="Path_687" d="M487.23 380.6a5.273 5.273 0 1 1-5.242-5.3 5.273 5.273 0 0 1 5.242 5.3" class="cls-6" transform="translate(-402.052 -316.535)"/>
|
||||
<path id="Path_688" d="M340.964 452.36h-.1c-6.357-.037-11.316-3.66-11.29-8.25a1.928 1.928 0 0 1 1.928-1.917h.011a1.928 1.928 0 0 1 1.917 1.939c-.011 2.047 3.048 4.347 7.456 4.372 4.36-.019 7.493-2.24 7.5-4.286a1.929 1.929 0 0 1 1.928-1.917h.011a1.928 1.928 0 0 1 1.917 1.94c-.026 4.566-4.977 8.12-11.287 8.12" class="cls-6" transform="translate(-277.978 -372.961)"/>
|
||||
<path id="Path_689" d="M363.693 0a19.287 19.287 0 0 0-11.779 3.805c-2.631 2.012-4.514 6.078-5.806 8.618-1.5 2.956-3 5.447-3.811 6.741a.686.686 0 0 0 .549 1.049c.42.023.942.04 1.545.04 3.5 0 9.74-.595 14.585-4.3 6.026-4.607 7.973-12.553 8.432-14.912a.678.678 0 0 0-.565-.807 20.432 20.432 0 0 0-3.15-.234" class="cls-5" transform="translate(-288.616 -.004)"/>
|
||||
<path id="Path_690" d="M254.452 65.686a9.949 9.949 0 0 0-1.056.055.681.681 0 0 0-.591.835 11.8 11.8 0 0 0 3.851 6.559 11.473 11.473 0 0 0 6.812 2.009h.064a.687.687 0 0 0 .586-1.041c-.39-.648-.921-1.569-1.453-2.615-.6-1.187-1.483-3.086-2.711-4.025a9.011 9.011 0 0 0-5.5-1.777" class="cls-5" transform="translate(-213.209 -55.402)"/>
|
||||
<path id="Path_691" d="M74.97 183.193l.436-3.184-.434 3.184 63.728 8.69a4.1 4.1 0 0 1 2.671 1.461 4.379 4.379 0 0 1 1 2.767 4.109 4.109 0 0 1-1.094 2.794l-23.635 26.3a10.658 10.658 0 0 0-.33 13.866l28.457 34.87a4.232 4.232 0 0 1-.671 6.009l-39.844 31.183a4.239 4.239 0 0 1-3.205.857l-61.982-8.8a4.082 4.082 0 0 1-2.667-1.47 4.42 4.42 0 0 1-.978-2.765 4.083 4.083 0 0 1 .352-1.674 4.224 4.224 0 0 1 1.134-1.492l25.662-22a10.66 10.66 0 0 0 .774-15.453l-33.185-34.76a4.231 4.231 0 0 1 .362-6.182L71.7 184.127a4.232 4.232 0 0 1 3.269-.934m-.57-6.466a10.66 10.66 0 0 0-6.8 2.449l-40.176 33.267a10.659 10.659 0 0 0-.913 15.571l33.182 34.762a4.233 4.233 0 0 1-.307 6.136l-25.662 22a10.669 10.669 0 0 0-2.818 3.749 10.51 10.51 0 0 0-.912 4.3 10.832 10.832 0 0 0 2.424 6.827 10.539 10.539 0 0 0 6.745 3.774l61.984 8.8a10.662 10.662 0 0 0 8.067-2.159l39.846-31.183a10.661 10.661 0 0 0 1.689-15.134l-28.458-34.88a4.232 4.232 0 0 1 .131-5.505l23.636-26.3a10.562 10.562 0 0 0 2.74-7.09 10.8 10.8 0 0 0-2.474-6.866 10.558 10.558 0 0 0-6.754-3.731l-63.728-8.69a10.674 10.674 0 0 0-1.442-.1" class="cls-5" transform="translate(-19.872 -149.058)"/>
|
||||
<path id="Path_692" d="M375.875 581.7l-15.839.041-12.584-9.785c-1.461-1.136-3.234-.46-2.505.925l5.967 11.332-7.4 5.147c-.744.518.532 1.815 1.8 1.849l12.049.319 10.385 7.8c1.1.83 2.862.614 2.494-.322l-3.642-9.252 10.972-5.635c1.356-.7.158-2.428-1.706-2.423" class="cls-7" transform="translate(-289.549 -481.922)"/>
|
||||
<g id="Group_58" opacity="0.72" transform="translate(90.078 50.357)">
|
||||
<g id="Group_57">
|
||||
<g id="Group_56" clip-path="url(#clip-path-3)">
|
||||
<path id="Path_693" d="M601.844 391.742a2.339 2.339 0 0 1-1.816-.861l-7.406-9.076a2.343 2.343 0 1 1 3.631-2.963l7.406 9.076a2.343 2.343 0 0 1-1.814 3.824m-18.516-22.69a2.339 2.339 0 0 1-1.817-.861l-2.516-3.083a16.086 16.086 0 0 1 .5-21.016l3.822-4.253a2.343 2.343 0 1 1 3.485 3.132l-3.822 4.253a11.4 11.4 0 0 0-.355 14.921l2.516 3.083a2.343 2.343 0 0 1-1.814 3.824m9.562-34.017a2.343 2.343 0 0 1-1.741-3.909l7.83-8.713a2.343 2.343 0 0 1 3.485 3.132l-7.83 8.713a2.336 2.336 0 0 1-1.744.777" class="cls-7" transform="translate(-575.333 -321.637)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Group_61" opacity="0.36" transform="translate(11.989 119.876)">
|
||||
<g id="Group_60">
|
||||
<g id="Group_59" clip-path="url(#clip-path-4)">
|
||||
<path id="Path_694" d="M110.179 765.661s-21.065 17.919-7.924 23c18.722 7.239 65.847 7.575 67.453 7.575s-21.189 15.8-21.189 15.8l-46.65-5.551-20.474-5.62-4.817-6.825L88.62 782.4z" class="cls-5" transform="translate(-76.576 -765.661)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.2 KiB |
@@ -83,7 +83,7 @@ $fontColor: $mid-blue;
|
||||
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
bottom: 550px;
|
||||
bottom: 620px;
|
||||
right: 50px;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -99,7 +99,13 @@ $fontColor: $mid-blue;
|
||||
|
||||
.past-sitcon {
|
||||
margin-bottom: 2em;
|
||||
width: 700px;
|
||||
width: 60vw;
|
||||
height: 13em;
|
||||
|
||||
.cfp-img{
|
||||
width: 180px; //225
|
||||
height: 121px; //152
|
||||
}
|
||||
|
||||
.thumbnails {
|
||||
display: flex;
|
||||
@@ -125,7 +131,7 @@ $fontColor: $mid-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.join-discuss {
|
||||
// empty
|
||||
}
|
||||
@@ -216,22 +222,31 @@ $fontColor: $mid-blue;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
#cfp-intro{
|
||||
.box-back {
|
||||
margin-bottom: -40em;
|
||||
margin-left:-6em;
|
||||
|
||||
.first-box {
|
||||
transform: rotate(12deg);
|
||||
bottom: 650px;
|
||||
left: 20px;
|
||||
transform: rotate(12deg) scale(1.2);
|
||||
bottom: 630px;
|
||||
left: 90px;
|
||||
}
|
||||
|
||||
.introd-text {
|
||||
top: 100px;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
.past-sitcon {
|
||||
margin-top:1em;
|
||||
.thumbnails {
|
||||
.thumb-wrapper {
|
||||
width:200.5px;//25vw;
|
||||
.thumb-title,
|
||||
.thumb-subtitle {
|
||||
width:185.5px; //25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -294,6 +309,24 @@ $fontColor: $mid-blue;
|
||||
.past-sitcon {
|
||||
margin-top:1em;
|
||||
}
|
||||
|
||||
.past-sitcon {
|
||||
.thumbnails {
|
||||
.thumb-wrapper {
|
||||
width:122.5px;//25vw;
|
||||
.thumb-title,
|
||||
.thumb-subtitle {
|
||||
width:132.5px; //25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cfp-img{
|
||||
width: 128.5px; //225
|
||||
height: 80px; //152
|
||||
margin-left: 0em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -369,6 +402,23 @@ $fontColor: $mid-blue;
|
||||
.past-sitcon {
|
||||
margin-top:1em;
|
||||
}
|
||||
.past-sitcon {
|
||||
.thumbnails {
|
||||
.thumb-wrapper {
|
||||
width:122.5px;//25vw;
|
||||
.thumb-title,
|
||||
.thumb-subtitle {
|
||||
width:132.5px; //25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cfp-img{
|
||||
width: 128.5px; //225
|
||||
height: 80px; //152
|
||||
margin-left: 0em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -401,6 +451,41 @@ $fontColor: $mid-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cfp-intro{
|
||||
.past-sitcon {
|
||||
margin-bottom: 2em;
|
||||
width: 40vw;
|
||||
height: 10em;
|
||||
|
||||
.thumbnails {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.25em 0;
|
||||
|
||||
.thumb-wrapper {
|
||||
width:225px;//25vw;
|
||||
.thumb-title,
|
||||
.thumb-subtitle {
|
||||
width:190px; //25vw;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.75em;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include xs {
|
||||
|
||||
@@ -1,64 +1,400 @@
|
||||
@import '../color';
|
||||
//import google font
|
||||
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
|
||||
$fontFamily-NotoSansTC: "Noto Sans TC";
|
||||
|
||||
$fontColor: #226bb4; // added to solve unnamed color error
|
||||
//Color
|
||||
$color-white: #ffffff;
|
||||
$color-mid-blue: #226bb4;
|
||||
|
||||
// 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");
|
||||
//Screen breakpoint
|
||||
$max-width-big-0: 1800px;
|
||||
$max-width-big: 1500px;
|
||||
$max-width-medium-0: 1100px;
|
||||
$max-width-medium-1: 900px;
|
||||
$max-width-small-0: 750px;
|
||||
$max-width-small-1: 500px;
|
||||
$max-width-small-2: 410px;
|
||||
$max-width-small-3: 360px;
|
||||
|
||||
// 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() {
|
||||
clear: both;
|
||||
// .info-container
|
||||
@mixin infoContainer() {
|
||||
width: 80%;
|
||||
// padding-left: 7%;
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 89%;
|
||||
padding-left: 0;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
width: 89%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
$limitWidth: 80vw;
|
||||
// .info-section
|
||||
@mixin sectionH1Fontsize() {
|
||||
font-size: 44px;
|
||||
@media only screen and (min-width: $max-width-big-0) {
|
||||
font-size: 48px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 38px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 32px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 28px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
//cfp-information <Agenda> component
|
||||
@mixin sectionH2Fontsize() {
|
||||
font-size: 32px;
|
||||
@media only screen and (min-width: $max-width-big-0) {
|
||||
font-size: 36px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 30px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 26px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 24px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
//.info-section__content
|
||||
@mixin sectionContentParagraphWidth() {
|
||||
// width: 92%;
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sectionContentParagraphFontsize() {
|
||||
font-size: 20px;
|
||||
@media only screen and (max-width: $max-width-big-0) {
|
||||
font-size: 18.5px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 17px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 15px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ulPadding {
|
||||
padding: 0 0 0 20px;
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sectionContentSubExtendWidth {
|
||||
width: 107%;
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// .info-kind
|
||||
@mixin kind() {
|
||||
@media only screen and (min-width: $max-width-big-0) {
|
||||
padding-bottom: 330px;
|
||||
&__itemBox {
|
||||
height: 305px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
&-title {
|
||||
margin-top: 30px;
|
||||
}
|
||||
&-text {
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 100%;
|
||||
&__itemBox {
|
||||
width: 100%;
|
||||
height: 201px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
&-title {
|
||||
margin-top: 20px;
|
||||
}
|
||||
&-text {
|
||||
width: 86%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin kindTitleFontsize() {
|
||||
font-size: 36px;
|
||||
@media only screen and (max-width: $max-width-big-0) {
|
||||
font-size: 28px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
font-size: 25px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 28px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin kindTextFontsize() {
|
||||
font-size: 20px;
|
||||
@media only screen and (max-width: $max-width-big-0) {
|
||||
font-size: 17px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 14px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 17px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// .info-qa
|
||||
@mixin qaLayout {
|
||||
width: 86%;
|
||||
margin-bottom: 120px;
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
width: 90%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
width: 100%;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaTitleFontsize() {
|
||||
font-size: 24px;
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 22px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 15px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
font-size: 11px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-3) {
|
||||
font-size: 9.3px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaTextFontsize() {
|
||||
font-size: 20px;
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
font-size: 18px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
font-size: 14px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
font-size: 12px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
font-size: 10px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-3) {
|
||||
font-size: 8.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaTitleHeight {
|
||||
height: 57px;
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
height: 45px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
height: 36px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
height: 32px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-3) {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaTitleMarginTop {
|
||||
margin-top: 15px;
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
margin-top: 9px;
|
||||
}
|
||||
}
|
||||
@mixin qaTextMarginTop {
|
||||
margin-top: 25px;
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaQdisplay {
|
||||
margin-left: 25px;
|
||||
|
||||
&::before {
|
||||
content: "Q：";
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
margin-left: 18px;
|
||||
&::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaIconSize {
|
||||
height: 25px;
|
||||
width: 30px;
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
height: 16px;
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin qaIcon {
|
||||
background-image: url("../../assets/images/CFP/Polygon-big.svg");
|
||||
|
||||
@media only screen and (max-width: $max-width-medium-1) {
|
||||
background-image: url("../../assets/images/CFP/Polygon-small.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sitconImg {
|
||||
float: right;
|
||||
margin-top: 382px;
|
||||
margin-right: 15%;
|
||||
margin-bottom: 30px;
|
||||
@media only screen and (max-width: $max-width-big) {
|
||||
margin-top: 0;
|
||||
margin-right: 80%;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-medium-0) {
|
||||
width: 108px;
|
||||
height: 135px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-0) {
|
||||
margin-right: 15%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $max-width-small-1) {
|
||||
width: 86px;
|
||||
height: 107px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $max-width-small-2) {
|
||||
width: 69px;
|
||||
height: 86px;
|
||||
}
|
||||
@media only screen and (max-width: $max-width-small-3) {
|
||||
width: 55px;
|
||||
height: 68px;
|
||||
}
|
||||
}
|
||||
|
||||
//cfp-sub-information <subInformation>
|
||||
.info {
|
||||
width: 100%;
|
||||
font-family: $fontFamily-NotoSansTC;
|
||||
float: left;
|
||||
|
||||
&-container {
|
||||
width: $limitWidth;
|
||||
@include infoContainer();
|
||||
margin: 0 auto;
|
||||
// float: left;
|
||||
}
|
||||
|
||||
&-section {
|
||||
@include clearFloat();
|
||||
width: $limitWidth;
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
|
||||
h1 {
|
||||
@include sectionH1Fontsize();
|
||||
height: 70px;
|
||||
font-family: $fontFamily-NotoSansTC;
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.9;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: $mid-blue;
|
||||
margin: 10px 0;
|
||||
color: $color-mid-blue;
|
||||
margin-block-start: 0.83em;
|
||||
margin-block-end: 0.83em;
|
||||
}
|
||||
&__content {
|
||||
width: $limitWidth;
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
font-size: 18.5px;
|
||||
font-family: $fontFamily-NotoSansTC;
|
||||
@include sectionContentParagraphWidth();
|
||||
@include sectionContentParagraphFontsize();
|
||||
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 2.1;
|
||||
letter-spacing: 0.2px;
|
||||
text-align: left;
|
||||
color: $mid-blue;
|
||||
color: $color-mid-blue;
|
||||
}
|
||||
|
||||
strong {
|
||||
@@ -71,219 +407,186 @@ $limitWidth: 80vw;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
@include ulPadding();
|
||||
margin: 0;
|
||||
padding: 0 0 0 20px;
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
transform: translate(-200%, -150%);
|
||||
background-color: $mid-blue;
|
||||
background-color: $color-mid-blue;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sub {
|
||||
width: $limitWidth;
|
||||
h2 {
|
||||
@include sectionH2Fontsize();
|
||||
height: 60px;
|
||||
font-family: $fontFamily-NotoSansTC;
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 2.2;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: $mid-blue;
|
||||
margin: 10px 0;
|
||||
color: $color-mid-blue;
|
||||
margin-block-start: 0.83em;
|
||||
margin-block-end: 0.83em;
|
||||
}
|
||||
|
||||
&-extend {
|
||||
@include sectionContentSubExtendWidth();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-kind {
|
||||
//background-color: blueviolet;
|
||||
width: 90vw;
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
@media screen and (max-width: 1200px) {
|
||||
flex-direction: column;
|
||||
&-sitcon-img {
|
||||
&__box {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include sitconImg();
|
||||
}
|
||||
|
||||
//cfp-sub-information <subInformation> kind, qa components
|
||||
&-kind {
|
||||
width: 100%;
|
||||
margin-top: 45px;
|
||||
padding-bottom: 300px;
|
||||
&__itemBox {
|
||||
width: 330px;
|
||||
float: left;
|
||||
padding: 25px 1.5% 35px 1.5%;
|
||||
border-radius: 13px;
|
||||
background-color: $mid-blue;
|
||||
padding: 26px 20px 34px 20px;
|
||||
@media screen and (max-width: 1200px) {
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
background-color: $color-mid-blue;
|
||||
width: 30%;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: $white;
|
||||
@include kindTitleFontsize();
|
||||
width: 100%;
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-family: $fontFamily-NotoSansTC;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-align: center;
|
||||
font-size: 34px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
&-text {
|
||||
width: 100%;
|
||||
//height: 172px;
|
||||
height: 172px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
font-size: 19px;
|
||||
p {
|
||||
color: $white;
|
||||
font-family: $fontFamily-NotoSansTC;
|
||||
margin: 15px 0;
|
||||
@include kindTextFontsize();
|
||||
margin: 10px auto;
|
||||
color: $color-white;
|
||||
font-weight: 500;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 2.1;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
// p {
|
||||
// color: $color-white;
|
||||
// font-family: $fontFamily-NotoSansTC;
|
||||
// font-size: 19px;
|
||||
// font-weight: 500;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// line-height: 2.1;
|
||||
// letter-spacing: 0.2px;
|
||||
// }
|
||||
//
|
||||
// }
|
||||
}
|
||||
|
||||
// &__itemBox {
|
||||
// float: left;
|
||||
// padding: 26px 20px 34px 20px;
|
||||
// border-radius: 13px;
|
||||
// background-color: $color-mid-blue;
|
||||
// width: 354px;
|
||||
// height: 230px;
|
||||
// margin: 0 72px 62px 0;
|
||||
|
||||
// &-title {
|
||||
// color: $color-white;
|
||||
// display: inline-block;
|
||||
// text-align: center;
|
||||
// width: 100%;
|
||||
// font-family: $fontFamily-NotoSansTC;
|
||||
// font-weight: 900;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// // line-height: 1.94;
|
||||
// letter-spacing: normal;
|
||||
// text-align: center;
|
||||
// //modify
|
||||
// font-size: 34px;
|
||||
// // margin: 0 0px 0px 40px;
|
||||
// }
|
||||
// &-text {
|
||||
// width: 350px;
|
||||
// height: 172px;
|
||||
// margin: 0 auto;
|
||||
|
||||
// text-align: left;
|
||||
|
||||
// p {
|
||||
// color: $color-white;
|
||||
// font-family: $fontFamily-NotoSansTC;
|
||||
// font-size: 19px;
|
||||
// font-weight: 500;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// line-height: 2.1;
|
||||
// letter-spacing: 0.2px;
|
||||
// }
|
||||
// strong {
|
||||
// font-weight: 900;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//RWD for kind
|
||||
@include kind();
|
||||
}
|
||||
|
||||
&-qa {
|
||||
width: 100vw;
|
||||
@include qaLayout();
|
||||
margin-bottom: 120px;
|
||||
float: left;
|
||||
// margin: 0 auto;
|
||||
&__itemBox {
|
||||
border-radius: 29px;
|
||||
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
|
||||
background-color: $white;
|
||||
margin: 20px 0;
|
||||
padding: 10px 20px;
|
||||
width: 80%;
|
||||
cursor: pointer;
|
||||
span {
|
||||
font-family: $fontFamily-NotoSansTC;
|
||||
color: $fontColor;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
line-height: 42px;
|
||||
}
|
||||
p {
|
||||
background-color: $color-white;
|
||||
margin: 0 0 30px 0;
|
||||
|
||||
position: relative;
|
||||
&-title {
|
||||
@include qaTitleHeight();
|
||||
display: block;
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
@include qaTitleFontsize();
|
||||
@include qaTitleMarginTop();
|
||||
|
||||
@include qaQdisplay();
|
||||
display: inline-block;
|
||||
font-weight: 900;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.25;
|
||||
letter-spacing: normal;
|
||||
text-align: left;
|
||||
color: $color-mid-blue;
|
||||
}
|
||||
span {
|
||||
@include qaIcon();
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-45%);
|
||||
right: 3.5%;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-input:checked ~ &-text {
|
||||
display: block;
|
||||
width: 88%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
@include qaTextFontsize();
|
||||
}
|
||||
}
|
||||
|
||||
&-input:checked ~ &-title {
|
||||
p {
|
||||
@include qaTextMarginTop();
|
||||
}
|
||||
span {
|
||||
transform: rotate(180deg);
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 3.5%;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
@include qaIconSize();
|
||||
}
|
||||
}
|
||||
|
||||
// &-qa {
|
||||
// margin: 30px 0;
|
||||
// padding: 15px 0;
|
||||
// // margin-bottom: 120px;
|
||||
// &__itemBox {
|
||||
// border-radius: 29px;
|
||||
// box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
|
||||
// background-color: $color-white;
|
||||
// margin: 0 0 30px 0;
|
||||
// &-title {
|
||||
// display: inline-block;
|
||||
// width: 1230px;
|
||||
// height: 30px;
|
||||
// padding: 8px 41px 11px 23px;
|
||||
|
||||
// font-family: $fontFamily-NotoSansTC;
|
||||
// font-size: 24px;
|
||||
// font-weight: 900;
|
||||
// font-stretch: normal;
|
||||
// font-style: normal;
|
||||
// line-height: 1.5;
|
||||
// letter-spacing: normal;
|
||||
// text-align: left;
|
||||
// color: $color-mid-blue;
|
||||
// }
|
||||
|
||||
// &-input {
|
||||
// position: absolute;
|
||||
// opacity: 0;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
// &-input:checked ~ &-text {
|
||||
// display: block;
|
||||
// width: 94%;
|
||||
// margin: 0 auto;
|
||||
// padding-bottom: 20px;
|
||||
// }
|
||||
|
||||
// &-text {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// &-checkmark {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user