feat(style): improve typography styles

This commit is contained in:
Jimmy Cai 2020-09-03 23:32:28 +02:00
parent 488f124b43
commit bbe7e4b73d
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
6 changed files with 24 additions and 28 deletions

View File

@ -66,7 +66,7 @@
} }
.article-title { .article-title {
font-size: 2.2rem; font-size: 2.4rem;
font-weight: 600; font-weight: 600;
margin: 10px 0; margin: 10px 0;
color: var(--card-text-color-main); color: var(--card-text-color-main);
@ -86,10 +86,14 @@
@media (max-width: $on-desktop) { @media (max-width: $on-desktop) {
font-size: 2rem; font-size: 2rem;
} }
& + .article-subtitle {
margin-top: 0;
}
} }
.article-subtitle { .article-subtitle {
font-weight: lighter; font-weight: normal;
font-size: 1.8rem; font-size: 1.8rem;
color: var(--card-text-color-secondary); color: var(--card-text-color-secondary);
margin: 5px 0; margin: 5px 0;
@ -98,6 +102,10 @@
@media (min-width: $on-desktop-large) { @media (min-width: $on-desktop-large) {
font-size: 2rem; font-size: 2rem;
} }
@media (max-width: $on-desktop) {
font-size: 1.6rem;
}
} }
.article-time { .article-time {

View File

@ -4,7 +4,7 @@
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 500; font-weight: bold;
a { a {
color: var(--body-text-color); color: var(--body-text-color);

View File

@ -1,7 +1,7 @@
.taxonomy-type { .taxonomy-type {
text-transform: uppercase; text-transform: uppercase;
color: var(--body-text-color); color: var(--body-text-color);
font-weight: 500; font-weight: bold;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 1.6rem; font-size: 1.6rem;
} }
@ -51,7 +51,7 @@
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
font-size: 1.4rem; font-size: 1.4rem;
margin: 0; margin: 0;
font-weight: 500; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
} }
} }

View File

@ -127,7 +127,7 @@
flex-direction: column; flex-direction: column;
margin-top: 25px; margin-top: 25px;
@media (min-width: $on-desktop-large){ @media (min-width: $on-desktop-large) {
margin-top: 30px; margin-top: 30px;
} }
@ -173,16 +173,10 @@
} }
svg { svg {
width: 32px; width: 25px;
height: 32px; height: 25px;
stroke-width: 1.33; stroke-width: 1.33;
margin-right: 40px; margin-right: 40px;
@media (max-width: $on-desktop-large) {
width: 25px;
height: 25px;
}
} }
a { a {
@ -190,9 +184,10 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--body-text-color); color: var(--body-text-color);
font-size: 1.5rem;
@media (max-width: $on-desktop) { @media (max-width: $on-desktop) {
font-size: 1.5rem; font-size: 1.4rem;
} }
} }

View File

@ -23,17 +23,10 @@
} }
@media (min-width: $on-phone + 1) { @media (min-width: $on-phone + 1) {
//justify-content: right;
//text-align: right;
width: 25%; width: 25%;
margin-right: 1%; margin-right: 1%;
} }
@media (min-width: $on-tablet) {
width: 25%;
margin-right: 1%;
}
@media (min-width: $on-desktop) { @media (min-width: $on-desktop) {
width: 20%; width: 20%;
} }
@ -123,12 +116,12 @@
.site-description { .site-description {
color: var(--body-text-color); color: var(--body-text-color);
font-weight: lighter; font-weight: normal;
margin: 10px 0; margin: 10px 0;
font-size: 2rem; font-size: 1.8rem;
@media (max-width: $on-desktop-large) { @media (max-width: $on-desktop-large) {
font-size: 1.75rem; font-size: 1.6rem;
} }
} }
} }

View File

@ -2,7 +2,7 @@
.widget-title { .widget-title {
text-transform: uppercase; text-transform: uppercase;
color: var(--body-text-color); color: var(--body-text-color);
font-weight: normal; font-weight: bold;
margin: 0; margin: 0;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.6rem; font-size: 1.6rem;
@ -12,7 +12,7 @@
svg { svg {
width: 32px; width: 32px;
height: 32px; height: 32px;
stroke-width: 1.33px; stroke-width: 1.6;
color: var(--body-text-color); color: var(--body-text-color);
} }
} }