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

Add note layout

Browse source 
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2021-03-28 00:58:34 +06:00
parent 485e6c7ec6
commit 3b63a5ba6d
7 changed files with 246 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

2
layouts/notes/list.html
View file

@ -3,7 +3,7 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
/>
<link rel="stylesheet" href="{{ "/css/layouts/note.css" | relURL}}">
<link rel="stylesheet" href="{{ "/css/layouts/notes.css" | relURL}}">
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
{{ end }}

2
layouts/notes/single.html
View file

@ -3,7 +3,7 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
/>
<link rel="stylesheet" href="{{ "/css/layouts/note.css" | relURL}}">
<link rel="stylesheet" href="{{ "/css/layouts/notes.css" | relURL}}">
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
{{ end }}

16
layouts/shortcodes/note.html
View file

@ -1,9 +1,11 @@
<div class="card note-card {{if .Get "size" }}{{.Get "size"}}-note{{end}}">
<div class="card-header" style="background-color: {{ site.Params.notes.headerBackground | default "transparent" }};">
<span class="note-title" style="color: {{ site.Params.notes.headerTextColor | default "#1c2d41" }};">{{.Get "title"}}</span>
<div class="note-card {{if .Get "size" }}{{.Get "size"}}-note{{end}}">
<div class="card">
<div class="card-header" style="background-color: {{ site.Params.notes.headerBackground | default "transparent" }};">
<span class="note-title" style="color: {{ site.Params.notes.headerTextColor | default "#1c2d41" }};">{{.Get "title"}}</span>
</div>
<div class="card-body">{{ .Inner | markdownify }}</div>
{{ if .Get "footer" }}
<div class="card-footer">{{ .Get "footer" }}</div>
{{end}}
</div>
<div class="card-body">{{ .Inner | markdownify }}</div>
{{ if .Get "footer" }}
<div class="card-footer">{{ .Get "footer" }}</div>
{{end}}
</div>

21
static/css/layouts/list.css
View file

@ -66,18 +66,18 @@
text-decoration: none;
}
.content-cards .paginator {
.paginator {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: auto;
}
.content-cards .paginator .page-item > a {
.paginator .page-item > a {
color: #248aaa;
}
.content-cards .paginator .page-item.active > a {
.paginator .page-item.active > a {
background-color: #248aaa;
color: #f9fafc;
}
@ -114,9 +114,6 @@
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
.content-cards {
padding-left: 0px;
}
.post-card-holder {
margin-left: 0px;
}
@ -162,12 +159,6 @@
top: 0.5rem;
}
.content-cards {
padding-top: 20px;
width: 100%;
padding-left: 0px;
}
.post-card-holder {
margin: 0;
margin-top: 1.5rem;
@ -232,12 +223,6 @@
transition: all ease-out 0.3s;
}
.content-cards {
padding-top: 20px;
padding-left: 0px;
transition: all ease-out 0.3s;
}
.content-section.hide .post-card-holder {
margin-top: 0.5rem;
transition: all ease-out 0.3s;

68
static/css/layouts/note.css
View file

@ -1,68 +0,0 @@
.wrapper {
display: flex;
padding: 0;
margin: 0;
width: 100%;
}
.content-section {
flex: 80%;
order: 2;
/* background-color: lightseagreen; */
padding: 0;
position: relative;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.content {
padding: 0;
position: relative;
padding-top: 2rem;
min-height: 130vh;
}
.note-card-holder{
padding-top: 2rem;
}
.note-collection {
display: flex;
flex-wrap: wrap;
}
.note-card {
margin: 1rem;
align-self: flex-start;
}
.note-title{
font-weight: 800;
}
.note-card .card-body{
padding: 1rem;
}
.note-card pre {
margin: 0;
border-radius: 3px;
}
.small-note{
max-width: 15rem;
}
.medium-note{
max-width: 25rem;
}
.large-note{
max-width: 40rem;
}
.huge-note{}
.note-badge{
font-size: 10pt;
}

231
static/css/layouts/notes.css Normal file
View file

@ -0,0 +1,231 @@
.wrapper {
display: flex;
padding: 0;
margin: 0;
width: 100%;
}
.content-section {
flex: 80%;
max-width: 80%;
order: 2;
/* background-color: lightseagreen; */
padding: 0;
position: relative;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.content {
padding: 0;
position: relative;
padding-top: 2rem;
min-height: 130vh;
}
.note-card-holder{
padding-top: 2rem;
}
.note-collection {
display: flex;
flex-wrap: wrap;
}
.note-card {
align-self: flex-start;
}
.note-card .card{
margin: 0.5rem;
}
.note-title{
font-weight: 800;
}
.note-card .card-body{
padding: 1rem;
}
.note-card pre {
margin: 0;
border-radius: 3px;
}
.small-note{
max-width: 15rem;
}
.medium-note{
max-width: 25rem;
}
.large-note{
max-width: 40rem;
}
.huge-note{}
.note-badge{
font-size: 10pt;
}
/* ============= 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%;
max-width: 85%;
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1400px) {
.note-card-holder {
margin-left: 0px;
}
}
@media (max-width: 1200px) {
}
/* IPad Pro */
@media (max-width: 1024px) {
.wrapper {
padding-left: 0px;
padding-right: 0px;
}
.content-section {
padding: 0;
max-width: 100%;
order: 2;
padding-bottom: 0.5rem;
transition: all ease-out 0.3s;
}
.content-section.hide {
max-width: 60%;
transition: all ease-out 0.3s;
}
.content {
overflow: hidden;
}
.container {
max-width: 100%;
}
.navbar-toggler {
display: block;
}
#toc-toggler {
visibility: hidden;
}
.navbar-collapse.lang-selector {
display: block !important;
position: absolute;
right: 0;
top: 0.5rem;
}
.note-card-holder {
margin: 0;
margin-top: 1.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
position: relative;
transition: all ease-out 0.3s;
}
.content-section.hide .note-card-holder .note-card {
max-width: 100%;
transition: all ease-out 0.3s;
}
}
/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
.note-card-holder .note-card {
max-width: 100%;
min-width: 50%;
transition: all ease-out 0.3s;
}
.content-section.hide .note-card-holder .note-card {
max-width: 100%;
min-width: 100%;
transition: all ease-out 0.3s;
}
}
/* 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) {
.wrapper {
padding-left: 0px;
padding-right: 0px;
flex-flow: column;
overflow: hidden;
}
.content-section, .content-section.hide {
flex: 100%;
max-width: 100%;
padding-left: 0;
width: 100%;
transition: all ease-out 0.3s;
}
.content {
width: 100%;
padding-left: 0;
padding-right: 0;
transition: all ease-out 0.3s;
}
.content-section.hide .content {
margin-top: 0;
padding-top: 0;
transition: all ease-out 0.3s;
}
.content-section.hide .note-card-holder {
margin-top: 0.5rem;
transition: all ease-out 0.3s;
}
.note-card-holder .note-card, .content-section.hide .note-card-holder .note-card {
margin-left: 1%;
margin-right: 1%;
max-width: 98%;
min-width: 98%;
transition: all ease-out 0.3s;
}
}
/* 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) {
}