Refactor sidebar logic + Add Table of Contents in reading page (#33)
* Refactor sidebar logic + fix responsiveness * Add TOC * Add Pagination * Update exampleSite * Update README.md
This commit is contained in:
Md. Emruz Hossain
GitHub
parent
647578e88b
commit
fa4d474974
59 changed files with 1735 additions and 679 deletions
|
|
@ -25,9 +25,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -41,6 +41,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -75,3 +79,15 @@
|
|||
left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,193 +3,50 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 400px;
|
||||
background: #f9fafc;
|
||||
min-height: 100vh;
|
||||
overflow: auto;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
width: 0;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
z-index: -1001;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
width: 250px;
|
||||
height: 35px;
|
||||
padding-left: 15px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #e5e9f2;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
border: 1px solid #c0ccda;
|
||||
}
|
||||
|
||||
#search-box:focus {
|
||||
border: 1pt solid #248aaa;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 2rem;
|
||||
margin-top: 2.5rem;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#list-heading {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.tree,
|
||||
.tree ul {
|
||||
margin: 0;
|
||||
.content-section {
|
||||
flex: 80%;
|
||||
order: 2;
|
||||
/* background-color: lightseagreen; */
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
margin-left: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree ul ul {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.tree ul:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -3px;
|
||||
bottom: 16px;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.subtree {
|
||||
padding-left: 0.7rem;
|
||||
}
|
||||
|
||||
.subtree:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 6.5rem;
|
||||
left: 0.5rem;
|
||||
bottom: 16px;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.tree li {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
line-height: 2em;
|
||||
color: #3c4858;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subtree li:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 0;
|
||||
border-top: 1px solid;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.subtree li:last-child:before {
|
||||
background: #f9fafc;
|
||||
height: auto;
|
||||
top: 1em;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tree li a {
|
||||
text-decoration: none;
|
||||
color: #131313;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
.tree li a:hover {
|
||||
margin-left: 3px;
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tree i {
|
||||
color: #3c4858;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tree .shift-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tree .expand,
|
||||
.tree .expand > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a.focused {
|
||||
color: #2098d1 !important;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
background: #e5e9f2;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-top: 2rem;
|
||||
min-height: 130vh;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 30px;
|
||||
width: 100%;
|
||||
padding-left: 28px;
|
||||
padding-bottom: 20px;
|
||||
.post-card-holder {
|
||||
margin-top: 32px;
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
margin: 32px;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 3);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
width: 23rem !important;
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
.post-card-holder .card {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-cards .card .card-footer span {
|
||||
.post-card-holder .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.post-cards .card .card-footer {
|
||||
.post-card-holder .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -205,20 +62,20 @@ a.focused {
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.post-cards .post-card-link{
|
||||
.post-card-holder .post-card-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content-cards .paginator{
|
||||
.content-cards .paginator {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content-cards .paginator .page-item>a{
|
||||
.content-cards .paginator .page-item > a {
|
||||
color: #248aaa;
|
||||
}
|
||||
|
||||
.content-cards .paginator .page-item.active>a{
|
||||
.content-cards .paginator .page-item.active > a {
|
||||
background-color: #248aaa;
|
||||
color: #f9fafc;
|
||||
}
|
||||
|
|
@ -227,60 +84,70 @@ a.focused {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/*-------------- Media Queries ---------- */
|
||||
.pagination {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.sidebar-tree {
|
||||
margin-left: 1rem;
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.content-section {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
flex: 85%;
|
||||
}
|
||||
.content-cards {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.post-cards {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.post-cards .filtr-item {
|
||||
width: 22rem !important;
|
||||
padding: 3px;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 5);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.content {
|
||||
width: 100vw;
|
||||
padding-left: 15px;
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.content-cards {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.content.overley {
|
||||
width: 60vw;
|
||||
padding-left: 3px;
|
||||
.post-card-holder {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.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;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar nav {
|
||||
display: none;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: -20rem;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.sidebar.hide .sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
transition: all 0.3s ease-out;
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
|
|
@ -289,85 +156,153 @@ a.focused {
|
|||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 32px;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
margin: 10px;
|
||||
width: 47vw !important;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
max-width: 47vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .filtr-item {
|
||||
margin: 10px;
|
||||
width: 55vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .card {
|
||||
max-width: 55vw !important;
|
||||
.content-section.hide .post-card-holder .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
}
|
||||
|
||||
.content-section.hide .post-card-holder .post-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.wrapper {
|
||||
display: block;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
flex-flow: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-section {
|
||||
flex: 100%;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
width: 85vw;
|
||||
height: 35px;
|
||||
padding-left: 5px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.content {
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding-left: 2vw;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.content.overley {
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
padding-left: 2vw;
|
||||
.content-section.hide .content {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
width: 100vw;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar.hide .sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
|
|
@ -377,41 +312,34 @@ a.focused {
|
|||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.content.overley .content-cards {
|
||||
padding-top: 0px;
|
||||
padding-left: 0px;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 32px;
|
||||
margin-top: 1.5rem;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.content.overley .post-cards {
|
||||
margin: 0;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
.post-card-holder.hide {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
margin: 0px;
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
max-width: 90vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .filtr-item {
|
||||
margin: 0px;
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .card {
|
||||
max-width: 95vw !important;
|
||||
.post-card-holder .post-card {
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ h5 {
|
|||
color: #1c2d41;
|
||||
}
|
||||
|
||||
strong{
|
||||
color: #1c2d41!important;
|
||||
strong {
|
||||
color: #1c2d41 !important;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -42,6 +42,13 @@ a:hover {
|
|||
color: #207089;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
color: #8392a5;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background-color: #3c4858;
|
||||
border-color: #3c4858;
|
||||
|
|
@ -90,18 +97,18 @@ a:hover {
|
|||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
img.center{
|
||||
img.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img.left{
|
||||
img.left {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img.right{
|
||||
img.right {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -220,9 +227,9 @@ img.right{
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -232,6 +239,10 @@ img.right{
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -245,6 +256,12 @@ img.right{
|
|||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.skills-section .container,
|
||||
.projects-section .container {
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
.section-holder {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
|
@ -253,8 +270,20 @@ img.right{
|
|||
.skills-section,
|
||||
.projects-section,
|
||||
.recent-posts-section,
|
||||
.achievements-section{
|
||||
.achievements-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,9 +124,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -136,9 +136,93 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.top-navbar .container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.initial-navbar .navbar-nav .active,
|
||||
.initial-navbar li a:hover {
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.final-navbar .navbar-nav .active,
|
||||
.final-navbar li a:hover {
|
||||
color: #2098d1;
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
border-bottom: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.final-navbar li a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.final-navbar .navbar-collapse.show {
|
||||
box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid #c0ccda;
|
||||
}
|
||||
#top-navbar-divider {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.top-navbar .container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.initial-navbar .navbar-nav .active,
|
||||
.initial-navbar li a:hover {
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.final-navbar .navbar-nav .active,
|
||||
.final-navbar li a:hover {
|
||||
color: #2098d1;
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
border-bottom: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.final-navbar li a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.final-navbar .navbar-collapse.show {
|
||||
box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid #c0ccda;
|
||||
}
|
||||
#top-navbar-divider {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
|
@ -189,4 +273,19 @@
|
|||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.final-navbar {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
315
static/assets/css/navigators/sidebar.css
Normal file
315
static/assets/css/navigators/sidebar.css
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
.sidebar-section {
|
||||
order: 1;
|
||||
flex: 20%;
|
||||
max-width: 20%;
|
||||
/* background-color: lightsalmon; */
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-holder {
|
||||
top: 2.5rem;
|
||||
position: sticky;
|
||||
background-color: #f9fafc;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: #f9fafc;
|
||||
height: 100vh;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
width: -webkit-fill-available;
|
||||
height: 35px;
|
||||
padding-left: 15px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #e5e9f2;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
border: 1px solid #c0ccda;
|
||||
}
|
||||
|
||||
#search-box:focus {
|
||||
border: 1pt solid #248aaa;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#list-heading {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.tree,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tree li {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
line-height: 2em;
|
||||
color: #3c4858;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree li a {
|
||||
text-decoration: none;
|
||||
color: #131313;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tree li a.active {
|
||||
display: inline;
|
||||
color: #2098d1;
|
||||
}
|
||||
|
||||
.tree li a:hover {
|
||||
margin-left: 3px;
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tree i {
|
||||
color: #3c4858;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tree .shift-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.tree .active,
|
||||
.tree .active > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subtree {
|
||||
padding-left: 0.7rem;
|
||||
}
|
||||
|
||||
.subtree:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
left: 1.5rem;
|
||||
bottom: 0.9rem;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.subtree ul,
|
||||
ul > ul {
|
||||
position: relative;
|
||||
padding-left: 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subtree ul:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0.3rem;
|
||||
bottom: 0.9rem;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.subtree li:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 0;
|
||||
border-top: 1px solid;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.subtree li:last-child:before {
|
||||
background: #f9fafc;
|
||||
height: auto;
|
||||
top: 1.1rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a.focused {
|
||||
color: #2098d1 !important;
|
||||
}
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.sidebar-section {
|
||||
flex: 15%;
|
||||
max-width: 15%;
|
||||
}
|
||||
.sidebar-holder {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.sidebar-holder {
|
||||
max-width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.sidebar-tree {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar-section {
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
min-height: 100vh;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.sidebar-holder {
|
||||
position: sticky;
|
||||
top: 2.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
flex: 30%;
|
||||
max-width: 30%;
|
||||
margin-right: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.sidebar-section {
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
min-height: 100vh;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.sidebar-holder {
|
||||
position: sticky;
|
||||
top: 2.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-right: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.sidebar-section {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
max-height: 0;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
flex: none;
|
||||
max-height: 300vh;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-holder {
|
||||
max-height: 0;
|
||||
height: fit-content;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-section.hide .sidebar-holder {
|
||||
max-height: 200vh;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
max-height: fit-content;
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 0rem;
|
||||
max-height: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
}
|
||||
.sidebar-section.hide .sidebar-tree {
|
||||
max-height: 200vh;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
.projects-section .card .card-header {
|
||||
background-color: #f9fafc;
|
||||
padding: 0.7rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-img-xs {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.card .card-header .sub-title span:nth-child(1) {
|
||||
float: left;
|
||||
}
|
||||
.card .card-header .sub-title span:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.projects-section .card .card-body {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-header .sub-title {
|
||||
color: #8392a5;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.filtr-projects {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.projects-section .btn {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.recent-posts-section .container{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.recent-posts-section .post-card-link{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
/* line-height: 24px; fallback */
|
||||
max-height: 144px; /* fallback */
|
||||
-webkit-line-clamp: 5; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
|
@ -347,9 +347,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -359,6 +359,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -367,9 +371,24 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.about-section.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
@ -126,9 +126,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -138,6 +138,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -146,6 +150,13 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.achievements-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.achievements-section .col-md-6 {
|
||||
flex: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
|
@ -155,3 +166,15 @@
|
|||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
color: #3c4858;
|
||||
}
|
||||
|
||||
.experiences-section .designation{
|
||||
font-weight: 600;
|
||||
.experiences-section .designation {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.circle {
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -103,6 +103,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -111,6 +115,9 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.experiences-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
|
@ -118,14 +125,13 @@
|
|||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
.top-left {
|
||||
left: -52%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 52%;
|
||||
top: -50%;
|
||||
|
|
@ -138,7 +144,7 @@
|
|||
left: -56%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 56%;
|
||||
top: -50%;
|
||||
|
|
@ -151,7 +157,7 @@
|
|||
left: -64%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 64%;
|
||||
top: -50%;
|
||||
|
|
@ -75,9 +75,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -87,6 +87,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -116,3 +120,15 @@
|
|||
font-size: 24pt;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
113
static/assets/css/sections/projects.css
Normal file
113
static/assets/css/sections/projects.css
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
.projects-section .card .card-header {
|
||||
background-color: #f9fafc;
|
||||
padding: 0.7rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-img-xs {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.card .card-header .sub-title span:nth-child(1) {
|
||||
float: left;
|
||||
}
|
||||
.card .card-header .sub-title span:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.projects-section .card .card-body {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-header .sub-title {
|
||||
color: #8392a5;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.filtr-projects {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.projects-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.projects-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.projects-section .filtr-projects {
|
||||
padding: 0;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.projects-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.projects-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.projects-section .filtr-projects {
|
||||
padding: 0;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.2rem;
|
||||
flex: 50%;
|
||||
max-width: calc(100% / 2 - 0.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.projects-section .btn {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
82
static/assets/css/sections/recent-posts.css
Normal file
82
static/assets/css/sections/recent-posts.css
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
.recent-posts-section .container {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.recent-posts-section .post-card-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-summary {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
/* line-height: 24px; fallback */
|
||||
max-height: 144px; /* fallback */
|
||||
-webkit-line-clamp: 5; /* number of lines to show */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.recent-posts-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.recent-posts-section .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.recent-posts-section .post-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -34,6 +34,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -42,9 +46,28 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.skills-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.skills-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
@ -1,12 +1,93 @@
|
|||
body {
|
||||
background-color: #e5e9f2;
|
||||
position: relative;
|
||||
}
|
||||
.read-area {
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
/* background-color: lightseagreen; */
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.content {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.toc-section {
|
||||
flex: 20%;
|
||||
order: 3;
|
||||
max-width: 20%;
|
||||
/* background-color: lightpink; */
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
position: sticky;
|
||||
top: 4.5rem;
|
||||
overflow-x: hidden;
|
||||
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;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: relative;
|
||||
padding-top: 0px;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc nav {
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
padding-left: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc .nav-link {
|
||||
padding: 0;
|
||||
padding-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
color: #1c2d41;
|
||||
}
|
||||
|
||||
.toc .nav-link:hover,
|
||||
.toc .nav-link:focus,
|
||||
.toc .nav-link.active {
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.5rem;
|
||||
background-color: #248aaa;
|
||||
color: #f9f9f9;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
|
|
@ -132,25 +213,25 @@ pre {
|
|||
margin: 5px;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
pre > code {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
a.header-anchor{
|
||||
a.header-anchor {
|
||||
text-decoration: none;
|
||||
color: #1c2d41;
|
||||
}
|
||||
|
||||
a.header-anchor i{
|
||||
a.header-anchor i {
|
||||
font-size: 10pt;
|
||||
color: #3c4858;
|
||||
display: none;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
a.header-anchor:hover i{
|
||||
a.header-anchor:hover i {
|
||||
display: inline-block;
|
||||
}
|
||||
a.header-anchor code{
|
||||
a.header-anchor code {
|
||||
color: #e83e8c;
|
||||
}
|
||||
|
||||
|
|
@ -158,13 +239,13 @@ a.header-anchor code{
|
|||
display: none;
|
||||
}
|
||||
|
||||
ul > ol,
|
||||
ol > ul,
|
||||
ul > ul,
|
||||
ol > ol,
|
||||
li > ol,
|
||||
li > ul {
|
||||
padding-inline-start: 25px;
|
||||
.content ul > ol,
|
||||
.content ol > ul,
|
||||
.content ul > ul,
|
||||
.content ol > ol,
|
||||
.content li > ol,
|
||||
.content li > ul {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
kbd {
|
||||
|
|
@ -226,29 +307,239 @@ mark {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.btn-improve-page{
|
||||
.btn-improve-page {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.content-section {
|
||||
flex: 65%;
|
||||
}
|
||||
.content-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
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;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.toc-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* 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;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 3;
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.toc-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-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) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.wrapper {
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 100%;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-section.hide {
|
||||
margin-top: 2.5rem;
|
||||
position: relative;
|
||||
/* height: fit-content; */
|
||||
flex: 100%;
|
||||
height: fit-content;
|
||||
max-height: 200vh;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
max-height: 0;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
.toc-section.hide .toc-holder {
|
||||
max-height: 200vh;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
height: 200px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.hero-area.hide {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -277,3 +568,15 @@ mark {
|
|||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,46 @@
|
|||
/* Add custom css styling here to override the theme */
|
||||
|
||||
/* This is empty CSS file intended to be overwritten by user's custom CSS file */
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
}
|
||||
|
||||
/* Galaxy S5, Moto G4 */
|
||||
@media only screen and (max-width: 360px) {
|
||||
}
|
||||
|
||||
/* iPhone 5 or before */
|
||||
@media only screen and (max-width: 320px) {
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue