KureShisen/Hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style improvement

Browse Source
This commit is contained in:
Jimmy Cai 2020-09-03 11:42:01 +02:00
parent ddfc10a9f5
commit 4bf9d82961
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
6 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
assets/scss/partials/article.scss
View File

@ -15,15 +15,15 @@
.article-image { .article-image {
img { img {
width: 100%; width: 100%;
height: 250px; height: 200px;
object-fit: cover; object-fit: cover;
@media (max-width: $on-tablet) { @media (max-width: $on-tablet) {
height: 150px; height: 150px;
} }
@media (max-width: $on-desktop) { @media (min-width: $on-desktop-large) {
height: 200px; height: 250px;
} }
} }
} }
@ -66,7 +66,7 @@
} }
.article-title { .article-title {
font-size: 2.4rem; font-size: 2.2rem;
font-weight: 600; font-weight: 600;
margin: 10px 0; margin: 10px 0;
color: var(--card-text-color-main); color: var(--card-text-color-main);
@ -79,19 +79,24 @@
} }
} }
@media (min-width: $on-desktop-large) {
font-size: 2.4rem;
}
@media (max-width: $on-desktop) { @media (max-width: $on-desktop) {
font-size: 1.5em; font-size: 2rem;
} }
} }
.article-subtitle { .article-subtitle {
font-weight: lighter; font-weight: lighter;
font-size: 2rem; font-size: 1.8rem;
color: var(--card-text-color-secondary); color: var(--card-text-color-secondary);
margin: 5px 0; margin: 5px 0;
line-height: 1.5; line-height: 1.5;
@media (max-width: $on-desktop) {
font-size: 1.8rem; @media (min-width: $on-desktop-large) {
font-size: 2rem;
} }
} }

8
assets/scss/partials/layout/article.scss
View File

@ -46,8 +46,7 @@
img { img {
height: auto; height: auto;
width: 100%; width: 100%;
max-height: 500px; max-height: 50vh;
width: 100%;
object-fit: cover; object-fit: cover;
} }
} }
@ -235,10 +234,11 @@
hr { hr {
width: 100px; width: 100px;
margin: 40px 0; margin: 40px auto;
background: var(--card-text-color-tertiary); background: var(--card-text-color-tertiary);
height: 4px; height: 2px;
border: 0; border: 0;
opacity: 0.55;
} }
code { code {

18
assets/scss/partials/menu.scss
View File

@ -125,7 +125,11 @@
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 30px 0; margin-top: 25px;
@media (min-width: $on-desktop-large){
margin-top: 30px;
}
@media (max-width: $on-phone) { @media (max-width: $on-phone) {
background-color: var(--card-background); background-color: var(--card-background);
@ -149,10 +153,10 @@
padding: 10px 0; padding: 10px 0;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 20px; margin-bottom: 15px;
@media (max-width: $on-desktop) { @media (min-width: $on-desktop-large) {
margin-bottom: 10px; margin-bottom: 20px;
} }
} }
@ -175,9 +179,9 @@
margin-right: 40px; margin-right: 40px;
@media (max-width: $on-desktop) { @media (max-width: $on-desktop-large) {
width: 30px; width: 25px;
height: 30px; height: 25px;
} }
} }

18
assets/scss/partials/sidebar.scss
View File

@ -74,15 +74,11 @@
.site-avatar { .site-avatar {
position: relative; position: relative;
margin: 0; margin: 0;
margin-bottom: 30px; margin-bottom: 25px;
width: 150px; width: 150px;
height: 150px; height: 150px;
@media (min-width: $on-phone + 1) { @media (max-width: $on-desktop-large) {
//margin-left: auto;
}
@media (max-width: $on-desktop) {
height: 120px; height: 120px;
width: 120px; width: 120px;
} }
@ -107,7 +103,7 @@
background-color: var(--card-background); background-color: var(--card-background);
@include box_shadow(2); @include box_shadow(2);
@media (max-width: $on-desktop) { @media (max-width: $on-desktop-large) {
width: 40px; width: 40px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@ -119,6 +115,10 @@
color: var(--accent-color); color: var(--accent-color);
font-size: 2.4rem; font-size: 2.4rem;
margin: 0; margin: 0;
@media (max-width: $on-desktop-large) {
font-size: 2rem;
}
} }
.site-description { .site-description {
@ -127,8 +127,8 @@
margin: 10px 0; margin: 10px 0;
font-size: 2rem; font-size: 2rem;
@media (max-width: $on-desktop) { @media (max-width: $on-desktop-large) {
font-size: 1.8rem; font-size: 1.75rem;
} }
} }
} }

5
assets/scss/partials/widgets.scss
View File

@ -65,6 +65,11 @@
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
@include box_shadow(1); @include box_shadow(1);
display: flex; display: flex;
@media (max-width: $on-desktop-large){
padding: 12px 20px;
font-size: 1.4rem;
}
span.year { span.year {
flex: 1; flex: 1;

4
assets/scss/variables.scss
View File

@ -54,6 +54,10 @@ $on-desktop-large: 1920px;
--blockquote-border-size: 4px; --blockquote-border-size: 4px;
--heading-border-size: 4px; --heading-border-size: 4px;
@media (max-width: $on-desktop-large) {
--content-padding: 25px;
}
@media (max-width: $on-tablet) { @media (max-width: $on-tablet) {
--content-padding: 20px; --content-padding: 20px;
} }