diff --git a/assets/styles/components/links.scss b/assets/styles/components/links.scss index 61369a2d8..4372bcc2e 100644 --- a/assets/styles/components/links.scss +++ b/assets/styles/components/links.scss @@ -2,6 +2,10 @@ a { color: get-light-color('accent-color'); @include transition(); + &:link { + text-decoration: none; + } + &:hover, &:focus { text-decoration: get-light-color('hover-over-accent-color') underline; diff --git a/layouts/_default/search.html b/layouts/_default/search.html index 9475868e8..371c80899 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -58,8 +58,8 @@ <h5 class="card-title">${title}</h5> {{ end }} </div> <div class="card-footer"> - <span class="float-left">${date}</span> - <a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a> + <span class="float-start">${date}</span> + <a href="${link}" class="float-end btn btn-outline-info btn-sm">Read</a> </div> </div> </div> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 8981d32d7..cd511ac6e 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -37,7 +37,7 @@ <!--Content Start--> <div class="page-content"> {{ if site.Params.features.blog.showAuthor | default true }} - <div class="author-profile ml-auto align-self-lg-center"> + <div class="author-profile ms-auto align-self-lg-center"> <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image"> <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5> <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p> @@ -51,7 +51,7 @@ <h1>{{ .Page.Title }}</h1> </div> {{ if not (site.Params.features.blog.showAuthor | default true) }} - <div class="author-profile ml-auto align-self-lg-center"> + <div class="author-profile ms-auto align-self-lg-center"> <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p> </div> {{ end }} @@ -64,7 +64,7 @@ <h1>{{ .Page.Title }}</h1> </div> <!-- Share or Contribute --> - <div class="row pl-3 pr-3"> + <div class="row ps-3 pe-3"> <!--Social Media Share Buttons--> <div class="col-md-6 share-buttons"> {{ if site.Params.features.blog.shareButtons }} @@ -175,7 +175,7 @@ <h1>{{ .Page.Title }}</h1> <section class="toc-section" id="toc-section"> {{ if and site.Params.features.toc.enable ( .Params.enableTOC | default true ) }} <div class="toc-holder"> - <h5 class="text-center pl-3">{{ i18n "toc_heading" }}</h5> + <h5 class="text-center ps-3">{{ i18n "toc_heading" }}</h5> <hr> <div class="toc"> {{ .TableOfContents }} diff --git a/layouts/partials/cards/accomplishments.html b/layouts/partials/cards/accomplishments.html index a62fa229e..27015b1aa 100644 --- a/layouts/partials/cards/accomplishments.html +++ b/layouts/partials/cards/accomplishments.html @@ -4,7 +4,7 @@ <h5 class="card-title mb-0">{{ .name }}</h5> <div class="sub-title"> <span><a href="{{ .organization.url }}" title="{{ .organization.name }}" target="_blank" rel="noopener">{{ .organization.name }}</a></span> - <span class="ml-2">{{ .timeline }}</span> + <span class="ms-2">{{ .timeline }}</span> </div> </div> <div class="card-body"> @@ -12,7 +12,7 @@ <h5 class="card-title mb-0">{{ .name }}</h5> </div> <div class="card-footer"> {{ if .certificateURL }} - <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a> + <a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a> {{ end }} </div> </div> diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html index 99178bc6d..4426b7c51 100644 --- a/layouts/partials/cards/post.html +++ b/layouts/partials/cards/post.html @@ -15,12 +15,12 @@ <h5 class="card-title">{{ .Title }}</h5> {{ end }} </div> <div class="card-footer"> - <span class="float-left"> + <span class="float-start"> {{ .Date | time.Format ":date_full" }} {{ if site.Params.features.readingTime }} | {{.ReadingTime}} {{ i18n "minute" .ReadingTime }} {{ end }}</span> <a href="{{ .RelPermalink | relLangURL }}" - class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a> + class="float-end btn btn-outline-info btn-sm">{{ i18n "read" }}</a> </div> </div> </div> diff --git a/layouts/partials/cards/publication.html b/layouts/partials/cards/publication.html index bdc7b219a..2c238e139 100644 --- a/layouts/partials/cards/publication.html +++ b/layouts/partials/cards/publication.html @@ -12,11 +12,11 @@ <h5 class="card-title mb-0">{{ .title }}</h5> <div class="sub-title"> <span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span> - <span class="ml-2">{{ .publishedIn.date }}</span> + <span class="ms-2">{{ .publishedIn.date }}</span> </div> <div class="authors"> {{ range $index,$author:= .authors }} - <span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span> + <span class="me-2"><a class="" href="{{.url}}">{{ .name }}</a></span> {{ end }} </div> </div> @@ -26,13 +26,13 @@ <h5 class="card-title mb-0">{{ .title }}</h5> <div class="card-footer"> <div class="tags"> {{ range $index,$tag:= .tags }} - <span class="btn badge btn-info ml-1 p-2"> + <span class="btn badge btn-info ms-1 p-2"> {{ $tag }} </span> {{ end }} </div> <div class="details-btn"> - <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a> + <a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a> </div> </div> </div> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 048074fd4..c04bd7a34 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -66,7 +66,7 @@ <footer id="footer" class="container-fluid text-center align-content-center footer pb-2"> <div class="container pt-5"> - <div class="row text-left"> + <div class="row text-start"> {{ if $navigationEnabled }} <div class="col-md-4 col-sm-12"> <h5>{{ i18n "navigation" }}</h5> @@ -193,7 +193,7 @@ <h5>{{ i18n "contact_me" }}</h5> {{ if $credentialsEnabled }} <hr /> <div class="container"> - <div class="row text-left"> + <div class="row text-start"> <div class="col-md-4"> <a id="theme" href="https://github.com/hugo-toha/toha" target="_blank" rel="noopener"> <img src="{{ $themeLogo }}" alt="Toha Theme Logo"> @@ -201,7 +201,7 @@ <h5>{{ i18n "contact_me" }}</h5> </a> </div> <div class="col-md-4 text-center">{{ $copyrightNotice | markdownify }}</div> - <div class="col-md-4 text-right"> + <div class="col-md-4 text-end"> <a id="hugo" href="https://gohugo.io/" target="_blank" rel="noopener">{{ i18n "hugoAttributionText" }} <img src="{{ $hugoLogo }}" diff --git a/layouts/partials/navigators/navbar.html b/layouts/partials/navigators/navbar.html index d10a78e0c..ee1025e21 100644 --- a/layouts/partials/navigators/navbar.html +++ b/layouts/partials/navigators/navbar.html @@ -77,7 +77,7 @@ </button> <div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items"> - <ul class="nav navbar-nav ml-auto"> + <ul class="nav navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="{{ if .IsHome }}#home{{else}}{{ site.BaseURL | relLangURL }}#home{{end}}">{{ i18n "home" }}</a> </li> diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html index 34a48ec94..fc4a95bca 100644 --- a/layouts/partials/sections/about.html +++ b/layouts/partials/sections/about.html @@ -25,7 +25,7 @@ <h5 class="p-1"> <p class="p-1 text-justify"> {{ .summary | markdownify }} </p> - <div class="text-container ml-auto"> + <div class="text-container ms-auto"> <ul class="social-link d-flex"> {{ range .socialLinks }} <li> @@ -52,7 +52,7 @@ <h5 class="p-1"> {{ end }} </div> <!-- soft skills circular-progressbar --> - <div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0"> + <div class="col-sm-6 pt-5 ps-md-4 ps-sm-3 pt-sm-0"> <div class="row"> {{ range .badges }} {{ partial "misc/badge.html" . }} diff --git a/layouts/partials/sections/achievements/entry.html b/layouts/partials/sections/achievements/entry.html index 3718e567f..ba5cd52a8 100644 --- a/layouts/partials/sections/achievements/entry.html +++ b/layouts/partials/sections/achievements/entry.html @@ -17,11 +17,11 @@ <i class="fa-solid fa-xmark hidden"></i> <i class="fa-solid fa-magnifying-glass-plus" id="enlarge-icon"></i> <h4 class="title" id="achievement-title">{{ .title }}</h4> - <div class="caption hidden col-lg-6 text-left" id="caption"> + <div class="caption hidden col-lg-6 text-start" id="caption"> <h4>{{ .title }}</h4> <p>{{ .summary | markdownify }}</p> {{ if .url }} - <a class="btn btn-info ml-1 pl-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a> + <a class="btn btn-info ms-1 ps-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a> {{ end }} </div> <span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span> diff --git a/layouts/partials/sections/education-alt.html b/layouts/partials/sections/education-alt.html index 8716c5bd1..dce461697 100644 --- a/layouts/partials/sections/education-alt.html +++ b/layouts/partials/sections/education-alt.html @@ -101,9 +101,9 @@ <h6 class="text-heading">{{ i18n "taken_courses" }}:</h6> </ul> {{ end }} {{ if gt (len .takenCourses.courses) $collapseAfter }} - <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" + <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}" id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button> - <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" + <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}" id="show-less-btn" aria-label="{{ i18n "show_less"}}">{{ i18n "show_less"}}</button> {{ end }} </div> diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html index ced54048d..62c723975 100644 --- a/layouts/partials/sections/education.html +++ b/layouts/partials/sections/education.html @@ -101,9 +101,9 @@ <h6 class="text-heading">{{ i18n "taken_courses"}}:</h6> </ul> {{ end }} {{ if gt (len .takenCourses.courses ) $collapseAfter }} - <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" + <button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}" id="show-more-btn">{{ i18n "show_more"}}</button> - <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}" + <button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}" id="show-less-btn">{{ i18n "show_less"}}</button> {{ end }} </div> diff --git a/layouts/partials/sections/experiences/vertical-line.html b/layouts/partials/sections/experiences/vertical-line.html index 7d8b74bce..117874116 100644 --- a/layouts/partials/sections/experiences/vertical-line.html +++ b/layouts/partials/sections/experiences/vertical-line.html @@ -1,3 +1,3 @@ <div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center"> - <div class="circle font-weight-bold">{{ add . 1 }}</div> + <div class="circle fw-bold">{{ add . 1 }}</div> </div> diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html index 34a5e6f9e..98c86cc56 100644 --- a/layouts/partials/sections/projects.html +++ b/layouts/partials/sections/projects.html @@ -11,7 +11,7 @@ <h1 class="text-center"> <h1 class="text-center" style="display: none"> <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1> {{ end }} - <div class="container ml-auto text-center"> + <div class="container ms-auto text-center"> <div class="btn-group flex-wrap" role="group" id="project-filter-buttons"> {{ range .buttons }} <button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}"> diff --git a/layouts/partials/sections/publications.html b/layouts/partials/sections/publications.html index 733d57895..3102f3de4 100644 --- a/layouts/partials/sections/publications.html +++ b/layouts/partials/sections/publications.html @@ -11,7 +11,7 @@ <h1 class="text-center"> <h1 class="text-center" style="display: none"> <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1> {{ end }} - <div class="container ml-auto text-center"> + <div class="container ms-auto text-center"> <div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons"> {{ range .buttons }} <button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}"> diff --git a/layouts/partials/sections/recent-posts.html b/layouts/partials/sections/recent-posts.html index 87792b48f..3f094912a 100644 --- a/layouts/partials/sections/recent-posts.html +++ b/layouts/partials/sections/recent-posts.html @@ -29,7 +29,7 @@ <h1 class="text-center" style="display: none"> display: flex; align-items: center; justify-content: center;"> - <a href="/posts/" title="Show More" class="float-right btn btn-outline-info btn-sm" > + <a href="/posts/" title="Show More" class="float-end btn btn-outline-info btn-sm" > {{ i18n "show_more"}}</a> </div> {{ end }} diff --git a/package-lock.json b/package-lock.json index b0aff0467..1ef8a639a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@fontsource/mulish": "4.5.13", "@fortawesome/fontawesome-free": "^6.2.0", "autoprefixer": "^10.4.13", - "bootstrap": "^4.6.2", + "bootstrap": "^5.3.3", "eslint": "^8.31.0", "eslint-config-prettier": "^8.6.0", "eslint-config-standard": "^17.0.0", @@ -150,6 +150,17 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "dev": true, + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -352,9 +363,9 @@ } }, "node_modules/bootstrap": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz", - "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", "dev": true, "funding": [ { @@ -367,8 +378,7 @@ } ], "peerDependencies": { - "jquery": "1.9.1 - 3", - "popper.js": "^1.16.1" + "@popperjs/core": "^2.11.8" } }, "node_modules/brace-expansion": { @@ -2522,13 +2532,6 @@ "integrity": "sha512-46Qnh3qs+6EJlWDHmvWRW6qiz5jFy2mkh9UvtTvQmLJMZIjKrdz4du68le7hLX4tAWCp6QTKiq/OuLv6huHxZg==", "dev": true }, - "node_modules/jquery": { - "version": "3.6.3", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz", - "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==", - "dev": true, - "peer": true - }, "node_modules/js-sdsl": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", @@ -3931,6 +3934,13 @@ "fastq": "^1.6.0" } }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "dev": true, + "peer": true + }, "@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -4063,9 +4073,9 @@ "dev": true }, "bootstrap": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz", - "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", "dev": true, "requires": {} }, @@ -5652,13 +5662,6 @@ "integrity": "sha512-46Qnh3qs+6EJlWDHmvWRW6qiz5jFy2mkh9UvtTvQmLJMZIjKrdz4du68le7hLX4tAWCp6QTKiq/OuLv6huHxZg==", "dev": true }, - "jquery": { - "version": "3.6.3", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz", - "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==", - "dev": true, - "peer": true - }, "js-sdsl": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", diff --git a/package.json b/package.json index e3478f531..41e0067db 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@fontsource/mulish": "4.5.13", "@fortawesome/fontawesome-free": "^6.2.0", "autoprefixer": "^10.4.13", - "bootstrap": "^4.6.2", + "bootstrap": "^5.3.3", "eslint": "^8.31.0", "eslint-config-prettier": "^8.6.0", "eslint-config-standard": "^17.0.0",