Add note layout

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

i18n/en.toml

@@ -109,4 +109,4 @@ other = "View Certificate"
 
 # ============== Translations for Notes ==============
 [notes]
-other = "Notes"
+other = "Notes"

layouts/notes/list.html

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

layouts/notes/single.html

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

layouts/shortcodes/note.html

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

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;

static/css/layouts/note.css

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

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) {
+}