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>
This commit is contained in:
Emruz Hossain
GitHub
parent
5c95132b1e
commit
25e4e9e3d0
27 changed files with 519 additions and 30 deletions
52
content/notes/search.md
Normal file
52
content/notes/search.md
Normal file
|
|
@ -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"
|
||||
]
|
||||
\```
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
---
|
||||
title: "Search Results"
|
||||
date: 2010-06-08T08:06:25+06:00
|
||||
weight: 999999
|
||||
sitemap:
|
||||
priority : 0.1
|
||||
layout: "search"
|
||||
|
|
|
|||
|
|
@ -103,3 +103,6 @@ other = "আরো"
|
|||
|
||||
[view_certificate]
|
||||
other = "সার্টিফিকেট দেখুন"
|
||||
|
||||
[notes]
|
||||
other = "নোট সমূহ"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "更多的"
|
|||
|
||||
[view_certificate]
|
||||
other = "查看证书"
|
||||
|
||||
[notes]
|
||||
other = "笔记"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "Meer"
|
|||
|
||||
[view_certificate]
|
||||
other = "Bekijk certificaat"
|
||||
|
||||
[notes]
|
||||
other = "Opmerkingen"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "More"
|
|||
|
||||
[view_certificate]
|
||||
other = "View Certificate"
|
||||
|
||||
[notes]
|
||||
other = "Notes"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "Más"
|
|||
|
||||
[view_certificate]
|
||||
other = "Ver Certificado"
|
||||
|
||||
[notes]
|
||||
other = "Notas"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "Suite"
|
|||
|
||||
[view_certificate]
|
||||
other = "Afficher le certificat"
|
||||
|
||||
[notes]
|
||||
other = "Remarques"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "अधिक"
|
|||
|
||||
[view_certificate]
|
||||
other = "प्रमाणपत्र देखें"
|
||||
|
||||
[notes]
|
||||
other = "टिप्पणियाँ"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "Lebih"
|
|||
|
||||
[view_certificate]
|
||||
other = "Lihat Sertifikat"
|
||||
|
||||
[notes]
|
||||
other = "Catatan"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "Di più"
|
|||
|
||||
[view_certificate]
|
||||
other = "Féach ar an Teastas"
|
||||
|
||||
[notes]
|
||||
other = "Appunti"
|
||||
|
|
|
|||
|
|
@ -103,3 +103,6 @@ other = "もっと"
|
|||
|
||||
[view_certificate]
|
||||
other = "ビューの証明書"
|
||||
|
||||
[notes]
|
||||
other = "ノート"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "더"
|
|||
|
||||
[view_certificate]
|
||||
other = "인증서보기"
|
||||
|
||||
[notes]
|
||||
other = "메모"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "Более"
|
|||
|
||||
[view_certificate]
|
||||
other = "Просмотреть сертификат"
|
||||
|
||||
[notes]
|
||||
other = "Ноты"
|
||||
|
|
|
|||
|
|
@ -106,3 +106,6 @@ other = "Hơn"
|
|||
|
||||
[view_certificate]
|
||||
other = "Xem chứng chỉ"
|
||||
|
||||
[notes]
|
||||
other = "Ghi chú"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
60
layouts/notes/list.html
Normal file
60
layouts/notes/list.html
Normal file
|
|
@ -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 }}
|
||||
59
layouts/notes/single.html
Normal file
59
layouts/notes/single.html
Normal file
|
|
@ -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 }}
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
18
layouts/partials/note-aggregator.html
Normal file
18
layouts/partials/note-aggregator.html
Normal file
|
|
@ -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 }}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
11
layouts/shortcodes/note.html
Normal file
11
layouts/shortcodes/note.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
231
static/css/layouts/notes.css
Normal file
231
static/css/layouts/notes.css
Normal 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) {
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue