56 lines
1.2 KiB
Plaintext
56 lines
1.2 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
|
|
|
|
.icon-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)) |