memex/asset/style.css

html { 
	background:#DCDCDC; 
	font-family:'Monaco', 'Andale Mono', 'Deja Vu Sans Mono', 'Consolas', monospace;
	font-size:1em; 
	box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Masonry */
#masonry {
  max-width: 1550px;
  min-width: 300px;
  column-gap: 1em;
  margin-left: 0.75em;
  margin-right: 0.75em;
  margin-top: 1em;
  page-break-inside: avoid; 
  break-inside: avoid; 
}

#item {
  background: #fff;
  margin-bottom: 1em;
  padding: 1em;
  display: inline-block;
  overflow: hidden;
  width: 100% !important;
}

@media only screen and (min-width: 1550px) {
  #masonry {
    column-count: 5;
  }
}

@media only screen and (max-width: 1549px) and (min-width: 1250px) {
  #masonry {
    column-count: 4;
  }
}

@media only screen and (max-width: 1249px) and (min-width: 950px) {
  #masonry {
    column-count: 3;
  }
}

@media only screen and (max-width: 949px) and (min-width: 650px) {
  #masonry {
    column-count: 2;
  }
}

@media only screen and (max-width: 649px) and (min-width: 0px) {
  #masonry {
    column-count: 1;
  }
}


/* LINK */
a { 
	color:#000; 
	text-decoration:underline; 
}
#entryImportant a { 
	color:#fff; 
}
a#urlseen { 
	color:#666;  
}

/* ENTRY */
#entry, #entryImportant { 
	color:#000; 
	background:#999;
	padding:0.5em; 
	min-height:2.4em;
	float:left;
}
#entryImportant { 
	color:#DCDCDC; 
	background:#333333; 
}

/* TAGS */
#tags { 
	font-size:0.8em;
	color:#000; 
}
#entryImportant #tags { 
	color:#808080; 
}

/* NOTE, QUOTE, TERM */
#note, #quote, #term {
	padding-top: 1em;
	font-size:0.8em;
	color:#000; 
}
#entryImportant #note, #entryImportant #quote, #entryImportant #term { 
	color:#808080; 
}