Skip to content

Instantly share code, notes, and snippets.

@travisjupp

travisjupp/assets.css

Last active April 12, 2017 20:21
Show Gist options
  • Save travisjupp/c14333ceca2ac8e0d7420ef168d11419 to your computer and use it in GitHub Desktop.
Save travisjupp/c14333ceca2ac8e0d7420ef168d11419 to your computer and use it in GitHub Desktop.
Download ZIP
FD Design Assets Code. Relates to invisionapp screen: FD Site Assets
Raw
assets.css
/* Website Assets */
$colorHeadlineTxt: #E5DBBA; /* rgb(229, 219, 186); */
$colorHeaderBg: #3A8031; /* rgb(58, 128, 49); */
$colorHeaderBgAlt: #3A6531; /* rgb(58, 101, 49) */
$colorHeadlineTxt-h1: #ffffff; /* rgb(255, 255, 255); */
$colorHeadlineTxt-h2: #0862a1; /* rgb(8, 98, 161); */
$colorBtnBlueFl: #0C99D5; /* rgb(12, 153, 213); */
$colorBtnBlueSt: #0973A1; /* rgb(9, 115, 161); */
$colorBg: #9CA7A9; /* rgb(156, 167, 169); */
$colorBodyTxt: #ffffff; /* rgb(255, 255, 255); */
$colorCanvas: #4C282E; /* rgb(76, 40, 46); */
/* Sitewide Colors */
.overlayHR {
background-image: -moz-linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(166,166,166,0.46) 46%, rgb(76,76,76) 100%);
background-image: -webkit-linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(166,166,166,0.46) 46%, rgb(76,76,76) 100%);
background-image: -ms-linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(166,166,166,0.46) 46%, rgb(76,76,76) 100%);
width: 673px;
height: 3px;
}/* top border of the purpGrnGrad when coding lists, has less of a highlight */
.purpGrnGrad {
background-image: -moz-linear-gradient( 90deg, rgb(68,14,98) 0%, rgb(38,56,130) 54%, rgb(8,98,161) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(68,14,98) 0%, rgb(38,56,130) 54%, rgb(8,98,161) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(68,14,98) 0%, rgb(38,56,130) 54%, rgb(8,98,161) 100%);
width: 672px;
height: 100px;
} /* selected list item BG */
.defaultHR {
background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(166,166,166) 46%, rgb(76,76,76) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(166,166,166) 46%, rgb(76,76,76) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgb(166,166,166) 46%, rgb(76,76,76) 100%);
width: 673px;
height: 3px;
} /* list item divider */
.ellipse-75 {
border-width: 1px;
border-color: rgb(0, 0, 0);
border-style: solid;
border-radius: 50%;
background-color: rgb(255, 255, 255);
width: 73px;
height: 73px;
}/* 75 px ellipse used on buttons */
.btnLrg {
border-width: 1px;
border-color: rgb(9, 115, 161);
border-style: solid;
border-radius: 10px;
background-color: rgb(12, 153, 213);
width: 273px;
height: 136px;
}/* Button Large Blue */
.btnSml {
border-width: 2px;
border-color: rgb(9, 115, 161);
border-style: solid;
border-radius: 10px;
background-color: rgb(12, 153, 213);
width: 169px;
height: 67px;
}/* Button Small Blue */
.btnRectSml {
border-width: 1px;
border-color: rgb(0, 0, 0);
border-style: solid;
background-color: rgb(73, 73, 73);
width: 99px;
height: 38px;
}/* Form Button Rectangle Small */
.txtFieldSml {
border-width: 1px;
border-color: rgb(73, 73, 73);
border-style: solid;
background-color: rgb(255, 255, 255);
width: 218px;
height: 38px;
}
svg {
/* background-image: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACuCAYAAAD3X2eyAAAACXBIWXMAAAsSAAALEgHS3X78AAACYklEQVQoUyWTf0hTURzFD0EQBEEQBEEQBEEEQRAEQVFIRSEVUkiFIBVSVEhFIRViSEVlWotlNrQ008xsqGVDZWX+eLrfbs5t7ofbnNvcfG1r7pfbJDr983i8++6953vO5yC/kluFXH55NbL59Bpkcsm1SGfj65DKxtYjsRzZgKWMuBHxTHgTYungZkRT/i2IpHxbISa927CYcG9HOOHcgYUl+04E47ZdCMQtuzH/x7wHvphxL+Zihn3wRHUH4I5oCjAbUR2G87dwFA5xtBB2cfgEbItDRbCGladgCQ8WYzrUfxZTIUUJTAt9pTAGey/AEOwugz4gvwydv+sqNP7OcqjnP96Aytd2C+O+1goIcy13MeZ9V4kRb2MVhj2yavxyNzzET3f9Y/yYldZA6ZLUYdD1XIIBZ60U/Y6a11A4nsjw3f6oCX0zD5rxdaa6Fb22++3osVZ2oNt67zPkljtyfLFU9KBr+vY3dJpvKvDJfH0AHVPlSrSbrg2hzXRlBB+MlwS8nyxToWXyohbNhvMGvNWXmtCkLzGjUXfOCpn2jB1vtMUuNGhOe1CvLvLhlfpkAFLV8RBeThSKkEwci+LF+JE46oRDSdQKBRk8GzuYw9PR/Sv/3/iNq/yPO7iXp/A8nsw7eBvvpQJqoSrqo1JqpnrOwYk4G6fkvJycHtAN+kKH6BVdo390kp7SXfpMx+k9U2AeTIYZMS3mxgSZJVNlvkyamTN9ckAiyAYpIS8khwyRJnJFwsgaqSN/JJFMkk5ySmLJLikmzySbjJN2cs8GsAtsBfvBprAzbA97xEaxW/8efwFtUeGVwaA+mgAAAABJRU5ErkJggg==*/;
width: 12px;
height: 30px;
}
/* Text Field Small */
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Food Drop assets</title>
<link rel="stylesheet" href="assets.css">
</head>
<body>
<div class="overlayHR">overlayHR</div>
<div class="purpGrnGrad">purpGrnGrad</div>
<div class="defaultHR">defaultHR</div>
<div class="ellipse-75">ellipse-75</div>
<div class="btnLrg">btnLrg</div>
<div class="btnSml">btnSml</div>
<div class="btnRectSml">btnRectSml</div>
<div class="txtFieldSml">txtFieldSml</div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment