metafizzy.co/logo.html at gh-pages · dsorkin/metafizzy.co · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
---
layout: nil
---
{% include html-head.html %}

  <style>

    #logo {
      width: 6.0em;
      height: 8.0em;
      margin: 1.0em auto;
      font-size: 20px;
/*      background: hsla( 0, 0%, 100%, 0.1 );*/
      position: relative;
/*      -webkit-transform: scaleX(-1);*/
    }

    #logo div {
      position: absolute;
/*      background-color: hsla( 300, 80%, 60%, 0.6 );*/
      width: 2.0em;
      border: 1px solid white;
    }

    #logo .leg {
      height: 5.0em;
      -webkit-transform: skewY(-22.5deg);
    }

    #logo .leg.left {
      -webkit-transform-origin: right top;

    }

    #logo .leg.right {
      -webkit-transform-origin: left bottom;
      right: 0;
      bottom: 0;
    }

    #logo .slant.left {
      -webkit-transform-origin: right top;
      -webkit-transform: skewY(-22.0deg) skewX(21.5deg);
      height: 5.0em;
    }

    #logo .slant.right {
      -webkit-transform-origin: right top;
      -webkit-transform:  skewY(-22.5deg) skewX(-54deg) ;
      height: 1.30em;
      right: 0;
      top: 2.05em;
    }


    .transitions-ready #logo div {
      -webkit-transition: background-color 3.0s linear;
         -moz-transition: background-color 3.0s linear;
           -o-transition: background-color 3.0s linear;
              transition: background-color 3.0s linear;
    }


  </style>

</head>
<body>

  <div id="logo">
    <div class="leg right"></div>
    <div class="slant right"></div>
    <div class="slant left"></div>
    <div class="leg left"></div>
  </div>

  <script>
    var transReady = '.transitions-ready.color',
        styleNode = document.createElement('style'),
        styles = [];

    for ( var i = 0; i < 18; i++ ) {
      var hue = (i*2+1) * 10;
      styles.push( transReady + i          +' #logo .leg.left, ');
      styles.push( transReady + ((i+9)%18) +' #logo .slant.left, ');
      styles.push( transReady + ((i+2)%18) +' #logo .slant.right, ');
      styles.push( transReady + ((i+4)%18) +' #logo .leg.right ');
      styles.push('{ background-color: hsla( ' + hue + ', 90%, 60%, 0.7 ); }');
    }


    styleNode.innerHTML = styles.join(' ')

    var init = function() {

      document.head.appendChild( styleNode )

    };

    window.addEventListener( 'DOMContentLoaded', init, false );


  </script>

{% include html-foot.html %}