Ars Technica Dark Style

Added by timd.mackey@userstyles, Created: May 13, 2016, Updated: May 13, 2016
With the style applied
  • With the style applied
  • Single Column Mode

Description:

On May 12, 2016, Ars Technica released a new design for their website, which for the moment has gotten rid of the dark mode that so many people love. Since I don't feel like waiting for them to release a dark mode, I made my own style override to do it for myself. I hope you enjoy!

(NOTE: Ars has temporarily reverted to their old design, so this stylesheet is relatively useless at the moment.)

More info
**No claims are made about the quality of this code. I did the bare minimum amount of work needed to make the style usable.

Single Column Mode can be enabled by adding the following styles after the main stylesheet:
/* Begin Single Column Settings: */
.index-row .post-tease {
  width: 100% !important;
  margin: 0 10px 0 0;
}
.index-row .post-tease > a {
  width: 280px;
  float: left;
}
.index-row .post-tease .post-meta {
  width: 550px;
  float: left;
  margin-top: 0;
  margin-left: 30px;
}
.index-row .comment-count {
  position: absolute;
  z-index: 3;
  bottom: 35px;
  left: 28.5%;
}
article.post-tease:after {
  width: 100%;
  margin-left: 0;
  border-left: none;
  border-right: none;
  border-radius: 0;
  display: none;
}

.post-tease .comment-count {
  text-shadow: -0px 1px 2px rgba(0, 0, 0, 1);
  box-shadow: -1px 1px 2px rgba(0, 0, 0, .2);
  bottom: initial;
  top:0;
  left: 250px;
  height: 30px;
  width: 40px !important;
  line-height: 31px;
}
.post-tease .comment-count.read {
  background: none #666 !important;
  color: #fff !important;
  text-shadow: none;
}
.post-tease .comment-count.unread {
  background: none #fa501e !important;
}

.post-tease .comment-count.unread:after {
  border-left: 5px solid #fa501e;
  border-top: 5px solid #fa501e;
}
.post-tease .comment-count.read:after {
  border-left: 5px solid #666;
  border-top: 5px solid #666;
}
.post-tease .comment-count:before,
.post-tease .comment-count:after {
	content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  position: absolute;
  right: 0px;
  top: 30px;
	left: initial;
}
.post-tease .comment-count:before {
  border-left: 5px solid rgba(0,0,0,.3);
  border-top: 5px solid rgba(0,0,0,.3);
  right: 1px;
  top: 30px;
}
/* End Single Column Settings */

Installs:
Applies to:
arstechnica.com, arstechnica.co.uk
Show code
License:
CC0 1.0 Universal.
timd.mackey@userstyles has waived all copyright and related or neighboring rights to Ars Technica Dark Style, to the extent allowed by law.
Report style issues

Related styles:

More Arstechnica themes

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.