Fogbugz 40: 1140 Grid verwenden für Auflistung der Adressen.
This commit is contained in:
Roland
parent
446573ab8a
commit
4045c623f6
11 changed files with 728 additions and 2 deletions
80
public/stylesheets/1140.css
Normal file
80
public/stylesheets/1140.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/* CSS Resets */
|
||||
|
||||
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
|
||||
|
||||
|
||||
/* The 1140px Grid by Andy Taylor – http://cssgrid.net – http://www.twitter.com/andytlr – http://www.catchingzebra.com */
|
||||
|
||||
.container {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
|
||||
margin-right: 3.8%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.onecol {
|
||||
width: 4.85%;
|
||||
}
|
||||
|
||||
.twocol {
|
||||
width: 13.5%;
|
||||
}
|
||||
|
||||
.threecol {
|
||||
width: 22.15%;
|
||||
}
|
||||
|
||||
.fourcol {
|
||||
width: 30.8%;
|
||||
}
|
||||
|
||||
.fivecol {
|
||||
width: 39.45%;
|
||||
}
|
||||
|
||||
.sixcol {
|
||||
width: 48.1%;
|
||||
}
|
||||
|
||||
.sevencol {
|
||||
width: 56.75%;
|
||||
}
|
||||
|
||||
.eightcol {
|
||||
width: 65.4%;
|
||||
}
|
||||
|
||||
.ninecol {
|
||||
width: 74.05%;
|
||||
}
|
||||
|
||||
.tencol {
|
||||
width: 82.7%;
|
||||
}
|
||||
|
||||
.elevencol {
|
||||
width: 91.35%;
|
||||
}
|
||||
|
||||
.twelvecol {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.last {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
img, object, embed {
|
||||
max-width: 100%;
|
||||
}
|
||||
50
public/stylesheets/big_button.css
Normal file
50
public/stylesheets/big_button.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
.big_green_button, .submit {
|
||||
margin:0px;
|
||||
margin-left: 3em;
|
||||
border:solid 1px #ccc;
|
||||
border-top:solid 1px #ddd;
|
||||
border-left:solid 1px #ddd;
|
||||
font-size:22px;
|
||||
color:#fff;
|
||||
cursor:pointer;
|
||||
line-height:42px;
|
||||
height:42px;
|
||||
padding:0px 15px;
|
||||
overflow:visible;
|
||||
border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
background:#87b500;
|
||||
border-width:0px;
|
||||
border-right:solid 1px #689300;
|
||||
border-bottom:solid 1px #689300;
|
||||
text-shadow:#719e03 1px 1px;
|
||||
}
|
||||
|
||||
.big_button:active {
|
||||
background:#87b500;
|
||||
color:#ECF5DE;
|
||||
line-height:44px;
|
||||
}
|
||||
|
||||
.big_button.red {
|
||||
border-top:solid 1px #cc293c;
|
||||
border-left:solid 1px #cc293c;
|
||||
background:#bc2133 /* url('/images/big_red_button_bg.png') */ top repeat-x;
|
||||
border-right:solid 1px #570710;
|
||||
border-bottom:solid 1px #570710;
|
||||
text-shadow:#a61727 1px 1px;
|
||||
}
|
||||
|
||||
.big_button.red:active {
|
||||
background:#bc2133;
|
||||
color:#F5DFDF;
|
||||
line-height:44px;
|
||||
}
|
||||
|
||||
button.giant_blue_button {
|
||||
padding:0;
|
||||
background:transparent;
|
||||
border:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
18
public/stylesheets/big_form.css
Normal file
18
public/stylesheets/big_form.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
h1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.content .form {
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.content .form .form_content {
|
||||
padding: 33px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
#text_input {
|
||||
font-size: 28px;
|
||||
width: 465px;
|
||||
}
|
||||
43
public/stylesheets/ie.css
Normal file
43
public/stylesheets/ie.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.onecol {
|
||||
width: 4.7%;
|
||||
}
|
||||
|
||||
.twocol {
|
||||
width: 13.2%;
|
||||
}
|
||||
|
||||
.threecol {
|
||||
width: 22.05%;
|
||||
}
|
||||
|
||||
.fourcol {
|
||||
width: 30.6%;
|
||||
}
|
||||
|
||||
.fivecol {
|
||||
width: 39%;
|
||||
}
|
||||
|
||||
.sixcol {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.sevencol {
|
||||
width: 56.75%;
|
||||
}
|
||||
|
||||
.eightcol {
|
||||
width: 61.6%;
|
||||
}
|
||||
|
||||
.ninecol {
|
||||
width: 74.05%;
|
||||
}
|
||||
|
||||
.tencol {
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
.elevencol {
|
||||
width: 91.35%;
|
||||
}
|
||||
362
public/stylesheets/layout.css
Normal file
362
public/stylesheets/layout.css
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
|
||||
/* Layout for desktop version */
|
||||
html {
|
||||
font-size: 100.01%;
|
||||
}
|
||||
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
line-height: 1.5;
|
||||
font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana"; /* "Helvetica Neue", "Arial", "Liberation Sans", "FreeSans", sans-serif; */
|
||||
|
||||
font-size: 0.75em; /* 16px * 0.75 = 12px */
|
||||
line-height: 1.5em; /* 12px * 1.5 = 18px */
|
||||
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* Header & Footer */
|
||||
|
||||
.header_red {
|
||||
background: #E5000A;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
margin-right: 0px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.header_black, .header_black a {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
margin-left: 0px;
|
||||
padding-right: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.logo_white { color: #fff; }
|
||||
.logo_black { color: #000; }
|
||||
#logo-accounting { color: red; }
|
||||
#logo-zen { color: black; }
|
||||
|
||||
#username { font-weight: bold; }
|
||||
|
||||
#menu_filler { background: #ccc; margin-right: 0px; padding-left: 5px; }
|
||||
#menu { background: #ccc; text-align: right; margin-left: 0px; padding-right: 5px; }
|
||||
#menu a { text-decoration: none; color: #000; }
|
||||
|
||||
#footer {
|
||||
border-top-color: #ccc;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
margin-top: 10px;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Tabellen */
|
||||
|
||||
thead th {
|
||||
background-color: #D1D1D1;
|
||||
}
|
||||
|
||||
th, td, caption {
|
||||
padding-top: 4px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 5px;
|
||||
font-style: inherit;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
table, td, th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Styles for entry forms. */
|
||||
|
||||
.form_content fieldset {
|
||||
background: #efe;
|
||||
}
|
||||
|
||||
.form_content legend {
|
||||
color: #dfd;
|
||||
background: #141;
|
||||
font-family: sans-serif;
|
||||
padding: 0.2em 1em;
|
||||
}
|
||||
|
||||
.form_content label {
|
||||
width: 5em;
|
||||
float: left;
|
||||
text-align: right;
|
||||
padding-top: 0.2em;
|
||||
padding-right: 0.1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form_content select, .form_content textarea, .form_content input {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.form_content div {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
/* tag clouds */
|
||||
.tagcloud1 { font-size: 1.0em; text-decoration: none; }
|
||||
.tagcloud2 { font-size: 1.2em; text-decoration: none; }
|
||||
.tagcloud3 { font-size: 1.4em; text-decoration: none; }
|
||||
.tagcloud4 { font-size: 1.6em; text-decoration: none; }
|
||||
|
||||
/* subtitle, at top right of page */
|
||||
div.subtitle {
|
||||
background-color: #efefef;
|
||||
border-bottom-color: #dedede;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: #dedede;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-right-color: #dedede;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-color: #dedede;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
color: #444444;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 10px;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* The subtitle on the welcome page. */
|
||||
div.subtitle_welcome {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Current development status at the welcome page. */
|
||||
div.status {
|
||||
background-color: #efefef;
|
||||
border-bottom-color: #dedede;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-left-color: #dedede;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
border-right-color: #dedede;
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
border-top-color: #dedede;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
color: #444444;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-top: 10px;
|
||||
text-decoration: none;
|
||||
outline-style: none;
|
||||
outline-width: 0px;
|
||||
display: block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div.status_text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.status_text p {
|
||||
padding-top: 2em;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
div.status_text a { color: #444444; }
|
||||
|
||||
.form {
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.form .form_content {
|
||||
padding: 33px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
#text_input {
|
||||
font-size: 28px;
|
||||
width: 465px;
|
||||
}
|
||||
|
||||
.big_green_button, .submit {
|
||||
margin:0px;
|
||||
margin-left: 3em;
|
||||
border:solid 1px #ccc;
|
||||
border-top:solid 1px #ddd;
|
||||
border-left:solid 1px #ddd;
|
||||
font-size:22px;
|
||||
color:#fff;
|
||||
cursor:pointer;
|
||||
line-height:42px;
|
||||
height:42px;
|
||||
padding:0px 15px;
|
||||
overflow:visible;
|
||||
border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
background:#87b500;
|
||||
border-width:0px;
|
||||
border-right:solid 1px #689300;
|
||||
border-bottom:solid 1px #689300;
|
||||
text-shadow:#719e03 1px 1px;
|
||||
}
|
||||
|
||||
/* Mailchimp signup-forms.
|
||||
See: http://kb.mailchimp.com/article/embed-code-css-reference
|
||||
*/
|
||||
#mc_embed_signup {
|
||||
background-color: #ffffff;
|
||||
color: #444444;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#mc-embedded-subscribe-form {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#mc-embedded-subscribe-form fieldset {
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
padding-top: 1.5em;
|
||||
margin: .5em 0;
|
||||
background-color: #ffffff;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.mc-field-group {
|
||||
background-color: #ffffff;
|
||||
margin: 1.3em 5%;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.mc-field-group label {
|
||||
display: block;
|
||||
margin: .3em 0;
|
||||
line-height: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.mc-field-group input {
|
||||
margin-right: 1.5em;
|
||||
padding: .2em .3em;
|
||||
width: 90%;
|
||||
float: left;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#mce-responses {
|
||||
float: left;
|
||||
top: -1.4em;
|
||||
padding: 0em .5em 0em .5em;
|
||||
overflow: hidden;
|
||||
width: 90%;
|
||||
margin: 0 5%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#mce-error-response {
|
||||
display: none;
|
||||
margin: 1em 0;
|
||||
padding: 1em .5em .5em 0;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
top: -1.5em;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
background: FBE3E4;
|
||||
color: #D12F19;
|
||||
}
|
||||
|
||||
#mce-success-response {
|
||||
display: none;
|
||||
margin: 1em 0;
|
||||
padding: 1em .5em .5em 0;
|
||||
font-weight: bold;
|
||||
float: left;
|
||||
top: -1.5em;
|
||||
z-index: 1;
|
||||
width: 80%;
|
||||
background: #E3FBE4;
|
||||
color: #529214;
|
||||
}
|
||||
|
||||
#mc-embedded-subscribe {
|
||||
clear: both;
|
||||
width: auto;
|
||||
display: block;
|
||||
margin: 1em 0 1em 5%;
|
||||
}
|
||||
|
||||
#mc_embed_close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Layout for mobile version */
|
||||
|
||||
@media handheld, only screen and (max-width: 767px) {
|
||||
|
||||
.examplecontainer {
|
||||
|
||||
body {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Provide higher res assets for iPhone 4 */
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
|
||||
|
||||
/* An example of how to override an image with one twice the size for iPhone 4. Specify the original pixel size with background-size.
|
||||
.download {
|
||||
background: url(../img/downarrow@2x.png) no-repeat;
|
||||
background-size: 27px 28px;
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
23
public/stylesheets/mobile.css
Normal file
23
public/stylesheets/mobile.css
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.row, .body, .container {
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
|
||||
width: auto;
|
||||
float: none;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Type presets */
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
53
public/stylesheets/reset.css
Executable file
53
public/stylesheets/reset.css
Executable file
|
|
@ -0,0 +1,53 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/ */
|
||||
/* v1.0 | 20080212 */
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* remember to define focus styles! */
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* remember to highlight inserts somehow! */
|
||||
ins {
|
||||
text-decoration: none;
|
||||
}
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* tables still need 'cellspacing="0"' in the markup */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
3
public/stylesheets/smallerscreen.css
Normal file
3
public/stylesheets/smallerscreen.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
font-size: 0.8em; /* Makes type a bit smaller at 1024 so layout doesn't look unbalanced */
|
||||
line-height: 1.5em; /* As above */
|
||||
72
public/stylesheets/typeimg.css
Normal file
72
public/stylesheets/typeimg.css
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/* Type & image presets */
|
||||
|
||||
img, object, embed {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px; /* Changing this will break the baseline grid. */
|
||||
-webkit-text-size-adjust: none; /* Stops the iPhone scalling type up */
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #005698;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #adadad;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #000;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a img {
|
||||
display: block; /* Stops image links getting text link styles */
|
||||
}
|
||||
|
||||
img {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p, ul, ol, blockquote {
|
||||
margin-bottom: 24px; /* Changing this will break the baseline grid. */
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 1px solid #c1c1c1;
|
||||
color: #747474;
|
||||
padding-left: 15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
line-height: 36px; /* Changing this will break the baseline grid. */
|
||||
margin-bottom: 24px; /* Changing this will break the baseline grid. */
|
||||
font-family: Georgia;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 24px; /* Changing this will break the baseline grid. */
|
||||
font-family: Georgia, serif;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 24px; /* Changing this will break the baseline grid. */
|
||||
font-family: Georgia, serif;
|
||||
font-weight: lighter;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue