120 lines
6.6 KiB
CSS
120 lines
6.6 KiB
CSS
|
||
/* Table of contents
|
||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||
|
||
- Rounded user avatars
|
||
- Buttons
|
||
- Brand Styles
|
||
|
||
*/
|
||
|
||
|
||
/* Rounded avatars
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
/* Disable this if you don't want rounded avatars for users */
|
||
.rounded-avatar {
|
||
clip-path: path('m189.1 98.6q2.5 0.6 5.1 1.3c1.4 0.4 3.5 0 4.1 2 0.5 1.9 0.1 5.2 0.1 7.3 0.1 2.3 0.4 4-0.8 5.7-0.9 1.3-2.7 3.2-2.9 5-0.3 2.6 2.1 1.7 3.1 3 0.9 1.2 0.6 4 0.6 5.6q0.2 3.8 0.2 7.7c0.1 9.1 0.4 18.4 1 27.4q0.1 1.9 0.2 3.7 0.1 1.8 0.1 3.6 0.1 1.9 0 3.7 0 1.8-0.1 3.7c-0.3 4.4-1.2 8.6-1.1 13.1 0.1 2.2 1 5.6 0.5 7.6-0.4 2-1.7 1.2-3.1 1q-1.2-0.1-2.3-0.1-1.2 0-2.4 0-1.2 0-2.3 0.1-1.2 0.1-2.4 0.2c-3.7 0.4-7.2-1.8-10.8-1.8-1.5 0-3.5 0.8-4.9 0.2-1.4-0.6-0.9-2.3-1.9-3.3-0.6-0.6-1.7 0-2.4 0q-0.3-0.1-0.6-0.1-0.3-0.1-0.7-0.1-0.3-0.1-0.6-0.1-0.3-0.1-0.6-0.2-0.7-0.1-1.3-0.2-0.7-0.1-1.3-0.1-0.7 0-1.3 0-0.7 0.1-1.3 0.2-0.6 0.1-1.1 0.2-0.5 0.1-1 0.3-0.5 0.3-0.9 0.6-0.5 0.3-1 0.7-0.4 0.5-0.8 0.8-0.5 0.4-1 0.7-0.4 0.2-0.9 0.3-0.5 0.2-1 0.2c-3.5 0.2-6.8-0.1-10.3 0.4-3.1 0.4-6.2 0.6-9.3 0.8-3.6 0.3-7.1 0.9-10.7 0.6-1.7-0.1-3.3-0.8-5.2-0.8-1.8 0-1.1-0.8-2.6-1.9-0.7-0.5-2-0.2-2.9-0.6q-0.2-0.2-0.5-0.4-0.3-0.2-0.6-0.4-0.3-0.2-0.5-0.4-0.3-0.2-0.6-0.5c-1.5-1.2-1.6-0.2-3.2 0.6-1.3 0.6-1.8 1-2.7-0.4-0.9-1.3-0.7-4.7-1.9-5.7-0.9 0.6-1 5-1.2 6.2-0.2 1.4 0 2.1-1 2.7-0.5 0.3-2 0-2.6 0h-11.2c-7.9 0.1-15.7-0.7-23.5-0.7-3.8 0-7.6 0.2-11.4-0.2q-0.6-0.1-1.3-0.2-0.7-0.1-1.4-0.1-0.7-0.1-1.3-0.1-0.7 0-1.4-0.1c-1.8 0.2-2.2-0.5-3.5-2.3-1.1-1.5-1.7-3-3.4-2.1-1.4 0.7-2.3 3.2-3.8 3.4-1.3 0.2-2.9-0.3-4.2-0.3q-2.9 0-5.9 0.1-5.4 0.3-10.9 0.7c-3.4 0.3-6.6 1.3-10 1.4-1.8 0-2.3 0.4-2.3-2.2 0.1-2.2 0.2-4.4 0.2-6.7 0-4 0.3-8 0.5-12 0.2-5 0-10 0.2-15 0.2-2.9-0.2-7.1 1-9.6 0.5-1.1 2.8-2.3 2.7-3.5-0.1-1.3-1.9-2.1-2.6-2.6-1.9-1.1-1.9-1.4-1.9-4.1 0-2.2-0.1-4.4 0-6.6 0.5-8.6 0.4-17.1 0.6-25.7 0.1-2.3-0.3-5.6 0.2-7.8 0.3-1.5 0.4-1.3 1.8-1.5q0.5-0.1 1-0.2 0.6-0.1 1.1-0.2 0.5-0.2 1-0.4 0.5-0.2 1-0.4c1.5-0.9 0.9-1.2-0.3-2.2-1.4-1.2-3.3-2.1-4.5-3.5-1.1-1.1-1-2.7-1.1-4.5q0-0.7-0.1-1.4 0-0.8 0-1.5 0-0.7 0-1.4 0-0.7 0-1.4c0-0.6-0.3-2.2 0-2.9 0.4-0.6 0.4 0 0.9-0.4 0.8-0.6 0.7 0.3 1-1.2q0-0.3 0-0.7 0-0.3 0-0.7-0.1-0.3-0.1-0.7 0-0.3-0.1-0.6c-0.1-1.9-0.1-3.7-0.1-5.5 0-2.1 0.3-3.6-0.7-5.4-1-1.7-0.8-3.5-0.9-5.8-0.1-9-0.8-18.3-0.5-27.3 0.2-4.9 0.5-9.9 0.4-14.8-0.1-4.3-0.6-8.5-0.6-12.8 0-1.7-0.4-4.4 0.6-5.2 1-0.6 3.6 0.2 4.7 0.2 3 0.1 5.8-0.1 8.8 0.1 3.4 0.3 6.9 0.5 10.4 0.7 2.6 0.2 7-0.5 9 1.9 0.8 0.8 2.1 3.8 3.1 3.8 1.1 0 2-3.1 3.2-3.5 0.4-0.1 1.2 0.5 1.7 0.6q0.3 0 0.6 0 0.3 0 0.5 0 0.3 0 0.6 0 0.3 0 0.6-0.1 0.5 0 1-0.1 0.5-0.1 1-0.2 0.4-0.1 0.9-0.2 0.5-0.1 1-0.3c3.1-1.5 6.7-0.7 9.9-0.5 3.1 0.2 6.2 0.5 9.2 0.8 7 0.5 13.7 1.7 20.7 0.3q1.2-0.2 2.4-0.3 1.2-0.1 2.4-0.2 1.2 0 2.4 0 1.2 0 2.4 0.1c1.6 0.1 1.7 0.3 2.2 2.3q0.7 2.7 1.4 5.5c1.1-1.5 1.4-3.7 1.9-5.7 0.7-2.7 1.8-2 3.8-1.9q0.4 0.1 0.8 0.1 0.4 0 0.8 0 0.4 0 0.8-0.1 0.4 0 0.8 0c0.5-0.1 1.7-0.9 2.3-0.6 1.3 0.7 0.8 4.4 1.5 5.5 0.6 1.1 2.8-0.2 3.4-0.9 1.1-1.1 1.1-3.2 1.5-4.8 0.5-2.1 1.3-0.9 2.7-0.5q0.7 0.2 1.3 0.3 0.7 0.2 1.3 0.3 0.6 0.1 1.3 0.2 0.6 0.1 1.3 0.1c6.9 1 14.1 0.6 21 0.8 7.2 0.3 14.3-0.2 21.4-0.5 3.7-0.1 7.4-1 11.1-1 1.5 0 2.6-0.2 3.6 1.5 0.7 1.2 1 3 1.6 4.3 1.1-1.9 1.6-6.9 3.6-7.4 1.1-0.4 2.8 0.3 3.9 0.4q0.6 0 1.2 0.1 0.6 0 1.2 0 0.6 0 1.2 0 0.6-0.1 1.2-0.1c2.2-0.4 3.1-0.9 2.5 2.6-0.2 1.7-0.7 3-0.7 4.7q0.1 0.7 0.1 1.3 0 0.7 0 1.4-0.1 0.7-0.1 1.3-0.1 0.7-0.2 1.4c-0.4 3.4-0.1 7 0.2 10.5q0.1 1.4 0.1 2.9 0.1 1.5 0.2 3 0 1.5 0 3 0 1.4 0 2.9c0 1.6-0.1 3.1-0.2 4.8 0 1.6 0.4 3.3 0.2 5-0.4 3.1-2 4.9-3.6 7 2 1 2.7 1.1 2.3 4q-0.1 1-0.1 1.9-0.1 0.9-0.1 1.9-0.1 0.9-0.1 1.9 0 0.9-0.1 1.9c0 1.3 0 2.8-0.5 3.9-0.4 0.8-1.5 1.2-1.8 1.9-0.4 1.1 0.8 4.5 1 6 0.5 5.7 1.7 11.5 1.8 17.3 0 1.2 0.2 2.3-0.6 3.1-0.7 0.7-2.2 0.8-3.1 1-0.6 0.2-5.4 1.1-5.4 1.3 0.9 0.2 0-0.1 0-0.1z');
|
||
width: 201px;
|
||
height: 201px;
|
||
}
|
||
|
||
.social-icon {
|
||
font-size: 40px;
|
||
padding: 10px;
|
||
}
|
||
.social-icon-div {
|
||
padding-bottom: 30px;
|
||
}
|
||
.social-icon{color:#fff;}
|
||
|
||
/* Buttons
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
@media (max-width: 400px) {
|
||
.button,
|
||
button {
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
font-size: 14px !important;
|
||
color: #fff !important;
|
||
height: 48px;
|
||
width: 100%;
|
||
font-weight: 100;
|
||
line-height: 48px;
|
||
letter-spacing: 0.1px;
|
||
white-space: wrap;
|
||
cursor: pointer;
|
||
font-family: "sottext", sans-serif !important;
|
||
text-transform: uppercase;
|
||
background: url(https://raw.githubusercontent.com/JulianPrieber/SoT/main/turquoise-button-sprite.svg#off) 0 0/100% 100% no-repeat !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 550px) {
|
||
.button,
|
||
button {
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
font-size: 14px !important;
|
||
color: #fff !important;
|
||
height: 48px;
|
||
width: 80%;
|
||
font-weight: 100;
|
||
line-height: 48px;
|
||
letter-spacing: 0.1px;
|
||
white-space: wrap;
|
||
cursor: pointer;
|
||
font-family: "sottext", sans-serif !important;
|
||
text-transform: uppercase;
|
||
background: url(https://raw.githubusercontent.com/JulianPrieber/SoT/main/turquoise-button-sprite.svg#off) 0 0/100% 100% no-repeat !important;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 551px) {
|
||
.button,
|
||
button {
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
font-size: 14px !important;
|
||
color: #fff !important;
|
||
height: 60px;
|
||
width: 400px;
|
||
font-weight: 100;
|
||
line-height: 60px;
|
||
letter-spacing: 0.1px;
|
||
white-space: wrap;
|
||
cursor: pointer;
|
||
font-family: "sottext", sans-serif !important;
|
||
text-transform: uppercase;
|
||
background: url(https://raw.githubusercontent.com/JulianPrieber/SoT/main/turquoise-button-sprite.svg#off) 0 0/100% 100% no-repeat !important;
|
||
}
|
||
}
|
||
button:hover,
|
||
.button:focus {
|
||
color: #333;
|
||
border-color: #888;
|
||
outline: 0; }
|
||
.button.button-primary {
|
||
color: #FFF;}
|
||
.button.button-primary:hover,
|
||
.button.button-primary:focus {
|
||
color: #FFF;}
|
||
|
||
|
||
/* Brand Icons
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||
|
||
.icon {
|
||
padding: 0px 8px 3.5px 0px;
|
||
vertical-align: middle;
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|