Remove fixed height on .top-navbar (#68)
* Remove fixed height on .top-navbar * Fix responsiveness Co-authored-by: Emruz Hossain <emruz@appscode.com>
This commit is contained in:
parent
9abf5b5796
commit
738f7d5a1b
5 changed files with 55 additions and 194 deletions
|
@ -167,6 +167,7 @@
|
|||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.post-card-holder .post-card {
|
||||
|
@ -181,45 +182,6 @@
|
|||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-card-holder .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
|
@ -232,52 +194,6 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-card-holder .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.content-section.hide .post-card-holder .post-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
@ -300,33 +216,24 @@
|
|||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.content-section.hide .content {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 20px;
|
||||
padding-left: 0px;
|
||||
transition: all ease-out 0.5s;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.post-card-holder.hide {
|
||||
margin-top: 0;
|
||||
.content-section.hide .post-card-holder {
|
||||
margin-top: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.post-card-holder .post-card {
|
||||
|
|
|
@ -44,7 +44,6 @@ body {
|
|||
overflow-y: auto;
|
||||
background-color: #f9fafc;
|
||||
margin-right: 0.5rem;
|
||||
max-height: 100vh;
|
||||
/* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
@ -246,7 +245,7 @@ a.header-anchor code {
|
|||
.content li > ol,
|
||||
.content li > ul {
|
||||
-webkit-padding-start: 1rem;
|
||||
padding-inline-start: 1rem;
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
kbd {
|
||||
|
@ -363,6 +362,7 @@ mark {
|
|||
|
||||
.toc-holder {
|
||||
top: 3rem;
|
||||
max-height: calc(100vh - 3rem);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
|
@ -403,70 +403,6 @@ mark {
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
max-width: 100%;
|
||||
order: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 3;
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
.toc-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
height: 300px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0px;
|
||||
}
|
||||
code {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.btn-improve-page {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#disqus_thread,
|
||||
.dsq-brlink {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
@ -488,7 +424,7 @@ mark {
|
|||
.toc-section {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
height: fit-content;
|
||||
max-height: 0;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
|
@ -530,9 +466,6 @@ mark {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.hero-area.hide {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
|
@ -132,6 +132,14 @@
|
|||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.top-navbar {
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
padding-bottom: 0px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.top-navbar .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
@ -196,6 +196,7 @@ a.focused {
|
|||
position: sticky;
|
||||
top: 2.5rem;
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 2.5rem);
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue