Refactor CSS (#785)
* Refactor CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor about section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor CSS for experiences section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Update education section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Update projects section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Update publication + accomplishment section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Update achievements section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor footer CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Re-use section title adjustment css for top header Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor navbar CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor sidebar CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Use unified navbar for all pages Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor 404 page CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor list page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Fix notes page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor single page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Introduce color variables Signed-off-by: hossainemruz <hossainemruz@gmail.com> --------- Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
Emruz Hossain
GitHub
parent
77447b7723
commit
6dc9d1d33d
64 changed files with 2532 additions and 3593 deletions
|
|
@ -1,25 +0,0 @@
|
|||
{{ $pageURL:= .RelPermalink }}
|
||||
{{ if site.IsMultiLingual }}
|
||||
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
|
||||
{{ end }}
|
||||
|
||||
<div class="dropdown languageSelector">
|
||||
<a class="btn dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ if ne site.Params.features.flags.enable false }}
|
||||
{{ $countryCode := partial "helpers/country-code.html" . }}
|
||||
<span class="flag-icon flag-icon-{{$countryCode}}"></span>
|
||||
{{ end }}
|
||||
{{ site.Language.LanguageName }}
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageSelector">
|
||||
{{ range .Translations }}
|
||||
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
|
||||
{{ if ne site.Params.features.flags.enable false }}
|
||||
{{ $countryCode := partial "helpers/country-code.html" . }}
|
||||
<span class="flag-icon flag-icon-{{$countryCode}}"></span>
|
||||
{{ end }}
|
||||
{{ .Language.LanguageName }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{{ $pageURL:= .RelPermalink }}
|
||||
{{ if site.IsMultiLingual }}
|
||||
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
|
||||
{{ end }}
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ if ne site.Params.features.flags.enable false }}
|
||||
{{ $countryCode := partial "helpers/country-code.html" . }}
|
||||
<span class="flag-icon flag-icon-{{$countryCode}}"></span>
|
||||
{{ end }}
|
||||
{{ site.Language.LanguageName }}
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageSelector">
|
||||
{{ range .Translations }}
|
||||
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
|
||||
{{ if ne site.Params.features.flags.enable false }}
|
||||
{{ $countryCode := partial "helpers/country-code.html" . }}
|
||||
<span class="flag-icon flag-icon-{{$countryCode}}"></span>
|
||||
{{ end }}
|
||||
{{ .Language.LanguageName }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
{{ $pageURL:= .RelPermalink }}
|
||||
{{ if site.IsMultiLingual }}
|
||||
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
|
||||
{{ end }}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ if ne site.Params.features.flags.enable false }}
|
||||
|
|
@ -8,7 +12,7 @@
|
|||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageSelector">
|
||||
{{ range site.Home.AllTranslations }}
|
||||
<a class="dropdown-item nav-link languages-item" href="{{ .RelPermalink }}">
|
||||
<a class="dropdown-item nav-link languages-item" href="{{ path.Join "/" (cond (eq .Language.Lang "en") "" .Language.Lang) $pageURL }}">
|
||||
{{ if ne site.Params.features.flags.enable false }}
|
||||
{{ $countryCode := partial "helpers/country-code.html" . }}
|
||||
<span class="flag-icon flag-icon-{{$countryCode}}"></span>
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
{{/* by default, don't use any logo */}}
|
||||
{{ $mainLogo := "" }}
|
||||
{{ $invertedLogo := "" }}
|
||||
|
||||
{{/* if custom logo has been provided, use them */}}
|
||||
{{ if site.Params.logo.main }}
|
||||
{{ $mainLogo = site.Params.logo.main }}
|
||||
{{ end }}
|
||||
{{ if site.Params.logo.inverted }}
|
||||
{{ $invertedLogo = site.Params.logo.inverted }}
|
||||
{{ end }}
|
||||
|
||||
{{/* resize the logos. don't resize svg because it is not supported */}}
|
||||
{{ if $mainLogo }}
|
||||
{{ $mainLogo = resources.Get $mainLogo}}
|
||||
{{ if and $mainLogo (ne $mainLogo.MediaType.SubType "svg") }}
|
||||
{{ $mainLogo = $mainLogo.Resize "42x" }}
|
||||
{{ end }}
|
||||
{{ $mainLogo = $mainLogo.RelPermalink}}
|
||||
{{ end }}
|
||||
|
||||
{{ if $invertedLogo }}
|
||||
{{ $invertedLogo = resources.Get $invertedLogo}}
|
||||
{{ if and $invertedLogo (ne $invertedLogo.MediaType.SubType "svg")}}
|
||||
{{ $invertedLogo = $invertedLogo.Resize "42x" }}
|
||||
{{ end }}
|
||||
{{ $invertedLogo = $invertedLogo.RelPermalink}}
|
||||
{{ end }}
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
|
||||
{{ if $mainLogo }}
|
||||
<img src="{{ $mainLogo }}" alt="Logo">
|
||||
{{ end }}
|
||||
{{- site.Title -}}
|
||||
</a>
|
||||
<button class="navbar-toggler navbar-light" id="toc-toggler" type="button">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse lang-selector" id="top-nav-items">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
{{ if .IsTranslated }}
|
||||
{{ partial "navigators/lang-selector-2.html" . }}
|
||||
{{ end }}
|
||||
{{ if site.Params.features.darkMode.enable }}
|
||||
{{ partial "navigators/theme-selector.html" . }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Store the logo information in a hidden img for the JS -->
|
||||
{{ if $mainLogo }}
|
||||
<img src="{{ $mainLogo }}" class="d-none" id="main-logo" alt="Logo">
|
||||
{{ end }}
|
||||
{{ if $invertedLogo }}
|
||||
<img src="{{ $invertedLogo }}" class="d-none" id="inverted-logo" alt="Inverted Logo">
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
|
@ -37,6 +37,11 @@
|
|||
{{ $invertedLogo = $invertedLogo.RelPermalink}}
|
||||
{{ end }}
|
||||
|
||||
{{ $logo := $mainLogo }}
|
||||
{{ if .IsHome }}
|
||||
{{ $logo = $invertedLogo }}
|
||||
{{ end }}
|
||||
|
||||
{{ $customMenus := site.Params.customMenus }}
|
||||
{{ if (index site.Data site.Language.Lang).site.customMenus }}
|
||||
{{ $customMenus = (index site.Data site.Language.Lang).site.customMenus }}
|
||||
|
|
@ -47,29 +52,34 @@
|
|||
{{ $sections = (index site.Data site.Language.Lang).sections }}
|
||||
{{ end }}
|
||||
|
||||
<nav class="navbar navbar-expand-xl top-navbar initial-navbar" id="top-navbar">
|
||||
<nav class="navbar navbar-expand-xl top-navbar shadow {{ if .IsHome}}transparent-navbar homepage{{end}}" id="top-navbar">
|
||||
<div class="container">
|
||||
{{ if not .IsHome }}
|
||||
<button class="navbar-toggler navbar-light" id="sidebar-toggler" type="button">
|
||||
<i data-feather="sidebar"></i>
|
||||
</button>
|
||||
{{ end }}
|
||||
<a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
|
||||
{{ if $invertedLogo }}
|
||||
<img src="{{ $invertedLogo }}" id="logo" alt="Logo">
|
||||
{{ if $logo }}
|
||||
<img src="{{ $logo }}" id="logo" alt="Logo">
|
||||
{{ end }}
|
||||
{{- site.Title -}}
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler navbar-dark"
|
||||
class="navbar-toggler {{if .IsHome}}navbar-dark{{else}}navbar-light{{end}}"
|
||||
id="navbar-toggler"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#top-nav-items"
|
||||
aria-label="menu"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<i data-feather="menu"></i>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#home">{{ i18n "home" }}</a>
|
||||
<a class="nav-link" href="{{ site.BaseURL | relLangURL }}#home">{{ i18n "home" }}</a>
|
||||
</li>
|
||||
{{ if $sections }}
|
||||
{{ $sectionCount := 1 }}
|
||||
|
|
@ -78,7 +88,7 @@
|
|||
{{ $sectionCount = add $sectionCount 1}}
|
||||
{{ if le $sectionCount $maxVisibleSections }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
|
||||
<a class="nav-link" href="{{ site.BaseURL | relLangURL }}#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -92,7 +102,7 @@
|
|||
{{ if and (.section.enable) (.section.showOnNavbar) }}
|
||||
{{ $sectionCount = add $sectionCount 1}}
|
||||
{{ if gt $sectionCount $maxVisibleSections }}
|
||||
<a class="dropdown-item" href="#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
|
||||
<a class="dropdown-item" href="{{ site.BaseURL | relLangURL }}#{{ partial "helpers/get-section-id.html" . }}">{{ .section.name }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
|
|
@ -102,16 +112,16 @@
|
|||
{{- end }}
|
||||
{{ $shouldAddSeparator:= partial "helpers/add-navbar-separator.html" . }}
|
||||
{{ if $shouldAddSeparator }}
|
||||
<div class="dropdown-divider" id="top-navbar-divider"></div>
|
||||
<div id="top-navbar-divider"></div>
|
||||
{{ end }}
|
||||
{{ if $blogEnabled }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="blog-link" href="{{ "/posts/" | relLangURL }}">{{ i18n "posts" }}</a>
|
||||
<a class="nav-link" id="blog-link" href="{{ path.Join (site.BaseURL | relLangURL) "posts" }}">{{ i18n "posts" }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ if $notesEnabled }}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="note-link" href="{{ "/notes/" | relLangURL }}">{{ i18n "notes" }}</a>
|
||||
<a class="nav-link" id="note-link" href="{{ path.Join (site.BaseURL | relLangURL) "notes" }}">{{ i18n "notes" }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ range $customMenus }}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="row next-prev-navigator">
|
||||
{{ if $prevPage }}
|
||||
<div class="col-md-6 previous-article">
|
||||
<a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn btn-outline-info">
|
||||
<a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn filled-button">
|
||||
<div><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</div>
|
||||
<div class="next-prev-text">{{ $prevPage.Title }}</div>
|
||||
</a>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
{{ $columnWidth = "col-md-6" }}
|
||||
{{ end}}
|
||||
<div class="{{ $columnWidth }} next-article">
|
||||
<a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn btn-outline-info">
|
||||
<a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn filled-button">
|
||||
<div>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></div>
|
||||
<div class="next-prev-text">{{ $nextPage.Title }}</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
{{ range .menuItems }}
|
||||
{{ $class:= "" }}
|
||||
{{ $icon:= "fa-plus-circle" }}
|
||||
{{ $icon:= "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 $.menuName .) ($.ctx.IsMenuCurrent $.menuName .)}}
|
||||
{{ $icon = "fa-minus-circle"}}
|
||||
{{ $icon = "minus-circle"}}
|
||||
{{ $class = "active" }}
|
||||
{{end}}
|
||||
{{ if .HasChildren }}
|
||||
<!-- Add current entry -->
|
||||
<li>
|
||||
<i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}"> {{.Name}}</a>
|
||||
<i data-feather="{{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a>
|
||||
<!-- Add sub-tree -->
|
||||
<ul class="{{ $class }}">
|
||||
{{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }}
|
||||
|
|
@ -17,6 +17,6 @@
|
|||
</li>
|
||||
{{ else }}
|
||||
<!-- No sub-tree. So, only add current entry -->
|
||||
<li><a class="{{$class}}" href="{{ .PageRef | default .URL }}" title="{{ .Name }}">{{.Name}}</a></li>
|
||||
<li><a class="{{$class}} list-link" href="{{ .PageRef | default .URL }}" title="{{ .Name }}">{{.Name}}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue