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

[Restruct] restruct agenda.scss

Browse Source
This commit is contained in:
barrystone 2021-01-20 15:28:11 +08:00
parent 45ff5d8427
commit 33f06ba0eb
5 changed files with 31 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/scss/breakpoint.scss
View File

@ -6,6 +6,16 @@ $max-width-4: 415px;
$max-width-35: 480px; $max-width-35: 480px;
//agenda.scsss 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;
@mixin xs { @mixin xs {
@media (max-width: $max-width-4) { @media (max-width: $max-width-4) {
@content; @content;

2
src/assets/scss/color.scss
View File

@ -3,4 +3,4 @@ $white: white;
$pale-grey: #f0f7fd; $pale-grey: #f0f7fd;
$dark-slate-blue: #1f4163; $dark-slate-blue: #1f4163;
$dark-sky-blue: #3d93e9; $dark-sky-blue: #3d93e9;
$slate-blue: #5f7a95; $slate-blue: #5f7a95;

4
src/assets/scss/font.scss
View File

@ -1,2 +1,4 @@
// import web font // import web font
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
$fontFamily: Noto Sans CJK TC, monospace;

40
src/assets/scss/news/agenda.scss
View File

@ -1,20 +1,6 @@
//import google font @import "../breakpoint.scss";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); @import "../color.scss";
$fontFamily-NotoSansTC: "Noto Sans TC"; @import "../font.scss";
//Color
$color-white: #ffffff;
$color-mid-blue: #226bb4;
//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;
// .info-container // .info-container
@mixin infoContainer() { @mixin infoContainer() {
@ -354,7 +340,7 @@ $max-width-small-3: 360px;
//cfp-sub-information <subInformation> //cfp-sub-information <subInformation>
.info { .info {
width: 100%; width: 100%;
font-family: $fontFamily-NotoSansTC; font-family: $fontFamily;
float: left; float: left;
&-container { &-container {
@ -377,7 +363,7 @@ $max-width-small-3: 360px;
line-height: 1.9; line-height: 1.9;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: $color-mid-blue; color: $mid-blue;
margin-block-start: 0.83em; margin-block-start: 0.83em;
margin-block-end: 0.83em; margin-block-end: 0.83em;
} }
@ -394,7 +380,7 @@ $max-width-small-3: 360px;
line-height: 2.1; line-height: 2.1;
letter-spacing: 0.2px; letter-spacing: 0.2px;
text-align: left; text-align: left;
color: $color-mid-blue; color: $mid-blue;
} }
strong { strong {
@ -414,7 +400,7 @@ $max-width-small-3: 360px;
height: 4px; height: 4px;
width: 4px; width: 4px;
transform: translate(-200%, -150%); transform: translate(-200%, -150%);
background-color: $color-mid-blue; background-color: $mid-blue;
border-radius: 50%; border-radius: 50%;
} }
} }
@ -430,7 +416,7 @@ $max-width-small-3: 360px;
line-height: 2.2; line-height: 2.2;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: $color-mid-blue; color: $mid-blue;
margin-block-start: 0.83em; margin-block-start: 0.83em;
margin-block-end: 0.83em; margin-block-end: 0.83em;
} }
@ -459,7 +445,7 @@ $max-width-small-3: 360px;
float: left; float: left;
padding: 25px 1.5% 35px 1.5%; padding: 25px 1.5% 35px 1.5%;
border-radius: 13px; border-radius: 13px;
background-color: $color-mid-blue; background-color: $mid-blue;
width: 30%; width: 30%;
&:not(:last-child) { &:not(:last-child) {
margin-right: 5%; margin-right: 5%;
@ -468,7 +454,7 @@ $max-width-small-3: 360px;
&-title { &-title {
@include kindTitleFontsize(); @include kindTitleFontsize();
width: 100%; width: 100%;
color: $color-white; color: $white;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
font-weight: 900; font-weight: 900;
@ -487,7 +473,7 @@ $max-width-small-3: 360px;
p { p {
@include kindTextFontsize(); @include kindTextFontsize();
margin: 10px auto; margin: 10px auto;
color: $color-white; color: $white;
font-weight: 500; font-weight: 500;
font-stretch: normal; font-stretch: normal;
font-style: normal; font-style: normal;
@ -512,7 +498,7 @@ $max-width-small-3: 360px;
&__itemBox { &__itemBox {
border-radius: 29px; border-radius: 29px;
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
background-color: $color-white; background-color: $white;
margin: 0 0 30px 0; margin: 0 0 30px 0;
position: relative; position: relative;
@ -537,7 +523,7 @@ $max-width-small-3: 360px;
line-height: 1.25; line-height: 1.25;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: $color-mid-blue; color: $mid-blue;
} }
span { span {
@include qaIcon(); @include qaIcon();

9
src/assets/scss/news/schedule.scss
View File

@ -1,10 +1,9 @@
@import '../breakpoint'; @import "../breakpoint";
@import '../color'; @import "../color";
@import "../font.scss";
// No need to import font; the fonts have been imported in App.vue // No need to import font; the fonts have been imported in App.vue
// @import '@/assets/scss/font'; // @import '@/assets/scss/font';
$fontFamily: Noto Sans CJK TC, monospace;
#news-schedule { #news-schedule {
max-width: 80vw; max-width: 80vw;
margin: 0 auto; margin: 0 auto;
@ -49,7 +48,7 @@ $fontFamily: Noto Sans CJK TC, monospace;
ul { ul {
li { li {
&::before { &::before {
content: '•'; content: "•";
margin: 2px; margin: 2px;
line-height: 42px; line-height: 42px;
} }