I was bored, so I made this - Hyrulean Rupees using nothing but LESS and HAML.
A Pen by Robin Grass on CodePen.
Created
May 10, 2014 10:44
-
-
Save hejrobin/b70fd230201784725879 to your computer and use it in GitHub Desktop.
A Pen by Robin Grass.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| %h1 Hyrulean Rupees | |
| %div.rupee.green | |
| %span 1 rupee | |
| - (1..7).each do |i| | |
| %i{ class: "segment side-#{i}" } | |
| %div.rupee.blue | |
| %span 5 rupees | |
| - (1..7).each do |i| | |
| %i{ class: "segment side-#{i}" } | |
| %div.rupee.red | |
| %span 20 rupees | |
| - (1..7).each do |i| | |
| %i{ class: "segment side-#{i}" } | |
| %div.rupee.purple | |
| %span 50 rupees | |
| - (1..7).each do |i| | |
| %i{ class: "segment side-#{i}" } | |
| %div.rupee.silver | |
| %span 100 rupees | |
| - (1..7).each do |i| | |
| %i{ class: "segment side-#{i}" } | |
| %div.rupee.orange | |
| %span 200 rupees | |
| - (1..7).each do |i| | |
| %i{ class: "segment side-#{i}" } | |
| %div.rupee.obsidian | |
| %span 9001 rupees | |
| - (1..7).each do |i| | |
| %i{ class: "segment side-#{i}" } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("//fonts.googleapis.com/css?family=Trade+Winds"); | |
| html { | |
| height: 100%; | |
| .background-image( | |
| linear-gradient( | |
| to bottom, | |
| #c7baa8 0%, | |
| #efeae1 100% | |
| ) | |
| ); | |
| } | |
| body { | |
| padding: 25px; | |
| font: 400 14px "Trade Winds", monospace; | |
| text-align: center; | |
| text-transform: uppercase; | |
| text-shadow: rgba(255, 255, 255, .5) 1px 1px 0; | |
| color: #66595c; | |
| h1 { | |
| margin: 25px 0; | |
| font-size: 64px; | |
| text-transform: none; | |
| text-shadow: rgba(255, 255, 255, .2) 2px 2px 0; | |
| .background-image( | |
| linear-gradient( | |
| to bottom, | |
| #66595c 0%, | |
| #2c3e50 100% | |
| ) | |
| ); | |
| -webkit-text-fill-color: transparent; | |
| -webkit-background-clip: text; | |
| } | |
| } | |
| .rupee { | |
| @size: 50px; | |
| @color: #27ae60; | |
| margin: @size * .5; | |
| width: @size * 2; | |
| height: @size * 3; | |
| position: relative; | |
| display: inline-block; | |
| span { | |
| width: 100%; | |
| display: block; | |
| text-align: center; | |
| position: absolute; | |
| bottom: -(@size * .5); | |
| } | |
| .segment { | |
| display: none; | |
| width: @size; | |
| height: 0; | |
| border-left: unit(@size * .5, px) solid transparent; | |
| border-right: unit(@size * .5, px) solid transparent; | |
| border-bottom: @size solid @color; | |
| .transform-origin(top left); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| &.side-1 { | |
| display: block; | |
| width: @size * 2; | |
| .rotate(-90deg); | |
| top: @size * 3; | |
| } | |
| &.side-2 { | |
| display: block; | |
| width: @size * 2; | |
| .rotate(90deg); | |
| left: @size * 2; | |
| border-bottom-color: darken(@color, 10%); | |
| } | |
| &.side-3 { | |
| display: block; | |
| width: @size * 1.5; | |
| .rotate(90deg); | |
| top: @size * .5; | |
| left: @size * .5; | |
| border-bottom-color: lighten(@color, 5%); | |
| border-bottom-width: (@size * .5); | |
| border-left-width: (@size * .25); | |
| border-right-width: (@size * .25); | |
| } | |
| &.side-4 { | |
| display: block; | |
| width: @size * 1.5; | |
| .rotate(-90deg); | |
| top: @size * 2.47; // wut? | |
| left: @size * .5; | |
| border-bottom-color: lighten(@color, 7.5%); | |
| border-bottom-width: (@size * .5); | |
| border-left-width: (@size * .25); | |
| border-right-width: (@size * .25); | |
| } | |
| &.side-5 { | |
| display: block; | |
| width: @size * 1.5; | |
| .rotate(90deg); | |
| top: @size * .5; | |
| left: @size * 1.5; | |
| border-bottom-color: lighten(@color, 6%); | |
| border-bottom-width: (@size * .5); | |
| border-left-width: (@size * .25); | |
| border-right-width: (@size * .25); | |
| z-index: 2; | |
| } | |
| &.side-6 { | |
| display: block; | |
| width: @size * 1.5; | |
| .rotate(-90deg); | |
| top: @size * 2.47; // wat? | |
| left: @size * 1.5; | |
| border-bottom-color: darken(@color, 7.5%); | |
| border-bottom-width: (@size * .5); | |
| border-left-width: (@size * .25); | |
| border-right-width: (@size * .25); | |
| z-index: 3; | |
| } | |
| &.side-7 { | |
| display: block; | |
| width: @size; | |
| .rotate(90deg); | |
| left: @size * 2; | |
| border-bottom-color: darken(@color, 5%); | |
| } | |
| } | |
| &.blue { | |
| .segment { | |
| @color: #2980b9; | |
| &.side-1 { | |
| border-bottom-color: @color; | |
| } | |
| &.side-2 { | |
| border-bottom-color: darken(@color, 10%); | |
| } | |
| &.side-3 { | |
| border-bottom-color: lighten(@color, 5%); | |
| } | |
| &.side-4 { | |
| border-bottom-color: lighten(@color, 7.5%); | |
| } | |
| &.side-5 { | |
| border-bottom-color: lighten(@color, 6%); | |
| } | |
| &.side-6 { | |
| border-bottom-color: darken(@color, 7.5%); | |
| } | |
| &.side-7 { | |
| border-bottom-color: darken(@color, 5%); | |
| } | |
| } | |
| } | |
| &.red { | |
| .segment { | |
| @color: #c0392b; | |
| &.side-1 { | |
| border-bottom-color: @color; | |
| } | |
| &.side-2 { | |
| border-bottom-color: darken(@color, 10%); | |
| } | |
| &.side-3 { | |
| border-bottom-color: lighten(@color, 5%); | |
| } | |
| &.side-4 { | |
| border-bottom-color: lighten(@color, 7.5%); | |
| } | |
| &.side-5 { | |
| border-bottom-color: lighten(@color, 6%); | |
| } | |
| &.side-6 { | |
| border-bottom-color: darken(@color, 7.5%); | |
| } | |
| &.side-7 { | |
| border-bottom-color: darken(@color, 5%); | |
| } | |
| } | |
| } | |
| &.purple { | |
| .segment { | |
| @color: #8e44ad; | |
| &.side-1 { | |
| border-bottom-color: @color; | |
| } | |
| &.side-2 { | |
| border-bottom-color: darken(@color, 10%); | |
| } | |
| &.side-3 { | |
| border-bottom-color: lighten(@color, 5%); | |
| } | |
| &.side-4 { | |
| border-bottom-color: lighten(@color, 7.5%); | |
| } | |
| &.side-5 { | |
| border-bottom-color: lighten(@color, 6%); | |
| } | |
| &.side-6 { | |
| border-bottom-color: darken(@color, 7.5%); | |
| } | |
| &.side-7 { | |
| border-bottom-color: darken(@color, 5%); | |
| } | |
| } | |
| } | |
| &.orange { | |
| .segment { | |
| @color: #e67e22; | |
| &.side-1 { | |
| border-bottom-color: @color; | |
| } | |
| &.side-2 { | |
| border-bottom-color: darken(@color, 10%); | |
| } | |
| &.side-3 { | |
| border-bottom-color: lighten(@color, 5%); | |
| } | |
| &.side-4 { | |
| border-bottom-color: lighten(@color, 7.5%); | |
| } | |
| &.side-5 { | |
| border-bottom-color: lighten(@color, 6%); | |
| } | |
| &.side-6 { | |
| border-bottom-color: darken(@color, 7.5%); | |
| } | |
| &.side-7 { | |
| border-bottom-color: darken(@color, 5%); | |
| } | |
| } | |
| } | |
| &.silver { | |
| .segment { | |
| @color: #95a5a6; | |
| &.side-1 { | |
| border-bottom-color: @color; | |
| } | |
| &.side-2 { | |
| border-bottom-color: darken(@color, 10%); | |
| } | |
| &.side-3 { | |
| border-bottom-color: lighten(@color, 5%); | |
| } | |
| &.side-4 { | |
| border-bottom-color: lighten(@color, 7.5%); | |
| } | |
| &.side-5 { | |
| border-bottom-color: lighten(@color, 6%); | |
| } | |
| &.side-6 { | |
| border-bottom-color: darken(@color, 7.5%); | |
| } | |
| &.side-7 { | |
| border-bottom-color: darken(@color, 5%); | |
| } | |
| } | |
| } | |
| &.obsidian { | |
| .segment { | |
| @color: #2c3e50; | |
| &.side-1 { | |
| border-bottom-color: @color; | |
| } | |
| &.side-2 { | |
| border-bottom-color: darken(@color, 10%); | |
| } | |
| &.side-3 { | |
| border-bottom-color: lighten(@color, 5%); | |
| } | |
| &.side-4 { | |
| border-bottom-color: lighten(@color, 7.5%); | |
| } | |
| &.side-5 { | |
| border-bottom-color: lighten(@color, 6%); | |
| } | |
| &.side-6 { | |
| border-bottom-color: darken(@color, 7.5%); | |
| } | |
| &.side-7 { | |
| border-bottom-color: darken(@color, 5%); | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment