diff options
Diffstat (limited to 'moe/panel/css/style-desktop.css')
| -rw-r--r-- | moe/panel/css/style-desktop.css | 337 |
1 files changed, 337 insertions, 0 deletions
diff --git a/moe/panel/css/style-desktop.css b/moe/panel/css/style-desktop.css new file mode 100644 index 0000000..50122fc --- /dev/null +++ b/moe/panel/css/style-desktop.css @@ -0,0 +1,337 @@ +/* + Astral 2.5 by HTML5 UP + html5up.net | @n33co + Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +*/ + +/*********************************************************************************/ +/* Basic */ +/*********************************************************************************/ + + html + { + width: 100%; + height: 100%; + } + + body + { + width: 100%; + min-height: 100%; + overflow-y: scroll; + min-width: 1000px; + } + + body, input, textarea + { + font-size: 14pt; + line-height: 1.75em; + } + + h1 + { + font-size: 1.4em; + letter-spacing: -0.015em; + } + + h2 + { + font-size: 1.8em; + letter-spacing: -0.015em; + } + + h3, h4, h5, h6 + { + font-size: 1.25em; + letter-spacing: -0.015em; + } + + header + { + margin: 0 0 1.5em 0; + } + + ul.links + { + } + + ul.links li + { + } + + ul.links li:before + { + padding: 0 0.75em 0 0.75em; + } + + .button + { + padding: 0.7em 1.5em 0.7em 1.5em; + } + + .button-small + { + font-size: 0.75em; + } + + .button-big + { + font-size: 1.25em; + padding: 0.5em 1.25em 0.5em 1.25em; + } + + .button-huge + { + font-size: 1.5em; + padding: 0.5em 1.25em 0.5em 1.25em; + } + + .byline + { + margin: 0.5em 0 0 0; + } + + .is-gallery + { + } + + .is-gallery .image + { + margin: 0; + } + +/*********************************************************************************/ +/* Wrapper */ +/*********************************************************************************/ + + #wrapper + { + width: 45em; + margin: 0 auto; + opacity: 0.00001; + } + + #wrapper.tall + { + padding-bottom: 6em; + } + +/*********************************************************************************/ +/* Nav */ +/*********************************************************************************/ + + #nav + { + text-align: center; + height: 4.25em; + cursor: default; + } + + #nav a + { + font-size: 2.5em; + margin: 0 0.25em 0 0.25em; + opacity: 0.35; + outline: 0; + } + + #nav a:before + { + font-size: 0.8em; + } + + #nav a:after + { + content: ''; + display: block; + position: absolute; + left: 50%; + bottom: -0.75em; + margin-left: -0.5em; + border-bottom: solid 0em #fff; + border-left: solid 0.5em transparent; + border-right: solid 0.5em transparent; + -moz-transition: border-bottom-width .25s ease-in-out; + -webkit-transition: border-bottom-width .25s ease-in-out; + -o-transition: border-bottom-width .25s ease-in-out; + -ms-transition: border-bottom-width .25s ease-in-out; + transition: border-bottom-width .25s ease-in-out; + } + + #nav a span + { + display: block; + position: absolute; + background: #222222; + color: #fff; + top: -2.75em; + font-size: 0.3em; + height: 2.25em; + line-height: 2.25em; + left: 50%; + opacity: 0; + + /* Labels not wide enough? Increase its width below and set margin-left to ((width / 2) * -1) */ + width: 5.5em; + margin-left: -2.75em; + } + + #nav a span:after + { + content: ''; + display: block; + position: absolute; + bottom: -0.4em; + left: 50%; + margin-left: -0.6em; + border-top: solid 0.6em #222222; + border-left: solid 0.6em transparent; + border-right: solid 0.6em transparent; + } + + #nav a:hover + { + opacity: 1.0; + } + + #nav a:hover span + { + opacity: 1.0; + } + + #nav a.active + { + opacity: 1.0; + } + + #nav a.active:after + { + border-bottom-width: 0.5em; + } + +/*********************************************************************************/ +/* Panels */ +/*********************************************************************************/ + + #main + { + width: 45em; + background: #fff; + box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.25); + } + + .panel + { + padding: 3.5em 2.5em 3.5em 2.5em; + position: absolute; + top: 0; + left: 0; + height: 30em; + width: 45em; + } + + /* Me */ + + #me + { + padding: 0; + height: 20em; + } + + #me .pic + { + display: block; + position: absolute; + right: -1px; + top: 0; + height: 100%; + text-decoration: none; + } + + #me .pic img + { + position: relative; + display: block; + height: 100%; + } + + #me .pic .arrow + { + display: block; + position: absolute; + right: 0; + top: 50%; + margin-top: -1.375em; + width: 2.75em; + height: 2.75em; + background: #000; + background: rgba(0,0,0,0.75); + color: #fff; + text-align: center; + line-height: 2.75em; + font-size: 1.5em; + z-index: 1; + -moz-transition: width .15s ease-in-out, padding-right .15s ease-in-out; + -webkit-transition: width .15s ease-in-out, padding-right .15s ease-in-out; + -o-transition: width .15s ease-in-out, padding-right .15s ease-in-out; + -ms-transition: width .15s ease-in-out, padding-right .15s ease-in-out; + transition: width .15s ease-in-out, padding-right .15s ease-in-out; + } + + #me .pic .arrow:before + { + position: relative; + padding-right: 0; + top: 0.125em; + } + + #me .pic .arrow span + { + display: block; + text-indent: -9999px; + } + + #me .pic:hover .arrow + { + width: 3em; + padding-right: 0.25em; + } + + #me header + { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin-left: 2.5em; + } + + #me h1 + { + position: absolute; + left: 0; + bottom: 52.5%; + margin: 0; + } + + #me .byline + { + position: absolute; + left: 0; + top: 52.5%; + font-size: 1.5em; + letter-spacing: -0.015em; + margin-top: 0; + } + +/*********************************************************************************/ +/* Footer */ +/*********************************************************************************/ + + #footer + { + text-align: center; + padding: 2em 0 0 0; + font-size: 0.75em; + } |