Browse Source

styling improved

master
Christian Mueller 11 years ago
parent
commit
9055d66489
  1. 79
      resources/public/styles/main.less

79
resources/public/styles/main.less

@ -23,16 +23,16 @@
.central-element { .central-element {
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
width: @width; width: @width;
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
width: 90%; width: 90%;
} }
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.thin-border { .thin-border {
border: 1px solid @foreground; border: 1px solid @foreground;
} }
// end mixins // end mixins
@ -41,70 +41,65 @@ border: 1px solid @foreground;
.thin-border; .thin-border;
} }
code, pre {
font-family: "Menlo", "Andale Mono", "Consolas", Fixed, monospace;
font-size: 0.9em;
}
a { a {
color: @link_fresh; color: @link_fresh;
text-decoration: none; text-decoration: none;
border-bottom: 1px dotted; border-bottom: 1px dotted;
} }
a:hover { a:hover {
color: @link_hover; color: @link_hover;
} }
a:visited { a:visited {
color: @link_visited; color: @link_visited;
} }
#draft { #draft {
margin-bottom: 3em; margin-bottom: 3em;
} }
.button { .button {
cursor: pointer; cursor: pointer;
} }
.ui-elem { .ui-elem {
.helvetica; .helvetica;
border-radius: 3px; border-radius: 3px;
.thin-border; .thin-border;
padding: 0.3em; padding: 0.3em;
opacity: 0.8; opacity: 0.8;
font-size: 1em; font-size: 1em;
background: @background; background: @background;
} }
.landing-button, textarea, fieldset { .landing-button, textarea, fieldset {
border: none; border: none;
} }
.landing-button { .landing-button {
box-shadow: 0 2px 5px #aaa; box-shadow: 0 2px 5px #aaa;
text-decoration: none; text-decoration: none;
font-size: 1.5em; font-size: 1.5em;
background: #0a2; background: #0a2;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
.helvetica; .helvetica;
} }
.landing-button:hover { .landing-button:hover {
background: #0b2; background: #0b2;
} }
#links { #links {
.helvetica; .helvetica;
width: 100%; width: 100%;
font-size: 0.8em; font-size: 0.8em;
padding-bottom: 1em; padding-bottom: 1em;
text-align: center; text-align: center;
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
font-size: 0.4em; font-size: 0.4em;
} }
} }
#links a { #links a {
border: none; border: none;
} }
html, body { html, body {
background: @background; background: @background;
color: @foreground; color: @foreground;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#hero { #hero {
padding-top: 5em; padding-top: 5em;
@ -120,7 +115,7 @@ h1, h2, h3, h4, h5, h6 {
#hero h2 { #hero h2 {
.helvetica; .helvetica;
margin: 2em; margin: 2em;
} }
article { article {
font-family: @text_font, 'Georgia'; font-family: @text_font, 'Georgia';
@ -135,7 +130,7 @@ article p {
article > h1:first-child { article > h1:first-child {
text-align: center; text-align: center;
font-size: 2em; font-size: 2em;
margin: 2em; margin: 2em;
} }
.centered { .centered {
text-align: center; text-align: center;
@ -143,26 +138,30 @@ margin: 2em;
.bottom-space { .bottom-space {
margin-bottom: 7em; margin-bottom: 7em;
} }
code, pre {
font-family: monospace;
background: @background_halftone;
font-size: @font_size;
}
pre { pre {
border-radius: 3px; border-radius: 3px;
padding: 0.5em; padding: 0.5em;
border: 1px dotted @foreground_halftone; border: 1px dotted @foreground_halftone;
background: @background_halftone;
} }
*:focus { *:focus {
outline: 0px none transparent; outline: 0px none transparent;
} }
textarea { textarea {
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
width: @width; width: @width;
} }
border-radius: 5px; border-radius: 5px;
font-family: Courier; font-family: Courier;
font-size: 1em; font-size: 1em;
height: 500px; height: 500px;
} }
.hidden, #links { .hidden, #links {
display: none; display: none;
} }
#dashed-line { #dashed-line {
border-bottom: 1px dashed @foreground_halftone; border-bottom: 1px dashed @foreground_halftone;
@ -173,17 +172,17 @@ h1, h2, h3, h4, h5, h6 {
font-family: @header_font,'Noticia Text','PT Serif','Georgia'; font-family: @header_font,'Noticia Text','PT Serif','Georgia';
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
} }
th { th {
padding: 0.3em; padding: 0.3em;
background-color: @background_halftone; background-color: @background_halftone;
} }
td { td {
border-top: 1px dotted @foreground_halftone; border-top: 1px dotted @foreground_halftone;
padding: 0.3em; padding: 0.3em;
} }
.middot { .middot {
padding: 0.5em; padding: 0.5em;
} }

Loading…
Cancel
Save