Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Styles which are applied to Project Portfolio page
strong {
font-weight: bold;
}
.button {
background-color: #f2f2f2;
background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
border: 1px solid #bfbfbf;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
color: #8c8c8c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-family: 'Baloo Da', cursive;
font-size: 20px;
font-weight: 400;
line-height: 20px;
padding: 9px 16px 9px;
transition: all 20ms ease-out;
vertical-align: top;
}
.button:hover,
.button:focus {
background: #f2f2f2;
border-color: #8c8c8c;
box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
.button:active {
background: #f2f2f2;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button .fa {
color: #bfbfbf;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button-blue {
background-color: #42b0e3;
background-image: linear-gradient(to bottom, #42b0e3, #2ba9e3);
border: 1px solid #107db0;
box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3, 0 2px 4px rgba(0, 0, 0, 0.2);
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.button-blue:hover,
.button-blue:focus {
background: #2ba9e3;
border-color: #004c6f;
box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3;
}
.button-blue:active {
background: #2ba9e3;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button-blue .fa {
color: #107db0;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button-green {
background-color: #97cc76;
background-image: linear-gradient(to bottom, #97cc76, #8bcc62);
border: 1px solid #5f993a;
box-shadow: inset 0 1px 0 #c6e6b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b, 0 2px 4px rgba(0, 0, 0, 0.2);
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.button-green:hover,
.button-green:focus {
background: #8bcc62;
border-color: #326612;
box-shadow: inset 0 1px 0 #c6e6b3, inset 0 -1px 0 #79b356, inset 0 0 0 1px #a4cc8b;
}
.button-green:active {
background: #8bcc62;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button-green .fa {
color: #5f993a;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button-purple {
background-color: #847bba;
background-image: linear-gradient(to bottom, #847bba, #7568ba);
border: 1px solid #493e87;
box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba, 0 2px 4px rgba(0, 0, 0, 0.2);
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.button-purple:hover,
.button-purple:focus {
background: #7568ba;
border-color: #1f1654;
box-shadow: inset 0 1px 0 #bab6d4, inset 0 -1px 0 #655aa1, inset 0 0 0 1px #948dba;
}
.button-purple:active {
background: #7568ba;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button-purple .fa {
color: #493e87;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button-orange {
background-color: #f58a38;
background-image: linear-gradient(to bottom, #f58a38, #f57c20);
border: 1px solid #c25706;
box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851, 0 2px 4px rgba(0, 0, 0, 0.2);
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.button-orange:hover,
.button-orange:focus {
background: #f57c20;
border-color: #773300;
box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851;
}
.button-orange:active {
background: #f57c20;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button-orange .fa {
color: #c25706;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button-red {
background-color: #ed6d64;
background-image: linear-gradient(to bottom, #ed6d64, #ed574c);
border: 1px solid #ba3329;
box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b, 0 2px 4px rgba(0, 0, 0, 0.2);
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.button-red:hover,
.button-red:focus {
background: #ed574c;
border-color: #870c03;
box-shadow: inset 0 1px 0 #ffb0aa, inset 0 -1px 0 #d44d44, inset 0 0 0 1px #ed837b;
}
.button-red:active {
background: #ed574c;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button-red .fa {
color: #ba3329;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button-yellow {
background-color: #fce374;
background-image: linear-gradient(to bottom, #fce374, #fcdf5b);
border: 1px solid #c9ae34;
box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d, 0 2px 4px rgba(0, 0, 0, 0.2);
color: #967d09;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.button-yellow:hover,
.button-yellow:focus {
background: #fcdf5b;
border-color: #967d09;
box-shadow: inset 0 1px 0 #fff6ce, inset 0 -1px 0 #e3c852, inset 0 0 0 1px #fce88d;
}
.button-yellow:active {
background: #fcdf5b;
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button-yellow .fa {
color: #c9ae34;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.button .fa {
float: left;
font-size: 14px;
line-height: 20px;
margin: -1px 8px 0 -4px;
vertical-align: top;
}
.column-divider {
border-left: 1px solid white;
}
.img-frame {
background-color: white;
box-shadow: 0 0 10px;
}
.navbar {
background-color: #FFD131;
border-radius: 0;
font-family: 'Bree Serif', serif;
box-shadow: 0 0 10px;
}
.navbar-caption {
font-family: 'Chewy', cursive;
font-size: 3em;
}
.navbar-summary {
font-family: 'Indie Flower', cursive;
font-size: 2em;
}
.navbar-help {
font-family: 'Bree Serif', serif;
font-size: 1.5em;
}
a.button:focus,
a.button:hover {
color: inherit;
text-decoration: none;
}
b,
strong {
font-weight: bolder;
text-shadow: 0 3px 5px #000;
}
.loading {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1999;
background-color: white;
text-align: center;
}
.loading-msg {
font-family: 'Bree Serif', serif;
font-size: 4em;
font-weight: bold;
text-shadow: 0 2px 2px;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.p-t-half {
padding-top: 0.5em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment