[Style] Unify colors

This commit is contained in:
hyperbola 2021-01-19 18:46:47 +08:00
parent 61338668da
commit cf103b70f5
No known key found for this signature in database
GPG Key ID: D987B1D59478B51F
2 changed files with 22 additions and 15 deletions

View File

@ -1,16 +1,19 @@
@import '../color.scss';
$fontColor: #226bb4; // added to solve unnamed color error
// 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
$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;
// 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";
@ -41,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 {
@ -55,7 +58,7 @@ $limitWidth: 80vw;
line-height: 2.1;
letter-spacing: 0.2px;
text-align: left;
color: $color-mid-blue;
color: $mid-blue;
}
strong {
@ -75,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%;
}
}
@ -93,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;
}
}
@ -113,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%;
@ -141,7 +144,7 @@ $limitWidth: 80vw;
font-size: 19px;
P {
color: $color-white;
color: $white;
font-family: $fontFamily-NotoSansTC;
margin: 15px 0;
}
@ -220,7 +223,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;

View File

@ -1,2 +1,6 @@
$mid-blue: #226bb4;
$white: white;
$pale-grey: #f0f7fd;
$dark-slate-blue: #1f4163;
$dark-sky-blue: #3d93e9;
$slate-blue: #5f7a95;