troldspejlet/hugo-theme-stack
troldspejlet/hugo-theme-stack
1
0
Fork 0
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2024-11-23 10:21:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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 {
img {
width: 100%;
height: 250px;
height: 200px;
object-fit: cover;
@media (max-width: $on-tablet) {
height: 150px;
}
@media (max-width: $on-desktop) {
height: 200px;
@media (min-width: $on-desktop-large) {
height: 250px;
}
}
}
@ -66,7 +66,7 @@
}
.article-title {
font-size: 2.4rem;
font-size: 2.2rem;
font-weight: 600;
margin: 10px 0;
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) {
font-size: 1.5em;
font-size: 2rem;
}
}
.article-subtitle {
font-weight: lighter;
font-size: 2rem;
font-size: 1.8rem;
color: var(--card-text-color-secondary);
margin: 5px 0;
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 {
height: auto;
width: 100%;
max-height: 500px;
width: 100%;
max-height: 50vh;
object-fit: cover;
}
}
@ -235,10 +234,11 @@
hr {
width: 100px;
margin: 40px 0;
margin: 40px auto;
background: var(--card-text-color-tertiary);
height: 4px;
height: 2px;
border: 0;
opacity: 0.55;
}
code {

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

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

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

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

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

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

4
assets/scss/variables.scss
View file

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