diff options
| -rw-r--r-- | public/mobile-styles.css | 79 | ||||
| -rw-r--r-- | views/layout.erb | 3 |
2 files changed, 81 insertions, 1 deletions
diff --git a/public/mobile-styles.css b/public/mobile-styles.css new file mode 100644 index 0000000..11cb3da --- /dev/null +++ b/public/mobile-styles.css @@ -0,0 +1,79 @@ +body { + color: #afafaf; + background-color: #131a1a; +} + +h1, h2, h3 { + color: #ccc; +} + +a { + color: #7fb0c7; + text-decoration: none; +} + +a:hover { + color: #99b0d7; + text-decoration: underline; +} + +label { + display: block; +} + +.required label:after, +.required:empty:after { + content: "* "; + color: #ff4f4f; + vertical-align: top; +} + +input[type=text], +input[type=time] { + border: 0; +} + +textarea { + border: 1px dashed slategray; + margin-top: 5px; + margin-bottom: 5px; +} + +input[type=text], input[type=time], textarea { + border-bottom: 1px solid darkslateblue; + background-color: #afafaf; + color: #11163f; + font-size: large; + padding: 1mm; +} + +input[type=text], textarea { + width: 100%; +} + +.postcode input[type=text] { + width: 50%; +} + +.song-details { + margin-top: 2mm; +} + +.field { + padding: 1mm; +} + +.help { + font-size: small; +} + +.error { + background-color: #A81B1B; + color: #D1D1D1; + padding: 2mm; +} + +.error .error-heading { + font-size: 110%; + color: whitesmoke; +} diff --git a/views/layout.erb b/views/layout.erb index 4584662..84d3437 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -1,7 +1,8 @@ <!DOCTYPE html> <html> <head> - <link rel="stylesheet" type="text/css" href="<%= url('/styles.css') %>"> + <link rel="stylesheet" type="text/css" href="<%= url('/styles.css') %>" media="screen and (min-width: 800px)"> + <link rel="stylesheet" type="text/css" href="<%= url('/mobile-styles.css') %>" media="screen and (max-width: 800px)"> <script src="<%= url('/regform.js') %>"></script> <meta charset="UTF-8"> <title>Påmeldingsskjema - Norsk Urskog Metal Sampler</title> |