Skip to content

Instantly share code, notes, and snippets.

@Lane

Lane/dabblet.css

Created April 11, 2012 15:29
Show Gist options
  • Save Lane/2360049 to your computer and use it in GitHub Desktop.
Save Lane/2360049 to your computer and use it in GitHub Desktop.
Download ZIP
UAlberta.ca Web Style Guide
Raw
dabblet.css
/**
* UAlberta.ca Web Style Guide
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);
@import url(http://www.ualberta.ca/~publicas/styleguide/guide.css);
body {
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-attachment: fixed;
background-color: #08b5fb;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#007c41), to(#7ab800));
background-image: -moz-linear-gradient(#007c41, #7ab800);
background-image: -ms-linear-gradient(#007c41, #7ab800);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #007c41), color-stop(100%, #7ab800));
background-image: -webkit-linear-gradient(#007c41, #7ab800);
background-image: -o-linear-gradient(#007c41, #7ab800);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007c41', endColorstr='#7ab800', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#007c41', endColorstr='#7ab800', GradientType=0)";
background-image: linear-gradient(#242, #575);
padding: 60px 0;
color: #fff;
text-rendering: optimizeLegibility;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 50px 200px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 50px 200px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 50px 200px rgba(0, 0, 0, 0.2);
margin: 0px;
}
nav a {
text-decoration: none;
color: #fff;
color: rgba(255,255,255,1);
}
nav a:hover {
text-decoration: none;
color: #ffdd0d;
}
header nav.attach {
position: fixed;
top: 0; left:0;
background: #111;
background: rgba(0,30,0,0.9);
padding:10px 0px;
width: 100%;
z-index:1000;
}
header nav.attach ol {
width:50%;
min-width: 530px;
margin:0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", sans-serif;
}
header h1 {
font-size: 3em;
margin: 0em;
}
header p {
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-size: 1.5em;
margin-top: 0em;
}
header p a { text-decoration: none; color: #fff; }
header p a:hover { color: #ffdd0d; }
header p span {
font-weight: 700;
}
header ol {
margin: 0em;
list-style: none;
padding: 0;
}
header ol li {
display: inline-block;
border-right: 1px solid rgba(255,255,255,0.2);
-webkit-box-shadow: inset -1px 0px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: inset -1px 0px 0 rgba(0, 0, 0, 0.1); box-shadow: inset -1px 0px 0 rgba(0, 0, 0, 0.1);
}
header ol li:last-child {
box-shadow: none; border: none;
}
header ol li:first-child a {
padding-left: 0px;
}
header ol li a {
padding: 10px 15px 10px 10px;
}
section h1 {
background: transparent;
font-weight: 700;
margin-top: 0em;
}
section h2 {
font-weight: 500;
}
header, section {
width: 50%;
margin: 0 auto;
min-width: 530px;
}
section header { width: auto; }
header, section {
position: relative;
padding-bottom: 20px;
margin-bottom: 0px;
padding-top: 30px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.standard-button-container {
border-radius: 5px;
margin-bottom: 20px;
padding: 2%;
background: rgba(255,255,255,0.65);
box-shadow: -1px -1px 2px rgba(0,0,0,0.6), inset 0px 0px 10px rgba(255,255,255, 0.6);
color: #222;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
display: inline;
float: left;
width: 27.9333333%;
margin-right: 2%;
}
.standard-button-container h3 {
font-size: 1.1em;
margin-top: 0;
}
.standard-button-container ul {
list-style:none;
margin: 1em 0em;
padding: 0;
font-size: 0.85em;
}
.last { margin-right: 0; }
a.standard-button, a.standard-button.inactive:hover {
background: #fcfcfc;
background: linear-gradient(top, #fff, #ededed);
background: -webkit-linear-gradient(top, #fff, #ededed);
background: -moz-linear-gradient(top, #fff, #ededed);
background: -webkit-gradient(linear, top, from(#fff), from(#ededed));
display: inline-block;
padding: 5px 5px 5px 15px;
border: 1px solid #cacaca;
border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
color: #006c39;
text-decoration: none;
font-family: DINWeb-Medium, OpenSans, "Helvetica Neue", Helvetica, sans-serif;
font-size: 0.75em;
font-weight: 600;
text-transform: uppercase;
text-shadow: none;
}
a.standard-button.demo:hover, a.standard-button.rollover {
background: #f0f0f0;
background: linear-gradient(top, #fff, #e0e0e0);
background: -webkit-linear-gradient(top, #fff, #e0e0e0);
background: -moz-linear-gradient(top, #fff, #e0e0e0);
background: -webkit-gradient(linear, top, from(#fff), from(#e0e0e0));
}
a.standard-button.demo:active, a.standard-button.active {
background: #f0f0f0;
background: linear-gradient(top, #eee, #fff);
background: -webkit-linear-gradient(top, #ccc, #fff);
background: -moz-linear-gradient(top, #eee, #fff);
background: -webkit-gradient(linear, top, from(#eee), from(#fff));
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.9);
border:none;
padding: 6px 6px 6px 16px;
}
a.standard-button i {
display: inline-block;
background: #D5E7DE;
padding: 3px 7px 1px 7px;
margin-left: 10px;
border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em;
font-style: normal;
font-family: Consolas, monospace;
font-size: 16px;
font-weight: normal;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7); -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7);
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a.standard-button.demo:hover i, a.standard-button.rollover i {
box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7); -moz-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7);
}
a.standard-button.demo:active i, a.standard-button.active i {
box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1); -webkit-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1); -moz-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1);
}
a.callout-button {
background: #edd306;
background: linear-gradient(-45deg, rgba(250,195,0,0) 50%, rgba(250,195,0,0.4) 51%), linear-gradient(top, #FFE406, #edd306);
background: -webkit-linear-gradient(-45deg, rgba(250,195,0,0) 50%, rgba(250,195,0,0.4) 51%), -webkit-linear-gradient(top, #FFE406, #edd306);
background: -moz-linear-gradient(-45deg, rgba(250,195,0,0) 50%, rgba(250,195,0,0.4) 51%), -moz-linear-gradient(top, #FFE406, #edd306);
border: 0px;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.30), inset 0px 0px 10px #fe0; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.30), inset 0px 0px 10px #fe0; -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.30), inset 0px 0px 10px #fe0;
color: #006c39;
display: inline-block;
font-family: DINWeb-Medium, OpenSans, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.125em;
font-weight: 500;
line-height: 2em;
padding: 10px 60px 10px 15px;
position: relative;
text-decoration: none;
text-shadow: 0px 0px 2px rgba(0,0,0,0.3);
text-transform: uppercase;
}
a.callout-button:hover, a.callout-button.rollover {
background: #edc306;
background: linear-gradient(-45deg, rgba(250,195,0,0) 50%, rgba(250,195,0,0.4) 51%), linear-gradient(top, #ffe206, #e0c705);
background: -webkit-linear-gradient(-45deg, rgba(250,195,0,0) 50%, rgba(250,195,0,0.4) 51%), -webkit-linear-gradient(top, #ffe206, #e0c705);
background: -moz-linear-gradient(-45deg, rgba(250,195,0,0) 50%, rgba(250,195,0,0.4) 51%), -moz-linear-gradient(top, #ffe206, #e0c705);
}
a.callout-button:active, a.callout-button.active {
box-shadow: 0px 0px 5px rgba(0,0,0,0.40), inset 0px 0px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.40), inset 0px 0px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.40), inset 0px 0px 10px rgba(0,0,0,0.2);
}
a.callout-button i {
background: #fff;
border: 5px solid #fdeb73;
border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.4); -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.4);
color: #007c41;
display: inline-block;
font-style: normal;
font-family: Consolas, monospace;
font-size: 1em;
font-weight: normal;
line-height: 1.25em;
margin-left: 10px;
overflow: hidden;
padding: 5px 6px 0px 5px;
position:absolute;
right:10px;
top:10px;
text-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
a.callout-button:hover i, a.callout-button.rollover i {
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.6); -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.6); -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.6);
}
p.explore-demo { padding:10px 16px 10px 10px; background: #f4f4f4; display:inline-block; margin:0em; border-radius: 5px }
a.icon {
color: #007c41;
display: inline-block;
font-size: 0.875em;
text-align: center;
text-decoration: none;
text-shadow: none;
}
a.icon i {
background: #7ab800;
border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em;
box-shadow: inset 0px 0px 12px rgba(0,0,0,0.25), 1px 1px 3px rgba(255,255,255,0.1); -webkit-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.25), 1px 1px 1px rgba(255,255,255,0.1); -moz-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.25), 1px 1px 3px rgba(255,255,255,0.1);
display: inline-block;
padding: 12px;
}
a.icon:hover i {
background: #007c41;
box-shadow: inset 0px 0px 12px rgba(0,0,0,0.25), 1px 1px 3px rgba(255,255,255,0.3); -webkit-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.25), 1px 1px 1px rgba(255,255,255,0.3); -moz-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.25), 1px 1px 3px rgba(255,255,255,0.3);
}
a.icon i img {
display: block;
width: 26px;
height: 26px;
}
.color-container {
width: auto;
}
.color-description {
float: left;
}
.color-information {
height: 20px;
text-transform: uppercase;
margin: 0px;
color: rgba(0,0,0,0.75);
padding: 0.5em;
text-shadow: none;
}
.color-information span {
display: block;
float: left;
width: 45%;
}
.color0 { background: #7D9AAA; color: rgba(0,0,0,0.75); }
.color1 { background: #A8B400; }
.color2 { background: #A79E70; }
.color3 { background: #7CA295; color: rgba(0,0,0,0.75); }
.color4 { background: #E0D760; color: rgba(0,0,0,0.75); }
.color5 { background: #C7D28A; color: rgba(0,0,0,0.75); }
.color6 { background: #3CB6CE; }
.color7 { background: #A3A86B; }
.color8 { background: #7AB800; color: rgba(0,0,0,0.75); }
.color9 { background: #D4BA00; color: rgba(0,0,0,0.75); }
.color10 { background: #A3A86B; }
.color11 { background: #6773B6; }
.color12 { background: #2A6EBB; }
.color13 { background: #CA7700; }
.color14 { background: #983222; }
.color15 { background: #82786F; }
.color16 { background: #747678; }
.color17 { background: #641F45; }
.color18 { background: #165788; }
.color19 { background: #8D3C1E; }
.color20 { background: #452325; }
.color21 { background: #4F4C25; }
.color22 { background: #284E36; }
.color23 { background: #404545; }
.fonts-banner {
text-shadow: none;
background: #030 url('http://www.ualberta.ca/~publicas/styleguide/guide-banner.png') no-repeat top left;
height: 60px;
padding: 20px;
}
.fonts-banner p.department {
font-family: DINWeb-Light;
font-size: 30px;
font-weight: 800;
margin: 0;
line-height: 1.35em;
}
.fonts-banner p.faculty {
font-family: DINWeb-Light;
text-transform: uppercase;
font-size: 20px;
font-weight: 100;
margin:10px 0 0 0;
line-height: 1em;
color: rgba(255,255,255,0.65);
text-indent: 1px;
}
.popout {
border-radius: 20px;
display: inline-block;
color: #333;
padding: 10px;
background: rgba(0,30,0,0.4);
position:relative;
z-index: 100;
font-size: 0.85em;
text-shadow: none;
}
.popout:after {
content: "";
position: absolute;
bottom: -15px;
right: 25px;
border-width: 15px 15px 0;
border-style: solid;
border-color: rgba(0,30,0,0.4) transparent;
display: block;
width: 0;
}
.popout-inner {
background: rgba(255,255,255,1);
padding: 15px;
border-radius: 10px;
}
.popout-inner h3 { margin: 0; font-weight: 600; text-shadow: none; color: #575; }
.popout-inner ul { list-style: none; padding: 0px; margin-bottom: 0px; color: #555; font-size: 0.9em;}
.popout-inner p { margin-bottom: 0; color: #666; }
.popout-inner:after {
content: "";
position: absolute;
z-index: 101;
bottom: 0px;
right: 25px;
border-width: 15px 15px 0;
border-style: solid;
border-color: rgba(255,255,255,1) transparent;
display: block;
width: 0;
}
.popout.faculty-name {
display: none;
position:absolute;
top: 40px;
left: -150px;
margin-top: -20px;
}
.page-heading-one {
color: #636363;
background: #fff;
padding: 20px;
text-transform: uppercase;
text-shadow: none;
font-family: DINWeb-Medium;
font-size: 26px;
margin-top:0;
}
.page-heading-two {
color: #636363;
background: #fff;
padding: 20px;
text-transform: uppercase;
text-shadow: none;
font-family: DINWeb-Medium;
font-size: 21px;
margin-top:0;
}
.page-heading-sidebar {
color: #636363;
background: #fff;
padding: 20px;
text-transform: uppercase;
text-shadow: none;
font-family: DINWeb-Medium;
font-size: 13px;
margin-top:0;
}
.page-heading-linkbox {
color: #333;
background: #fff;
padding: 20px;
text-transform: none;
text-shadow: none;
font-family: Verdana, sans-serif;
font-size: 14px;
margin-top:0;
}
.fonts-body-text {
color: #333;
font-family: Verdana, sans-serif;
font-size: 12px;
text-shadow: none;
background:#fff;
padding:20px;
line-height: 1.5em;
}
.fonts-links {
padding: 20px;
background: #fff;
text-shadow: none;
font-size: 12px;
}
.fonts-links a {
color: #007c41;
text-decoration: none;
}
.fonts-links a:hover {
text-decoration: underline;
}
.fonts-links a.call-link {
font-size: 18px;
}
a.call-link i {
display: inline-block;
position: relative;
top: -2px;
background: #D5E7DE;
padding: 3px 7px 1px 7px;
margin-left: 5px;
border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em;
font-style: normal;
font-family: Consolas, monospace;
font-size: 16px;
font-weight: normal;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7); -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7);
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a.call-link:hover i {
box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7); -moz-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7);
}
a.call-link:active i {
box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1); -webkit-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1); -moz-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1);
}
.fonts-links a.small-call-link {
font-size: 12px;
}
a.small-call-link i {
display: inline-block;
position: relative;
top: -1px;
background: #E6F1C8;
padding: 2px 5px 2px 6px;
margin-left: 5px;
border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em;
font-style: normal;
font-family: Consolas, monospace;
font-size: 12px;
font-weight: normal;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7); -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.7);
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a.small-call-link:hover i {
background: #D5E7DE;
box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7); -webkit-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7); -moz-box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3), 1px 1px 1px rgba(255,255,255,0.7);
}
a.small-call-link:active i {
box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1); -webkit-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1); -moz-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.4), 0px 0px 4px rgba(255,255,255,1);
}
.subnav { padding: 20px; background:#fff; color: #333; }
.subnav ul {
position:relative;
border-radius: 4px;
background: linear-gradient(top,#fff,#eee);
box-shadow: inset 0px 0px 8px #fff, 1px 1px 2px #f0f0f0;
color: #666;
font-size: 13px;
list-style: none; margin: 0px; padding: 0px; display: inline-block;
}
.subnav ul li { display: inline-block; }
.subnav ul li a {
display: block;
padding: 10px;
border: 1px solid #e0e0e0;
border-left: 1px solid #fff;
text-shadow: none;
color: #666; text-decoration:none;
}
.subnav ul li.active a { position:relative;background:#006334; color: #fff; border-color: #1C471C; box-shadow:inset 0px 0px 10px rgba(0,0,0,0.35);}
.subnav ul li.active a:after {
content: "";
position: absolute;
bottom: -10px;
left: 40%;
border-width: 10px 10px 0;
border-style: solid;
border-color: #00532a transparent;
display: block;
width: 0;
}
.subnav ul li:nth-child(1) a { border-radius: 4px 0px 0px 4px; }
.subnav ul li:nth-last-child(1) a { border-radius:0px 4px 4px 0px; }
.subnav ul li a:hover { background: #eee; border-left-color:transparent;}
Raw
dabblet.html
<header>
<h1>UAlberta.ca Web Style Guide</h1>
<p>Below contains an outline for the styles to be used throughout the <a href="http://www.ualberta.ca/"><span>UAlberta.ca</span></a> website and its subsidiary websites.
<nav>
<ol>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#fonts">Typography</a></li>
<li><a href="#icons">Icons</a></li>
<li><a href="#logo">Logo</a></li>
<li><a href="#imagery">Photography</a></li>
<li><a href="#layout">Layout</a></li>
</ol>
</nav>
</header>
<section id="buttons">
<h1>Buttons</h1>
<!-- Standard Button -->
<h2>Standard Button</h2>
<p><a class="standard-button demo" href="#">Standard Button <i>&gt;</i></a></p>
<p>The standard button can be used as a call to action, or when more emphasis needs to be given to a link. It is acceptable to use more than one of these buttons on a page.</p>
<div class="standard-button-container">
<h3>Inactive State</h3>
<p><a class="standard-button inactive" href="#">Button Text <i>&gt;</i></a></p>
</div>
<div class="standard-button-container">
<h3>Rollover State</h3>
<p><a class="standard-button rollover" href="#">Button Text <i>&gt;</i></a></p>
</div>
<div class="standard-button-container last">
<h3>Active State</h3>
<p><a class="standard-button active" href="#">Button Text <i>&gt;</i></a></p>
</div>
<!-- End Standard Button -->
<!-- Callout Button -->
<h2>Call To Action Button</h2>
<p><a class="callout-button demo" href="#">Call To Action Button <i>&#10132;</i></a></p>
<p>The standard button can be used as a call to action, or when more emphasis needs to be given to a link. It is acceptable to use more than one of these buttons on a page.</p>
<div class="standard-button-container">
<h3>Inactive State</h3>
<p><a class="callout-button inactive" href="#">Button <i>&#10132;</i></a></p>
</div>
<div class="standard-button-container">
<h3>Rollover State</h3>
<p><a class="callout-button rollover" href="#">Button <i>&#10132;</i></a></p>
</div>
<div class="standard-button-container last">
<h3>Active State</h3>
<p><a class="callout-button active" href="#">Button <i>&#10132;</i></a></p>
</div>
<!-- End Callout Button
<!-- Explore Icons -->
<h2>Explore Button</h2>
<p class="explore-demo">"<a class="icon" href="#"><i><img src="http://www.ualberta.ca/~publicas/uofa/img/place-icon.png" /></i><br />Explore</a></p>
<p>The explore buttons are used for navigation purposes in the explore bar. For the rest of the iconography go to the icons section.
</section>
<section id="colors">
<h1>Colors</h1>
<!--
<div class="color-description">
<p>description</p>
</div>
-->
<div class="color-container">
<p class="color-information color0">
<span>HEX: #7d9aaa</span>
<span>RGB: 231, 243, 235</span>
</p>
<p class="color-information color1">
<span>HEX: #a8b400</span>
<span>RGB: 0, 122, 61</span>
</p>
<p class="color-information color2">
<span>HEX: #A79E70 </span>
<span>RGB: 119, 184, 0</span>
</p>
<p class="color-information color3">
<span>HEX: #7CA295 </span>
<span>RGB: 229, 239, 205</span>
</p>
<p class="color-information color4">
<span>HEX: #E0D760 </span>
<span>RGB: 255, 219, 15</span>
</p>
<p class="color-information color5">
<span>HEX: #C7D28A </span>
<span>RGB: 255, 243, 194</span>
</p>
<p class="color-information color6">
<span>HEX: #3CB6CE </span>
<span>RGB: 84, 84, 84</span>
</p>
<p class="color-information color7">
<span>HEX: #A3A86B </span>
<span>RGB: 99, 99, 99</span>
</p>
<p class="color-information color8">
<span>HEX: #7AB800 </span>
<span>RGB: 224, 224, 224</span>
</p>
<p class="color-information color9">
<span>HEX: #D4BA00 </span>
<span>RGB: 245, 245, 245</span>
</p>
<p class="color-information color10">
<span>HEX: #D4BA00 </span>
</p>
</div>
</section>
<section id="fonts">
<h1>Typography</h1>
<h2>Website Banner Headings</h2>
<div class="popout faculty-name">
<div class="popout-inner">
<h3>Faculty Name</h3>
<p>DIN Light, 20px, uppercase, 65% opaque</p>
</div>
</div>
<div class="fonts-banner">
<p class="faculty">Faculty Name</p>
<p class="department">Department Name</p>
</div>
<ul>
<li><strong>Font Family:</strong> DINWeb Light</li>
<li><strong>Font size:</strong> 1.25em (20px)</li>
<li><strong>Color:</strong> #fff</li>
<li><strong>Opacity:</strong> 65%</li>
</ul>
<ul>
<li><strong>Font Family:</strong> DINWeb Light</li>
<li><strong>Font size:</strong> 1.875em (30px)</li>
<li><strong>Color:</strong> #fff</li>
</ul>
<h2>Page Headings</h2>
<p class="page-heading-one">Main Page Heading</p>
<ul>
<li><strong>Font Family:</strong> DINWeb Medium</li>
<li><strong>Font size:</strong> 1.625em (26px)</li>
<li><strong>Color:</strong> #636363</li>
</ul>
<p class="page-heading-two">Secondary Page Heading</p>
<ul>
<li><strong>Font Family:</strong> DINWeb Medium</li>
<li><strong>Font size:</strong> 1.3125em (21px)</li>
<li><strong>Color:</strong> #636363</li>
</ul>
<p class="page-heading-sidebar">Sidebar Section Heading</p>
<ul>
<li><strong>Font Family:</strong> DINWeb Medium</li>
<li><strong>Font size:</strong> 0.8125em (13px)</li>
<li><strong>Color:</strong> #636363</li>
</ul>
<p class="page-heading-linkbox">Linkbox Heading</p>
<ul>
<li><strong>Font Family:</strong> Verdana</li>
<li><strong>Font size:</strong> 0.875em (14px)</li>
<li><strong>Color:</strong> #333</li>
</ul>
<h2>Body Text</h2>
<p class="fonts-body-text">Suspendisse potenti. Praesent id tellus nec neque feugiat facilisis. Nulla facilisi. Nulla at iaculis nulla. Phasellus id metus non metus consequat feugiat. Maecenas sit amet ultrices enim. Vivamus pretium neque non enim tincidunt sit amet vulputate lorem ornare. Fusce mattis facilisis luctus. Nam ut blandit leo. Ut aliquet malesuada libero et vestibulum. Vivamus ac odio ut sem euismod placerat. Donec dui mauris, rutrum at ornare sed, eleifend pulvinar eros</p>
<ul>
<li><strong>Font Family:</strong> Verdana</li>
<li><strong>Font size:</strong> 0.75em (12px)</li>
<li><strong>Line Height:</strong> 1.5em (18px)</li>
<li><strong>Color:</strong> #333</li>
</ul>
<h2>Links</h2>
<p class="fonts-links"><a href="#">Standard Link</a></p>
<ul>
<li><strong>Font Family:</strong> Verdana</li>
<li><strong>Font size:</strong> 0.75em (12px)</li>
<li><strong>Line Height:</strong> 1.5em (18px)</li>
<li><strong>Color:</strong> #007c41</li>
</ul>
<p class="fonts-links"><a class="small-call-link" href="#">Medium Link <i>&gt;</i></a></p>
<ul>
<li><strong>Font Family:</strong> Verdana</li>
<li><strong>Font size:</strong> 0.75em (12px)</li>
<li><strong>Line Height:</strong> 1.5em (18px)</li>
<li><strong>Color:</strong> #007c41</li>
</ul>
<p class="fonts-links"><a class="call-link" href="#">Large Link <i>&gt;</i></a></p>
<ul>
<li><strong>Font Family:</strong> Verdana</li>
<li><strong>Font size:</strong> 1.125em (18px)</li>
<li><strong>Line Height:</strong> 1.5em (27px)</li>
<li><strong>Color:</strong> #007c41</li>
</ul>
</section>
<section id="icons">
<h1>Icons</h1>
</section>
<section id="subnav">
<h1>Subnavigation</h1>
<div class="subnav">
<ul>
<li class="active"><a href="#">All Campuses</a></li><li><a href="#">North Campus</a></li><li><a href="#">South Campus</a></li>
</ul>
</div>
</section>
<section id="logo">
<h1>Logo</h1>
<p>
<img src="http://www.toolkit.ualberta.ca/~/media/University%20of%20Alberta/ualberta/Branding/Visual%20Identity/Images/VisualIdentitySystem/OurLogo/our-logo.png" />
</p>
<p>The University of Alberta logo is the primary element of our visual identity system
and should appear on all University of Alberta communications.</p>
<p>Our logo consists of two components that have evolved over the course of our history:
the shield and the “University of Alberta” wordmark. The shield in our logo is a stylized
representation of the detailed shield that appears in our coat of arms.</p>
<p>The wordmark is composed of both serif and sans serif fonts to provide increased legibility
in all forms of media.</p>
</section>
<section id="imagery">
<h1>Photography</h1>
<p>A photograph's ability to instantly tell a story makes it a powerful tool to convey
the University of Alberta's visual identity. Choosing how to communicate that story visually
is as important as the words you choose.</p>
<p>To ensure your images resonate with your audience
and communicate your message, there are some key elements that will make your photographs
more effective. Unusual angles, showing a candid scenario rather than a posed one, assuring
the human element, as well as a well-lit subject, all help the image give a message of
professionalism, energy and personality. With the unique architecture present on the U of A's
campus, there is an opportunity to use the juxtaposition of the buildings and the subject you
are shooting to show our history and our energy.</p>
<p>Choosing technically sound images allows the
story to come through without distractions, so make sure to use images that meet a basic level
of quality.</p>
<p>There are three ways in which the photo can be reproduced: full colour, monotone
(one colour) and black and white. Remember also, when shooting an image for print reproduction,
that it must be high resolution (300 dpi) in order to be clear and crisp on the page. Avoid
stereotypes, including race, sex, gender and age.</p>
</section>
<section id="layout">
<h1>Layout</h1>
<p>UAlberta.ca websites use a responsive layout that utilizes a fluid grid system. This means the website displays properly on a wide variety of devices, from low resolution cell phones to high resolution desktop displays.</p>
<p class="todo">TODO: Describe grid system, image sizes, general layout of global elements.</p>
</section>
<section id="forms">
<h1>Forms</h1>
</section>
<section id="writing-style">
<h1>Writing Style</h1>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script>
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemBottom >= docViewTop));
}
$(window).scroll( function() {
if(!isScrolledIntoView($('header p'))) {
$('header nav').addClass('attach');
} else {
$('header nav').removeClass('attach');
}
});
</script>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment