// Declaration of color classes
@each $color, $val in $colors {
.bg-color-#{$color} { background-color: $val; } .text-color-#{$color} { color: $val; }
}
// Profile CSS
.profile-pic {
border-style: solid; border-width: $spacer; border-color: theme-color(primary);
}
.profile-icon {
height: $spacer*1.5; width: $spacer*1.5;
}
// Name CSS .name {
hr { border-top-width: $spacer/2; border-color: theme-color(primary); }
}
// Main CSS
.experience {
background-color: theme-color(secondary); padding-bottom: $spacer; h2 { text-transform: uppercase; text-align: center; background-color: theme-color(primary); padding: $spacer/2 0 $spacer/2 0; // Simulación de espacio en blanco border-top-style: solid; border-top-color: color("white"); border-top-width: $spacer; } p, ul { padding-left: $spacer*2; padding-right: $spacer*2; }
}
// Skill Meters CSS
.skill {
img { float: left; width: $spacer*3; height: $spacer*3; } span { float:left; font-size: $spacer*2.5; font-family: 'Ubuntu', sans-serif; } .note { margin-left: $spacer*4; margin-top: $spacer*2; }
}
.skill-meter {
$marker-size: $spacer*1.5; @function marker-units($units: 1, $scale: true){ @if $scale { @return $marker-size * $units*0.8; } @else { @return $marker-size * $units; } } @function marker-displacement($units){ @return (marker-units($units, false) + $marker-size/2)*0.8; } width: 80%; margin-left: $spacer*3.5; hr { border-top-width: $spacer/2; width: marker-units(10); } div { height: $marker-size; width: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/></svg>'); background-size: contain; background-repeat: no-repeat; margin-top: $spacer*-1/2; @for $value from 0 through 10 { &.skill-#{$value*10} { padding-top: $marker-size; background-position: marker-displacement($value) 0% ; padding-left: marker-displacement($value); } } }
}