Optimized sidebar icons location.
screen width >= 1650px
This commit is contained in:
Cotes Chung
parent
abdf73fff4
commit
02a269910f
2 changed files with 69 additions and 72 deletions
|
|
@ -20,10 +20,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="profile-text mt-3">
|
<div class="profile-text mt-3">
|
||||||
<div id="site-title">
|
<div class="site-title">
|
||||||
<a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
|
<a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="site-subtitle" class="font-italic">{{- site.tagline -}}</div>
|
<div class="site-subtitle font-italic">{{- site.tagline -}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -77,11 +77,34 @@ $sidebar-display: "sidebar-display";
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
width: $sidebar-width-medium;
|
width: $sidebar-width-medium;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
background: rgb(42, 30, 107);
|
|
||||||
background: var(--sidebar-bg);
|
background: var(--sidebar-bg);
|
||||||
a {
|
a {
|
||||||
@include sidebar-links;
|
@include sidebar-links;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-title {
|
||||||
|
text-align: center;
|
||||||
|
a {
|
||||||
|
// color: var(--site-title-color);
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
letter-spacing: .5px;
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-subtitle {
|
||||||
|
font-size: 95%;
|
||||||
|
text-align: center;
|
||||||
|
color: #828282;
|
||||||
|
line-height: 1.2rem;
|
||||||
|
word-spacing: 1px;
|
||||||
|
margin: .5rem 1.5rem 2rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-bottom {
|
.sidebar-bottom {
|
||||||
.icon-border+a { // the icon behide mode-toggle
|
.icon-border+a { // the icon behide mode-toggle
|
||||||
margin-left: .1rem;
|
margin-left: .1rem;
|
||||||
|
|
@ -239,29 +262,6 @@ $sidebar-display: "sidebar-display";
|
||||||
}
|
}
|
||||||
} // #avatar
|
} // #avatar
|
||||||
|
|
||||||
#site-title {
|
|
||||||
text-align: center;
|
|
||||||
a {
|
|
||||||
// color: var(--site-title-color);
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
letter-spacing: .5px;
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#site-subtitle {
|
|
||||||
font-size: 95%;
|
|
||||||
text-align: center;
|
|
||||||
color: #828282;
|
|
||||||
line-height: 1.2rem;
|
|
||||||
word-spacing: 1px;
|
|
||||||
margin: .5rem 1.5rem 2rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#search-result-wrapper {
|
#search-result-wrapper {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -946,7 +946,7 @@ table {
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#site-subtitle {
|
.site-subtitle {
|
||||||
@include ml-mr(1.8rem);
|
@include ml-mr(1.8rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1188,12 +1188,12 @@ table {
|
||||||
max-width: 700px;
|
max-width: 700px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#site-title {
|
.site-title {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
margin-left: 0!important;
|
margin-left: 0!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#site-subtitle {
|
.site-subtitle {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
@include ml-mr(1rem);
|
@include ml-mr(1rem);
|
||||||
}
|
}
|
||||||
|
|
@ -1352,56 +1352,54 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
#profile-wrapper {
|
#profile-wrapper {
|
||||||
margin-top: 4rem;
|
margin: 4rem 2rem 3rem 4rem;
|
||||||
margin-bottom: 3rem;
|
|
||||||
padding-left: 18%;
|
|
||||||
-ms-flex-direction: column!important;
|
-ms-flex-direction: column!important;
|
||||||
}
|
|
||||||
|
|
||||||
#avatar {
|
#avatar {
|
||||||
-webkit-box-pack: normal !important;
|
-webkit-box-pack: normal !important;
|
||||||
-ms-flex-pack: normal !important;
|
-ms-flex-pack: normal !important;
|
||||||
justify-content: normal !important;
|
justify-content: normal !important;
|
||||||
>a {
|
>a {
|
||||||
width: 6.2rem;
|
width: 6.2rem;
|
||||||
height: 6.2rem;
|
height: 6.2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.profile-text {
|
.profile-text {
|
||||||
padding-left: .5rem;
|
margin-left: .5rem;
|
||||||
/* .d-flex */
|
/* .d-flex */
|
||||||
display: -webkit-box!important;
|
display: -webkit-box!important;
|
||||||
display: -ms-flexbox!important;
|
display: -ms-flexbox!important;
|
||||||
display: flex!important;
|
display: flex!important;
|
||||||
/* .flex-wrap */
|
/* .flex-wrap */
|
||||||
-ms-flex-wrap: wrap!important;
|
-ms-flex-wrap: wrap!important;
|
||||||
flex-wrap: wrap!important;
|
flex-wrap: wrap!important;
|
||||||
/* .align-content-center */
|
/* .align-content-center */
|
||||||
-ms-flex-line-pack: center!important;
|
-ms-flex-line-pack: center!important;
|
||||||
align-content: center!important;
|
align-content: center!important;
|
||||||
}
|
>div {
|
||||||
|
text-align: left !important;
|
||||||
#site-title a {
|
width: 100%;
|
||||||
font-size: 1.7rem;
|
}
|
||||||
letter-spacing: 1px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.profile-text>div {
|
|
||||||
text-align: left !important;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#site-subtitle {
|
|
||||||
word-spacing: 0;
|
|
||||||
padding-right: 3rem;
|
|
||||||
margin: .3rem 0 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
width: $sidebar-width-large;
|
width: $sidebar-width-large;
|
||||||
|
|
||||||
|
.site-title a {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-subtitle {
|
||||||
|
word-spacing: 0;
|
||||||
|
margin: .3rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin-left: 5%;
|
margin-left: 3%;
|
||||||
>li>a {
|
>li>a {
|
||||||
padding-left: 2.5rem;
|
padding-left: 2.5rem;
|
||||||
-webkit-box-pack: start!important;
|
-webkit-box-pack: start!important;
|
||||||
|
|
@ -1457,10 +1455,8 @@ table {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
} // .sidebar-bottom
|
} // .sidebar-bottom
|
||||||
} // #sidebar
|
} // #sidebar
|
||||||
|
|
||||||
footer>div.d-flex {
|
footer>div.d-flex {
|
||||||
width: 87%;
|
width: 87%;
|
||||||
max-width: 1140px;
|
max-width: 1140px;
|
||||||
|
|
@ -1475,6 +1471,7 @@ table {
|
||||||
|
|
||||||
} // min-width: 1650px
|
} // min-width: 1650px
|
||||||
|
|
||||||
|
|
||||||
@media all and (min-width: 1700px) {
|
@media all and (min-width: 1700px) {
|
||||||
#topbar-wrapper {
|
#topbar-wrapper {
|
||||||
padding-right: calc(100% - #{$sidebar-width-large}
|
padding-right: calc(100% - #{$sidebar-width-large}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue