Refactor CSS
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz
parent
80205a7117
commit
6179b05fd5
14 changed files with 661 additions and 753 deletions
|
|
@ -2,6 +2,8 @@
|
||||||
// TODO: Refactor to use bootstrap sass variable for theming.
|
// TODO: Refactor to use bootstrap sass variable for theming.
|
||||||
@import 'bootstrap/scss/bootstrap';
|
@import 'bootstrap/scss/bootstrap';
|
||||||
|
|
||||||
|
@import 'include-media/dist/_include-media';
|
||||||
|
|
||||||
// The Mulish font, we use font-weight 300 - 700
|
// The Mulish font, we use font-weight 300 - 700
|
||||||
@import '@fontsource/mulish/300';
|
@import '@fontsource/mulish/300';
|
||||||
@import '@fontsource/mulish/index'; // 400
|
@import '@fontsource/mulish/index'; // 400
|
||||||
|
|
@ -9,6 +11,8 @@
|
||||||
@import '@fontsource/mulish/600';
|
@import '@fontsource/mulish/600';
|
||||||
@import '@fontsource/mulish/700';
|
@import '@fontsource/mulish/700';
|
||||||
|
|
||||||
|
@import './variables';
|
||||||
|
|
||||||
// layouts
|
// layouts
|
||||||
@import './layouts/main';
|
@import './layouts/main';
|
||||||
@import './layouts/list';
|
@import './layouts/list';
|
||||||
|
|
@ -34,6 +38,11 @@
|
||||||
@import './sections/publications';
|
@import './sections/publications';
|
||||||
|
|
||||||
|
|
||||||
|
// components
|
||||||
|
@import './components/cards';
|
||||||
|
@import './components/buttons';
|
||||||
|
|
||||||
|
|
||||||
// override
|
// override
|
||||||
@import './override';
|
@import './override';
|
||||||
|
|
||||||
|
|
|
||||||
15
assets/styles/components/buttons.scss
Normal file
15
assets/styles/components/buttons.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
.tags {
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 0.5em;
|
||||||
|
list-style-type: none;
|
||||||
|
display: inline-block;
|
||||||
|
background: #248aaa;
|
||||||
|
margin-left: 0.1em;
|
||||||
|
margin-right: 0.1em;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #f9fafc;
|
||||||
|
}
|
||||||
|
}
|
||||||
66
assets/styles/components/cards.scss
Normal file
66
assets/styles/components/cards.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
.post-card {
|
||||||
|
width: calc(100% / 3);
|
||||||
|
display: inline-flex;
|
||||||
|
|
||||||
|
.post-card-link {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin: 5px;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: none;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
|
border: 1px solid #fff;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
|
||||||
|
.card-img-top {
|
||||||
|
transform: scale(1.2);
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-head {
|
||||||
|
height: 172px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.card-img-top {
|
||||||
|
transition: all 0.3s ease-out !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card-body {
|
||||||
|
text-align: justify;
|
||||||
|
padding: 1.25rem !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
|
||||||
|
.post-summary {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
max-height: 144px;
|
||||||
|
/* fallback */
|
||||||
|
-webkit-line-clamp: 5;
|
||||||
|
/* number of lines to show */
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card-footer {
|
||||||
|
background: #fff;
|
||||||
|
margin-top: auto;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 10pt;
|
||||||
|
color: #6c757d !important;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
// in Hugo, Page kind can be either "section" or "page".
|
// in Hugo, Page kind can be either "section" or "page".
|
||||||
// if it is section, then it's a page with a list of items, for example /posts
|
// if it is section, then it's a page with a list of items, for example /posts
|
||||||
// if it is page, then it is a single page.
|
// if it is page, then it is a single page.
|
||||||
body.kind-section, body.kind-term, body.kind-page{
|
body.kind-section,
|
||||||
|
body.kind-term,
|
||||||
|
body.kind-page {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -34,42 +36,6 @@ body.kind-section, body.kind-term, body.kind-page{
|
||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .card {
|
|
||||||
margin: 5px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .card .card-footer span {
|
|
||||||
font-size: 10pt;
|
|
||||||
color: #6c757d !important;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .card .card-footer {
|
|
||||||
background: #fff;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-summary {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
max-height: 144px;
|
|
||||||
/* fallback */
|
|
||||||
-webkit-line-clamp: 5;
|
|
||||||
/* number of lines to show */
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card-holder .post-card-link {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator {
|
.paginator {
|
||||||
width: -moz-fit-content;
|
width: -moz-fit-content;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
@ -98,22 +64,6 @@ body.kind-section, body.kind-term, body.kind-page{
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taxonomy-terms-card {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.taxonomy-terms-card li {
|
|
||||||
font-size: 0.5em;
|
|
||||||
list-style-type: none;
|
|
||||||
display: inline-block;
|
|
||||||
background: #248aaa;
|
|
||||||
margin-left: 0.1em;
|
|
||||||
margin-right: 0.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxonomy-terms-card a {
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
/* Large screens such as TV */
|
/* Large screens such as TV */
|
||||||
|
|
@ -124,9 +74,6 @@ body.kind-section, body.kind-term, body.kind-page{
|
||||||
flex: 85%;
|
flex: 85%;
|
||||||
max-width: 85%;
|
max-width: 85%;
|
||||||
}
|
}
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: calc(100% / 5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Extra large devices (large desktops, 1200px and up) */
|
/* Extra large devices (large desktops, 1200px and up) */
|
||||||
|
|
@ -135,9 +82,6 @@ body.kind-section, body.kind-term, body.kind-page{
|
||||||
.post-card-holder {
|
.post-card-holder {
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
|
|
@ -185,31 +129,6 @@ body.kind-section, body.kind-term, body.kind-page{
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all ease-out 0.3s;
|
transition: all ease-out 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card-holder .post-card {
|
|
||||||
width: calc(100% / 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-section.hide .post-card-holder .post-card {
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large devices (desktops, 992px and up) */
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.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) {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
/* Small devices (landscape phones, 576px and up) */
|
||||||
|
|
@ -246,22 +165,32 @@ body.kind-section, body.kind-term, body.kind-page{
|
||||||
transition: all ease-out 0.3s;
|
transition: all ease-out 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-card-holder .post-card {
|
}
|
||||||
|
@include media('<=small') {
|
||||||
|
.post-card {
|
||||||
margin-left: 1%;
|
margin-left: 1%;
|
||||||
margin-right: 1%;
|
margin-right: 1%;
|
||||||
width: 98%;
|
width: 98%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@include media('>=medium') {
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
.post-card {
|
||||||
@media only screen and (max-width: 375px) {
|
width: calc(100% / 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@include media('>=large') {
|
||||||
/* Galaxy S5, Moto G4 */
|
.post-card {
|
||||||
@media only screen and (max-width: 360px) {
|
width: calc(100% / 3);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@include media('>=very-large') {
|
||||||
/* iPhone 5 or before */
|
.post-card {
|
||||||
@media only screen and (max-width: 320px) {
|
width: calc(100% / 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include media('>=extra-large') {
|
||||||
|
.post-card {
|
||||||
|
width: calc(100% / 5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,500 +18,503 @@ Yellow: #FFC212
|
||||||
simpler css approach.
|
simpler css approach.
|
||||||
See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
|
||||||
*/
|
*/
|
||||||
*, html {
|
*,
|
||||||
scroll-behavior: smooth !important;
|
html {
|
||||||
}
|
scroll-behavior: smooth !important;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Fixes anchor overlapping with header.
|
Fixes anchor overlapping with header.
|
||||||
See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
|
See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
|
||||||
*/
|
*/
|
||||||
:target::before {
|
:target::before {
|
||||||
content: "";
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
height: 2em; /* fixed header height*/
|
height: 2em; /* fixed header height*/
|
||||||
margin: -2em 0 0; /* negative fixed header height */
|
margin: -2em 0 0; /* negative fixed header height */
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
font-family: 'Mulish';
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5 {
|
||||||
|
color: #1c2d41;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #1c2d41 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #3c4858;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #207089;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
color: #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark {
|
||||||
|
background-color: #3c4858 !important;
|
||||||
|
border-color: #3c4858 !important;
|
||||||
|
color: #e5e9f2 !important;
|
||||||
|
transition: all 0.3s ease-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark:hover,
|
||||||
|
.btn-dark:focus {
|
||||||
|
background-color: #248aaa !important;
|
||||||
|
border-color: #248aaa !important;
|
||||||
|
transition: all 0.3s ease-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-info {
|
||||||
|
color: #2098d1 !important;
|
||||||
|
border-color: #2098d1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-info:hover {
|
||||||
|
background-color: #2098d1 !important;
|
||||||
|
color: #e5e9f2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info {
|
||||||
|
background-color: #248aaa !important;
|
||||||
|
color: #e5e9f2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info:hover {
|
||||||
|
background-color: #2098d1 !important;
|
||||||
|
color: #e5e9f2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link {
|
||||||
|
color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link:hover {
|
||||||
|
color: #207089;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white {
|
||||||
|
background-color: #f9fafc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-dimmed {
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anchor {
|
||||||
|
padding-top: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.center {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.left {
|
||||||
|
display: block;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.right {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .card {
|
||||||
|
// box-shadow: none;
|
||||||
|
// transition: all 0.3s ease-out;
|
||||||
|
// overflow: hidden;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.card-img-sm {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img-xs {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .card:hover,
|
||||||
|
// .card:focus {
|
||||||
|
// box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
|
// border: 1px solid #fff;
|
||||||
|
// transition: all 0.3s ease-out;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .card .card-head {
|
||||||
|
// height: 172px;
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
// overflow: hidden;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .card-img-top {
|
||||||
|
// transition: all 0.3s ease-out !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .card:hover .card-head .card-img-top,
|
||||||
|
// .card:focus .card-head .card-img-top {
|
||||||
|
// transition: all 0.3s ease-out;
|
||||||
|
// transform: scale(1.2);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .card-body {
|
||||||
|
// text-align: justify;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
color: #c0ccda;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flag-icon {
|
||||||
|
width: 16px !important;
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ====== table ====== */
|
||||||
|
table {
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
background: #e5e9f2;
|
||||||
|
border: 1px solid #c0ccda;
|
||||||
|
padding: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
table tr {
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
table th,
|
||||||
|
td {
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-left: 1px solid #8392a5;
|
||||||
|
border-bottom: 1px solid #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
table thead tr {
|
||||||
|
background: #248aaa;
|
||||||
|
color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(odd) {
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:hover {
|
||||||
|
background: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ====== don't apply css to tables inside gist ====== */
|
||||||
|
.gist table {
|
||||||
|
border-radius: unset;
|
||||||
|
background: unset;
|
||||||
|
border: unset;
|
||||||
|
padding: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist table tr {
|
||||||
|
height: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist table th,
|
||||||
|
td {
|
||||||
|
padding: unset;
|
||||||
|
border-left: unset;
|
||||||
|
border-bottom: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist table thead tr {
|
||||||
|
background: unset;
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist tbody tr:nth-child(odd) {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist tbody tr:hover {
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gist table td,
|
||||||
|
.gist table tc {
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
border: 1px solid #c0ccda;
|
||||||
|
height: -moz-fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
align-self: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption,
|
||||||
|
figcaption {
|
||||||
|
caption-side: bottom;
|
||||||
|
text-align: center;
|
||||||
|
color: #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
padding: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.header-anchor {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #1c2d41;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.header-anchor i,
|
||||||
|
a.header-anchor svg {
|
||||||
|
font-size: 10pt;
|
||||||
|
color: #3c4858;
|
||||||
|
display: none;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
a.header-anchor:hover i,
|
||||||
|
a.header-anchor:hover svg {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
a.header-anchor code {
|
||||||
|
color: #e83e8c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ul > ol,
|
||||||
|
.content ol > ul,
|
||||||
|
.content ul > ul,
|
||||||
|
.content ol > ol,
|
||||||
|
.content li > ol,
|
||||||
|
.content li > ul {
|
||||||
|
-webkit-padding-start: 1rem;
|
||||||
|
padding-inline-start: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
background-color: #248aaa !important;
|
||||||
|
color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: #ffc21280;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ======= Paginator ========= */
|
||||||
|
.paginator {
|
||||||
|
width: -moz-fit-content;
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator .page-item > a {
|
||||||
|
color: #248aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator .page-item.active > a {
|
||||||
|
background-color: #248aaa;
|
||||||
|
color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- FOOTER START --- */
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
color: #8392a5 !important;
|
||||||
|
background-color: #1c2d41;
|
||||||
|
position: relative;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer h5 {
|
||||||
|
color: #c0ccda;
|
||||||
|
}
|
||||||
|
.footer a {
|
||||||
|
color: #8392a5;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover {
|
||||||
|
margin-left: 5px;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer li {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer hr {
|
||||||
|
background-color: #8392a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer p:first-child {
|
||||||
|
color: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer input {
|
||||||
|
background-color: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer input:focus {
|
||||||
|
background-color: #e5e9f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer #disclaimer {
|
||||||
|
color: #8392a5 !important;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.footer #disclaimer > strong {
|
||||||
|
color: #c0ccda !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer #theme {
|
||||||
|
color: #c0ccda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer #theme img {
|
||||||
|
width: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer #hugo:hover {
|
||||||
|
margin-right: 5px;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- FOOTER END ---- */
|
||||||
|
|
||||||
|
/* ============= 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) {
|
||||||
|
.content-section .languageSelector {
|
||||||
|
position: fixed;
|
||||||
|
right: 0.5rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
z-index: 10000000;
|
||||||
background-color: #f9fafc;
|
background-color: #f9fafc;
|
||||||
font-family: "Mulish";
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
color: #1c2d41;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: #1c2d41 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #3c4858;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #207089;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button {
|
|
||||||
background-color: transparent;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
color: #8392a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-dark {
|
|
||||||
background-color: #3c4858!important;
|
|
||||||
border-color: #3c4858!important;
|
|
||||||
color: #e5e9f2!important;
|
|
||||||
transition: all 0.3s ease-out!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-dark:hover,
|
|
||||||
.btn-dark:focus {
|
|
||||||
background-color: #248aaa!important;
|
|
||||||
border-color: #248aaa!important;
|
|
||||||
transition: all 0.3s ease-out!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-info {
|
|
||||||
color: #2098d1 !important;
|
|
||||||
border-color: #2098d1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-info:hover {
|
|
||||||
background-color: #2098d1 !important;
|
|
||||||
color: #e5e9f2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-info {
|
|
||||||
background-color: #248aaa !important;
|
|
||||||
color: #e5e9f2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-info:hover {
|
|
||||||
background-color: #2098d1 !important;
|
|
||||||
color: #e5e9f2 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-link {
|
|
||||||
color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-link:hover {
|
|
||||||
color: #207089;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-white {
|
|
||||||
background-color: #f9fafc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-dimmed {
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anchor {
|
|
||||||
padding-top: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.center {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.left {
|
|
||||||
display: block;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.right {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
box-shadow: none;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-sm {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-xs {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover,
|
|
||||||
.card:focus {
|
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||||
border: 1px solid #fff;
|
}
|
||||||
transition: all 0.3s ease-out;
|
pre {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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) {
|
||||||
|
.skills-section .container,
|
||||||
|
.projects-section .container,
|
||||||
|
.publications-section .container {
|
||||||
|
padding-left: 0.3rem;
|
||||||
|
padding-right: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .card-head {
|
.section-holder {
|
||||||
height: 172px;
|
padding-left: 5px;
|
||||||
display: flex;
|
padding-right: 5px;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-img-top {
|
.skills-section,
|
||||||
transition: all 0.3s ease-out !important;
|
.projects-section,
|
||||||
}
|
.recent-posts-section,
|
||||||
|
.achievements-section,
|
||||||
.card:hover .card-head .card-img-top,
|
.publications-section {
|
||||||
.card:focus .card-head .card-img-top {
|
padding-left: 0;
|
||||||
transition: all 0.3s ease-out;
|
padding-right: 0;
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body {
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-title {
|
|
||||||
color: #c0ccda;
|
|
||||||
font-size: 10pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flag-icon {
|
|
||||||
width: 16px !important;
|
|
||||||
margin-top: 3px;
|
|
||||||
margin-right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====== table ====== */
|
|
||||||
table {
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
background: #e5e9f2;
|
|
||||||
border: 1px solid #c0ccda;
|
|
||||||
padding: 0.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
table tr {
|
|
||||||
height: 40px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
table th,
|
|
||||||
td {
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-left: 1px solid #8392a5;
|
|
||||||
border-bottom: 1px solid #8392a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
table thead tr {
|
|
||||||
background: #248aaa;
|
|
||||||
color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(odd) {
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:hover {
|
|
||||||
background: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====== don't apply css to tables inside gist ====== */
|
|
||||||
.gist table {
|
|
||||||
border-radius: unset;
|
|
||||||
background: unset;
|
|
||||||
border: unset;
|
|
||||||
padding: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist table tr {
|
|
||||||
height: unset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist table th,
|
|
||||||
td {
|
|
||||||
padding: unset;
|
|
||||||
border-left: unset;
|
|
||||||
border-bottom: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist table thead tr {
|
|
||||||
background: unset;
|
|
||||||
color: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist tbody tr:nth-child(odd) {
|
|
||||||
background-color: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist tbody tr:hover {
|
|
||||||
background: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gist table td, .gist table tc{
|
|
||||||
border-right: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
border: 1px solid #c0ccda;
|
|
||||||
height: -moz-fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
align-self: center;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption,
|
|
||||||
figcaption {
|
|
||||||
caption-side: bottom;
|
|
||||||
text-align: center;
|
|
||||||
color: #8392a5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
margin: 5px;
|
margin: 0px;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre > code {
|
h1 {
|
||||||
padding: 10px !important;
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a.header-anchor {
|
/* iPhoneX, iPhone 6,7,8 */
|
||||||
text-decoration: none;
|
@media only screen and (max-width: 375px) {
|
||||||
color: #1c2d41;
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a.header-anchor i, a.header-anchor svg {
|
/* Galaxy S5, Moto G4 */
|
||||||
font-size: 10pt;
|
@media only screen and (max-width: 360px) {
|
||||||
color: #3c4858;
|
h1 {
|
||||||
display: none;
|
font-size: 1.8rem;
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
}
|
||||||
a.header-anchor:hover i, a.header-anchor:hover svg {
|
}
|
||||||
display: inline-block;
|
|
||||||
|
/* iPhone 5 or before */
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
a.header-anchor code {
|
}
|
||||||
color: #e83e8c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content ul > ol,
|
|
||||||
.content ol > ul,
|
|
||||||
.content ul > ul,
|
|
||||||
.content ol > ol,
|
|
||||||
.content li > ol,
|
|
||||||
.content li > ul {
|
|
||||||
-webkit-padding-start: 1rem;
|
|
||||||
padding-inline-start: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
background-color: #248aaa !important;
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background-color: #ffc21280;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ======= Paginator ========= */
|
|
||||||
.paginator {
|
|
||||||
width: -moz-fit-content;
|
|
||||||
width: fit-content;
|
|
||||||
margin: auto;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator .page-item > a {
|
|
||||||
color: #248aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paginator .page-item.active > a {
|
|
||||||
background-color: #248aaa;
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- FOOTER START --- */
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
color: #8392a5 !important;
|
|
||||||
background-color: #1c2d41;
|
|
||||||
position: relative;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer h5 {
|
|
||||||
color: #c0ccda;
|
|
||||||
}
|
|
||||||
.footer a {
|
|
||||||
color: #8392a5;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a:hover {
|
|
||||||
margin-left: 5px;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer ul {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer li {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer hr {
|
|
||||||
background-color: #8392a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer p:first-child {
|
|
||||||
color: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer input {
|
|
||||||
background-color: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer input:focus {
|
|
||||||
background-color: #e5e9f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer #disclaimer{
|
|
||||||
color: #8392a5 !important;
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
.footer #disclaimer>strong{
|
|
||||||
color: #c0ccda!important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer #theme {
|
|
||||||
color: #c0ccda;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer #theme img {
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer #hugo:hover {
|
|
||||||
margin-right: 5px;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- FOOTER END ---- */
|
|
||||||
|
|
||||||
/* ============= 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) {
|
|
||||||
.content-section .languageSelector {
|
|
||||||
position: fixed;
|
|
||||||
right: 0.5rem;
|
|
||||||
bottom: 1rem;
|
|
||||||
z-index: 10000000;
|
|
||||||
background-color: #f9fafc;
|
|
||||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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) {
|
|
||||||
.skills-section .container,
|
|
||||||
.projects-section .container,
|
|
||||||
.publications-section .container {
|
|
||||||
padding-left: 0.3rem;
|
|
||||||
padding-right: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-holder {
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills-section,
|
|
||||||
.projects-section,
|
|
||||||
.recent-posts-section,
|
|
||||||
.achievements-section,
|
|
||||||
.publications-section {
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -299,21 +299,9 @@ body.kind-page {
|
||||||
#scroll-to-top.show {
|
#scroll-to-top.show {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
.taxonomy-terms {
|
.tags {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.taxonomy-terms li {
|
|
||||||
font-size: 0.8em;
|
|
||||||
list-style-type: none;
|
|
||||||
display: inline-block;
|
|
||||||
background: #248aaa;
|
|
||||||
margin-left: 0.2em;
|
|
||||||
margin-right: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxonomy-terms a {
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= Device specific fixes ======= */
|
/* ============= Device specific fixes ======= */
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,109 +3,33 @@
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 > span{
|
h1 > span {
|
||||||
margin-top: -55px; /* Size of fixed header */
|
margin-top: -55px; /* Size of fixed header */
|
||||||
padding-bottom:55px;
|
padding-bottom: 55px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@include media('<=small') {
|
||||||
.card {
|
.post-card {
|
||||||
height: 100%;
|
margin-left: 1%;
|
||||||
min-height: 100%;
|
margin-right: 1%;
|
||||||
|
width: 98%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@include media('<=medium') {
|
||||||
.card .card-footer span {
|
|
||||||
font-size: 10pt;
|
|
||||||
color: #6c757d !important;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card .card-footer {
|
|
||||||
background: #fff;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxonomy-terms {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.taxonomy-terms li {
|
|
||||||
font-size: 0.5em;
|
|
||||||
list-style-type: none;
|
|
||||||
display: inline-block;
|
|
||||||
background: #248aaa;
|
|
||||||
margin-left: 0.2em;
|
|
||||||
margin-right: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.taxonomy-terms a {
|
|
||||||
color: #f9fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============= 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) {
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
.post-card {
|
.post-card {
|
||||||
width: 50%;
|
width: calc(100% / 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@include media('<=large') {
|
||||||
/* Small devices (landscape phones, 576px and up) */
|
|
||||||
|
|
||||||
@media only screen and (max-width: 576px) {
|
|
||||||
.post-card {
|
.post-card {
|
||||||
width: 100%;
|
width: calc(100% / 3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@include media('<=very-large') {
|
||||||
/* iPhoneX, iPhone 6,7,8 */
|
|
||||||
@media only screen and (max-width: 375px) {
|
|
||||||
}
|
}
|
||||||
|
@include media('<=extra-large') {
|
||||||
/* Galaxy S5, Moto G4 */
|
|
||||||
@media only screen and (max-width: 360px) {
|
|
||||||
}
|
|
||||||
|
|
||||||
/* iPhone 5 or before */
|
|
||||||
@media only screen and (max-width: 320px) {
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
8
assets/styles/variables.scss
Normal file
8
assets/styles/variables.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
$breakpoints: (
|
||||||
|
small: 640px,
|
||||||
|
medium: 768px,
|
||||||
|
large: 1024px,
|
||||||
|
very-large: 1280px,
|
||||||
|
extra-large: 1536px,
|
||||||
|
ultra-large: 2560px,
|
||||||
|
);
|
||||||
|
|
@ -46,14 +46,7 @@
|
||||||
<h1>{{ .Page.Title }}</h1>
|
<h1>{{ .Page.Title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
{{ if site.Params.features.tags.enable }}
|
{{ if site.Params.features.tags.enable }}
|
||||||
<div class="taxonomy-terms">
|
{{partial "misc/tags.html" .Params.tags }}
|
||||||
<ul style="padding-left: 0;">
|
|
||||||
{{ range .Params.tags }}
|
|
||||||
{{ $url:= printf "tags/%s/" . }}
|
|
||||||
<li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<div class="post-content" id="post-content">
|
<div class="post-content" id="post-content">
|
||||||
{{ .Page.Content }}
|
{{ .Page.Content }}
|
||||||
|
|
|
||||||
|
|
@ -7,18 +7,11 @@
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5 class="card-title">{{ .Title }}</h5>
|
<h5 class="card-title">{{ .Title }}</h5>
|
||||||
<p class="card-text post-summary">{{ .Summary }}</p>
|
<p class="card-text post-summary">{{ .Summary }}</p>
|
||||||
|
{{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
|
||||||
|
{{ partial "misc/tags.html" .Params.tags }}
|
||||||
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<div class="card-footer">
|
||||||
{{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
|
|
||||||
<div class="taxonomy-terms-card">
|
|
||||||
<ul style="padding-left: 0;">
|
|
||||||
{{ range .Params.tags }}
|
|
||||||
{{ $url:= printf "tags/%s/" . }}
|
|
||||||
<li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
<span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
|
<span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
|
||||||
<a
|
<a
|
||||||
href="{{ .RelPermalink | relLangURL }}"
|
href="{{ .RelPermalink | relLangURL }}"
|
||||||
|
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<div class="col-lg-4 col-md-6 pt-2 post-card">
|
|
||||||
<a href="{{ .RelPermalink }}" title="{{ .Title }}" class="post-card-link">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-head">
|
|
||||||
<img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'
|
|
||||||
alt="Card image cap"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title">{{ .Title }}</h5>
|
|
||||||
<p class="card-text post-summary"> {{ .Summary }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer">
|
|
||||||
{{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
|
|
||||||
<div class="taxonomy-terms">
|
|
||||||
<ul style="padding-left: 0;">
|
|
||||||
{{ range .Params.tags }}
|
|
||||||
{{ $url:= printf "tags/%s/" . }}
|
|
||||||
<li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
|
|
||||||
{{ end }}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
<span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
|
|
||||||
<a href="{{ .RelPermalink }}" title="{{ i18n "read" }}" class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
8
layouts/partials/misc/tags.html
Normal file
8
layouts/partials/misc/tags.html
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<div class="tags">
|
||||||
|
<ul style="padding-left: 0;">
|
||||||
|
{{ range . }}
|
||||||
|
{{ $url:= printf "tags/%s/" . }}
|
||||||
|
<li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row" id="recent-post-cards">
|
<div class="row" id="recent-post-cards">
|
||||||
{{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }}
|
{{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }}
|
||||||
{{ partial "cards/recent-post.html" . }}
|
{{ partial "cards/post.html" . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,7 @@
|
||||||
"mark.js": "^8.11.1",
|
"mark.js": "^8.11.1",
|
||||||
"mermaid": "^9.2.1",
|
"mermaid": "^9.2.1",
|
||||||
"plyr": "^3.7.2",
|
"plyr": "^3.7.2",
|
||||||
"popper.js": "^1.16.1"
|
"popper.js": "^1.16.1",
|
||||||
|
"include-media": "^1.4.10"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue