FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor CSS

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2023-08-01 11:31:45 +06:00
parent 80205a7117
commit 6179b05fd5
14 changed files with 661 additions and 753 deletions
Download patch file Download diff file Expand all files Collapse all files

9
assets/styles/application.template.scss
View file

@ -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
View 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
View 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;
}
}
}
}

117
assets/styles/layouts/list.scss
View file

@ -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);
} }
/* Galaxy S5, Moto G4 */
@media only screen and (max-width: 360px) {
} }
@include media('>=large') {
/* iPhone 5 or before */ .post-card {
@media only screen and (max-width: 320px) { width: calc(100% / 3);
}
}
@include media('>=very-large') {
.post-card {
width: calc(100% / 4);
}
}
@include media('>=extra-large') {
.post-card {
width: calc(100% / 5);
}
} }
} }

461
assets/styles/layouts/main.scss
View file

@ -18,252 +18,254 @@ 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 { *,
html {
scroll-behavior: smooth !important; 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; background-color: #f9fafc;
font-family: "Mulish"; font-family: 'Mulish';
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5 { h5 {
color: #1c2d41; color: #1c2d41;
} }
strong { strong {
color: #1c2d41 !important; color: #1c2d41 !important;
} }
p { p {
color: #3c4858; color: #3c4858;
} }
a { a {
color: #248aaa; color: #248aaa;
} }
a:hover { a:hover {
color: #207089; color: #207089;
} }
.nav-button { .nav-button {
background-color: transparent; background-color: transparent;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 0.25rem; border-radius: 0.25rem;
color: #8392a5; color: #8392a5;
} }
.btn-dark { .btn-dark {
background-color: #3c4858!important; background-color: #3c4858 !important;
border-color: #3c4858!important; border-color: #3c4858 !important;
color: #e5e9f2!important; color: #e5e9f2 !important;
transition: all 0.3s ease-out!important; transition: all 0.3s ease-out !important;
} }
.btn-dark:hover, .btn-dark:hover,
.btn-dark:focus { .btn-dark:focus {
background-color: #248aaa!important; background-color: #248aaa !important;
border-color: #248aaa!important; border-color: #248aaa !important;
transition: all 0.3s ease-out!important; transition: all 0.3s ease-out !important;
} }
.btn-outline-info { .btn-outline-info {
color: #2098d1 !important; color: #2098d1 !important;
border-color: #2098d1 !important; border-color: #2098d1 !important;
} }
.btn-outline-info:hover { .btn-outline-info:hover {
background-color: #2098d1 !important; background-color: #2098d1 !important;
color: #e5e9f2 !important; color: #e5e9f2 !important;
} }
.btn-info { .btn-info {
background-color: #248aaa !important; background-color: #248aaa !important;
color: #e5e9f2 !important; color: #e5e9f2 !important;
} }
.btn-info:hover { .btn-info:hover {
background-color: #2098d1 !important; background-color: #2098d1 !important;
color: #e5e9f2 !important; color: #e5e9f2 !important;
} }
.btn-link { .btn-link {
color: #248aaa; color: #248aaa;
} }
.btn-link:hover { .btn-link:hover {
color: #207089; color: #207089;
} }
.bg-white { .bg-white {
background-color: #f9fafc !important; background-color: #f9fafc !important;
} }
.bg-dimmed { .bg-dimmed {
background-color: #e5e9f2; background-color: #e5e9f2;
} }
.anchor { .anchor {
padding-top: 3.5rem; padding-top: 3.5rem;
} }
img.center { img.center {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
img.left { img.left {
display: block; display: block;
margin-right: auto; margin-right: auto;
} }
img.right { img.right {
display: block; display: block;
margin-left: auto; margin-left: auto;
} }
.card { // .card {
box-shadow: none; // box-shadow: none;
transition: all 0.3s ease-out; // transition: all 0.3s ease-out;
overflow: hidden; // overflow: hidden;
} // }
.card-img-sm { .card-img-sm {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.card-img-xs { .card-img-xs {
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
.card:hover, // .card:hover,
.card:focus { // .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; // border: 1px solid #fff;
transition: all 0.3s ease-out; // transition: all 0.3s ease-out;
} // }
.card .card-head { // .card .card-head {
height: 172px; // height: 172px;
display: flex; // display: flex;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
overflow: hidden; // overflow: hidden;
} // }
.card-img-top { // .card-img-top {
transition: all 0.3s ease-out !important; // transition: all 0.3s ease-out !important;
} // }
.card:hover .card-head .card-img-top, // .card:hover .card-head .card-img-top,
.card:focus .card-head .card-img-top { // .card:focus .card-head .card-img-top {
transition: all 0.3s ease-out; // transition: all 0.3s ease-out;
transform: scale(1.2); // transform: scale(1.2);
} // }
.card-body { // .card-body {
text-align: justify; // text-align: justify;
} // }
.sub-title { .sub-title {
color: #c0ccda; color: #c0ccda;
font-size: 10pt; font-size: 10pt;
} }
.flag-icon { .flag-icon {
width: 16px !important; width: 16px !important;
margin-top: 3px; margin-top: 3px;
margin-right: 3px; margin-right: 3px;
} }
/* ====== table ====== */ /* ====== table ====== */
table { table {
border-radius: 0.1rem; border-radius: 0.1rem;
background: #e5e9f2; background: #e5e9f2;
border: 1px solid #c0ccda; border: 1px solid #c0ccda;
padding: 0.1rem; padding: 0.1rem;
} }
table tr { table tr {
height: 40px !important; height: 40px !important;
} }
table th, table th,
td { td {
padding: 0.5rem; padding: 0.5rem;
border-left: 1px solid #8392a5; border-left: 1px solid #8392a5;
border-bottom: 1px solid #8392a5; border-bottom: 1px solid #8392a5;
} }
table thead tr { table thead tr {
background: #248aaa; background: #248aaa;
color: #e5e9f2; color: #e5e9f2;
} }
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: #e5e9f2; background-color: #e5e9f2;
} }
tbody tr:hover { tbody tr:hover {
background: #c0ccda; background: #c0ccda;
} }
/* ====== don't apply css to tables inside gist ====== */ /* ====== don't apply css to tables inside gist ====== */
.gist table { .gist table {
border-radius: unset; border-radius: unset;
background: unset; background: unset;
border: unset; border: unset;
padding: unset; padding: unset;
} }
.gist table tr { .gist table tr {
height: unset !important; height: unset !important;
} }
.gist table th, .gist table th,
td { td {
padding: unset; padding: unset;
border-left: unset; border-left: unset;
border-bottom: unset; border-bottom: unset;
} }
.gist table thead tr { .gist table thead tr {
background: unset; background: unset;
color: unset; color: unset;
} }
.gist tbody tr:nth-child(odd) { .gist tbody tr:nth-child(odd) {
background-color: unset; background-color: unset;
} }
.gist tbody tr:hover { .gist tbody tr:hover {
background: unset; background: unset;
} }
.gist table td, .gist table tc{ .gist table td,
.gist table tc {
border-right: 1px solid #eee; border-right: 1px solid #eee;
} }
figure { figure {
border: 1px solid #c0ccda; border: 1px solid #c0ccda;
height: -moz-fit-content; height: -moz-fit-content;
height: fit-content; height: fit-content;
@ -271,167 +273,169 @@ Yellow: #FFC212
width: fit-content; width: fit-content;
align-self: center; align-self: center;
margin: auto; margin: auto;
} }
img { img {
max-width: 100%; max-width: 100%;
} }
caption, caption,
figcaption { figcaption {
caption-side: bottom; caption-side: bottom;
text-align: center; text-align: center;
color: #8392a5; color: #8392a5;
} }
pre { pre {
margin: 5px; margin: 5px;
} }
pre > code { pre > code {
padding: 10px !important; padding: 10px !important;
} }
a.header-anchor { a.header-anchor {
text-decoration: none; text-decoration: none;
color: #1c2d41; color: #1c2d41;
} }
a.header-anchor i, a.header-anchor svg { a.header-anchor i,
a.header-anchor svg {
font-size: 10pt; font-size: 10pt;
color: #3c4858; color: #3c4858;
display: none; display: none;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
a.header-anchor:hover i, a.header-anchor:hover svg { a.header-anchor:hover i,
a.header-anchor:hover svg {
display: inline-block; display: inline-block;
} }
a.header-anchor code { a.header-anchor code {
color: #e83e8c; color: #e83e8c;
} }
.content ul > ol, .content ul > ol,
.content ol > ul, .content ol > ul,
.content ul > ul, .content ul > ul,
.content ol > ol, .content ol > ol,
.content li > ol, .content li > ol,
.content li > ul { .content li > ul {
-webkit-padding-start: 1rem; -webkit-padding-start: 1rem;
padding-inline-start: 1rem; padding-inline-start: 1rem;
} }
kbd { kbd {
background-color: #248aaa !important; background-color: #248aaa !important;
color: #f9fafc; color: #f9fafc;
} }
mark { mark {
background-color: #ffc21280; background-color: #ffc21280;
} }
/* ======= Paginator ========= */ /* ======= Paginator ========= */
.paginator { .paginator {
width: -moz-fit-content; width: -moz-fit-content;
width: fit-content; width: fit-content;
margin: auto; margin: auto;
vertical-align: bottom; vertical-align: bottom;
} }
.paginator .page-item > a { .paginator .page-item > a {
color: #248aaa; color: #248aaa;
} }
.paginator .page-item.active > a { .paginator .page-item.active > a {
background-color: #248aaa; background-color: #248aaa;
color: #f9fafc; color: #f9fafc;
} }
/* --- FOOTER START --- */ /* --- FOOTER START --- */
.footer { .footer {
color: #8392a5 !important; color: #8392a5 !important;
background-color: #1c2d41; background-color: #1c2d41;
position: relative; position: relative;
z-index: 9999; z-index: 9999;
} }
.footer h5 { .footer h5 {
color: #c0ccda; color: #c0ccda;
} }
.footer a { .footer a {
color: #8392a5; color: #8392a5;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.footer a:hover { .footer a:hover {
margin-left: 5px; margin-left: 5px;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.footer ul { .footer ul {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
} }
.footer li { .footer li {
margin-top: 5px; margin-top: 5px;
} }
.footer hr { .footer hr {
background-color: #8392a5; background-color: #8392a5;
} }
.footer p:first-child { .footer p:first-child {
color: #c0ccda; color: #c0ccda;
} }
.footer input { .footer input {
background-color: #c0ccda; background-color: #c0ccda;
} }
.footer input:focus { .footer input:focus {
background-color: #e5e9f2; background-color: #e5e9f2;
} }
.footer #disclaimer{ .footer #disclaimer {
color: #8392a5 !important; color: #8392a5 !important;
text-align: justify; text-align: justify;
} }
.footer #disclaimer>strong{ .footer #disclaimer > strong {
color: #c0ccda!important; color: #c0ccda !important;
} }
.footer #theme { .footer #theme {
color: #c0ccda; color: #c0ccda;
} }
.footer #theme img { .footer #theme img {
width: 32px; width: 32px;
} }
.footer #hugo:hover { .footer #hugo:hover {
margin-right: 5px; margin-right: 5px;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
/* --- FOOTER END ---- */ /* --- FOOTER END ---- */
/* ============= Device specific fixes ======= */ /* ============= Device specific fixes ======= */
/* Large screens such as TV */ /* Large screens such as TV */
@media only screen and (min-width: 1824px) { @media only screen and (min-width: 1824px) {
} }
/* Extra large devices (large desktops, 1200px and up) */ /* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) { @media (max-width: 1400px) {
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
} }
/* IPad Pro */ /* IPad Pro */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.content-section .languageSelector { .content-section .languageSelector {
position: fixed; position: fixed;
right: 0.5rem; right: 0.5rem;
@ -446,21 +450,21 @@ Yellow: #FFC212
code { code {
padding: 0px; padding: 0px;
} }
} }
/* Large devices (desktops, 992px and up) */ /* Large devices (desktops, 992px and up) */
@media (max-width: 992px) { @media (max-width: 992px) {
} }
/* Medium devices (tablets, 768px and up) */ /* Medium devices (tablets, 768px and up) */
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
} }
/* Small devices (landscape phones, 576px and up) */ /* Small devices (landscape phones, 576px and up) */
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
.skills-section .container, .skills-section .container,
.projects-section .container, .projects-section .container,
.publications-section .container { .publications-section .container {
@ -492,26 +496,25 @@ Yellow: #FFC212
h1 { h1 {
font-size: 2.2rem; font-size: 2.2rem;
} }
} }
/* iPhoneX, iPhone 6,7,8 */ /* iPhoneX, iPhone 6,7,8 */
@media only screen and (max-width: 375px) { @media only screen and (max-width: 375px) {
h1 { h1 {
font-size: 2rem; font-size: 2rem;
} }
} }
/* Galaxy S5, Moto G4 */ /* Galaxy S5, Moto G4 */
@media only screen and (max-width: 360px) { @media only screen and (max-width: 360px) {
h1 { h1 {
font-size: 1.8rem; font-size: 1.8rem;
} }
} }
/* iPhone 5 or before */ /* iPhone 5 or before */
@media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) {
h1 { h1 {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }

14
assets/styles/layouts/single.scss
View file

@ -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 ======= */

102
assets/styles/sections/recent-posts.scss
View file

@ -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%;
} }
.card .card-footer span {
font-size: 10pt;
color: #6c757d !important;
padding-top: 5px;
} }
@include media('<=medium') {
.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
View file

@ -0,0 +1,8 @@
$breakpoints: (
small: 640px,
medium: 768px,
large: 1024px,
very-large: 1280px,
extra-large: 1536px,
ultra-large: 2560px,
);

9
layouts/_default/single.html
View file

@ -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 }}

13
layouts/partials/cards/post.html
View file

@ -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 }}"

29
layouts/partials/cards/recent-post.html
View file

@ -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
View 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>

2
layouts/partials/sections/recent-posts.html
View file

@ -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>

3
package.hugo.json
View file

@ -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"
} }
} }