drewcassidy/drewcassidy.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add fontawesome and links to sidebar

Browse Source
This commit is contained in:
Andrew Cassidy
2017-11-26 16:29:37 -08:00
parent 277ccadce2
commit 4e3baca3d9
38 changed files with 9522 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
_sass/_colors.scss
View File

@ -1,5 +1,6 @@
$background: #2B2A27;
$foreground: #EDE0CE;
$subtle: #7A7267;
$margin: darken($background, 8%);
$shadow: rgba(black, 0.4);
@ -14,42 +15,3 @@ $dark-orange: darken($orange, $darken-factor);
$dark-green: darken($green, $darken-factor);
$dark-magenta: darken($magenta, $darken-factor);
.blue {
fill: $blue;
background-color: $blue;
}
.orange {
fill: $orange;
background-color: $orange;
}
.green {
fill: $green;
background-color: $green;
}
.magenta {
fill: $magenta;
background-color: $magenta;
}
.dark-blue {
fill: $dark-blue;
background-color: $dark-blue;
}
.dark-orange {
fill: $dark-orange;
background-color: $dark-orange;
}
.dark-green {
fill: $dark-green;
background-color: $dark-green;
}
.dark-magenta {
fill: $dark-magenta;
background-color: $dark-magenta;
}

3
_sass/_fonts.scss
View File

@ -1,6 +1,9 @@
$sidebar-text: $background;
$sidebar-font: 'Barlow', sans-serif;
$sidebar-link-text: $subtle;
$sidebar-link-hover: $foreground;
$title-text: $foreground;
$title-font: 'Barlow', sans-serif;

180
_sass/_sidebar.scss
View File

@ -1,180 +0,0 @@
@import 'fonts';
$flag-shadow: rgba(black, 0.2);
$animate-time: 0.03s;
ul#sidebar {
flex-shrink: 0;
margin-block-start: 0;
margin-block-end: 0;
list-style-type: none;
width: 180px;
line-height: 0;
margin: 0;
padding: {
top: 5px;
bottom: 5px;
left: 0px;
}
}
.flag {
display: inline-block;
position: relative;
left: -3px;
text-align: center;
z-index: 1;
padding: {
top: 5px;
bottom: 5px;
left: 0px;
}
//width: 90%;
.flagFold{
display: block;
position: absolute;
z-index: -100;
left:0px;
top:55px;
width: 3px;
height: 3px;
mask-image: url('../svg/fold.svg');
}
.flagButton {
display: block;
float: left;
height: 50px;
width: 160px;
border-radius: 0 5px 5px 0;
transition: {
duration: $animate-time;
property: width, border-radius;
timing-function: ease-out;
}
.flagText {
font: {
family: $sidebar-font;
size: 20px;
weight: 600;
}
position: absolute;
line-height: normal;
text-align: center;
width: 160px;
right:0;
top:15px;
color: $sidebar-text;
}
}
.flagButton::after{
z-index: -1;
content: " ";
display: block;
position: relative;
left: 3px;
top: 4px;
height: 50px;
width: 160px;
background-color: $flag-shadow;
border-radius: 0 5px 5px 0;
transition: {
duration: $animate-time;
property: width, border-radius;
timing-function: ease-out;
}
}
.flagPoint{
position: absolute;
width: 0;
height: 0;
left: 160px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left-width: 0px;
border-left-style: solid;
background-color: transparent;
transition: {
duration: $animate-time;
property: left, border-left-width;
timing-function: ease-out;
}
}
.flagPoint.blue {
border-left-color: $blue;
}
.flagPoint.orange {
border-left-color: $orange;
}
.flagPoint.green {
border-left-color: $green;
}
.flagPoint.magenta {
border-left-color: $magenta;
}
.flagPoint::after{
position: absolute;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 0px solid $flag-shadow;
z-index: -1;
content: " ";
left: -20 + 3px;
top: -25 + 4px;
transition: {
duration: $animate-time;
property: border-left-width;
timing-function: ease-out;
}
}
}
.flag:hover {
.flagButton {
width: 170px;
border-radius: 0;
}
.flagButton::after{
width: 170px;
border-radius: 0;
}
.flagPoint {
left: 170px;
border-left-width: 20px;
}
.flagPoint::after{
border-left-width: 20px;
}
}

43
_sass/_util.scss Normal file
View File

@ -0,0 +1,43 @@
// Mixins thanks to https://css-tricks.com/snippets/sass/mixin-prefix-properties/
/// Mixin to prefix a property
/// @author Hugo Giraudel
/// @param {String} $property - Property name
/// @param {*} $value - Property value
/// @param {List} $prefixes (()) - List of prefixes to print
//example: @include prefix(transform, rotate(45deg), webkit ms);
@mixin prefix($property, $value, $prefixes: ()) {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
// Output standard non-prefixed declaration
#{$property}: $value;
}
/// Mixin to prefix several properties at once
/// @author Hugo Giraudel
/// @param {Map} $declarations - Declarations to prefix
/// @param {List} $prefixes (()) - List of prefixes to print
//example:
// @include prefix((
// column-count: 3,
// column-gap: 1.5em,
// column-rule: 2px solid hotpink
// ), webkit moz);
@mixin prefix-group($declarations, $prefixes: ()) {
@each $property, $value in $declarations {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
// Output standard non-prefixed declaration
#{$property}: $value;
}
}