Redesign sidebar for xlarge screens.
Screen width greater than FHD.
This commit is contained in:
Cotes Chung
parent
e2e4b71f81
commit
2208b43bae
3 changed files with 157 additions and 37 deletions
|
|
@ -3,11 +3,11 @@
|
|||
# MIT Licensed
|
||||
|
||||
tabs:
|
||||
- { name: "Home" }
|
||||
- { name: "Categories", path: tabs, url: categories }
|
||||
- { name: "Tags", path: tabs, url: tags }
|
||||
- { name: "Archives", path: tabs, url: archives }
|
||||
- { name: "About", path: tabs, url: about }
|
||||
- { name: "Home", icon: 'fas fa-home' }
|
||||
- { name: "Categories", path: tabs, url: categories, icon: 'fas fa-stream' }
|
||||
- { name: "Tags", path: tabs, url: tags, icon: 'fas fa-tags' }
|
||||
- { name: "Archives", path: tabs, url: archives, icon: 'fas fa-archive'}
|
||||
- { name: "About", path: tabs, url: about, icon: 'fas fa-info'}
|
||||
|
||||
panel:
|
||||
lastmod: "Recent Update"
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
-->
|
||||
|
||||
<div id="nav-wrap">
|
||||
<div id="profile-wrap" class="d-flex justify-content-center">
|
||||
<div id="avatar">
|
||||
<div id="profile-wrap" class="d-flex flex-column">
|
||||
<div id="avatar" class="d-flex justify-content-center">
|
||||
<a href="{{ site.baseurl }}/" alt="avatar">
|
||||
{% assign avatar = site.avatar %}
|
||||
{% if avatar | slice: 0 == '/' %}
|
||||
|
|
@ -15,13 +15,16 @@
|
|||
<img src="{{ avatar }}"></img>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="site-title" class="d-flex justify-content-center align-items-center">
|
||||
<a href="{{ site.baseurl }}/">{{- site.title -}}</a>
|
||||
</div>
|
||||
<div id="site-subtitle" class="font-italic">{{ site.description }}</div>
|
||||
<ul class="nav flex-column">
|
||||
|
||||
<div class="profile-text mt-3">
|
||||
<div id="site-title">
|
||||
<a href="{{ site.baseurl }}/">{{- site.title -}}</a>
|
||||
</div>
|
||||
<div id="site-subtitle" class="font-italic">{{ site.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="nav flex-column">
|
||||
{% assign page_urls = page.url | split: "/" %}
|
||||
|
||||
{% for item in site.data.label.tabs %}
|
||||
|
|
@ -37,8 +40,9 @@
|
|||
<li class="nav-item d-flex justify-content-center
|
||||
{% if item.url == page_urls.last or
|
||||
item.name == "Home" and page.layout == "home" %}active{% endif %}">
|
||||
<a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100"><!-- <i class="{{ item.icon }}"></i> -->
|
||||
{{ item.name | upcase }}
|
||||
<a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
|
||||
<i class="fa-fw {{ item.icon }} ml-3 mr-4 hidden"></i>
|
||||
<span>{{ item.name | upcase }}</span>
|
||||
</a>
|
||||
</li> <!-- .nav-item -->
|
||||
{% endfor %}
|
||||
|
|
@ -47,9 +51,9 @@
|
|||
|
||||
</div><!-- #nav-wrap -->
|
||||
|
||||
<div class="contact d-flex justify-content-around mt-3">
|
||||
<div class="contact d-flex justify-content-around mt-4">
|
||||
<a href="https://github.com/{{ site.github.username }}" target="_blank">
|
||||
<i class="fab fa-github"></i>
|
||||
<i class="fab fa-github-alt"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/{{ site.twitter.username }}" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,8 @@ body {
|
|||
z-index: 99;
|
||||
transition: transform 0.4s ease;
|
||||
-webkit-transition: transform 0.4s ease;
|
||||
background: rgb(42, 30, 107);
|
||||
background: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
|
||||
}
|
||||
|
||||
#sidebar a {
|
||||
|
|
@ -134,11 +136,11 @@ body {
|
|||
}
|
||||
|
||||
#profile-wrap {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
#avatar>a {
|
||||
display: block;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 50%;
|
||||
|
|
@ -150,7 +152,7 @@ body {
|
|||
transition: border-color 0.35s ease-in-out;
|
||||
}
|
||||
|
||||
#avatar:hover {
|
||||
#avatar:hover>a {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -172,6 +174,10 @@ body {
|
|||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
#site-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site-title a {
|
||||
color: #b6b6b6;
|
||||
font-weight: 900;
|
||||
|
|
@ -190,7 +196,7 @@ body {
|
|||
color: #828282;
|
||||
line-height: 1.2rem;
|
||||
word-spacing: 1px;
|
||||
padding: .6rem 1.5rem 2rem 1.5rem;
|
||||
margin: .5rem 1.5rem 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar-expand {
|
||||
|
|
@ -216,7 +222,7 @@ body {
|
|||
|
||||
.contact {
|
||||
font-size: 1.2rem;
|
||||
padding: 2rem 2.5rem;
|
||||
margin: 2rem 2.5rem;
|
||||
flex-shrink: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-shrink: 0;
|
||||
|
|
@ -236,7 +242,7 @@ body {
|
|||
left: 260px; /* same as sidebar width */
|
||||
right: 0;
|
||||
transition: top 0.2s ease-in-out;
|
||||
z-index: 99;
|
||||
z-index: 50;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
|
@ -1477,8 +1483,8 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
|
||||
#site-subtitle {
|
||||
font-size: 90%;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.contact a {
|
||||
|
|
@ -1541,32 +1547,142 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
right: 4.3rem;
|
||||
}
|
||||
|
||||
#search-wrap {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
width: 15rem;
|
||||
width: 100%;
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
#search-input:focus {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (min-width: 1441px) {
|
||||
#topbar-main {
|
||||
max-width: 73%;
|
||||
@media all and (min-width: 1650px) {
|
||||
|
||||
#main-wrap {
|
||||
margin-left: 350px;
|
||||
}
|
||||
|
||||
#main>div.row .col-xl-8 {
|
||||
max-width: 60%;
|
||||
padding-left: 0px;
|
||||
padding-right: 1.5rem;
|
||||
margin-left: -4rem;
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
#main-wrap .col-xl-3 {
|
||||
max-width: 18%;
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
left: 350px;
|
||||
}
|
||||
|
||||
#topbar-main {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#search-wrap {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
#profile-wrap {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 6rem;
|
||||
-ms-flex-direction: column!important;
|
||||
flex-direction: row!important;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
#avatar>a {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.profile-text {
|
||||
margin-top: 0!important;
|
||||
/* .d-flex */
|
||||
display: -webkit-box!important;
|
||||
display: -ms-flexbox!important;
|
||||
display: flex!important;
|
||||
/* .flex-wrap */
|
||||
-ms-flex-wrap: wrap!important;
|
||||
flex-wrap: wrap!important;
|
||||
/* .align-content-center */
|
||||
-ms-flex-line-pack: center!important;
|
||||
align-content: center!important;
|
||||
}
|
||||
|
||||
#site-title a {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#site-title, #site-subtitle {
|
||||
text-align: left;
|
||||
margin-left: 1.1rem;
|
||||
}
|
||||
|
||||
#site-subtitle {
|
||||
word-spacing: 0;
|
||||
margin-top: .3rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#sidebar ul>li>a {
|
||||
padding-left: 2.5rem;
|
||||
-webkit-box-pack: start!important;
|
||||
-ms-flex-pack: start!important;
|
||||
justify-content: flex-start!important;
|
||||
}
|
||||
|
||||
#sidebar .nav-link>span {
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
#sidebar .nav-link>i {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
width: 1.65rem;
|
||||
height: 1.65rem;
|
||||
line-height: 1rem;
|
||||
font-size: .6rem;
|
||||
padding: .5em 0 0 .1em;
|
||||
display: inline-block!important;
|
||||
}
|
||||
|
||||
.contact {
|
||||
margin-left: 2.5rem;
|
||||
margin-right: 4.5rem;
|
||||
font-size: 1.3rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contact a {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 1rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact a>i {
|
||||
text-align: center;
|
||||
width: 1.25em;
|
||||
padding-top: .45rem;
|
||||
}
|
||||
|
||||
footer>div.d-flex {
|
||||
width: 70%;
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue