StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POReducing HTML semantics of logo graphic
primarykey
Id
10323709
data
AcceptedAnswerId
10323947
AnswerCount
3
ClosedDate
CommentCount
6
CommunityOwnedDate
CreationDate
2012-04-25T20:59:53.207
FavoriteCount
0
LastActivityDate
2012-04-25T21:32:13.990
LastEditDate
2012-04-25T21:32:13.990
LastEditorUserId
1191635
OwnerUserId
1191635
ParentId
0
PostTypeId
1
Score
1
ViewCount
76
LastEditorDisplayName
text
Body
<img src="https://i.stack.imgur.com/dlMj3.png" alt="enter image description here"> <a href="http://jsfiddle.net/VRXjc/" rel="nofollow noreferrer">jsFiddle sample</a> I'm looking for the most hipster way to reduce the HTML semantics (css can be big as necessary) this 4 color logo without using pictures anything can change in the structure. Only requirement is that it works in IE8. I am using selectivr and modernizr so most selector classes and such should work. Additionally, I'm using less css so if you can write like that too. <pre><code> <ul class="logo"> <li class="webBG"></li> <li class="designBG"></li> <li class="videoBG"></li> <li class="audioBG"></li> </ul> </code></pre> CSS <pre><code>ul.logo{margin: 0 0 0 10px;padding: 0;list-style-type: none;} ul.logo li{display: inline-block; width:5px;height:5px; padding:0;margin:0; float:left;} .designBG{background:#00c8e8} .videoBG{background:#33cc77} .webBG{background:#ec8544} .audioBG{background:#E58} </code></pre> UPDATE FINAL SOLUTION <pre><code>#boilerplate > div{ margin-left:10px; width:20px; height:5px; /*cross browser definitions follow..*/ background-image: -o-linear-gradient(left, #ec8544 0%, #ec8544 25%, #00c8e8 26%, #00c8e8 50%, #33cc77 51%, #33cc77 75%, #Ee5588 76%, #Ee5588 100%); background-image: -moz-linear-gradient(left, #ec8544 0%, #ec8544 25%, #00c8e8 26%, #00c8e8 50%, #33cc77 51%, #33cc77 75%, #Ee5588 76%, #Ee5588 100%); background-image: -webkit-linear-gradient(left, #ec8544 0%, #ec8544 25%, #00c8e8 26%, #00c8e8 50%, #33cc77 51%, #33cc77 75%, #Ee5588 76%, #Ee5588 100%); background-image: -ms-linear-gradient(left, #ec8544 0%, #ec8544 25%, #00c8e8 26%, #00c8e8 50%, #33cc77 51%, #33cc77 75%, #Ee5588 76%, #Ee5588 100%); background-image: linear-gradient(left, #ec8544 0%, #ec8544 25%, #00c8e8 26%, #00c8e8 50%, #33cc77 51%, #33cc77 75%, #Ee5588 76%, #Ee5588 100%); </code></pre> } HTML <pre><code><div></div> </code></pre>
Tags
<html><css>
Title
Reducing HTML semantics of logo graphic
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USMatthew Harwood
UserOwnerUserId
1. USMatthew Harwood
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
3. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POReducing HTML semantics of logo graphic
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTDownMod
2. VO
 singulars
 PostPostId
 POReducing HTML semantics of logo graphic
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTClose
3. VO
 singulars
 PostPostId
 POReducing HTML semantics of logo graphic
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.