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 2023-09-29 04:27:19 +06:00 committed by GitHub
parent 77447b7723
commit 6dc9d1d33d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 2532 additions and 3593 deletions

View file

@ -7,18 +7,11 @@
<div class="card-body">
<h5 class="card-title">{{ .Title }}</h5>
<p class="card-text post-summary">{{ .Summary }}</p>
{{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
{{ partial "misc/tags.html" .Params.tags }}
{{ end }}
</div>
<div class="card-footer">
{{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
<div class="taxonomy-terms-card">
<ul style="padding-left: 0;">
{{ range .Params.tags }}
{{ $url:= printf "tags/%s/" . }}
<li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
{{ end }}
</ul>
</div>
{{ end }}
<span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
<a
href="{{ .RelPermalink | relLangURL }}"

View file

@ -1,29 +0,0 @@
<div class="col-lg-4 col-md-6 pt-2 post-card">
<a href="{{ .RelPermalink }}" title="{{ .Title }}" class="post-card-link">
<div class="card">
<div class="card-head">
<img class="card-img-top" src='{{ partial "helpers/get-hero.html" . }}'
alt="Card image cap"
/>
</div>
<div class="card-body">
<h5 class="card-title">{{ .Title }}</h5>
<p class="card-text post-summary"> {{ .Summary }}</p>
</div>
<div class="card-footer">
{{ if and site.Params.features.tags.enable site.Params.features.tags.on_card }}
<div class="taxonomy-terms">
<ul style="padding-left: 0;">
{{ range .Params.tags }}
{{ $url:= printf "tags/%s/" . }}
<li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
{{ end }}
</ul>
</div>
{{ end }}
<span class="float-left">{{ .Date.Format "January 2, 2006" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} minute{{ if (ne .ReadingTime 1) }}s{{ end }}{{ end }}</span>
<a href="{{ .RelPermalink }}" title="{{ i18n "read" }}" class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
</div>
</div>
</a>
</div>

View file

@ -1,5 +1,5 @@
<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
<a class="skill-card-link" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
<a class="text-decoration-none" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
<div class="card">
<div class="card-head d-flex">
{{ if .logo }}

View file

@ -1,7 +1,7 @@
<div class="col-6 col-lg-4 p-2">
{{ if eq .type "certification" }}
{{/* Verifiable certificate badge from https://www.credly.com */}}
<div class="">
<div class="certificate-badge">
<a href="{{ .url }}" target="_blank" rel="noopener noreferrer">
<img src="{{ .badge }}" alt="{{ .name }}" />
</a>

View file

@ -0,0 +1,8 @@
<div class="tags">
<ul style="padding-left: 0;">
{{ range . }}
{{ $url:= printf "tags/%s/" . }}
<li class="rounded"><a href="{{ $url | urlize | relLangURL }}" class="btn, btn-sm">{{ . }}</a></li>
{{ end }}
</ul>
</div>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1 +1 @@
{{ partial "helpers/script-bundle.html" }}
{{ partial "helpers/script-bundle.html" }}

View file

@ -43,11 +43,11 @@
</div>
<h6>{{ .name }}</h6>
{{ if .grade }}
<h6><span>{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of" }} <span>{{ .grade.outOf }}</span></h6>
<h6 class="text-heading"><span>{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of" }} <span>{{ .grade.outOf }}</span></h6>
{{ end }}
{{ if .publications }}
<div class="publications">
<h6 class="text-muted">{{i18n "publications"}}</h6>
<h6 class="text-heeading">{{i18n "publications"}}:</h6>
<ul>
{{ range .publications }}
{{ if .url }}
@ -62,7 +62,7 @@
{{ if .takenCourses }}
{{ $collapseAfter := .takenCourses.collapseAfter | default 2 }}
<div class="taken-courses">
<h6 class="text-muted">{{ i18n "taken_courses" }}</h6>
<h6 class="text-heading">{{ i18n "taken_courses" }}:</h6>
{{ if .takenCourses.showGrades }}
{{ $hideScale := .takenCourses.hideScale }}
<table>
@ -98,7 +98,7 @@
{{ end }}
{{ if .extracurricularActivities }}
<div class="extracurricular-activities">
<h6 class="text-muted">{{ i18n "extracurricular_activities" }}</h6>
<h6 class="text-heading">{{ i18n "extracurricular_activities" }}:</h6>
<ul>
{{ range .extracurricularActivities }}
<li>{{ . | markdownify }}</li>

View file

@ -43,11 +43,11 @@
</div>
<h6>{{ .name }}</h6>
{{ if .grade }}
<h6><span class="text-muted">{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of"}} <span>{{ .grade.outOf }}</span></h6>
<h6><span class="text-heading">{{ .grade.scale }}: </span><span>{{ .grade.achieved }}</span> {{ i18n "out_of"}} <span>{{ .grade.outOf }}</span></h6>
{{ end }}
{{ if .publications }}
<div class="publications">
<h6 class="text-muted">{{ i18n "publications"}}</h6>
<h6 class="text-heading">{{ i18n "publications"}}:</h6>
<ul>
{{ range .publications }}
{{ if .url }}
@ -62,7 +62,7 @@
{{ if .takenCourses }}
{{ $collapseAfter := .takenCourses.collapseAfter | default 2 }}
<div class="taken-courses">
<h6 class="text-muted">{{ i18n "taken_courses"}}</h6>
<h6 class="text-heading">{{ i18n "taken_courses"}}:</h6>
{{ if .takenCourses.showGrades }}
{{ $hideScale := .takenCourses.hideScale }}
<table>
@ -98,7 +98,7 @@
{{ end }}
{{ if .extracurricularActivities }}
<div class="extracurricular-activities">
<h6 class="text-muted">{{ i18n "extracurricular_activities"}}</h6>
<h6 class="text-heading">{{ i18n "extracurricular_activities"}}:</h6>
<ul>
{{ range .extracurricularActivities }}
<li>{{ . | markdownify }}</li>

View file

@ -13,7 +13,7 @@
<p>{{ .company.overview | markdownify }}</p>
<!-- Add the responsibilities handled at this position -->
{{ if $position.responsibilities }}
<h6 class="text-muted">{{ i18n "responsibilities" }}</h6>
<h6 class="text-heading">{{ i18n "responsibilities" }}</h6>
<ul class="justify-content-around">
{{ range $position.responsibilities }}
<li>{{ . | markdownify }}</li>

View file

@ -20,7 +20,7 @@
<div class="container">
<div class="row" id="recent-post-cards">
{{ range first $numShow (where (where site.RegularPages.ByDate.Reverse "Type" "posts" ) "Layout" "!=" "search") }}
{{ partial "cards/recent-post.html" . }}
{{ partial "cards/post.html" . }}
{{ end }}
</div>
</div>