Skip to content

Commit

Permalink
Add initial stylin
Browse files Browse the repository at this point in the history
  • Loading branch information
@por
por committed Jun 17, 2011
1 parent fbd4344 commit 75ecbe6
Show file tree
Hide file tree
Showing 2 changed files with 287 additions and 23 deletions.
58 changes: 35 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,49 @@
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body class="start">
<div class="start">
<input class="artist-a" value="Prince">
<input class="artist-b" value="Madonna">
<input type="submit" id="submit">
<body id="page" class="start">

<ul class="examples"></ul>
<div id="header">
<h1>Potty Bands</h1>
</div>

<div class="results">
<div class="displays"></div>
<input type="submit" class="start" value="Try another pair">
</div>
<div id="content">

<div class="not-found">
<h3>Oh no, artist was not found</h3>
<input type="submit" class="start" value="Try another pair">
</div>
<div class="results">
<div class="displays"></div>
<input type="submit" class="start" value="Try another pair">
</div>

<div class="not-found">
<h3>Oh no, artist was not found</h3>
<input type="submit" class="start" value="Try another pair">
</div>

<div class="templates">
<div class="result">
<h1 class="name"></h1>
<div class="sentiment">
<label>Sentiment:</label>
<p></p>
<div class="templates">
<div class="result">
<h1 class="name"></h1>
<div class="sentiment">
<label>Sentiment:</label>
<p></p>
</div>
</div>

<li class="example-element">
<a href="#"></a>
</li>
</div>

<li class="example-element">
<a href="#"></a>
</li>
<div class="start">
<input class="artist-a" value="Prince">
<input class="artist-b" value="Madonna">
<button type="submit" id="submit">GO!</button>

<ul class="examples"></ul>
</div>
</div>

<div id="footer">
made by
</div>
</body>
</html>
252 changes: 252 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,214 @@
/**
* HTML5 ✰ Boilerplate
*
* style.css contains a reset, font normalization and some base styles.
*
* Credit is left where credit is due.
* Much inspiration was taken from these projects:
* - yui.yahooapis.com/2.8.1/build/base/base.css
* - camendesign.com/design/
* - praegnanz.de/weblog/htmlcssjs-kickstart
*/


/**
* html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
* v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
* html5doctor.com/html-5-reset-stylesheet/
*/

html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }


/**
* Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
*/

body { font: 13px/1.231 "Helvetica Neue", Arial, sans-serif; *font-size: small; } /* Hack retained to preserve specificity */

/* Normalize monospace sizing:
en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
* Minimal base styles.
*/

/* 1) Always force a scrollbar in non-IE
2) Remove iOS text size adjust without disabling user zoom: www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }



/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: 0; }

a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
b, strong, th { font-weight: bold; }

td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
white-space: pre; white-space: pre-wrap; word-wrap: break-word;
padding: 15px;
}

.ie6 legend, .ie7 legend { margin-left: -7px; }

/* 1) Make inputs and buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
2) WebKit browsers add a 2px margin outside the chrome of form elements.
Firefox adds a 1px margin above and below textareas
3) Set font-size to match <body>'s, and font-family to sans-serif
4) Align to baseline */
button, input, select, textarea { width: auto; overflow: visible; margin: 0; font-size: 100%; font-family: sans-serif; vertical-align: baseline; }

/* 1) Remove default scrollbar in IE: www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/
2) Align to text-top */
textarea { overflow: auto; vertical-align:text-top; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Remove extra padding and inner border in Firefox */
input::-moz-focus-inner,
button::-moz-focus-inner { border: 0; padding: 0; }

/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0 0 5px red; -webkit-box-shadow: 0 0 5px red; box-shadow: 0 0 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

/* Bicubic resizing for non-native sized IMG:
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }


/**
* You might tweak these..
*/

body, select, input, textarea {
/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
color: #444;
/* Set your base font here, to apply evenly */
/* font-family: Georgia, serif; */
}


/**
* Primary styles
*
* Author:
*/

html {
background: #eee;
}

h1 {
font-size: 18px;
margin: 0.5em 0;
text-align: center;
}

#page {
width: 680px;
margin: 0 auto;
padding: 1em 0;
}

#content {
background: white;
border-radius: 10px;
}

#content .start {
text-align: center;
padding: 20px;
font-size: 18px;
line-height: 24px;
}

#content .artist-a,
#content .artist-b {
border: 1px solid #ddd;
background: #ddd;
font-size: 20px;
line-height: 38px;
width: 200px;
display: block;
margin: 0 0 10px 0;
padding: 0 5px;
}

#content .start #submit {
display: block;
width: 100px;
margin: 0 auto;
}

#content .start .examples {
list-style: none;
font-size: 12px;
line-height: 16px;
text-align: left;
}

#content .start .examples li {
margin: 0;
padding: 0;
}

div.results, div.start, div.not-found, div.templates {
display: none;
}
Expand All @@ -9,3 +220,44 @@ body.start div.start, body.results div.results, body.not-found div.not-found{
div.results .sentiment {
display: none
}














/**
* Non-semantic helper classes: please define your styles before this section.
*/

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations.
nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

0 comments on commit 75ecbe6

Please sign in to comment.