| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .sidebar { |
|---|
| | | width: 7%; |
|---|
| | | width: 8%; |
|---|
| | | height: 40%; |
|---|
| | | line-height: 90px; |
|---|
| | | position: fixed; |
|---|
| | | top: 50%; |
|---|
| | | transform: translateY(-50%); |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | /* Effect 1: Brackets */ |
|---|
| | | .cl-effect-1 a::before, |
|---|
| | | .cl-effect-1 a::after { |
|---|
| | | display: inline-block; |
|---|
| | | opacity: 0; |
|---|
| | | -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; |
|---|
| | | -moz-transition: -moz-transform 0.3s, opacity 0.2s; |
|---|
| | | transition: transform 0.3s, opacity 0.2s; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .cl-effect-1 a::before { |
|---|
| | | margin-right: 10px; |
|---|
| | | content: '['; |
|---|
| | | -webkit-transform: translateX(20px); |
|---|
| | | -moz-transform: translateX(20px); |
|---|
| | | transform: translateX(20px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .cl-effect-1 a::after { |
|---|
| | | margin-left: 10px; |
|---|
| | | content: ']'; |
|---|
| | | -webkit-transform: translateX(-20px); |
|---|
| | | -moz-transform: translateX(-20px); |
|---|
| | | transform: translateX(-20px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .cl-effect-1 a:hover::before, |
|---|
| | | .cl-effect-1 a:hover::after, |
|---|
| | | .cl-effect-1 a:focus::before, |
|---|
| | | .cl-effect-1 a:focus::after { |
|---|
| | | opacity: 1; |
|---|
| | | -webkit-transform: translateX(0px); |
|---|
| | | -moz-transform: translateX(0px); |
|---|
| | | transform: translateX(0px); |
|---|
| | | } |
|---|
| | | /* Effect 1: Brackets 👆*/ |
|---|
| | | .sidebar ul { |
|---|
| | | font-size: 20px; |
|---|
| | | font-weight: 5c00; |
|---|
| | | padding-left: 15%; |
|---|
| | | font-weight: 500; |
|---|
| | | padding-left: 5%; |
|---|
| | | |
|---|
| | | } |
|---|
| | | .sidebar a { |
|---|
