desckit/public/scripts/eli1/script.styl

Custom desktop wallpaper generator with NodeJS and PhantomJS

@import url("/fonts/Dited/stylesheet.css")
$displayFont = 'DitedRegular', cursive

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 $displayFont;

$absolute (top=0, left=0)
  position: absolute
  top: {top}
  left: {left}

body
  background: url('/images/wallpaper-1652017.jpg') top left no-repeat;
  width: 1920px;
  height: 1080px;
  color: white
  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 $displayFont;
  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 $displayFont
  
  
  &::before
    content: "Weather"
    position: absolute
    left: 0
    top: 0
    height: 64px
    font: normal 40px $displayFont
    text-transform: uppercase
  
  .icon 
    position: absolute
    left: -64px
    top: 8px
    height: 64px
  
  .now, .high, .low
    position: absolute
    font-size: 40px
    left: 110px
    top: 120px
    
    &::before
      content: "Current"
      position: absolute
      left: -110px
      top: 15px
      font-size: 28px
      
    &::after
      content: "o"
      position: absolute
      right: -16px
      top: 0
      font-size: 26px
  
  .now
    &::before
      top: 8px
  
  .high
    font-size: 34px
    top: 166px
    
    &::before
      content: "High"
      top: 7px
  
  .low
    font-size: 34px
    top: 206px
    
    &::before
      content: "Low"
      top: 7px
  .text 
    position: absolute
    left: 0px
    top: 82px
    font-size: 28px
  
  .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 $displayFont;
  
  &::before
    content: "Reddit"
    text-transform: uppercase
    display: block
  
  
  .name
    display: block
    font-size: 0.75em
    top: -30px
    position: relative
    
  &.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
    
  .link-karma, .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
    
    &::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
  
  .comment-karma
    &::before
      background-image: url('/images/commentup.png')