diff --git a/sass/_colors.scss b/sass/_colors.scss index 5d552da..2a34e0c 100644 --- a/sass/_colors.scss +++ b/sass/_colors.scss @@ -4,6 +4,7 @@ /* variables */ +$black: #000; $near-black: #111; $dark-gray:#333; $mid-gray:#666; @@ -14,144 +15,18 @@ $light-gray: #ccc; $near-white: #eee; $white: #fff; -$pink: #ffc0cb; -$lightpink: #ffb6c1; -$hotpink: #ff69b4; -$deeppink: #ff1493; -$palevioletred: #db7093; -$mediumvioletred: #c71585; -$lightsalmon: #ffa07a; -$salmon: #fa8072; -$darksalmon: #e9967a; -$lightcoral: #f08080; -$indianred: #cd5c5c; -$crimson: #dc143c; -$firebrick: #b22222; -$darkred: #8b0000; -$red: #ff0000; -$orangered: #ff4500; -$tomato: #ff6347; -$coral: #ff7f50; -$darkorange: #ff8c00; -$orange: #ffa500; -$gold: #ffd700; -$yellow: #ffff00; -$lightyellow: #ffffe0; -$lemonchiffon: #fffacd; -$lightgoldenrodyellow: #fafad2; -$papayawhip: #ffefd5; -$moccasin: #ffe4b5; -$peachpuff: #ffdab9; -$palegoldenrod: #eee8aa; -$khaki: #f0e68c; -$darkkhaki: #bdb76b; -$cornsilk: #fff8dc; -$blanchedalmond: #ffebcd; -$bisque: #ffe4c4; -$navajowhite: #ffdead; -$wheat: #f5deb3; -$burlywood: #deb887; -$tan: #d2b48c; -$rosybrown: #bc8f8f; -$sandybrown: #f4a460; -$goldenrod: #daa520; -$darkgoldenrod: #b8860b; -$peru: #cd853f; -$chocolate: #d2691e; -$saddlebrown: #8b4513; -$sienna: #a0522d; -$brown: #a52a2a; -$maroon: #800000; -$darkolivegreen: #556b2f; -$olive: #808000; -$olivedrab: #6b8e23; -$yellowgreen: #9acd32; -$limegreen: #32cd32; -$lime: #00ff00; -$lawngreen: #7cfc00; -$chartreuse: #7fff00; -$greenyellow: #adff2f; -$springgreen: #00ff7f; -$mediumspringgreen: #00fa9a; -$lightgreen: #90ee90; -$palegreen: #98fb98; -$darkseagreen: #8fbc8f; -$mediumseagreen: #3cb371; -$seagreen: #2e8b57; -$forestgreen: #228b22; -$green: #008000; -$darkgreen: #006400; -$mediumaquamarine: #66cdaa; -$aqua: #00ffff; -$cyan: #00ffff; -$lightcyan: #e0ffff; -$paleturquoise: #afeeee; -$aquamarine: #7fffd4; -$turquoise: #40e0d0; -$mediumturquoise: #48d1cc; -$darkturquoise: #00ced1; -$lightseagreen: #20b2aa; -$cadetblue: #5f9ea0; -$darkcyan: #008b8b; -$teal: #008080; -$lightsteelblue: #b0c4de; -$powderblue: #b0e0e6; -$lightblue: #add8e6; -$skyblue: #87ceeb; -$lightskyblue: #87cefa; -$deepskyblue: #00bfff; -$dodgerblue: #1e90ff; -$cornflowerblue: #6495ed; -$steelblue: #4682b4; -$royalblue: #4169e1; -$blue: #0000ff; -$mediumblue: #0000cd; -$darkblue: #00008b; -$navy: #000080; -$midnightblue: #191970; -$lavender: #e6e6fa; -$thistle: #d8bfd8; -$plum: #dda0dd; -$violet: #ee82ee; -$orchid: #da70d6; -$fuchsia: #ff00ff; -$magenta: #ff00ff; -$mediumorchid: #ba55d3; -$mediumpurple: #9370db; -$blueviolet: #8a2be2; -$darkviolet: #9400d3; -$darkorchid: #9932cc; -$darkmagenta: #8b008b; -$purple: #800080; -$indigo: #4b0082; -$darkslateblue: #483d8b; -$slateblue: #6a5acd; -$mediumslateblue: #7b68ee; -$white: #ffffff; -$snow: #fffafa; -$honeydew: #f0fff0; -$mintcream: #f5fffa; -$azure: #f0ffff; -$aliceblue: #f0f8ff; -$ghostwhite: #f8f8ff; -$whitesmoke: #f5f5f5; -$seashell: #fff5ee; -$beige: #f5f5dc; -$oldlace: #fdf5e6; -$floralwhite: #fffaf0; -$ivory: #fffff0; -$antiquewhite: #faebd7; -$linen: #faf0e6; -$lavenderblush: #fff0f5; -$mistyrose: #ffe4e1; -$gainsboro: #dcdcdc; -$lightgray: #d3d3d3; -$silver: #c0c0c0; -$darkgray: #a9a9a9; -$gray: #808080; -$dimgray: #696969; -$lightslategray: #778899; -$slategray: #708090; -$darkslategray: #2f4f4f; -$black: #000000; +$aqua: #7FDBFF; +$blue: #0074D9; +$navy: #001F3F; +$teal: #39CCCC; +$green: #2ECC40; +$olive: #3D9970; +$lime: #01FF70; + +$yellow: #FFDC00; +$orange: #FF851B; +$red: #FF4136; +$fuchsia: #F012BE; +$purple: #B10DC9; +$maroon: #85144B; diff --git a/sass/_lists.scss b/sass/_lists.scss index c1d1847..cd7158d 100644 --- a/sass/_lists.scss +++ b/sass/_lists.scss @@ -8,20 +8,10 @@ .circle { list-style-type: circle; } .square { list-style-type: square; } .decimal { list-style-type: decimal; } -.leading-zero { list-style-type: decimal-leading-zero; } -.lower-roman { list-style-type: lower-roman; } -.upper-roman { list-style-type: upper-roman; } -.lower-greek { list-style-type: lower-greek; } -.lower-latin { list-style-type: lower-latin; } -.upper-latin { list-style-type: upper-latin; } -.lower-alpha { list-style-type: lower-alpha; } -.upper-alpha { list-style-type: upper-alpha; } -.list { list-style-type: none; } - /* Horizontal list: can be used on ol or ul */ -.list { list-style: none; } +.list { list-style-type: none; } .list--h { list-style-type: none; @@ -33,14 +23,6 @@ .circle-ns { list-style-type: circle; } .square-ns { list-style-type: square; } .decimal-ns { list-style-type: decimal; } - .leading-zero-ns { list-style-type: decimal-leading-zero; } - .lower-roman-ns { list-style-type: lower-roman; } - .upper-roman-ns { list-style-type: upper-roman; } - .lower-greek-ns { list-style-type: lower-greek; } - .lower-latin-ns { list-style-type: lower-latin; } - .upper-latin-ns { list-style-type: upper-latin; } - .lower-alpha-ns { list-style-type: lower-alpha; } - .upper-alpha-ns { list-style-type: upper-alpha; } .list-ns { list-style-type: none; } .list--h-ns { list-style-type: none; @@ -53,15 +35,6 @@ .circle-m { list-style-type: circle; } .square-m { list-style-type: square; } .decimal-m { list-style-type: decimal; } - .leading-zero-m { list-style-type: decimal-leading-zero; } - .lower-roman-m { list-style-type: lower-roman; } - .upper-roman-m { list-style-type: upper-roman; } - .lower-greek-m { list-style-type: lower-greek; } - .lower-latin-m { list-style-type: lower-latin; } - .upper-latin-m { list-style-type: upper-latin; } - .lower-alpha-m { list-style-type: lower-alpha; } - .upper-alpha-m { list-style-type: upper-alpha; } - .list-m { list-style-type: none; } .list-m { list-style: none; } .list--h-m { list-style-type: none; @@ -83,7 +56,6 @@ .lower-alpha-l { list-style-type: lower-alpha; } .upper-alpha-l { list-style-type: upper-alpha; } .list-l { list-style-type: none; } - .list-l { list-style: none; } .list--h-l { list-style-type: none; > li { display: inline-block; } diff --git a/sass/_skins.scss b/sass/_skins.scss index 8a60d6f..fac89ce 100644 --- a/sass/_skins.scss +++ b/sass/_skins.scss @@ -18,288 +18,34 @@ /* Text colors */ -.pink {color: $pink;} -.lightpink { color: $lightpink; } -.hotpink { color: $hotpink; } -.deeppink { color: $deeppink; } -.palevioletred { color: $palevioletred; } -.mediumvioletred { color: $mediumvioletred; } -.lightsalmon { color: $lightsalmon; } -.salmon { color: $salmon; } -.darksalmon { color: $darksalmon; } -.lightcoral { color: $lightcoral; } -.indianred { color: $indianred; } -.crimson { color: $crimson; } -.firebrick { color: $firebrick; } -.darkred { color: $darkred; } -.red { color: $red; } -.orangered { color: $orangered; } -.tomato { color: $tomato; } -.coral { color: $coral; } -.darkorange { color: $darkorange; } -.orange { color: $orange; } -.gold { color: $gold; } -.yellow { color: $yellow; } -.lightyellow { color: $lightyellow; } -.lemonchiffon { color: $lemonchiffon; } -.lightgoldenrodyellow { color: $lightgoldenrodyellow; } -.papayawhip { color: $papayawhip; } -.moccasin { color: $moccasin; } -.peachpuff { color: $peachpuff; } -.palegoldenrod { color: $palegoldenrod; } -.khaki { color: $khaki; } -.darkkhaki { color: $darkkhaki; } -.cornsilk { color: $cornsilk; } -.blanchedalmond { color: $blanchedalmond; } -.bisque { color: $bisque; } -.navajowhite { color: $navajowhite; } -.wheat { color: $wheat; } -.burlywood { color: $burlywood; } -.tan { color: $tan; } -.rosybrown { color: $rosybrown; } -.sandybrown { color: $sandybrown; } -.goldenrod { color: $goldenrod; } -.darkgoldenrod { color: $darkgoldenrod; } -.peru { color: $peru; } -.chocolate { color: $chocolate; } -.saddlebrown { color: $saddlebrown; } -.sienna { color: $sienna; } -.brown { color: $brown; } -.maroon { color: $maroon; } -.darkolivegreen { color: $darkolivegreen; } -.olive { color: $olive; } -.olivedrab { color: $olivedrab; } -.yellowgreen { color: $yellowgreen; } -.limegreen { color: $limegreen; } -.lime { color: $lime; } -.lawngreen { color: $lawngreen; } -.chartreuse { color: $chartreuse; } -.greenyellow { color: $greenyellow; } -.springgreen { color: $springgreen; } -.mediumspringgreen { color: $mediumspringgreen; } -.lightgreen { color: $lightgreen; } -.palegreen { color: $palegreen; } -.darkseagreen { color: $darkseagreen; } -.mediumseagreen { color: $mediumseagreen; } -.seagreen { color: $seagreen; } -.forestgreen { color: $forestgreen; } -.green { color: $green; } -.darkgreen { color: $darkgreen; } -.mediumaquamarine { color: $mediumaquamarine; } -.aqua { color: $aqua; } -.cyan { color: $cyan; } -.lightcyan { color: $lightcyan; } -.paleturquoise { color: $paleturquoise; } -.aquamarine { color: $aquamarine; } -.turquoise { color: $turquoise; } -.mediumturquoise { color: $mediumturquoise; } -.darkturquoise { color: $darkturquoise; } -.lightseagreen { color: $lightseagreen; } -.cadetblue { color: $cadetblue; } -.darkcyan { color: $darkcyan; } -.teal { color: $teal; } -.lightsteelblue { color: $lightsteelblue; } -.powderblue { color: $powderblue; } -.lightblue { color: $lightblue; } -.skyblue { color: $skyblue; } -.lightskyblue { color: $lightskyblue; } -.deepskyblue { color: $deepskyblue; } -.dodgerblue { color: $dodgerblue; } -.cornflowerblue { color: $cornflowerblue; } -.steelblue { color: $steelblue; } -.royalblue { color: $royalblue; } -.blue { color: $blue; } -.mediumblue { color: $mediumblue; } -.darkblue { color: $darkblue; } -.navy { color: $navy; } -.midnightblue { color: $midnightblue; } -.lavender { color: $lavender; } -.thistle { color: $thistle; } -.plum { color: $plum; } -.violet { color: $violet; } -.orchid { color: $orchid; } +.aqua { color: $aqua; } +.blue { color: $blue; } +.navy { color: $navy; } +.teal { color: $teal; } +.green { color: $green; } +.olive { color: $olive; } +.lime { color: $lime; } +.yellow { color: $yellow; } +.orange { color: $orange; } +.red { color: $red; } .fuchsia { color: $fuchsia; } -.magenta { color: $magenta; } -.mediumorchid { color: $mediumorchid; } -.mediumpurple { color: $mediumpurple; } -.blueviolet { color: $blueviolet; } -.darkviolet { color: $darkviolet; } -.darkorchid { color: $darkorchid; } -.darkmagenta { color: $darkmagenta; } -.purple { color: $purple; } -.indigo { color: $indigo; } -.darkslateblue { color: $darkslateblue; } -.slateblue { color: $slateblue; } -.mediumslateblue { color: $mediumslateblue; } -.white { color: $white; } -.snow { color: $snow; } -.honeydew { color: $honeydew; } -.mintcream { color: $mintcream; } -.azure { color: $azure; } -.aliceblue { color: $aliceblue; } -.ghostwhite { color: $ghostwhite; } -.whitesmoke { color: $whitesmoke; } -.seashell { color: $seashell; } -.beige { color: $beige; } -.oldlace { color: $oldlace; } -.floralwhite { color: $floralwhite; } -.ivory { color: $ivory; } -.antiquewhite { color: $antiquewhite; } -.linen { color: $linen; } -.lavenderblush { color: $lavenderblush; } -.mistyrose { color: $mistyrose; } -.gainsboro { color: $gainsboro; } -.lightgray { color: $lightgray; } -.silver { color: $silver; } -.darkgray { color: $darkgray; } -.gray { color: $gray; } -.dimgray { color: $dimgray; } -.lightslategray { color: $lightslategray; } -.slategray { color: $slategray; } -.darkslategray { color: $darkslategray; } -.black { color: $black; } +.purple { color: $purple; } +.maroon { color: $maroon; } -/* Background Skins */ +/* Background colors */ -.bg-pink {background-color: $pink;} -.bg-lightpink { background-color: $lightpink; } -.bg-hotpink { background-color: $hotpink; } -.bg-deeppink { background-color: $deeppink; } -.bg-palevioletred { background-color: $palevioletred; } -.bg-mediumvioletred { background-color: $mediumvioletred; } -.bg-lightsalmon { background-color: $lightsalmon; } -.bg-salmon { background-color: $salmon; } -.bg-darksalmon { background-color: $darksalmon; } -.bg-lightcoral { background-color: $lightcoral; } -.bg-indianred { background-color: $indianred; } -.bg-crimson { background-color: $crimson; } -.bg-firebrick { background-color: $firebrick; } -.bg-darkred { background-color: $darkred; } -.bg-red { background-color: $red; } -.bg-orangered { background-color: $orangered; } -.bg-tomato { background-color: $tomato; } -.bg-coral { background-color: $coral; } -.bg-darkorange { background-color: $darkorange; } -.bg-orange { background-color: $orange; } -.bg-gold { background-color: $gold; } -.bg-yellow { background-color: $yellow; } -.bg-lightyellow { background-color: $lightyellow; } -.bg-lemonchiffon { background-color: $lemonchiffon; } -.bg-lightgoldenrodyellow { background-color: $lightgoldenrodyellow; } -.bg-papayawhip { background-color: $papayawhip; } -.bg-moccasin { background-color: $moccasin; } -.bg-peachpuff { background-color: $peachpuff; } -.bg-palegoldenrod { background-color: $palegoldenrod; } -.bg-khaki { background-color: $khaki; } -.bg-darkkhaki { background-color: $darkkhaki; } -.bg-cornsilk { background-color: $cornsilk; } -.bg-blanchedalmond { background-color: $blanchedalmond; } -.bg-bisque { background-color: $bisque; } -.bg-navajowhite { background-color: $navajowhite; } -.bg-wheat { background-color: $wheat; } -.bg-burlywood { background-color: $burlywood; } -.bg-tan { background-color: $tan; } -.bg-rosybrown { background-color: $rosybrown; } -.bg-sandybrown { background-color: $sandybrown; } -.bg-goldenrod { background-color: $goldenrod; } -.bg-darkgoldenrod { background-color: $darkgoldenrod; } -.bg-peru { background-color: $peru; } -.bg-chocolate { background-color: $chocolate; } -.bg-saddlebrown { background-color: $saddlebrown; } -.bg-sienna { background-color: $sienna; } -.bg-brown { background-color: $brown; } -.bg-maroon { background-color: $maroon; } -.bg-darkolivegreen { background-color: $darkolivegreen; } -.bg-olive { background-color: $olive; } -.bg-olivedrab { background-color: $olivedrab; } -.bg-yellowgreen { background-color: $yellowgreen; } -.bg-limegreen { background-color: $limegreen; } -.bg-lime { background-color: $lime; } -.bg-lawngreen { background-color: $lawngreen; } -.bg-chartreuse { background-color: $chartreuse; } -.bg-greenyellow { background-color: $greenyellow; } -.bg-springgreen { background-color: $springgreen; } -.bg-mediumspringgreen { background-color: $mediumspringgreen; } -.bg-lightgreen { background-color: $lightgreen; } -.bg-palegreen { background-color: $palegreen; } -.bg-darkseagreen { background-color: $darkseagreen; } -.bg-mediumseagreen { background-color: $mediumseagreen; } -.bg-seagreen { background-color: $seagreen; } -.bg-forestgreen { background-color: $forestgreen; } -.bg-green { background-color: $green; } -.bg-darkgreen { background-color: $darkgreen; } -.bg-mediumaquamarine { background-color: $mediumaquamarine; } -.bg-aqua { background-color: $aqua; } -.bg-cyan { background-color: $cyan; } -.bg-lightcyan { background-color: $lightcyan; } -.bg-paleturquoise { background-color: $paleturquoise; } -.bg-aquamarine { background-color: $aquamarine; } -.bg-turquoise { background-color: $turquoise; } -.bg-mediumturquoise { background-color: $mediumturquoise; } -.bg-darkturquoise { background-color: $darkturquoise; } -.bg-lightseagreen { background-color: $lightseagreen; } -.bg-cadetblue { background-color: $cadetblue; } -.bg-darkcyan { background-color: $darkcyan; } -.bg-teal { background-color: $teal; } -.bg-lightsteelblue { background-color: $lightsteelblue; } -.bg-powderblue { background-color: $powderblue; } -.bg-lightblue { background-color: $lightblue; } -.bg-skyblue { background-color: $skyblue; } -.bg-lightskyblue { background-color: $lightskyblue; } -.bg-deepskyblue { background-color: $deepskyblue; } -.bg-dodgerblue { background-color: $dodgerblue; } -.bg-cornflowerblue { background-color: $cornflowerblue; } -.bg-steelblue { background-color: $steelblue; } -.bg-royalblue { background-color: $royalblue; } -.bg-blue { background-color: $blue; } -.bg-mediumblue { background-color: $mediumblue; } -.bg-darkblue { background-color: $darkblue; } -.bg-navy { background-color: $navy; } -.bg-midnightblue { background-color: $midnightblue; } -.bg-lavender { background-color: $lavender; } -.bg-thistle { background-color: $thistle; } -.bg-plum { background-color: $plum; } -.bg-violet { background-color: $violet; } -.bg-orchid { background-color: $orchid; } +.bg-aqua { background-color: $aqua; } +.bg-blue { background-color: $blue; } +.bg-navy { background-color: $navy; } +.bg-teal { background-color: $teal; } +.bg-green { background-color: $green; } +.bg-olive { background-color: $olive; } +.bg-lime { background-color: $lime; } +.bg-yellow { background-color: $yellow; } +.bg-orange { background-color: $orange; } +.bg-red { background-color: $red; } .bg-fuchsia { background-color: $fuchsia; } -.bg-magenta { background-color: $magenta; } -.bg-mediumorchid { background-color: $mediumorchid; } -.bg-mediumpurple { background-color: $mediumpurple; } -.bg-blueviolet { background-color: $blueviolet; } -.bg-darkviolet { background-color: $darkviolet; } -.bg-darkorchid { background-color: $darkorchid; } -.bg-darkmagenta { background-color: $darkmagenta; } -.bg-purple { background-color: $purple; } -.bg-indigo { background-color: $indigo; } -.bg-darkslateblue { background-color: $darkslateblue; } -.bg-slateblue { background-color: $slateblue; } -.bg-mediumslateblue { background-color: $mediumslateblue; } -.bg-white { background-color: $white; } -.bg-snow { background-color: $snow; } -.bg-honeydew { background-color: $honeydew; } -.bg-mintcream { background-color: $mintcream; } -.bg-azure { background-color: $azure; } -.bg-aliceblue { background-color: $aliceblue; } -.bg-ghostwhite { background-color: $ghostwhite; } -.bg-whitesmoke { background-color: $whitesmoke; } -.bg-seashell { background-color: $seashell; } -.bg-beige { background-color: $beige; } -.bg-oldlace { background-color: $oldlace; } -.bg-floralwhite { background-color: $floralwhite; } -.bg-ivory { background-color: $ivory; } -.bg-antiquewhite { background-color: $antiquewhite; } -.bg-linen { background-color: $linen; } -.bg-lavenderblush { background-color: $lavenderblush; } -.bg-mistyrose { background-color: $mistyrose; } -.bg-gainsboro { background-color: $gainsboro; } -.bg-lightgray { background-color: $lightgray; } -.bg-silver { background-color: $silver; } -.bg-darkgray { background-color: $darkgray; } -.bg-gray { background-color: $gray; } -.bg-dimgray { background-color: $dimgray; } -.bg-lightslategray { background-color: $lightslategray; } -.bg-slategray { background-color: $slategray; } -.bg-darkslategray { background-color: $darkslategray; } -.bg-black { background-color: $black; } +.bg-purple { background-color: $purple; } +.bg-maroon { background-color: $maroon; }