57 lines
1.3 KiB
Plaintext

.sidebar-social-media
horizontal
justify-content space-around
padding 0.6rem 0
border-top 1px solid rgba(0, 0, 0, 0.1)
.social-media-button
font-size 1.3rem
opacity 0.4
color text-color
:hover
transform scale(1.1)
opacity 1
svg-icon
[name="discord"]
transform scale(1.1)
// .sidebar-social-media
// position relative
// width 6rem
// height 6rem
// // border dashed 1px
// // border-radius 50%
// margin content-padding auto
// default-transition
// :hover
// transform scale(1.2)
// .social-media-button
// display block
// position absolute
// left 50%
// top 50%
// width 4rem
// height 4rem
// margin -0.5rem
// color text-color
// circle-start = 160deg
// .circle-1
// transform rotate(circle-start) translate(2rem) rotate(calc(circle-start * -1))
// .circle-2
// transform rotate(calc(circle-start + 72deg)) translate(2rem) rotate(calc((circle-start + 72deg) * -1))
// .circle-3
// transform rotate(calc(circle-start + 144deg)) translate(2rem) rotate(calc((circle-start + 144deg) * -1))
// .circle-4
// transform rotate(calc(circle-start + 216deg)) translate(2rem) rotate(calc((circle-start + 216deg) * -1))
// .circle-5
// transform rotate(calc(circle-start + 288deg)) translate(2rem) rotate(calc((circle-start + 288deg) * -1))