3

Wasn't sure where (or if?) to post this.

I enjoy scanning UX.SE most days to see what others are up to and occasionally offer some ideas. But I feel the site is cluttered and awkward to quickly assess. So I pull in this custom style sheet with Greasemonkey.

In case anyone's interested ...

/*
  =================================================================
  Global
  =================================================================
*/

body {
  font-family: 'Source Sans Pro';
}

/* fade back the sidebar until hover */
#sidebar {
  opacity: .12;
  transition: all 360ms ease-in-out;
}
#sidebar:hover {
  opacity: 1;
}

/* change the goofy inset shadow on keyboard selected entries */
.question-summary.keyboard-selected,
.question.keyboard-selected,
.answer.keyboard-selected {
  box-shadow: 0 0 18px rgba(0, 0, 0, .18) inset;
}

/*
  =================================================================
  Question list
  =================================================================
*/

/* give the questions a little breathing room in the list */
.question-summary {
  padding: 24px 0;
}

/* beef up the question text in the main list */
.summary h3 a {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.summary h3 {
  padding-bottom: 6px;
}

/* clearly differentiate visited questions */
.summary h3 a:visited {
  color: #aaa;
}

/* fade back the question stats until hover or keyboard focus */
.question-summary .cp,
.question-summary .tags,
.question-summary .started {
  opacity: .42;
  transition: all 240ms ease-in-out;
}
.question-summary:hover .cp,
.question-summary.keyboard-selected .cp,
.question-summary:hover .tags,
.question-summary.keyboard-selected .tags,
.question-summary:hover .started,
.question-summary.keyboard-selected .started {
  opacity: 1;
}

/*
  =================================================================
  Question page
  =================================================================
*/

/* make the question more prominent */
#question-header .question-hyperlink {
  font-size: 30px;
  font-weight: 600;
  color: #000;
}

Before

ux.se before

After

ux.se after

4
  • Can you include some screenshots and some more description of what this does? Otherwise people will have to install this script just to get an idea of whether it's any use to them or not.
    – JonW Mod
    Commented Nov 10, 2015 at 23:33
  • Screenshots wouldn't really tell the story. The comments are pretty clear. And if you're using Chrome or Firefox, just open the inspector and paste it into a new stylesheet. But I'll add a token shot just for you @JonW ;-)
    – plainclothes
    Commented Nov 10, 2015 at 23:49
  • 1
    This is the right place to post this though I think the title made things a bit confusing/sound hostile. Retitled if you don't mind so the focus is more on the de-clutter script.
    – Zelda
    Commented Jan 5, 2016 at 21:09
  • Thanks for the adjustment @BenBrocka. Not sure how my original title came off as hostile, but the new one works fine. Maybe I'm just too picky, but I can't imagine any designer being content with SE's level of visual noise.
    – plainclothes
    Commented Jan 21, 2016 at 18:31

1 Answer 1

Reset to default
1

I think the Tags makes it hard for me to read. While it's important for meta data and should remain on the post detail page, I personally never look at them on the home page.

And option to hide them would be great. Like this.

enter image description here

1
  • I just have the opacity reduced in my style, but you could just as easily remove them with js or set display:none. Here's the selector you're looking for: .question-summary .tags
    – plainclothes
    Commented Nov 11, 2015 at 6:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .