search

laozhu / hugo-nuo

🎨 A responsive light & clean hugo theme for blogger.
https://laozhu.me
MIT License
426 stars 150 forks source link

Change the avatar frame from circle to hexagon #105

Closed Edouard-Legoupil closed 5 years ago

Edouard-Legoupil commented 5 years ago

Hi -

I would like to slightly change the theme by changing the avatar frame from a circle to an hexagon - (using something like https://github.com/cran/hexSticker )

Any quick hint on how to do that?

Thanks a lot! Edouard

laozhu commented 5 years ago

@Edouard-Legoupil Make it with CSS clip-path

  1. Generate hexagon clip-path by http://bennettfeely.com/clippy/
  2. Remove border and border-radius, add clip-path

image

  1. It seems OK for mine

image

BTW:

  1. Old browsers don't support clip-path, caniuse
  2. You should change the width and height at http://bennettfeely.com/clippy/, mine is squashed.
Edouard-Legoupil commented 5 years ago

Thanks -- Which specific file shall I edit

I tried to replace this https://github.com/laozhu/hugo-nuo/blob/master/assets/styles/partials/_header.scss#L5:L6

/ border-radius: 50%; border: 4px solid $media-border; /

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

but it did not worked out.. Sorry CSS is not my big strength...

laozhu commented 5 years ago

@Edouard-Legoupil You CSS is OK, It's my fault caused by using PWA cache-first strategy, I have fixed this problem in #101, you can pull the new version and do it again.