Fix responsiveness
This commit is contained in:
Emruz Hossain
parent
c48e9f71ef
commit
9b61cc5ae0
5 changed files with 56 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
z-index: 99999;
|
||||
transition: all 0.4s ease-out;
|
||||
margin: 0;
|
||||
|
|
@ -131,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 {
|
||||
|
|
|
|||
|
|
@ -23,32 +23,44 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
|
||||
// ================= Smooth Scroll ===================
|
||||
function addSmoothScroll() {
|
||||
// Add smooth scrolling to all links
|
||||
$('a[href*="#"]').on('click', function (event) {
|
||||
// ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
||||
// Select all links with hashes
|
||||
$('a[href*="#"]').click(function (event) {
|
||||
// On-page links
|
||||
if (
|
||||
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
|
||||
&&
|
||||
location.hostname == this.hostname
|
||||
) {
|
||||
// Figure out element to scroll to
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
// Does a scroll target exist?
|
||||
if (target.length) {
|
||||
// Only prevent default if animation is actually gonna happen
|
||||
event.preventDefault();
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
let offset = 60;
|
||||
if (isMobile) {
|
||||
offset = 760;
|
||||
} else if (isTablet) {
|
||||
offset = 60;
|
||||
let offset = 60;
|
||||
if (isMobile) {
|
||||
offset = 710;
|
||||
} else if (isTablet) {
|
||||
offset = 60;
|
||||
}
|
||||
$('html, body').animate({
|
||||
scrollTop: target.offset().top - offset
|
||||
}, 1000, function () {
|
||||
// Callback after animation
|
||||
// Must change focus!
|
||||
var $target = $(target);
|
||||
$target.focus();
|
||||
if ($target.is(":focus")) { // Checking if the target was focused
|
||||
return false;
|
||||
} else {
|
||||
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
|
||||
$target.focus(); // Set focus again
|
||||
};
|
||||
});
|
||||
}
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top - offset
|
||||
}, 800, function () {
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue