From e772eb1d5b5776ed2e34f17e73ab6674747258d0 Mon Sep 17 00:00:00 2001
From: ErikBoesen <me@erikboesen.com>
Date: Mon, 12 Sep 2016 10:23:40 -0400
Subject: [PATCH] SASS & LESS copies

---
 README.md    |  6 ++--
 banners.less | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 banners.sass | 60 +++++++++++++++++++++++++++++++++++
 3 files changed, 153 insertions(+), 2 deletions(-)
 create mode 100644 banners.less
 create mode 100644 banners.sass

diff --git a/README.md b/README.md
index c38216b..86d3c86 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # banners.css
 ![Screenshot](screenshot.png)
-banners.css is a simple CSS preset to allow easy creation of simulated [FRC](http://firstinspires.org/robotics/frc) blue banners (typically awarded to teams upon receiving a competition award.)
+banners.css is a simple CSS preset to allow easy creation of simulated [FRC](http://firstinspires.org/robotics/frc) blue banners (typically presented to teams upon receiving a competition award.)
 
 This framework allows for three different types of banners:
 
@@ -17,8 +17,10 @@ Repeat the above process, except instead of defining a `<ul>` with `<li>`s as ch
 Repeat the first process exactly, however with one extra step: enclose the `<ul>` with a `<div>` with the class `banner-parent`. This will cause the row of banners to expand to fill the whole width of the screen, and any extra banners will be visible by scrolling to the side.
 
 ## Examples
-* [Team 1418's website](http://1418.team)
 * See `example.html`
+* [Team 1418's website](http://1418.team)
+* [Team 1257's awards page](http://team1257.org/#awards)
+* [Team 3492's about page](http://parts3492.org/about/)
 
 If you use this framework on your own project, feel free to open a pull request to add it to this list!
 
diff --git a/banners.less b/banners.less
new file mode 100644
index 0000000..d56fd9b
--- /dev/null
+++ b/banners.less
@@ -0,0 +1,89 @@
+@blue: #0f4bcb;
+
+
+@font-face {
+	font-family: 'Adam';
+	src: url('adam.otf') format('opentype');
+	unicode-range: U+0000-00FF;
+}
+.banners {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	* {
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+	}
+	li {
+		background: @blue;
+		color: white;
+		display: inline-block;
+		font-family: 'Adam', sans-serif;
+		line-height: 1.2;
+		margin: 0 3px 30px;
+		padding: 10px;
+		position: relative;
+		text-align: center;
+		vertical-align: top;
+		white-space: normal;
+		width: 120px;
+		&:after {
+			border-bottom: 20px transparent solid;
+			border-top-width: 5px;
+			border: 60px solid @color0;
+			content: '';
+			display: block;
+			left: 0;
+			position: absolute;
+			top: 100%;
+		}
+	}
+	img {
+		margin-bottom: 5px;
+		width: 75px;
+	}
+}
+.banner {
+	background: @color0;
+	box-sizing: border-box;
+	color: white;
+	display: inline-block;
+	font-family: 'Adam', sans-serif;
+	line-height: 1.2;
+	margin: 0;
+	margin: 0 3px 30px;
+	padding: 0;
+	padding: 10px;
+	position: relative;
+	text-align: center;
+	vertical-align: top;
+	white-space: normal;
+	width: 120px;
+	img {
+		margin-bottom: 5px;
+		width: 75px;
+	}
+	&:after {
+		border-bottom: 20px transparent solid;
+		border-top-width: 5px;
+		border: 60px solid @blue;
+		content: '';
+		display: block;
+		left: 0;
+		position: absolute;
+		top: 100%;
+	}
+}
+.banner-parent {
+	overflow: scroll;
+	width: 100%;
+	.banners {
+		white-space: nowrap;
+		width: auto;
+	}
+}
+.banners li, .banners li:after, .banner, .banner:after  {
+	-webkit-filter: drop-shadow(0 10px 5px rgba(0, 0, 0, .1));
+	filter: drop-shadow(0 10px 5px rgba(0, 0, 0, .1));
+}
\ No newline at end of file
diff --git a/banners.sass b/banners.sass
new file mode 100644
index 0000000..a5de6e2
--- /dev/null
+++ b/banners.sass
@@ -0,0 +1,60 @@
+@charset  'utf-8'
+
+$blue: #0f4bcb
+
+@font-face
+  font-family: 'Adam'
+  src: url('adam.otf') format("opentype")
+  unicode-range: U+0000-00FF
+
+// To be standard-compliant, this rule should be applied to *, but for compat it's restricted here.
+.banners, .banners *, .banner
+  margin: 0
+  padding: 0
+  box-sizing: border-box
+
+.banner-parent
+  width: 100%
+  overflow: scroll
+  .banners
+    width: auto
+    white-space: nowrap
+
+.banners li, .banner
+  line-height: 1.2
+  font-family: 'Adam', sans-serif
+  text-align: center
+  vertical-align: top
+  display: inline-block
+  margin: 0 3px 30px
+  width: 120px
+  position: relative
+  background: $blue
+  color: white
+  padding: 10px
+  white-space: normal
+
+.banners img, .banner img
+  width: 75px
+  margin-bottom: 5px
+
+.banners li:after, .banner:after
+  content: ''
+  position: absolute
+  display: block
+  border: 60px solid $blue
+  border-top-width: 5px
+  border-bottom: 20px transparent solid
+  top: 100%
+  left: 0
+
+.banners li, .banner
+  -webkit-filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.1))
+  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="5" /><feOffset dx="1" dy="11" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter')
+  -webkit-filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.1))
+  filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.1))
+  &:after
+    -webkit-filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.1))
+    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="5" /><feOffset dx="1" dy="11" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter')
+    -webkit-filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.1))
+    filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.1))
\ No newline at end of file