X-Git-Url: http://git.bytex64.net/?a=blobdiff_plain;f=www%2Fcss%2Fblerg.css;h=73dc13d32c2147f2509adeb3a260f77b07ecef65;hb=868758a60c47c984eb76bae45183d063981ebdd5;hp=6fe20545582266348de93f1099491dbf42482e73;hpb=f4bf2d2efc566e9f165b97bda72cd5a27e0d2b19;p=blerg.git diff --git a/www/css/blerg.css b/www/css/blerg.css index 6fe2054..73dc13d 100644 --- a/www/css/blerg.css +++ b/www/css/blerg.css @@ -20,52 +20,128 @@ a > img { border: 0; } -#header { +.blerg-header { background-color: #1E1E1E; color: white; padding: 8px 8px 16px 8px; + position: relative; } -#header .logo { +.blerg-header .logo { float: left; margin-right: 10px; } -#header h1 { +.blerg-header h1 { margin: 4px 0 0 0; font-size: 65px; text-shadow: black 0px 2px; } -#header a { - color: inherit; +.blerg-header h1 a { text-decoration: none; } -#header a:hover { +.blerg-header h1 a:hover { text-decoration: underline; } -#header h2 { +.blerg-header a { + color: inherit; +} + +.blerg-header h2 { margin: 0; font-size: 28px; text-shadow: black 0px 1px; } -#siteid { +.blerg-header .onyx-input, .blerg-header .onyx-textarea { + color: white; +} + +.blerg-header .onyx-focused > .onyx-input, .blerg-header .onyx-focused > .onyx-textarea { + color: black; +} + +.blerg-title { float: left; - width: 40%; + width: 35%; } -#controls { +.blerg-controls { float: right; - width: 50%; margin-top: 8px; margin-right: 8px; font-size: large; text-align: right; } +.blerg-controls-toolbar { + position: absolute; + right: 0; + top: 69pt; + margin-bottom: 16px; + margin-right: 16px; +} + +.blerg-controls-toolbar .onyx-button { + margin-left: 4pt; + font-size: 14pt; +} + +@media screen and (max-width: 800px) { + .blerg-title { + float: none; + width: auto; + } + + .blerg-controls { + float: none; + text-align: left; + margin: 1em 0 0 0; + } + + .blerg-controls-greeting { + margin: 1em 8px; + } + + .blerg-controls-toolbar { + position: static; + margin: 1em 8px; + } + + .blerg-controls-toolbar .onyx-button { + display: block; + width: 100%; + margin: 8px 0; + } + + .blerg-controls .login { + display: block; + width: auto; + margin: 1em 0; + } +} + +.feed-button.new { + background-color: #E4C010; +} + +.spew-button { + color: #333; + background-color: #0D0; + font-weight: bold; +} + +.spew-button::after { + content: " ▼"; +} + +.spew-button.active::after { + content: " ▲"; +} + h2 { font-size: 20pt; margin-bottom: 28pt; @@ -75,45 +151,80 @@ h1, h2, h3 { font-family: "Alte Haas Grotesk Bold", sans-serif; } -#main { +.blerg-main { padding: 15pt 15pt 20pt 15pt; } -#signup { - padding: 8pt; -} - -#main h2, #signup h2, #about h2 { +.blerg-main h2 { margin: 8pt 0; } -#post { +.blerg-post { padding: 20pt 20pt 16pt 20pt; } -#post h2 { +.blerg-post h2 { font-size: 14pt; - margin: 4pt 0 0 -4px; + margin: 0; } -#post\.buttons { +.blerg-post .buttons { text-align: right; - margin-right: -4px; } -#post\.buttons input { - font-size: 14pt; +.blerg-post .buttons .onyx-button { + margin-left: 4pt; + height: 0.4in; + width: 1in; +} + +.blerg-post .onyx-input-decorator { + display: block; + border-color: #999; + margin: 4pt 0; } -#post\.content { +.blerg-post .onyx-textarea { + display: block; + width: 100%; +} + +.blerg-post .content { font-size: 14pt; font-family: sans-serif; - margin: 4pt 0 4pt -4px; - border-width: 0; - padding: 4px; + height: 51pt; +} + +.login { + display: inline-block; + width: 200px; +} + +.login .onyx-button { + width: 100%; + margin-top: 4pt; +} + +.login .enyo-input { width: 100%; } +.blerg-user-controls { + font-size: 14pt; + text-align: right; +} + +.blerg-user-controls a { + color: inherit; + text-decoration: none; + margin-left: 4pt; +} + +.blerg-user-controls a:hover { + text-decoration: underline; +} + + .record { margin: 8pt 0 24pt 0; font-size: 14pt; @@ -129,31 +240,57 @@ h1, h2, h3 { font-style: italic; } -#navigation { - font-size: small; +.record .info a { color: #8F8F8F; - text-align: right; } -#latest h2 { +.record h1 { + font-size: 18pt; + margin: 1em 0; +} + +.record h2 { + font-size: 16pt; + margin: 1em 0; +} + +.record h3 { + font-size: 14pt; + margin: 1em 0; +} + +.record h4 { + font-size: 14pt; + font-weight: normal; + margin: 1em 0; +} + +.record h5 { + font-size: 14pt; + font-weight: normal; + font-style: italic; + margin: 1em 0; +} + +.latest h2 { font-size: 16pt; } -#latest-tags { +.latest-tags { text-align: center; line-height: 2em; } -#latest-tags a { +.latest-tags a { margin: 0 0.75em; } -#latest-posts { +.latest-posts { height: 184pt; overflow: hidden; } -#latest-posts .record { +.latest-posts .record { font-size: 12pt; margin: 8pt 0; } @@ -162,11 +299,46 @@ h1, h2, h3 { font-weight: bold; } -#usercontrols { - font-weight: bold; -} - .quote { border-left: 2px solid blue; padding-left: 6px; + margin-left: 2px; +} + +.blerg-dialog { + width: 300px; + padding: 8px; +} + +.blerg-dialog h2 { + font-size: 14pt; + margin: 0; +} + +.blerg-dialog .onyx-groupbox { + margin: 8px 0; +} + +.blerg-dialog .onyx-button { + display: block; + margin: 8px 0 0 0; + width: 100%; +} + +.blerg-dialog .onyx-input { + width: 100%; + color: white; +} + +.blerg-dialog .onyx-focused > .onyx-input { + color: black; +} + +.blerg-error { + color: red; + font-weight: bold; +} + +table.help td { + padding: 2pt 8pt; }