desckit/public/scripts/foggy/script.css

Custom desktop wallpaper generator with NodeJS and PhantomJS

blueText (fontSize = 70px) {
  color: rgba(255,255,255,0.6);
  text-shadow: 0 0 30px rgba(28,123,194,0.87), 0 0 30px rgba(28,123,194,0.87);
  font: normal 70px 'Helvetica', sans-serif;
}
$absolute (top=0,
left=0) {
  position: absolute;
top
left
}
body {
  background: url("/images/wallpaper-1652017.jpg") top left no-repeat;
  width: 1920px;
  height: 1080px;
  color: #fff;
  padding: 0;
  margin: 0;
}
#time,
#date {
  position: absolute;
  color: rgba(255,255,255,0.6);
  text-shadow: 0 0 30px rgba(28,123,194,0.87), 0 0 30px rgba(28,123,194,0.87);
  font: normal 70px 'Helvetica', sans-serif;
  left: 60px;
  top: 80px;
  opacity: 0.6;
}
#date {
  top: 140px;
  font-size: 51px;
}
#weather {
  position: absolute;
  color: rgba(255,255,255,0.3);
  text-shadow: 0 0 30px rgba(28,123,194,0.87), 0 0 30px rgba(28,123,194,0.87);
  left: 60px;
  top: 230px;
  width: 320px;
  font: normal 40px 'Helvetica', sans-serif;
}
#weather::before {
  content: "Weather";
  position: absolute;
  left: 0;
  top: 0;
  height: 64px;
  font: normal 40px 'Helvetica', sans-serif;
  text-transform: uppercase;
}
#weather .icon {
  position: absolute;
  left: -64px;
  top: 8px;
  height: 64px;
}
#weather .now,
#weather .high,
#weather .low {
  position: absolute;
  font-size: 40px;
  left: 110px;
  top: 120px;
}
#weather .now::before,
#weather .high::before,
#weather .low::before {
  content: "Current";
  position: absolute;
  left: -110px;
  top: 15px;
  font-size: 28px;
}
#weather .now::after,
#weather .high::after,
#weather .low::after {
  content: "o";
  position: absolute;
  right: -16px;
  top: 0;
  font-size: 26px;
}
#weather .now::before {
  top: 8px;
}
#weather .high {
  font-size: 34px;
  top: 166px;
}
#weather .high::before {
  content: "High";
  top: 7px;
}
#weather .low {
  font-size: 34px;
  top: 206px;
}
#weather .low::before {
  content: "Low";
  top: 7px;
}
#weather .text {
  position: absolute;
  left: 0px;
  top: 82px;
  font-size: 28px;
}
#weather .location {
  position: absolute;
  top: 40px;
  left: 0;
  font-size: 36px;
}
#reddit {
  position: absolute;
  left: 60px;
  top: 520px;
  width: 360px;
  color: rgba(210,210,255,0.35);
  text-shadow: 0 0 30px rgba(28,123,194,0.57), 0 0 30px rgba(28,123,194,0.67);
  font: normal 50px 'Helvetica', sans-serif;
}
#reddit::before {
  content: "Reddit";
  text-transform: uppercase;
  display: block;
}
#reddit .name {
  display: block;
  font-size: 0.75em;
  top: -30px;
  position: relative;
}
#reddit.has-mail .name::after {
  content: "";
  background: url("/images/orangered.png") top left no-repeat;
  width: 16px;
  height: 11px;
  position: absolute;
  left: -32px;
  top: 31px;
  opacity: 0.65;
}
#reddit .link-karma,
#reddit .comment-karma {
  font-size: 0.5em;
  position: relative;
  float: left;
  width: 50%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
/* Firefox */
  -webkit-box-sizing: border-box;
/* Safari */
  padding-left: 64px;
  height: 64px;
  top: -30px;
}
#reddit .link-karma::before,
#reddit .comment-karma::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -9px;
  background: url("/images/up.png") 50% 50% no-repeat;
  width: 64px;
  height: 64px;
  opacity: 0.4;
}
#reddit .comment-karma::before {
  background-image: url("/images/commentup.png");
}