diff --git a/Site/2013-05/css/main.css b/Site/2013-05/css/main.css index 0d158b4e..624f2177 100644 --- a/Site/2013-05/css/main.css +++ b/Site/2013-05/css/main.css @@ -11,8 +11,9 @@ a { position: relative; color: inherit; } -a:link, a:visited { +a:link, a:visited, *[onclick] { color: #08c; + cursor: pointer; } a:hover { text-decoration: none; @@ -115,6 +116,41 @@ h2.inline, h3.inline, h4.inline { .thumb .pull-left { margin-right: 5ex; } +.fit-height { + height: 100%; + max-height: 100%; +} +.middle { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + text-align: center; + vertical-align: middle; +} +.middle::before { + display: inline-block; + content: ""; + width: 0; + height: 100%; + margin-left: -2px; + vertical-align: middle; +} +.middle.play::after { + content: "▶"; + display: inline-block; + background: rgba(0, 0, 0, 0.7); + box-shadow: 0 0 1px white; + border-radius: 50%; + padding: 1ex; + font-size: 200%; + vertical-align: middle; + transition: box-shadow 0.3s; +} +.middle.play:hover::after { + box-shadow: 0 0 10px white; +} .column { display: inline-block; @@ -159,11 +195,55 @@ header .container { background: radial-gradient(70% 50% at 30% 50%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44000000', endColorstr='#cc000000',GradientType=1 ); } +header a:link, header a:visited, header *[onclick] { + color: white; +} header .background { position: absolute; width: 100%; height: 100%; } +header .box { + background: rgba(0, 0, 0, 0.8); + transition: all 0.5s; + + position: absolute; + right: 1em; + bottom: 1em; + width: 160px; + height: 100px; + + text-align: center; +} +header .box.active { + position: absolute; + right: 0; + bottom: 0; + width: 100%; + height: 100%; +} +header .box::before { + display: inline-block; + vertical-align: middle; + width: 0; + height: 100%; + content: ""; + margin-left: -2px; +} +header .box .minimized, +header .box .maximized { + position: relative; + vertical-align: middle; + font-size: 12pt; +} +header .box .minimized, +header .box.active .maximized { + display: inline-block; +} +header .box.active .minimized, +header .box .maximized { + display: none; +} #app header { height: 80%; } diff --git a/Site/2013-05/index.html b/Site/2013-05/index.html index 317152eb..972d0948 100644 --- a/Site/2013-05/index.html +++ b/Site/2013-05/index.html @@ -14,7 +14,7 @@ - + @@ -56,18 +56,26 @@
- -

Master Password

Secure your life, forget your passwords.

+ +
+
+ +
+
+
+ + +
+