Add notes layout (#263)

* Add note layout

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix note organization

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* WIP: need help adding above 6 sections doesnt fit navbar

* Add note layout

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Add Translation

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

Co-authored-by: HenzelMoras <henzelmoras@gmail.com>

27 files changed, 519 insertions, 30 deletions

diff --git a/content/notes/search.md b/content/notes/search.md
new file mode 100644
index 0000000..0f038c1
--- /dev/null
+++ b/content/notes/search.md
@@ -0,0 +1,52 @@
+---
+title: "Search Results"
+sitemap:
+  priority : 0.1
+layout: "search"
+url: search
+---
+
+
+This file exists solely to respond to /search URL with the related `search` layout template.
+
+No content shown here is rendered, all content is based in the template layouts/page/search.html
+
+Setting a very low sitemap priority will tell search engines this is not important content.
+
+This implementation uses Fusejs, jquery and mark.js
+
+
+## Initial setup
+
+Search  depends on additional output content type of JSON in config.toml
+\```
+[outputs]
+  home = ["HTML", "JSON"]
+\```
+
+## Searching additional fileds
+
+To search additional fields defined in front matter, you must add it in 2 places.
+
+### Edit layouts/_default/index.JSON
+This exposes the values in /index.json
+i.e. add `category`
+\```
+...
+  "contents":{{ .Content | plainify | jsonify }}
+  {{ if .Params.tags }},
+  "tags":{{ .Params.tags | jsonify }}{{end}},
+  "categories" : {{ .Params.categories | jsonify }},
+...
+\```
+
+### Edit fuse.js options to Search
+`static/js/search.js`
+\```
+keys: [
+  "title",
+  "contents",
+  "tags",
+  "categories"
+]
+\```
diff --git a/content/posts/search.md b/content/posts/search.md
index 0f038c1..4586d1f 100644
--- a/content/posts/search.md
+++ b/content/posts/search.md
@@ -1,5 +1,7 @@
 ---
 title: "Search Results"
+date: 2010-06-08T08:06:25+06:00
+weight: 999999
 sitemap:
   priority : 0.1
 layout: "search"
diff --git a/i18n/bn.toml b/i18n/bn.toml
index f80b4ab..781852c 100644
--- a/i18n/bn.toml
+++ b/i18n/bn.toml
@@ -103,3 +103,6 @@ other = "আরো"
 
 [view_certificate]
 other = "সার্টিফিকেট দেখুন"
+
+[notes]
+other = "নোট সমূহ"
diff --git a/i18n/cn.toml b/i18n/cn.toml
index 1b6b4a6..0ac0858 100644
--- a/i18n/cn.toml
+++ b/i18n/cn.toml
@@ -106,3 +106,6 @@ other = "更多的"
 
 [view_certificate]
 other = "查看证书"
+
+[notes]
+other = "笔记"
diff --git a/i18n/de.toml b/i18n/de.toml
index 1f66ddd..86c6d54 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -106,3 +106,6 @@ other = "Meer"
 
 [view_certificate]
 other = "Bekijk certificaat"
+
+[notes]
+other = "Opmerkingen"
diff --git a/i18n/en.toml b/i18n/en.toml
index 21d1335..5b6f88c 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -106,3 +106,6 @@ other = "More"
 
 [view_certificate]
 other = "View Certificate"
+
+[notes]
+other = "Notes"
diff --git a/i18n/es.toml b/i18n/es.toml
index 0b15ed9..c3ec395 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -106,3 +106,6 @@ other = "Más"
 
 [view_certificate]
 other = "Ver Certificado"
+
+[notes]
+other = "Notas"
diff --git a/i18n/fr.toml b/i18n/fr.toml
index 5d79a59..7e25ca8 100644
--- a/i18n/fr.toml
+++ b/i18n/fr.toml
@@ -106,3 +106,6 @@ other = "Suite"
 
 [view_certificate]
 other = "Afficher le certificat"
+
+[notes]
+other = "Remarques"
diff --git a/i18n/hi.toml b/i18n/hi.toml
index 150799d..eddf166 100644
--- a/i18n/hi.toml
+++ b/i18n/hi.toml
@@ -106,3 +106,6 @@ other = "अधिक"
 
 [view_certificate]
 other = "प्रमाणपत्र देखें"
+
+[notes]
+other = "टिप्पणियाँ"
diff --git a/i18n/id.toml b/i18n/id.toml
index b9c20f7..f884ed2 100644
--- a/i18n/id.toml
+++ b/i18n/id.toml
@@ -106,3 +106,6 @@ other = "Lebih"
 
 [view_certificate]
 other = "Lihat Sertifikat"
+
+[notes]
+other = "Catatan"
diff --git a/i18n/it.toml b/i18n/it.toml
index 3fce4de..3c88173 100644
--- a/i18n/it.toml
+++ b/i18n/it.toml
@@ -106,3 +106,6 @@ other = "Di più"
 
 [view_certificate]
 other = "Féach ar an Teastas"
+
+[notes]
+other = "Appunti"
diff --git a/i18n/jp.toml b/i18n/jp.toml
index 21b8af1..bcb3fa3 100644
--- a/i18n/jp.toml
+++ b/i18n/jp.toml
@@ -103,3 +103,6 @@ other = "もっと"
 
 [view_certificate]
 other = "ビューの証明書"
+
+[notes]
+other = "ノート"
diff --git a/i18n/ko.toml b/i18n/ko.toml
index d1df3e9..54a03d6 100644
--- a/i18n/ko.toml
+++ b/i18n/ko.toml
@@ -106,3 +106,6 @@ other = "더"
 
 [view_certificate]
 other = "인증서보기"
+
+[notes]
+other = "메모"
diff --git a/i18n/ru.toml b/i18n/ru.toml
index 7483ee9..d20d489 100644
--- a/i18n/ru.toml
+++ b/i18n/ru.toml
@@ -106,3 +106,6 @@ other = "Более"
 
 [view_certificate]
 other = "Просмотреть сертификат"
+
+[notes]
+other = "Ноты"
diff --git a/i18n/vn.toml b/i18n/vn.toml
index f91a712..3fb385c 100644
--- a/i18n/vn.toml
+++ b/i18n/vn.toml
@@ -106,3 +106,6 @@ other = "Hơn"
 
 [view_certificate]
 other = "Xem chứng chỉ"
+
+[notes]
+other = "Ghi chú"
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index ae014d1..dd0f21b 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -8,9 +8,9 @@
 {{ end }}
 
 {{ define "sidebar" }}
-  {{ $blogHome:="#" }}
+  {{ $homePage:="#" }}
   {{ if site.IsMultiLingual }}
-    {{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
+    {{ $homePage = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
   {{ end }}
 
   <section class="sidebar-section" id="sidebar-section">
@@ -23,7 +23,7 @@
           <ul class="tree" id="tree">
             <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
             <div class="subtree">
-                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
+                {{ partial "navigators/sidebar.html" (dict "menuName" "sidebar" "menuItems" site.Menus.sidebar "ctx" .) }}
             </div>
           </ul>
         </div>
@@ -38,7 +38,11 @@
     <div class="container-fluid post-card-holder" id="post-card-holder">
       {{ $paginator := .Paginate .RegularPagesRecursive 12 }}
       {{ range $paginator.Pages }}
-        {{ partial "cards/post.html" . }}
+        {{ if .Layout }}
+          {{/* ignore the search.md file*/}}
+        {{ else }}
+          {{ partial "cards/post.html" . }}
+        {{ end }}
       {{ end }}
     </div>
     <div class="paginator">
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 515fed4..a0f55e4 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -8,9 +8,9 @@
 {{ end }}
 
 {{ define "sidebar" }}
-  {{ $blogHome:="#" }}
+  {{ $homePage:="#" }}
   {{ if site.IsMultiLingual }}
-    {{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
+    {{ $homePage = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
   {{ end }}
 
   <section class="sidebar-section" id="sidebar-section">
@@ -23,7 +23,7 @@
           <ul class="tree" id="tree">
             <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
             <div class="subtree">
-                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
+                {{ partial "navigators/sidebar.html" (dict "menuName" "sidebar" "menuItems" site.Menus.sidebar "ctx" .) }}
             </div>
           </ul>
         </div>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e4f4fbb..2e6b4ee 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -23,7 +23,7 @@
           <ul class="tree" id="tree">
             <li id="list-heading"><a href="{{ "/posts" | relLangURL }}" data-filter="all">{{ i18n "posts" }}</a></li>
             <div class="subtree">
-                {{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
+                {{ partial "navigators/sidebar.html" (dict "menuName" "sidebar" "menuItems" site.Menus.sidebar "ctx" .) }}
             </div>
           </ul>
         </div>
diff --git a/layouts/notes/list.html b/layouts/notes/list.html
new file mode 100644
index 0000000..f381b6c
--- /dev/null
+++ b/layouts/notes/list.html
@@ -0,0 +1,60 @@
+{{ define "header" }}
+  <link
+    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/notes.css" | relURL}}">
+  <link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
+{{ end }}
+
+{{ define "navbar" }}
+    {{ partial "navigators/navbar-2.html" . }}
+{{ end }}
+
+{{ define "sidebar" }}
+  {{ $homePage:="#" }}
+  {{ if site.IsMultiLingual }}
+    {{ $homePage = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
+  {{ end }}
+
+  <section class="sidebar-section" id="sidebar-section">
+    <div class="sidebar-holder">
+      <div class="sidebar" id="sidebar">
+        <form class="mx-auto" method="get" action="{{ "search" | absURL }}">
+          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+        </form>
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menuName" "notes" "menuItems" site.Menus.notes  "ctx" . ) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+{{ end }}
+
+{{ define "content" }}
+<section class="content-section" id="content-section">
+  <div class="content container-fluid" id="content">
+    <div class="container-fluid note-card-holder" id="note-card-holder">
+        {{ partial "note-aggregator.html" . }}
+    </div>
+    <div class="paginator">
+      {{ template "_internal/pagination.html" . }}
+    </div>
+  </div>
+</section>
+{{ end }}
+
+{{ define "scripts" }}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
+  <script>
+    hljs.initHighlightingOnLoad();
+  </script>
+  {{ if .Params.math }}
+      {{ partial "math.html" . }}
+  {{ end }}
+{{ end }}
diff --git a/layouts/notes/single.html b/layouts/notes/single.html
new file mode 100644
index 0000000..b35edb6
--- /dev/null
+++ b/layouts/notes/single.html
@@ -0,0 +1,59 @@
+{{ define "header" }}
+  <link
+    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/notes.css" | relURL}}">
+  <link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
+{{ end }}
+
+{{ define "navbar" }}
+    {{ partial "navigators/navbar-2.html" . }}
+{{ end }}
+
+{{ define "sidebar" }}
+  {{ $homePage:="#" }}
+  {{ if site.IsMultiLingual }}
+    {{ $homePage = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) .Type) }}
+  {{ end }}
+
+  <section class="sidebar-section" id="sidebar-section">
+    <div class="sidebar-holder">
+      <div class="sidebar" id="sidebar">
+        <form class="mx-auto" method="get" action="{{ "search" | absURL }}">
+          <input type="text" name="keyword" value="" placeholder="Search" data-search="" id="search-box" />
+        </form>
+        <div class="sidebar-tree">
+          <ul class="tree" id="tree">
+            <li id="list-heading"><a href="{{ .Type | relLangURL }}" data-filter="all">{{ i18n .Type }}</a></li>
+            <div class="subtree">
+                {{ partial "navigators/sidebar.html" (dict "menuName" "notes" "menuItems" site.Menus.notes  "ctx" . ) }}
+            </div>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+{{ end }}
+
+{{ define "content" }}
+<section class="content-section" id="content-section">
+  <div class="content container-fluid" id="content">
+    <div class="container-fluid note-card-holder" id="note-card-holder">
+      <div class="note-collection">
+        {{ .Content }}
+      </div>
+    </div>
+  </div>
+</section>
+{{ end }}
+
+{{ define "scripts" }}
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
+  <script>
+    hljs.initHighlightingOnLoad();
+  </script>
+  {{ if .Params.math }}
+      {{ partial "math.html" . }}
+  {{ end }}
+{{ end }}
diff --git a/layouts/partials/navigators/sidebar.html b/layouts/partials/navigators/sidebar.html
index 75d0dcf..cc92c94 100644
--- a/layouts/partials/navigators/sidebar.html
+++ b/layouts/partials/navigators/sidebar.html
@@ -1,8 +1,8 @@
-{{ range .menus }}
+{{ range .menuItems }}
   {{ $class:= "" }}
   {{ $icon:= "fa-plus-circle" }}
   <!-- If the current menu is the selected menu or it contain the selected menu, set expand icon and set "active" class -->
-  {{ if or ($.ctx.HasMenuCurrent "sidebar" .)  ($.ctx.IsMenuCurrent "sidebar" .)}}
+  {{ if or ($.ctx.HasMenuCurrent $.menuName .)  ($.ctx.IsMenuCurrent $.menuName .)}}
     {{ $icon = "fa-minus-circle"}}
     {{ $class = "active" }}
   {{end}}
@@ -12,7 +12,7 @@
       <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}">{{.Name}}</a>
       <!-- Add sub-tree -->
       <ul class="{{ $class }}">
-        {{ partial "navigators/sidebar.html" (dict "menus" .Children "ctx" $.ctx) }}
+        {{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }}
       </ul>
     </li>
   {{ else }}
diff --git a/layouts/partials/note-aggregator.html b/layouts/partials/note-aggregator.html
new file mode 100644
index 0000000..f00996e
--- /dev/null
+++ b/layouts/partials/note-aggregator.html
@@ -0,0 +1,18 @@
+{{ $paginator := .Paginate .RegularPagesRecursive 10 }}
+{{ range $paginator.Pages }}
+    {{ if .Layout }}
+        {{/* ignore search.md file*/}}
+    {{ else }}
+        {{$id := .Params.Menu.Notes.Identifier }}
+        <h4 class="note-collection-title" id="{{ $id }}">
+            <a href="#{{ $id }}"># {{ .Title }}</a>
+            {{$badges:= split .File.Dir "/"}}
+            {{ range after 1 $badges }}
+            <span class="badge btn-info note-badge">{{ . }}</span>
+            {{ end }}
+        </h4>
+        <div class="note-collection">
+            {{ .Content }}
+        </div>
+    {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/sections/recent-posts.html b/layouts/partials/sections/recent-posts.html
index 46387d2..937bdff 100644
--- a/layouts/partials/sections/recent-posts.html
+++ b/layouts/partials/sections/recent-posts.html
@@ -9,7 +9,7 @@
   {{ end }}
   <div class="container">
     <div class="row" id="recent-post-cards">
-      {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
+      {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" "posts" )}}
         {{ partial "cards/recent-post.html" . }}
       {{ end }}
     </div>
diff --git a/layouts/shortcodes/note.html b/layouts/shortcodes/note.html
new file mode 100644
index 0000000..dfc77cf
--- /dev/null
+++ b/layouts/shortcodes/note.html
@@ -0,0 +1,11 @@
+<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>
diff --git a/static/css/layouts/list.css b/static/css/layouts/list.css
index 8d09fa0..2dfeba3 100644
--- a/static/css/layouts/list.css
+++ b/static/css/layouts/list.css
@@ -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;
diff --git a/static/css/layouts/main.css b/static/css/layouts/main.css
index e733588..5a219de 100644
--- a/static/css/layouts/main.css
+++ b/static/css/layouts/main.css
@@ -168,6 +168,34 @@ img.right {
   font-size: 10pt;
 }
 
+/* ====== codeblocks ====== */
+pre {
+  margin: 5px;
+}
+
+pre > code {
+  padding: 10px !important;
+}
+
+
+/* ======= Paginator ========= */
+.paginator {
+  width: -webkit-fit-content;
+  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 {
diff --git a/static/css/layouts/notes.css b/static/css/layouts/notes.css
new file mode 100644
index 0000000..d481f13
--- /dev/null
+++ b/static/css/layouts/notes.css
@@ -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) {
+}