mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-13 10:15:22 +00:00
feat: add support for displaying square avatars
Also, make About widget avatar responsive, appearing larger on large devices. BREAKING CHANGE: `gravatar` option moved under new `[avatar]` section in `params.toml`. `shape` option added under new `[avatar]` section in `params.toml`. Close #1509
This commit is contained in:
George Cushen committed
1 parent
db716b2349
commit
1a3efac296
8 files changed
+46
-24
No files matched your search
@@ -267,12 +267,9 @@ ul.share li:hover i {
|
||||
* Author profile card
|
||||
**************************************************/
|
||||
|
||||
.author-card .portrait {
|
||||
.author-card .avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.author-card .card-title {
|
||||
|
||||
@@ -265,14 +265,29 @@ a.hero-cta-alt:hover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.portrait {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
.avatar {
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
// Use smaller avatar size in About widget on small devices.
|
||||
@include media-breakpoint-down(sm) {
|
||||
.wg-about .avatar {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-square {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.portrait-title h2 {
|
||||
font-size: 1.75em;
|
||||
font-weight: 300;
|
||||
@@ -511,7 +526,7 @@ ul.ul-edu li .description p.institution {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.people-widget .portrait {
|
||||
.people-widget .avatar {
|
||||
width: 80%;
|
||||
max-width: 150px;
|
||||
height: auto;
|
||||
|
||||
@@ -139,9 +139,6 @@ address_format = "en-us"
|
||||
## Advanced
|
||||
############################
|
||||
|
||||
# Get user avatars from Gravatar.com? (true/false)
|
||||
gravatar = false
|
||||
|
||||
# Main menu alignment (l = left, c = center, r = right) and logo options.
|
||||
main_menu = {align = "l", show_logo = true}
|
||||
|
||||
@@ -162,6 +159,16 @@ link_authors = true
|
||||
# E.g. To load `/assets/js/custom.js`, set `plugins_js = ["custom"]`.
|
||||
plugins_js = []
|
||||
|
||||
# Avatars.
|
||||
# An avatar is an image that appears next to a user's name.
|
||||
# An avatar can be uploaded as an image named `avatar` to each user's profile or fetched from Gravatar.com.
|
||||
[avatar]
|
||||
# Get user avatars from Gravatar.com? (true/false)
|
||||
gravatar = false
|
||||
|
||||
# Choose a shape for avatar images. Options: circle, square.
|
||||
shape = "circle"
|
||||
|
||||
# Available address formats.
|
||||
[address_formats]
|
||||
en-us = {order = ['street', 'city', 'region', 'postcode'], delimiters = [', ', ', ', ' ', '']}
|
||||
|
||||
+1
-1
@@ -3,4 +3,4 @@
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/:root{--blue: #007bff;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--red: #dc3545;--orange: #fd7e14;--yellow: #ffc107;--green: #28a745;--teal: #20c997;--cyan: #17a2b8;--white: #fff;--gray: #6c757d;--gray-dark: #343a40;--primary: #2962ff;--secondary: #6c757d;--success: #28a745;--info: #17a2b8;--warning: #ffc107;--danger: #dc3545;--light: #f8f9fa;--dark: #343a40;--breakpoint-xs: 0;--breakpoint-sm: 576px;--breakpoint-md: 768px;--breakpoint-lg: 992px;--breakpoint-xl: 1200px;--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0 !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#2962ff;text-decoration:none;background-color:transparent}a:hover{color:#003adc;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:rgba(0,0,0,0.54);text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button:not(:disabled),[type="button"]:not(:disabled),[type="reset"]:not(:disabled),[type="submit"]:not(:disabled){cursor:pointer}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{padding:0;border-style:none}input[type="radio"],input[type="checkbox"]{box-sizing:border-box;padding:0}input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px;-webkit-appearance:none}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none !important}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}h1,.h1{font-size:2.5rem}h2,.h2{font-size:2rem}h3,.h3{font-size:1.75rem}h4,.h4{font-size:1.5rem}h5,.h5{font-size:1.25rem}h6,.h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgbLine truncated
|
||||
*/:root{--blue: #007bff;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--red: #dc3545;--orange: #fd7e14;--yellow: #ffc107;--green: #28a745;--teal: #20c997;--cyan: #17a2b8;--white: #fff;--gray: #6c757d;--gray-dark: #343a40;--primary: #2962ff;--secondary: #6c757d;--success: #28a745;--info: #17a2b8;--warning: #ffc107;--danger: #dc3545;--light: #f8f9fa;--dark: #343a40;--breakpoint-xs: 0;--breakpoint-sm: 576px;--breakpoint-md: 768px;--breakpoint-lg: 992px;--breakpoint-xl: 1200px;--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0 !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#2962ff;text-decoration:none;background-color:transparent}a:hover{color:#003adc;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:rgba(0,0,0,0.54);text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button:not(:disabled),[type="button"]:not(:disabled),[type="reset"]:not(:disabled),[type="submit"]:not(:disabled){cursor:pointer}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{padding:0;border-style:none}input[type="radio"],input[type="checkbox"]{box-sizing:border-box;padding:0}input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px;-webkit-appearance:none}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none !important}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}h1,.h1{font-size:2.5rem}h2,.h2{font-size:2rem}h3,.h3{font-size:1.75rem}h4,.h4{font-size:1.5rem}h5,.h5{font-size:1.25rem}h6,.h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgbLine truncated
|
||||
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
@@ -27,12 +27,13 @@
|
||||
{{ $profile_url = site.BaseURL }}
|
||||
{{ end }}
|
||||
{{ $avatar := (.Resources.ByType "image").GetMatch "*avatar*" }}
|
||||
{{ $avatar_shape := site.Params.avatar.shape | default "circle" }}
|
||||
<div class="media author-card content-widget-hr">
|
||||
{{ if and site.Params.gravatar .Params.email }}
|
||||
<img class="portrait mr-3" src="https://s.gravatar.com/avatar/{{ md5 .Params.email }}?s=200')" alt="Avatar">
|
||||
{{ if and site.Params.avatar.gravatar .Params.email }}
|
||||
<img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 .Params.email }}?s=200')" alt="Avatar">
|
||||
{{ else if $avatar }}
|
||||
{{ $avatar_image := $avatar.Fill "250x250 Center" }}
|
||||
<img class="portrait mr-3" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
|
||||
{{ $avatar_image := $avatar.Fill "200x200 Center" }}
|
||||
<img class="avatar mr-3 {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
|
||||
{{ end }}
|
||||
|
||||
<div class="media-body">
|
||||
|
||||
@@ -15,17 +15,18 @@
|
||||
{{end}}
|
||||
{{ $person := $person_page.Params }}
|
||||
{{ $avatar := ($person_page.Resources.ByType "image").GetMatch "*avatar*" }}
|
||||
{{ $avatar_shape := site.Params.avatar.shape | default "circle" }}
|
||||
|
||||
<!-- About widget -->
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-4">
|
||||
<div id="profile">
|
||||
|
||||
{{ if site.Params.gravatar }}
|
||||
<img class="portrait" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=200')" alt="Avatar">
|
||||
{{ if site.Params.avatar.gravatar }}
|
||||
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="https://s.gravatar.com/avatar/{{ md5 $person.email }}?s=270')" alt="Avatar">
|
||||
{{ else if $avatar }}
|
||||
{{ $avatar_image := $avatar.Fill "250x250 Center" }}
|
||||
<img class="portrait" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
|
||||
{{ $avatar_image := $avatar.Fill "270x270 Center" }}
|
||||
<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $avatar_image.RelPermalink }}" alt="Avatar">
|
||||
{{ end }}
|
||||
|
||||
<div class="portrait-title">
|
||||
|
||||
@@ -38,14 +38,15 @@
|
||||
{{ end }}
|
||||
<div class="col-12 col-sm-auto people-person">
|
||||
{{ $src := "" }}
|
||||
{{ if site.Params.gravatar }}
|
||||
{{ $src = printf "https://s.gravatar.com/avatar/%s?s=200" (md5 .Params.email) }}
|
||||
{{ if site.Params.avatar.gravatar }}
|
||||
{{ $src = printf "https://s.gravatar.com/avatar/%s?s=150" (md5 .Params.email) }}
|
||||
{{ else if $avatar }}
|
||||
{{ $avatar_image := $avatar.Fill "150x150 Center" }}
|
||||
{{ $src = $avatar_image.RelPermalink }}
|
||||
{{ end }}
|
||||
{{ if $src }}
|
||||
{{with $link}}<a href="{{.}}">{{end}}<img class="portrait" src="{{ $src }}" alt="Avatar">{{if $link}}</a>{{end}}
|
||||
{{ $avatar_shape := site.Params.avatar.shape | default "circle" }}
|
||||
{{with $link}}<a href="{{.}}">{{end}}<img class="avatar {{if eq $avatar_shape "square"}}avatar-square{{else}}avatar-circle{{end}}" src="{{ $src }}" alt="Avatar">{{if $link}}</a>{{end}}
|
||||
{{ end }}
|
||||
|
||||
<div class="portrait-title">
|
||||
|
||||
Reference in new issue
Block a user