SCSS
$blue: #4584EE;
$blue2: lighten($blue, 4%);
$gray: #D7D7D7;
$gray2: #F5F5F5;
$white: #FEFEFE;
$boxshadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.2);
//settings
$background: $gray2;
$search-background: white;
$fontfamily: 'Roboto', sans-serif;
body {
padding-top: 48px;
font-family: $fontfamily;
background: $background;
}
a {
color: $blue;
}
.google__logo {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAoCAMAAAAlmk//AAAAflBMVEUAAAA0qFNChfRChfRChfRChfRChfTsUDFChfRChfTqQzXqQzVChfTqQzXqQzXqQzVChfTqQzX7vAXqQzVChfT7vAX7vAX7vAXqQzX7vAX7vAVChfTqQzVChfTqQzX7vAXqQzX7vAXqQzX7vAXqQzU0qFNChfTqQzX7vAU0qFPmKNI6AAAAJnRSTlMAv78ef0XwF5zPYO9gQpm/b97wf9+dZtrPvkczM65vJa5/UTMlOmbv7OIAAALNSURBVFjD7ZbbcqMwDIZVwGDOISEkIZDzkvT9X3Aty1hO2exeZNiZzvS/gbq2P/+SLAI/el9CxoOSJ/fwnn4pwUtl9WDlvYf6+Pz8gBfytRnWYibQviYnQRBIQmazgPwQ9w5881c/DHIeR2gidPKSyXlylCHHB1dzgChwAuYEsSEP/gNI/t3Q4VTdq9Mh4pFmvXksd+eje9froZYCVNUKF5Sc0ntV5EAKVYZeYi7VnZQmQLpuHqTleYy9N94+rF0GdePagk75FDmPleGR7qyEOMuH1Zo43FOeQHlql26nIF6BgznOKpM8KfHlov5/RM6mads1ks72ckgh5DMoSmntBdeu/gHCOQcAY61Sz7U10irk8ki1FPtjVTFohTEDFO5yo73rSehCBHVqxglIhbYUoZ+xJtR7owzxJQxcUGoi1hUpWjLWJ9dVxV3qQ3VAuukDtrQ5SVnagT9ww/IdUEdZpaDfSww71cooXrLQLuwQToezArXjyA7dCbcDxwzKEbRKdcEWN9p00oEILqD8I+jogB4aJGzgXZDRNoncG9tPulJN+bSzdL4a19EGQyfceIQTUJF/bXbSHYjp25fY20PvB7jqoiMd6T3kohVOjiKMmdtPbF16Nnr7WFcsXYWU5kYV1Si2hauJHLmTnKTYrbqTWmDsFEXEKUFTmdpcZP1gkkaxq3B2vsUwmJpeNugHOTuT4iEYOxGDcm0J67XATdgTiz+D0faOqLLSWY3A3FjVUjf6cbWnDL34awsqdMWVW/3obLg8pnAYkUQiDpFIxCGSkRs6IqGIwxL96KYXwEoqmrqyeW03pqXaEUGn7PXtYxDk5fNaZokgEIbC6pLVoQNXx+bctM/3IQtUgv3Jl+12WSU5Y96V75T3HuaSH9S1IfX4CZ1B3LKlPxaFhDnEbSQMFoGubx/m0z4crDKYUfzjJBQws4T0Yq9f+PCjb63fxmmAhQtfgbgAAAAASUVORK5CYII=) no-repeat 5px 3px;
width: 130px;
height: 40px;
display: inline-block;
}
.card-block {
padding: 1rem;
background: $search-background;
}
#search {
box-shadow: $boxshadow;
border-color: transparent;
margin-bottom: 2rem;
}
form {
display: inline;
margin: 0;
}
#GoogleSearch {
input {
border-radius: 0;
border-color: $gray;
width: 475px;
background: $search-background;
&:focus {
border-color: $blue;
}
}
button {
color: white;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABGUlEQVQoFXWSsU4CQRCGOYwJgeY64gsY3oOSUBMfwwegMCZQmthQ2NJR0FDT2NlQU9jYWICERCUKyPr9ZIcct7eTfJnZf/6ZvctdqeTDOdeEOexBsYUXuDZPYcZwBxYrilf48sIfuRMb1I0K3dTKmjh34QB6mnq2d6wR9aiKdtBEQH86dp0bB30a2voRNLxArwq6fZH3lBEuYJ1v2DlJkg31HqqmWdbwDsL38Q5uVO8SPr10ShqeQQ1T96SeFyN/nJ7LnBhqgD6H3msAFZnIV/AMCn2JNBj2xhua9nNoicwWvxQTWEIvtqCeMX1Tv8MQUngDi0HhgpjI1K1N+vwY8xbqDPVzCx4KjTGR4V5mwSHmi+oM34O+zs8/o2lHs8MgV+EAAAAASUVORK5CYII=) no-repeat 50% 50% $blue;
border-color: $blue;
border-radius: 0 2px 2px 0;
width: 60px;
cursor: pointer;
&:hover {
background-color: $blue2;
}
}
}
.sites {
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: center;
}
.site {
font-size: 1.3rem;
background: white;
border-radius: 4px;
width: 188px;
height: 120px;
margin: 1rem;
line-height: 120px;
text-align: center;
box-shadow: $boxshadow !important;
color: $blue;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
span {
font-family: FontAwesome;
padding-right: 5px;
font-size: 50px;
}
span:nth-child(2) {
display: none;
}
img {
mix-blend-mode: multiply;
//filter: grayscale(1);
}
&:nth-child(3n) {
page-break-after: always;
}
&:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.15) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 80%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
&:hover, &:focus, &:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
text-decoration: none;
color: $blue;
}
&:hover:before, &:focus:before, &:active:before {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
// Site customizations
// Font awesome unicode:
// http://fontawesome.io/cheatsheet/
#Google {
background: $blue;
color: white;
span:after {
content: '\f1a0';
}
}
#Facebook {
background: #3B5999;
color: white;
span:after {
content: '\f230';
}
}
#YouTube {
background: #E62117;
color: white;
span:after {
content: '\f167';
}
}
#GitHub {
background: #111;
color: white;
span:after {
content: '\f09b';
}
}
#Wikipedia {
background: white;
color: black;
span:after {
content: '\f266';
}
}
#Reddit {
background: #F4400B;
color: white;
span:after {
content: '\f281';
}
}
#Instagram { // from http://codepen.io/katydecorah/pen/PNLePj
color: white;
background:
radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
span:after {
content: '\f16d';
}
}
#Imgur {
background: #2B2B2B;
color: #1BB76E;
span:after {
content: '\f111';
}
}
#Amazon {
background: #0B0C07;
color: #F99A05;
span:after {
content: '\f270';
}
}
#Codepen {
background: black;
color: white;
span:after {
content: '\f1cb';
}
}
#jsFiddle {
background: #3FA1F5;
color: white;
span:after {
content: '\f1cc';
}
}
#Codepad {
background: #F35E5C;
color: white;
span:after {
content: '';
background: url('https://codepad.co/img/loader-logo.svg') no-repeat;
filter: invert(1) brightness(2);
width: 50px;
height: 50px;
top: 45px;
right: 68px;
position: absolute;
}
}
