Refactor sidebar logic + Add Table of Contents in reading page (#33)
* Refactor sidebar logic + fix responsiveness * Add TOC * Add Pagination * Update exampleSite * Update README.md
This commit is contained in:
Md. Emruz Hossain
GitHub
parent
647578e88b
commit
fa4d474974
59 changed files with 1735 additions and 679 deletions
14
README.md
14
README.md
|
|
@ -59,9 +59,13 @@ markup:
|
|||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
tableOfContents:
|
||||
startLevel: 2
|
||||
endLevel: 6
|
||||
ordered: false
|
||||
|
||||
# Enable Google Analytics
|
||||
googleAnalytics: UA-xxxxxxxx
|
||||
googleAnalytics: UA-XXXXXXXXX-X
|
||||
|
||||
# Enable Disqus forum
|
||||
disqusShortname: does-not-exist
|
||||
|
|
@ -83,6 +87,9 @@ params:
|
|||
# specify whether you want to write blog post or not
|
||||
enableBlogPost: true
|
||||
|
||||
# specify whether you want to show Table of Contents in reading page
|
||||
enableTOC: true
|
||||
|
||||
# specify the list of custom menus that you want to show in the top navbar.
|
||||
# they will be separated by a divider from the main menus.
|
||||
customMenus:
|
||||
|
|
@ -92,6 +99,7 @@ params:
|
|||
# some information about you
|
||||
author:
|
||||
name: "Jane Doe"
|
||||
nickname: "Jane"
|
||||
image: "images/avatar.png"
|
||||
# give your some contact information. they will be used in the footer
|
||||
contactInfo:
|
||||
|
|
@ -192,7 +200,7 @@ Here, are the current plan and progress of various components of this theme. The
|
|||
|
||||
- [x] Post Cards
|
||||
- [x] Sidebar
|
||||
- [ ] Pagination
|
||||
- [x] Pagination
|
||||
|
||||
### Reading Page
|
||||
|
||||
|
|
@ -201,7 +209,7 @@ Here, are the current plan and progress of various components of this theme. The
|
|||
- [x] Next & Previous Page Navigation
|
||||
- [x] `Improve This Page` Button
|
||||
- [x] Disqus Comment
|
||||
- [ ] Option to navigate to list page
|
||||
- [x] Option to navigate to list page
|
||||
|
||||
### Tracking and Comments
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,13 @@ markup:
|
|||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
tableOfContents:
|
||||
startLevel: 2
|
||||
endLevel: 6
|
||||
ordered: false
|
||||
|
||||
# Enable Google Analytics
|
||||
googleAnalytics: UA-xxxxxxxx
|
||||
googleAnalytics: UA-XXXXXXXXX-X
|
||||
|
||||
# Enable Disqus forum
|
||||
disqusShortname: does-not-exist
|
||||
|
|
@ -32,6 +36,9 @@ params:
|
|||
# specify whether you want to write blog post or not
|
||||
enableBlogPost: true
|
||||
|
||||
# specify whether you want to show Table of Contents in reading page
|
||||
enableTOC: true
|
||||
|
||||
# specify the list of custom menus that you want to show in the top navbar.
|
||||
# they will be separated by a divider from the main menus.
|
||||
customMenus:
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ section:
|
|||
weight: 6
|
||||
showOnNavbar: true
|
||||
# Can optionally hide the title in sections
|
||||
# hideTitle: true
|
||||
# hideTitle: true
|
||||
|
||||
# Your achievements achievements
|
||||
achievements:
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ section:
|
|||
weight: 4
|
||||
showOnNavbar: true
|
||||
# Can optionally hide the title in sections
|
||||
# hideTitle: true
|
||||
# hideTitle: true
|
||||
|
||||
# filter buttons
|
||||
buttons:
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ section:
|
|||
weight: 5
|
||||
showOnNavbar: true
|
||||
# Can optionally hide the title in sections
|
||||
# hideTitle: true
|
||||
# hideTitle: true
|
||||
|
||||
# no additional configuration is required
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ section:
|
|||
weight: 2
|
||||
showOnNavbar: true
|
||||
# Can optionally hide the title in sections
|
||||
# hideTitle: true
|
||||
# hideTitle: true
|
||||
|
||||
# Your Skills.
|
||||
# Give a summary of you each skill in the summary section.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ define "navbar" }}
|
||||
{{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
|
||||
{{ partial "navigators/navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
|
|
|
|||
|
|
@ -14,13 +14,19 @@
|
|||
{{ end }}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body data-spy="scroll" data-target="#TableOfContents" data-offset="80">
|
||||
<div class="container-fluid bg-dimmed wrapper">
|
||||
<!----- ADD NAVBAR --------------->
|
||||
{{ block "navbar" . }} {{ end }}
|
||||
|
||||
<!----- ADD SIDEBAR --------------->
|
||||
{{ block "sidebar" . }} {{ end }}
|
||||
|
||||
<!----- ADD PAGE CONTENT --------->
|
||||
{{ block "content" . }} {{ end }}
|
||||
|
||||
<!----- ADD TABLE OF CONTENTS ----------->
|
||||
{{ block "toc" . }} {{ end }}
|
||||
</div>
|
||||
|
||||
<!------- ADD FOOTER ------------>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,44 @@
|
|||
{{ define "header" }}
|
||||
<link rel="stylesheet" href="/assets/css/list.css">
|
||||
<link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
|
||||
{{ end }}
|
||||
|
||||
{{ define "navbar" }}
|
||||
{{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true "navBrandURL" .Site.BaseURL ) }}
|
||||
{{ partial "navigators/navbar-2.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "sidebar" }}
|
||||
<section class="sidebar-section" id="sidebar-section">
|
||||
<div class="sidebar-holder">
|
||||
<div class="sidebar" id="sidebar">
|
||||
<input type="text" value="" placeholder="Search" data-search="" id="search-box" />
|
||||
<div class="sidebar-tree">
|
||||
<ul class="tree" id="tree">
|
||||
<li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
|
||||
<div class="subtree">
|
||||
{{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-tree">
|
||||
<input type="text" name="filtr-search" value="" placeholder="Search" data-search="" id="search-box" />
|
||||
<ul class="tree" id="tree">
|
||||
<li id="list-heading"><a href="#" data-filter="all">{{.Title}}</a></li>
|
||||
<div class="subtree">
|
||||
{{ partial "sections.html" .Sections }}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<section class="content-section" id="content-section">
|
||||
<div class="content container-fluid" id="content">
|
||||
<div class="content-cards">
|
||||
<div class="container-fluid filtr-container post-cards" id="post-cards">
|
||||
{{ range (where site.RegularPages "Type" "in" site.Params.mainSections) }}
|
||||
{{ partial "cards/post.html" . }}
|
||||
{{ end }}
|
||||
{{/* {{ $paginator := .Paginate .Site.RegularPages 120 }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ partial "cards/post.html" . }}
|
||||
{{ end }} */}}
|
||||
</div>
|
||||
{{/* <div class="paginator">
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
</div> */}}
|
||||
<div class="container-fluid post-card-holder" id="post-card-holder">
|
||||
{{ $paginator := .Paginate .RegularPagesRecursive 12 }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ partial "cards/post.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="paginator">
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "scripts" }}
|
||||
|
|
|
|||
|
|
@ -4,55 +4,92 @@
|
|||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="/assets/css/single.css" />
|
||||
<link rel="stylesheet" href="/assets/css/navigators/sidebar.css">
|
||||
{{ end }}
|
||||
|
||||
{{ define "navbar" }}
|
||||
{{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false "navBrandURL" "/posts") }}
|
||||
{{ partial "navigators/navbar-2.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "sidebar" }}
|
||||
<section class="sidebar-section" id="sidebar-section">
|
||||
<div class="sidebar-holder">
|
||||
<div class="sidebar" id="sidebar">
|
||||
<input type="text" value="" placeholder="Search" data-search="" id="search-box" />
|
||||
<div class="sidebar-tree">
|
||||
<ul class="tree" id="tree">
|
||||
<li id="list-heading"><a href="/posts" data-filter="all">Posts</a></li>
|
||||
<div class="subtree">
|
||||
{{ partial "navigators/sidebar.html" (dict "menus" .Site.Menus.sidebar "ctx" .) }}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "content" }}
|
||||
<div class="container p-0 read-area">
|
||||
<!--Hero Area-->
|
||||
<div class="hero-area col-sm-12" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
|
||||
</div>
|
||||
|
||||
<!--Content Start-->
|
||||
<div class="page-content">
|
||||
<div class="author-profile ml-auto align-self-lg-center">
|
||||
<img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
|
||||
<h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
|
||||
<p>{{ .Page.Date.Format "January 2, 2006" }}</p>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>{{ .Page.Title }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="post-content" id="post-content">
|
||||
{{ .Page.Content }}
|
||||
</div>
|
||||
|
||||
<!--- Improve this page button --->
|
||||
{{ if .Site.Params.GitRepo }}
|
||||
<div class="btn-improve-page">
|
||||
<a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
|
||||
<i class="fas fa-code-branch"></i>
|
||||
Improve This Page
|
||||
</a>
|
||||
<section class="content-section" id="content-section">
|
||||
<div class="content">
|
||||
<div class="container p-0 read-area">
|
||||
<!--Hero Area-->
|
||||
<div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ strings.TrimSuffix "/" .Site.BaseURL }}{{ partial "helpers/get-hero.html" . }});'>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!---Next and Previous Navigator -->
|
||||
<hr />
|
||||
{{ partial "next-prev-navigator.html" . }}
|
||||
<hr />
|
||||
<!-- Add Disqus forum -->
|
||||
{{ if .Site.DisqusShortname }}
|
||||
{{ partial "disqus.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!--Content Start-->
|
||||
<div class="page-content">
|
||||
<div class="author-profile ml-auto align-self-lg-center">
|
||||
<img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}'/>
|
||||
<h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
|
||||
<p>{{ .Page.Date.Format "January 2, 2006" }}</p>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<h1>{{ .Page.Title }}</h1>
|
||||
</div>
|
||||
|
||||
<div class="post-content" id="post-content">
|
||||
{{ .Page.Content }}
|
||||
</div>
|
||||
|
||||
<!--- Improve this page button --->
|
||||
{{ if .Site.Params.GitRepo }}
|
||||
<div class="btn-improve-page">
|
||||
<a href="{{ .Site.Params.GitRepo }}/edit/master/content/{{ .File.Path }}">
|
||||
<i class="fas fa-code-branch"></i>
|
||||
Improve This Page
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<!---Next and Previous Navigator -->
|
||||
<hr />
|
||||
{{ partial "navigators/next-prev-navigator.html" . }}
|
||||
<hr />
|
||||
<!-- Add Disqus forum -->
|
||||
{{ if .Site.DisqusShortname }}
|
||||
{{ partial "disqus.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "toc" }}
|
||||
<section class="toc-section" id="toc-section">
|
||||
{{ if site.Params.enableTOC }}
|
||||
<div class="toc-holder">
|
||||
<h5 class="text-center pl-3">Table of Contents</h5>
|
||||
<hr>
|
||||
<div class="toc">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
{{ define "scripts" }}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
{{- partial "header.html" . -}}
|
||||
|
||||
<!-- import index page specific headers -->
|
||||
<link rel="stylesheet" href="/assets/css/home.css" />
|
||||
<link rel="stylesheet" href="/assets/css/about.css" />
|
||||
<link rel="stylesheet" href="/assets/css/skills.css" />
|
||||
<link rel="stylesheet" href="/assets/css/experiences.css" />
|
||||
<link rel="stylesheet" href="/assets/css/projects.css" />
|
||||
<link rel="stylesheet" href="/assets/css/recent-posts.css" />
|
||||
<link rel="stylesheet" href="/assets/css/achievements.css" />
|
||||
<link rel="stylesheet" href="/assets/css/sections/home.css" />
|
||||
<link rel="stylesheet" href="/assets/css/sections/about.css" />
|
||||
<link rel="stylesheet" href="/assets/css/sections/skills.css" />
|
||||
<link rel="stylesheet" href="/assets/css/sections/experiences.css" />
|
||||
<link rel="stylesheet" href="/assets/css/sections/projects.css" />
|
||||
<link rel="stylesheet" href="/assets/css/sections/recent-posts.css" />
|
||||
<link rel="stylesheet" href="/assets/css/sections/achievements.css" />
|
||||
|
||||
<!-- Add Google Analytics if enabled in configuration -->
|
||||
{{ if .Site.GoogleAnalytics }}
|
||||
|
|
@ -22,10 +22,10 @@
|
|||
<body data-spy="scroll" data-target="#top-navbar" data-offset="100">
|
||||
|
||||
<!--- NAVBAR ------------------------->
|
||||
{{- partial "navbar.html" . -}}
|
||||
{{- partial "navigators/navbar.html" . -}}
|
||||
|
||||
<!--- ADD HOME SECTION ---------------->
|
||||
{{- partial "home.html" . -}}
|
||||
{{- partial "sections/home.html" . -}}
|
||||
|
||||
<!--- ADD OPTIONAL SECTIONS ----------->
|
||||
{{ if .Site.Data.sections }}
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
{{ if .section.template }}
|
||||
{{- partial .section.template . -}}
|
||||
{{ else }}
|
||||
{{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}}
|
||||
{{- partial (printf "sections/%s.html" (replace (lower .section.name) " " "-")) . -}}
|
||||
{{ end }}
|
||||
</div>
|
||||
<!--- alter background color for next section --->
|
||||
|
|
@ -59,5 +59,6 @@
|
|||
<script src="/assets/js/itype.min.js"></script>
|
||||
<script src="/assets/js/github-button.js"></script>
|
||||
<script src="/assets/js/home.js"></script>
|
||||
<script src="/assets/js/jquery.filterizr.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="filtr-item" data-category='{{ partial "helpers/get-categories.html" . }}'>
|
||||
<div class="post-card">
|
||||
<a href="{{ .RelPermalink }}" class="post-card-link">
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="col-md-6 col-lg-4 p-2 filtr-item"
|
||||
class="col-sm-12 col-md-6 col-lg-4 p-2 filtr-item"
|
||||
data-category='all, {{ delimit .tags ","}}'
|
||||
>
|
||||
<div class="card mt-1">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="col-lg-4 col-md-6 pt-2">
|
||||
<div class="col-lg-4 col-md-6 pt-2 post-card">
|
||||
<a href="{{ .RelPermalink }}" class="post-card-link">
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="col-sm-12 col-md-6 col-lg-4 pt-2">
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
|
||||
<div class="card">
|
||||
<div class="card-head d-flex">
|
||||
{{ if .icon }}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
{{ if gt (len .positions) 1 }}
|
||||
{{ partial "experiences/multiple-positions" . }}
|
||||
{{ else }}
|
||||
{{ partial "experiences/single-position.html" . }}
|
||||
{{ end }}
|
||||
|
|
@ -5,7 +5,8 @@
|
|||
<!-- ============ import common css ========== -->
|
||||
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<link rel="stylesheet" href="/assets/css/navbar.css" />
|
||||
<link rel="stylesheet" href="/assets/css/style.css" />
|
||||
<link rel="stylesheet" href="/assets/css/navigators/navbar.css" />
|
||||
|
||||
<!--=================== cdn ==============================-->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Muli:wght@300;400;500;600" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
{{ $categories:= ""}}
|
||||
{{ if .Params.categories }}
|
||||
{{ $categories = delimit .Params.categories "," }}
|
||||
{{ end }}
|
||||
{{ return $categories }}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<nav class="navbar navbar-expand-lg top-navbar final-navbar shadow">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ .navBrandURL }}">
|
||||
<img src="/assets/images/logo.png">
|
||||
{{- .title -}}
|
||||
</a>
|
||||
<button class="navbar-toggler navbar-light" type="button" {{ if .hasToggleButton }}onclick="toggleSidebar()"{{ end }}>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="top-nav-items">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
19
layouts/partials/navigators/navbar-2.html
Normal file
19
layouts/partials/navigators/navbar-2.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<nav class="navbar navbar-expand-xl top-navbar final-navbar shadow">
|
||||
<div class="container">
|
||||
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button" onclick="toggleSidebar()">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{{ site.BaseURL }}">
|
||||
<img src="/assets/images/logo.png">
|
||||
{{- site.Title -}}
|
||||
</a>
|
||||
<button class="navbar-toggler navbar-light" id="toc-toggler" type="button" onclick="toggleTOC()">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="top-nav-items">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<nav class="navbar navbar-expand-lg top-navbar initial-navbar" id="top-navbar">
|
||||
<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ .Site.BaseURL }}">
|
||||
<img src="/assets/images/logo-inverted.png" id="logo">
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<button
|
||||
class="navbar-toggler navbar-dark"
|
||||
id="navbar-toggler"
|
||||
,type="button"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#top-nav-items"
|
||||
>
|
||||
|
|
@ -17,13 +17,13 @@
|
|||
<div class="collapse navbar-collapse" id="top-nav-items">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link smooth-scroll" href="#home">Home</a>
|
||||
<a class="nav-link" href="#home">Home</a>
|
||||
</li>
|
||||
{{- if .Site.Data.sections }}
|
||||
{{- range sort .Site.Data.sections "section.weight" }}
|
||||
{{ if and (.section.enable) (.section.showOnNavbar)}}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
|
||||
<a class="nav-link" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
22
layouts/partials/navigators/sidebar.html
Normal file
22
layouts/partials/navigators/sidebar.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{{ range .menus }}
|
||||
{{ $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" .)}}
|
||||
{{ $icon = "fa-minus-circle"}}
|
||||
{{ $class = "active" }}
|
||||
{{end}}
|
||||
{{ if .HasChildren }}
|
||||
<!-- Add current entry -->
|
||||
<li>
|
||||
<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) }}
|
||||
</ul>
|
||||
</li>
|
||||
{{ else }}
|
||||
<!-- No sub-tree. So, only add current entry -->
|
||||
<li><a class="{{$class}}" href="{{.URL}}">{{.Name}}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
<script src="/assets/js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="/assets/js/navbar.js"></script>
|
||||
<script src="/assets/js/jquery.filterizr.min.js"></script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
{{ range . }}
|
||||
{{ if .Sections }}
|
||||
<li><a href="#{{ .Params.id }}" data-filter="{{ .Params.id }}">{{ title .Title }}</a>
|
||||
<ul>
|
||||
{{ partial "sections.html" .Sections }}
|
||||
</ul>
|
||||
</li>
|
||||
{{ else }}
|
||||
<li><a href="#{{ .Params.id }}" data-filter="{{ .Params.id }}">{{ title .Title }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="container anchor p-md-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
|
||||
<div class="container anchor p-lg-5 about-section" id="{{ replace (lower .section.name) " " "-" }}">
|
||||
<div class="row pt-sm-2 pt-md-4 align-self-center">
|
||||
<!-- summary -->
|
||||
<div class="col-md-6">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="p-1">{{ site.Params.author.name }}</h3>
|
||||
{{ if .designation }}
|
||||
<h5 class="p-1">
|
||||
|
|
@ -34,10 +34,10 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
<!-- soft skills circular-progressbar -->
|
||||
<div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
|
||||
<div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
|
||||
<div class="row">
|
||||
{{ range .softSkills }}
|
||||
{{ partial "progress/soft-skills" . }}
|
||||
{{ partial "misc/soft-skills.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<!-- achievements-holder holds achievement-entry -->
|
||||
<div class="d-none" id="achievements-holder">
|
||||
{{ range .achievements }}
|
||||
{{ partial "misc/achievement.html" . }}
|
||||
{{ partial "sections/achievements/entry.html" . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -8,17 +8,17 @@
|
|||
{{ range $index,$experience:= .experiences }}
|
||||
{{ if eq (mod $index 2) 0 }}
|
||||
<div class="row align-items-center d-flex">
|
||||
{{ partial "experiences/vertical-line.html" $index }}
|
||||
{{ partial "experiences/experience-info.html" $experience }}
|
||||
{{ partial "sections/experiences/vertical-line.html" $index }}
|
||||
{{ partial "sections/experiences/experience-info.html" $experience }}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="row align-items-center justify-content-end d-flex">
|
||||
{{ partial "experiences/experience-info.html" $experience }}
|
||||
{{ partial "experiences/vertical-line.html" $index }}
|
||||
{{ partial "sections/experiences/experience-info.html" $experience }}
|
||||
{{ partial "sections/experiences/vertical-line.html" $index }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if lt $index (sub $totalExperiences 1) }}
|
||||
{{ partial "experiences/horizontal-line.html" $index }}
|
||||
{{ partial "sections/experiences/horizontal-line.html" $index }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{ if gt (len .positions) 1 }}
|
||||
{{ partial "sections/experiences/multiple-positions" . }}
|
||||
{{ else }}
|
||||
{{ partial "sections/experiences/single-position.html" . }}
|
||||
{{ end }}
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -41,6 +41,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -75,3 +79,15 @@
|
|||
left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,193 +3,50 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 400px;
|
||||
background: #f9fafc;
|
||||
min-height: 100vh;
|
||||
overflow: auto;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
width: 0;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
z-index: -1001;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
width: 250px;
|
||||
height: 35px;
|
||||
padding-left: 15px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #e5e9f2;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
border: 1px solid #c0ccda;
|
||||
}
|
||||
|
||||
#search-box:focus {
|
||||
border: 1pt solid #248aaa;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 2rem;
|
||||
margin-top: 2.5rem;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#list-heading {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.tree,
|
||||
.tree ul {
|
||||
margin: 0;
|
||||
.content-section {
|
||||
flex: 80%;
|
||||
order: 2;
|
||||
/* background-color: lightseagreen; */
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
margin-left: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree ul ul {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.tree ul:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -3px;
|
||||
bottom: 16px;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.subtree {
|
||||
padding-left: 0.7rem;
|
||||
}
|
||||
|
||||
.subtree:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 6.5rem;
|
||||
left: 0.5rem;
|
||||
bottom: 16px;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.tree li {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
line-height: 2em;
|
||||
color: #3c4858;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subtree li:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 0;
|
||||
border-top: 1px solid;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.subtree li:last-child:before {
|
||||
background: #f9fafc;
|
||||
height: auto;
|
||||
top: 1em;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tree li a {
|
||||
text-decoration: none;
|
||||
color: #131313;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
.tree li a:hover {
|
||||
margin-left: 3px;
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tree i {
|
||||
color: #3c4858;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tree .shift-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tree .expand,
|
||||
.tree .expand > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a.focused {
|
||||
color: #2098d1 !important;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
background: #e5e9f2;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-top: 2rem;
|
||||
min-height: 130vh;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 30px;
|
||||
width: 100%;
|
||||
padding-left: 28px;
|
||||
padding-bottom: 20px;
|
||||
.post-card-holder {
|
||||
margin-top: 32px;
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
margin: 32px;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 3);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
width: 23rem !important;
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
.post-card-holder .card {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-cards .card .card-footer span {
|
||||
.post-card-holder .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.post-cards .card .card-footer {
|
||||
.post-card-holder .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -205,20 +62,20 @@ a.focused {
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.post-cards .post-card-link{
|
||||
.post-card-holder .post-card-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content-cards .paginator{
|
||||
.content-cards .paginator {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.content-cards .paginator .page-item>a{
|
||||
.content-cards .paginator .page-item > a {
|
||||
color: #248aaa;
|
||||
}
|
||||
|
||||
.content-cards .paginator .page-item.active>a{
|
||||
.content-cards .paginator .page-item.active > a {
|
||||
background-color: #248aaa;
|
||||
color: #f9fafc;
|
||||
}
|
||||
|
|
@ -227,60 +84,70 @@ a.focused {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/*-------------- Media Queries ---------- */
|
||||
.pagination {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.sidebar-tree {
|
||||
margin-left: 1rem;
|
||||
/* ============= 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%;
|
||||
}
|
||||
.content-cards {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.post-cards {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.post-cards .filtr-item {
|
||||
width: 22rem !important;
|
||||
padding: 3px;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 5);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.content {
|
||||
width: 100vw;
|
||||
padding-left: 15px;
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.content-cards {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.content.overley {
|
||||
width: 60vw;
|
||||
padding-left: 3px;
|
||||
.post-card-holder {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar nav {
|
||||
display: none;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: -20rem;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.sidebar.hide .sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
transition: all 0.3s ease-out;
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
|
|
@ -289,85 +156,153 @@ a.focused {
|
|||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 32px;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
margin: 10px;
|
||||
width: 47vw !important;
|
||||
.post-card-holder .post-card {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
max-width: 47vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .filtr-item {
|
||||
margin: 10px;
|
||||
width: 55vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .card {
|
||||
max-width: 55vw !important;
|
||||
.content-section.hide .post-card-holder .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.post-card-holder .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.content-section.hide .post-card-holder .post-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.wrapper {
|
||||
display: block;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
flex-flow: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-section {
|
||||
flex: 100%;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
width: 85vw;
|
||||
height: 35px;
|
||||
padding-left: 5px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.content {
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding-left: 2vw;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.content.overley {
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
padding-left: 2vw;
|
||||
.content-section.hide .content {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar.hide {
|
||||
position: relative;
|
||||
z-index: 1001;
|
||||
width: 100vw;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar.hide .sidebar-tree {
|
||||
margin-left: 1.5rem;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
#toc-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content-cards {
|
||||
|
|
@ -377,41 +312,34 @@ a.focused {
|
|||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.content.overley .content-cards {
|
||||
padding-top: 0px;
|
||||
padding-left: 0px;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.post-cards {
|
||||
.post-card-holder {
|
||||
margin: 0;
|
||||
margin-top: 32px;
|
||||
margin-top: 1.5rem;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.content.overley .post-cards {
|
||||
margin: 0;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
.post-card-holder.hide {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.post-cards .filtr-item {
|
||||
margin: 0px;
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.post-cards .card {
|
||||
max-width: 90vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .filtr-item {
|
||||
margin: 0px;
|
||||
width: 95vw !important;
|
||||
}
|
||||
|
||||
.content.overley .post-cards .card {
|
||||
max-width: 95vw !important;
|
||||
.post-card-holder .post-card {
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ h5 {
|
|||
color: #1c2d41;
|
||||
}
|
||||
|
||||
strong{
|
||||
color: #1c2d41!important;
|
||||
strong {
|
||||
color: #1c2d41 !important;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -42,6 +42,13 @@ a:hover {
|
|||
color: #207089;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.25rem;
|
||||
color: #8392a5;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background-color: #3c4858;
|
||||
border-color: #3c4858;
|
||||
|
|
@ -90,18 +97,18 @@ a:hover {
|
|||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
img.center{
|
||||
img.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img.left{
|
||||
img.left {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img.right{
|
||||
img.right {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -220,9 +227,9 @@ img.right{
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -232,6 +239,10 @@ img.right{
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -245,6 +256,12 @@ img.right{
|
|||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.skills-section .container,
|
||||
.projects-section .container {
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
|
||||
.section-holder {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
|
|
@ -253,8 +270,20 @@ img.right{
|
|||
.skills-section,
|
||||
.projects-section,
|
||||
.recent-posts-section,
|
||||
.achievements-section{
|
||||
.achievements-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,9 +124,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -136,9 +136,93 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.top-navbar .container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.initial-navbar .navbar-nav .active,
|
||||
.initial-navbar li a:hover {
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.final-navbar .navbar-nav .active,
|
||||
.final-navbar li a:hover {
|
||||
color: #2098d1;
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
border-bottom: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.final-navbar li a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.final-navbar .navbar-collapse.show {
|
||||
box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid #c0ccda;
|
||||
}
|
||||
#top-navbar-divider {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.top-navbar .container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.initial-navbar .navbar-nav .active,
|
||||
.initial-navbar li a:hover {
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.final-navbar .navbar-nav .active,
|
||||
.final-navbar li a:hover {
|
||||
color: #2098d1;
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
border-bottom: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.final-navbar li a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.final-navbar .navbar-collapse.show {
|
||||
box-shadow: 5px 10px 10px rgba(192, 204, 218, 0.3);
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid #c0ccda;
|
||||
}
|
||||
#top-navbar-divider {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
|
@ -189,4 +273,19 @@
|
|||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.final-navbar {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
315
static/assets/css/navigators/sidebar.css
Normal file
315
static/assets/css/navigators/sidebar.css
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
.sidebar-section {
|
||||
order: 1;
|
||||
flex: 20%;
|
||||
max-width: 20%;
|
||||
/* background-color: lightsalmon; */
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-holder {
|
||||
top: 2.5rem;
|
||||
position: sticky;
|
||||
background-color: #f9fafc;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: #f9fafc;
|
||||
height: 100vh;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
padding-left: 1rem;
|
||||
position: relative;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
width: -webkit-fill-available;
|
||||
height: 35px;
|
||||
padding-left: 15px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #e5e9f2;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
border: 1px solid #c0ccda;
|
||||
}
|
||||
|
||||
#search-box:focus {
|
||||
border: 1pt solid #248aaa;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#list-heading {
|
||||
padding-left: 0px !important;
|
||||
}
|
||||
|
||||
.tree,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tree li {
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
line-height: 2em;
|
||||
color: #3c4858;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree li a {
|
||||
text-decoration: none;
|
||||
color: #131313;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tree li a.active {
|
||||
display: inline;
|
||||
color: #2098d1;
|
||||
}
|
||||
|
||||
.tree li a:hover {
|
||||
margin-left: 3px;
|
||||
color: #2098d1;
|
||||
transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tree i {
|
||||
color: #3c4858;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tree .shift-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.tree .active,
|
||||
.tree .active > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subtree {
|
||||
padding-left: 0.7rem;
|
||||
}
|
||||
|
||||
.subtree:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
left: 1.5rem;
|
||||
bottom: 0.9rem;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.subtree ul,
|
||||
ul > ul {
|
||||
position: relative;
|
||||
padding-left: 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subtree ul:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0.3rem;
|
||||
bottom: 0.9rem;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
.subtree li:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 0;
|
||||
border-top: 1px solid;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.subtree li:last-child:before {
|
||||
background: #f9fafc;
|
||||
height: auto;
|
||||
top: 1.1rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a.focused {
|
||||
color: #2098d1 !important;
|
||||
}
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.sidebar-section {
|
||||
flex: 15%;
|
||||
max-width: 15%;
|
||||
}
|
||||
.sidebar-holder {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.sidebar-holder {
|
||||
max-width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.sidebar-tree {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar-section {
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
min-height: 100vh;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.sidebar-holder {
|
||||
position: sticky;
|
||||
top: 2.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
flex: 30%;
|
||||
max-width: 30%;
|
||||
margin-right: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.sidebar-section {
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
min-height: 100vh;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.sidebar-holder {
|
||||
position: sticky;
|
||||
top: 2.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-right: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.sidebar-section {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
max-height: 0;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-section.hide {
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
flex: none;
|
||||
max-height: 300vh;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-holder {
|
||||
max-height: 0;
|
||||
height: fit-content;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-section.hide .sidebar-holder {
|
||||
max-height: 200vh;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
max-height: fit-content;
|
||||
width: 100vw;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-tree {
|
||||
margin-left: 0rem;
|
||||
max-height: 0;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
}
|
||||
.sidebar-section.hide .sidebar-tree {
|
||||
max-height: 200vh;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-transition: all 0.5s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
.projects-section .card .card-header {
|
||||
background-color: #f9fafc;
|
||||
padding: 0.7rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-img-xs {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.card .card-header .sub-title span:nth-child(1) {
|
||||
float: left;
|
||||
}
|
||||
.card .card-header .sub-title span:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.projects-section .card .card-body {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-header .sub-title {
|
||||
color: #8392a5;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.filtr-projects {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
.projects-section .btn {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.recent-posts-section .container{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.recent-posts-section .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;
|
||||
}
|
||||
|
|
@ -347,9 +347,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -359,6 +359,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -367,9 +371,24 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.about-section.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -126,9 +126,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -138,6 +138,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -146,6 +150,13 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.achievements-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.achievements-section .col-md-6 {
|
||||
flex: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
|
@ -155,3 +166,15 @@
|
|||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
color: #3c4858;
|
||||
}
|
||||
|
||||
.experiences-section .designation{
|
||||
font-weight: 600;
|
||||
.experiences-section .designation {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.circle {
|
||||
|
|
@ -91,9 +91,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -103,6 +103,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -111,6 +115,9 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.experiences-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
|
@ -118,14 +125,13 @@
|
|||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
|
||||
/* iPhoneX, iPhone 6,7,8 */
|
||||
@media only screen and (max-width: 375px) {
|
||||
.top-left {
|
||||
left: -52%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 52%;
|
||||
top: -50%;
|
||||
|
|
@ -138,7 +144,7 @@
|
|||
left: -56%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 56%;
|
||||
top: -50%;
|
||||
|
|
@ -151,7 +157,7 @@
|
|||
left: -64%;
|
||||
top: -50%;
|
||||
}
|
||||
|
||||
|
||||
.top-right {
|
||||
left: 64%;
|
||||
top: -50%;
|
||||
|
|
@ -75,9 +75,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -87,6 +87,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -116,3 +120,15 @@
|
|||
font-size: 24pt;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
113
static/assets/css/sections/projects.css
Normal file
113
static/assets/css/sections/projects.css
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
.projects-section .card .card-header {
|
||||
background-color: #f9fafc;
|
||||
padding: 0.7rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-img-xs {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.card .card-header .sub-title span:nth-child(1) {
|
||||
float: left;
|
||||
}
|
||||
.card .card-header .sub-title span:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.projects-section .card .card-body {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.projects-section .card .card-header .sub-title {
|
||||
color: #8392a5;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.filtr-projects {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
/* ============= 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) {
|
||||
.projects-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.projects-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.projects-section .filtr-projects {
|
||||
padding: 0;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.projects-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.projects-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.projects-section .filtr-projects {
|
||||
padding: 0;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.2rem;
|
||||
flex: 50%;
|
||||
max-width: calc(100% / 2 - 0.2rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.projects-section .btn {
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
.projects-section .filtr-item {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
82
static/assets/css/sections/recent-posts.css
Normal file
82
static/assets/css/sections/recent-posts.css
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
.recent-posts-section .container {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer span {
|
||||
font-size: 10pt;
|
||||
color: #6c757d !important;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.recent-posts-section .card .card-footer {
|
||||
background: #fff;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.recent-posts-section .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;
|
||||
}
|
||||
|
||||
/* ============= 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) {
|
||||
.recent-posts-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.recent-posts-section .post-card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.recent-posts-section .post-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Extra small devices (portrait phones, less than 576px) */
|
||||
|
||||
/* No media query for `xs` since this is the default in Bootstrap */
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
|
|
@ -34,6 +34,10 @@
|
|||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
|
|
@ -42,9 +46,28 @@
|
|||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.skills-section {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.skills-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
@ -1,12 +1,93 @@
|
|||
body {
|
||||
background-color: #e5e9f2;
|
||||
position: relative;
|
||||
}
|
||||
.read-area {
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
/* background-color: lightseagreen; */
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.content {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
.toc-section {
|
||||
flex: 20%;
|
||||
order: 3;
|
||||
max-width: 20%;
|
||||
/* background-color: lightpink; */
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
position: sticky;
|
||||
top: 4.5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #f9fafc;
|
||||
margin-right: 0.5rem;
|
||||
max-height: 100vh;
|
||||
/* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: relative;
|
||||
padding-top: 0px;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc nav {
|
||||
padding-top: 0px;
|
||||
margin-top: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
padding-left: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc .nav-link {
|
||||
padding: 0;
|
||||
padding-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
color: #1c2d41;
|
||||
}
|
||||
|
||||
.toc .nav-link:hover,
|
||||
.toc .nav-link:focus,
|
||||
.toc .nav-link.active {
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.5rem;
|
||||
background-color: #248aaa;
|
||||
color: #f9f9f9;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
|
|
@ -132,25 +213,25 @@ pre {
|
|||
margin: 5px;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
pre > code {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
a.header-anchor{
|
||||
a.header-anchor {
|
||||
text-decoration: none;
|
||||
color: #1c2d41;
|
||||
}
|
||||
|
||||
a.header-anchor i{
|
||||
a.header-anchor i {
|
||||
font-size: 10pt;
|
||||
color: #3c4858;
|
||||
display: none;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
a.header-anchor:hover i{
|
||||
a.header-anchor:hover i {
|
||||
display: inline-block;
|
||||
}
|
||||
a.header-anchor code{
|
||||
a.header-anchor code {
|
||||
color: #e83e8c;
|
||||
}
|
||||
|
||||
|
|
@ -158,13 +239,13 @@ a.header-anchor code{
|
|||
display: none;
|
||||
}
|
||||
|
||||
ul > ol,
|
||||
ol > ul,
|
||||
ul > ul,
|
||||
ol > ol,
|
||||
li > ol,
|
||||
li > ul {
|
||||
padding-inline-start: 25px;
|
||||
.content ul > ol,
|
||||
.content ol > ul,
|
||||
.content ul > ul,
|
||||
.content ol > ol,
|
||||
.content li > ol,
|
||||
.content li > ul {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
kbd {
|
||||
|
|
@ -226,29 +307,239 @@ mark {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.btn-improve-page{
|
||||
.btn-improve-page {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
/* ============= Device specific fixes ======= */
|
||||
|
||||
/* Large screens such as TV */
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.content-section {
|
||||
flex: 65%;
|
||||
}
|
||||
.content-section .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
}
|
||||
|
||||
/* IPad Pro */
|
||||
@media (max-width: 1024px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 3;
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.toc-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
height: 300px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0px;
|
||||
}
|
||||
code {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.btn-improve-page {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#disqus_thread,
|
||||
.dsq-brlink {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
|
||||
@media (max-width: 992px) {
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 60%;
|
||||
order: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 3;
|
||||
flex: 0%;
|
||||
max-width: 0%;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
.toc-section.hide {
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
margin-left: 0.5rem;
|
||||
transition: all ease-out 0.3s;
|
||||
-webkit-transition: all ease-out 0.3s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
top: 3rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
height: 300px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0px;
|
||||
}
|
||||
code {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.btn-improve-page {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#disqus_thread,
|
||||
.dsq-brlink {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.wrapper {
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: 0;
|
||||
flex: 100%;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.toc-section {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
max-width: 100%;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-section.hide {
|
||||
margin-top: 2.5rem;
|
||||
position: relative;
|
||||
/* height: fit-content; */
|
||||
flex: 100%;
|
||||
height: fit-content;
|
||||
max-height: 200vh;
|
||||
max-width: 100%;
|
||||
margin-left: 0;
|
||||
padding-right: 0;
|
||||
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.toc-holder {
|
||||
max-height: 0;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
.toc-section.hide .toc-holder {
|
||||
max-height: 200vh;
|
||||
transition: all ease-out 0.5s;
|
||||
-webkit-transition: all ease-out 0.5s;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-area {
|
||||
height: 200px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.hero-area.hide {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.page-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
@ -277,3 +568,15 @@ mark {
|
|||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,46 @@
|
|||
/* Add custom css styling here to override the theme */
|
||||
|
||||
/* This is empty CSS file intended to be overwritten by user's custom CSS file */
|
||||
|
||||
/* ============= 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) {
|
||||
}
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
}
|
||||
|
||||
/* 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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,30 +43,6 @@ var projectCards;
|
|||
}
|
||||
}
|
||||
|
||||
// ================= Smooth Scroll ===================
|
||||
// Add smooth scrolling to all links
|
||||
$("a").on('click', function (event) {
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 800, function () {
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
|
||||
// ============== Fix Timelines Horizontal Lines =========
|
||||
var hLines = document.getElementsByClassName("horizontal-line");
|
||||
for (let i = 0; i < hLines.length; i++) {
|
||||
|
|
@ -263,14 +239,14 @@ var projectCards;
|
|||
}
|
||||
function twoColumnRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry1.classList.add("col-6", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
i++;
|
||||
|
||||
let entry2 = document.createElement("div");
|
||||
entry2.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry2.classList.add("col-6", "m-0", "p-0");
|
||||
entry2.appendChild(entries[i].cloneNode(true));
|
||||
entry2.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry2);
|
||||
|
|
@ -279,7 +255,7 @@ var projectCards;
|
|||
|
||||
function singleColumnRow(gallery, entries, i) {
|
||||
let entry1 = document.createElement("div");
|
||||
entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
|
||||
entry1.classList.add("col-12", "m-0", "p-0");
|
||||
entry1.appendChild(entries[i].cloneNode(true));
|
||||
entry1.children[0].classList.add("img-type-1");
|
||||
gallery.appendChild(entry1);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
"use strict";
|
||||
|
||||
var filterizd;
|
||||
|
||||
var isMobile = false, isTablet = false, isLaptop = false;
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
|
|
@ -25,7 +23,7 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
// ======= Adjust height of the post cards =============
|
||||
function adjustPostCardsHeight() {
|
||||
if (!isMobile) { // no need to adjust height for mobile devices
|
||||
let postCardHolder = document.getElementById("post-cards");
|
||||
let postCardHolder = document.getElementById("post-card-holder");
|
||||
if (postCardHolder == null ){
|
||||
return
|
||||
}
|
||||
|
|
@ -42,69 +40,5 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
}
|
||||
}
|
||||
adjustPostCardsHeight();
|
||||
|
||||
// ============= Sidebar Tree ================
|
||||
function buildSidebarMenu() {
|
||||
var openedClass = "fa-minus-circle";
|
||||
var closedClass = "fa-plus-circle";
|
||||
// initialize top level
|
||||
var tree = $("#tree");
|
||||
// add expand icon to those li who has ul as children
|
||||
tree.find("li").has("ul").each(function () {
|
||||
var branch = $(this);
|
||||
branch.prepend('<i class="fas ' + closedClass + '"></i>');
|
||||
branch.on('click', function (e) {
|
||||
if (this.children[1] == e.target) {
|
||||
// toggle "expand" class and icon
|
||||
branch.toggleClass("expand");
|
||||
var icon = $(this).children('i:first');
|
||||
icon.toggleClass(openedClass + " " + closedClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// remove "expnad" class from siblings of the clicked item
|
||||
tree.find("li").on("click", function () {
|
||||
var item = $(this);
|
||||
var shiblings = item.siblings().each(function () {
|
||||
var sibling = $(this);
|
||||
if (sibling.hasClass("expand")) {
|
||||
sibling.removeClass("expand");
|
||||
var icon = sibling.children('i:first');
|
||||
icon.toggleClass(openedClass + " " + closedClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// focus the cliked item
|
||||
tree.find("a").on("click", function () {
|
||||
// clear other focused link
|
||||
tree.find("a.focused").each(function () {
|
||||
$(this).removeClass("focused");
|
||||
});
|
||||
// focus cliked link
|
||||
$(this).addClass("focused");
|
||||
});
|
||||
}
|
||||
|
||||
buildSidebarMenu();
|
||||
// initialize filterizr
|
||||
filterizd = $(".filtr-container").filterizr({ layout: 'sameWidth' });
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
// toggle sidebar on click
|
||||
function toggleSidebar() {
|
||||
document.getElementById("sidebar").classList.toggle("hide");
|
||||
document.getElementById("content").classList.toggle("overley");
|
||||
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && $("#sidebar").hasClass("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
filterizd.filterizr('sort');
|
||||
}, 300);
|
||||
}
|
||||
|
|
|
|||
122
static/assets/js/main.js
Normal file
122
static/assets/js/main.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
"use strict";
|
||||
|
||||
var projectCards;
|
||||
var isMobile = false, isTablet = false, isLaptop = false;
|
||||
(function ($) {
|
||||
jQuery(document).ready(function () {
|
||||
function detectDevice() {
|
||||
if (window.innerWidth <= 425) {
|
||||
isMobile = true;
|
||||
isTablet = false;
|
||||
isLaptop = false;
|
||||
} else if (window.innerWidth <= 768) {
|
||||
isMobile = false;
|
||||
isTablet = true;
|
||||
isLaptop = false;
|
||||
} else {
|
||||
isMobile = false;
|
||||
isTablet = false;
|
||||
isLaptop = true;
|
||||
}
|
||||
}
|
||||
detectDevice();
|
||||
|
||||
// ================= Smooth Scroll ===================
|
||||
function addSmoothScroll() {
|
||||
// Add smooth scrolling to all links
|
||||
$("a").on('click', function (event) {
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
let offset = 60;
|
||||
if (isMobile) {
|
||||
offset = 760;
|
||||
} else if (isTablet) {
|
||||
offset = 60;
|
||||
}
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top - offset
|
||||
}, 800, function () {
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash - offset;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
}
|
||||
addSmoothScroll();
|
||||
|
||||
// re-render custom functions on window resize
|
||||
window.onresize = function () {
|
||||
detectDevice();
|
||||
addSmoothScroll();
|
||||
};
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
|
||||
// Toggle sidebar on click. Here, class "hide" open the sidebar
|
||||
function toggleSidebar() {
|
||||
let sidebar = document.getElementById("sidebar-section");
|
||||
if (sidebar == null) {
|
||||
return
|
||||
}
|
||||
if (sidebar.classList.contains("hide")) {
|
||||
sidebar.classList.remove("hide")
|
||||
} else {
|
||||
// if toc-section is open, then close it first
|
||||
let toc = document.getElementById("toc-section");
|
||||
if (toc != null && toc.classList.contains("hide")) {
|
||||
toc.classList.remove("hide");
|
||||
}
|
||||
// add "hide" class
|
||||
sidebar.classList.add("hide")
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && sidebar.classList.contains("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
if (document.getElementById("hero-area") != null) {
|
||||
document.getElementById("hero-area").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
if (document.getElementById("content-section") != null) {
|
||||
document.getElementById("content-section").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle Table of Contents on click. Here, class "hide" open the toc
|
||||
function toggleTOC() {
|
||||
let toc = document.getElementById("toc-section");
|
||||
if (toc == null) {
|
||||
return
|
||||
}
|
||||
if (toc.classList.contains("hide")) {
|
||||
toc.classList.remove("hide");
|
||||
} else {
|
||||
// if sidebar-section is open, then close it first
|
||||
let sidebar = document.getElementById("sidebar-section");
|
||||
if (sidebar != null && sidebar.classList.contains("hide")) {
|
||||
sidebar.classList.remove("hide");
|
||||
}
|
||||
// add "hide" class
|
||||
toc.classList.add("hide")
|
||||
// if it is mobile device. then scroll to top.
|
||||
if (isMobile && toc.classList.contains("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
if (document.getElementById("hero-area") != null) {
|
||||
document.getElementById("hero-area").classList.toggle("hide");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,5 +36,28 @@ var isMobile = false, isTablet = false, isLaptop = false;
|
|||
}
|
||||
}
|
||||
|
||||
// =============== Make TOC Compatible wit Bootstrap Scroll Spy ========
|
||||
// add "navbar" class to the "nav" element
|
||||
let toc = document.getElementById("TableOfContents");
|
||||
toc.classList.add("navbar");
|
||||
// add "nav-pills" class to the "ul" elements
|
||||
let elems = toc.getElementsByTagName("ul");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-pills");
|
||||
}
|
||||
// add "nav-item" class to the "li" elements
|
||||
elems = toc.getElementsByTagName("li");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-item");
|
||||
if (isMobile) {
|
||||
elems[i].setAttribute("onclick", "toggleTOC()");
|
||||
}
|
||||
}
|
||||
// add "nav-link" class to the "a" elements
|
||||
elems = toc.getElementsByTagName("a");
|
||||
for (let i = 0; i < elems.length; i++) {
|
||||
elems[i].classList.add("nav-link");
|
||||
}
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue