Skip to content

Instantly share code, notes, and snippets.

/index.slim

Created September 11, 2012 22:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/3702750 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/3702750 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Sep 11, 2012.
    17 changes: 17 additions & 0 deletions index.slim
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    div.bevel
    a.center l

    div.bezel
    ul.dial
    li#a a
    li#b c
    li#c e
    li#d j
    li#e m
    li#f p
    li#g r
    li#h f
    li#i 1
    li#j 2
    li#k 6
    li#l.active u
    92 changes: 92 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    @import "compass";
    /* loading Pictos from CodePen; hope that's ok for this demo */
    @font-face{font-family:'Pictos Custom';src:url("/fonts/pictos_custom-webfont.eot");src:url("/fonts/pictos_custom-webfont.eot?#iefix") format("embedded-opentype"),url("/fonts/pictos_custom-webfont.woff") format("woff"),url("/fonts/pictos_custom-webfont.ttf") format("truetype"),url("/fonts/pictos_custom-webfont.svg#PictosRegular") format("svg");
    }


    body {
    background: #343434 url(http://subtlepatterns.com/patterns/dark_matter.png);
    }

    div.bevel {
    height: 200px;
    margin: 40px auto;
    padding: 10px;
    position: relative;
    width: 200px;
    @include border-radius(110px);
    @include background-image(radial-gradient(center top, 160px 210px, rgba(17, 17, 17, .4), rgba(51, 51, 51, .3)));
    a.center {
    background: #888;
    border: 1px solid #444;
    color: #3a3a3a; /*rgba(0, 95, 160, 0.7); */
    display: block;
    font-family: 'Pictos Custom';
    font-size: 36px;
    height: 80px;
    left: 50px;
    padding-top: 40px;
    position: absolute;
    text-align: center;
    top: 50px;
    width: 120px;
    z-index: 2;
    @include border-radius(100px);
    @include background-image(radial-gradient(center top, 120px 120px, #333, #222));
    @include box-shadow(#111 0 0 8px);
    @include text-shadow(#1c1c1c 0 -1px 1px, #5c5c5c 0 1px 1px);
    }
    }

    div.bezel {
    background: #282828;
    border: 1px solid #181818;
    height: 200px;
    overflow: hidden;
    width: 200px;
    @include border-radius(100px);
    @include background-image(radial-gradient(center center, 160px 210px, #292929, #292929, #222, #1c1c1c));
    }

    ul.dial {
    border-radius: 100px;
    color: #4c4c4c;
    float: left;
    font-family: 'Pictos Custom';
    height: 200px;
    padding-left: 120px;
    width: 480px;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    li {
    border-right: 1px solid #212121;
    display: block;
    float: left;
    font-size: 20px;
    height: 92px;
    padding-top: 8px;
    width: 39px;
    -webkit-transform-origin: bottom center;
    @include text-shadow(#000 0 0 3px);
    @include single-transition(color, 0.1s, linear, 0);
    }
    li.active {
    color: #fff;
    font-weight: bold;
    }
    li:hover {
    color: #fcc793;
    @include text-shadow(rgba(251, 223, 124, 0.8) 0 0 5px);
    @include single-transition(color, 0.3s, linear, 0);
    }
    @for $i from 1 through 12 {
    li:nth-child(#{$i}) {
    text-align: center;
    -webkit-transform:
    translateX(-40px * $i)
    rotate(30deg * $i)
    translateY(-0px);
    cursor: pointer;
    }
    }
    }