f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

feat(ui): new design footer content layout

Browse Source
This commit is contained in:
Cotes Chung
2023-04-02 12:10:08 +08:00
parent 83f1c34f92
commit 3210c59466
22 changed files with 76 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
_sass/addon/commons.scss
View File

@@ -194,10 +194,7 @@ footer {
line-height: 1.2rem;
padding-bottom: 1rem;
border-top: 1px solid var(--main-border-color);
> div {
width: 350px;
}
flex-wrap: wrap;
}
a {
@@ -213,8 +210,10 @@ footer {
}
}
.footer-right {
text-align: right;
p {
width: 100%;
text-align: center;
margin-bottom: 0;
}
}
@@ -1185,7 +1184,7 @@ $btn-mb: 0.5rem;
#main-wrapper {
background-color: var(--main-bg);
position: relative;
min-height: calc(100vh - #{$footer-height});
min-height: calc(100vh - $footer-height-mobile);
@include pl-pr(0);
}
@@ -1294,22 +1293,6 @@ $btn-mb: 0.5rem;
*/
@media all and (max-width: 576px) {
footer {
height: $footer-height-mobile;
div.d-flex {
padding: 1.5rem 0;
line-height: 1.65;
flex-wrap: wrap;
justify-content: space-around !important;
}
.footer-left,
.footer-right {
text-align: center;
}
}
#main-wrapper {
min-height: calc(100vh - #{$footer-height-mobile});
}
@@ -1369,6 +1352,14 @@ $btn-mb: 0.5rem;
footer {
@include slide;
height: $footer-height-mobile;
div.d-flex {
padding: 1.5rem 0;
line-height: 1.65;
flex-wrap: wrap;
}
}
[#{$sidebar-display}] {
@@ -1470,6 +1461,23 @@ $btn-mb: 0.5rem;
margin-left: $sidebar-width;
}
#main-wrapper {
min-height: calc(100vh - $footer-height);
}
footer {
p {
width: auto;
&:last-child {
&::before {
content: '-';
margin: 0 0.75rem;
opacity: 0.8;
}
}
}
}
#sidebar {
.profile-wrapper {
margin-top: 3rem;

2
_sass/addon/variables.scss
View File

@@ -12,7 +12,7 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
$topbar-height: 3rem !default;
$search-max-width: 210px !default;
$footer-height: 5rem !default;
$footer-height-mobile: 6rem !default; /* screen width: <= 576px */
$footer-height-mobile: 6rem !default; /* screen width: < 850px */
$main-content-max-width: 1250px !default;
$bottom-min-height: 35rem !default;
$base-radius: 0.5rem;