Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Put a border around code paragraphs #261

Merged
merged 3 commits into from

5 participants

@mauke

So I really want to see some borders around code paragraphs because I think it looks better. The contained patch also removes some CSS (particularly "!important" bits) to make it easier to override the general look. Or at least that's the plan.

@mauke mauke Add a border around code paragraphs
Also try to prune some of the redundant CSS.
feea67a
@monken
Owner

A black border has way too much contrast. Besides text there is are no black elements on the page, which is imho a good thing.

@oalders
Owner

So, I really like the concept, but I do see what @moonken is saying about the black border. Something subtler would still do the trick. For example, the scheme used by search.cpan.org when syntax highlighting is turned off works well for me.

So, I think we need a border, but maybe just less contrast.

@kentfredric

I made a similar change in kentfredric@8698b59

Slightly different, a bit lighter and only uses top and bottom borders, which gives the middle code block the perception of being a gradient even though it isn't.

Code

@kentfredric

ps. image embed code is:

![Label](url)
@oalders
Owner

I think both of these are an improvement over what we currently have. What @kentfredric is proposing is a little subtler, so it seems quite easy on the eyes.

@ranguard
Owner

I like kentfredric's version - a little subtler which is nice

@monken
Owner

@kentfredric commit also changes the background-color, which I'm not in favor of. Though, having a slightly darker border is fine.

@oalders
Owner

@monken are you referring to the bgcolor of the page or of the code snippet?

@monken
Owner

@oalders background-color of the whole page
kentfredric@742550d#L0R53

@oalders
Owner

@mauke would you like to amend this to take into account the feedback on this issue?

@oalders oalders merged commit 52a6807 into CPAN-API:master
@oalders
Owner

Thanks for this. I've made a few tweaks just to get this into master. Feel free to suggest changes. I think the way it is now, it's at least an improvement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 23, 2011
  1. @mauke

    Add a border around code paragraphs

    mauke authored
    Also try to prune some of the redundant CSS.
Commits on Aug 24, 2011
  1. @mauke
  2. @mauke
This page is out of date. Refresh to see the latest.
View
5 root/static/css/shCore.css
@@ -24,8 +24,8 @@
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea,
-.pod code,
-.pod pre {
+.pod code *,
+.pod pre * {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
@@ -94,7 +94,6 @@
width: 100% !important;
height: 100% !important;
border: none !important;
- background: white !important;
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
View
9 root/static/css/shThemeDefault.css
@@ -14,15 +14,6 @@
* @license
* Dual licensed under the MIT and GPL licenses.
*/
-.syntaxhighlighter {
- background-color: white !important;
-}
-.syntaxhighlighter .line.alt1 {
- background-color: white !important;
-}
-.syntaxhighlighter .line.alt2 {
- background-color: white !important;
-}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #e0e0e0 !important;
}
View
18 root/static/css/style.css
@@ -516,24 +516,16 @@ button.favorite:hover, button.favorite.active, a.favorite.active, a.favorite:hov
ul#index, #index ul { list-style-type: none; }
.syntaxhighlighter, .pod pre {
- border-top: 10px solid #f9f9f9 !important;
- border-bottom: 10px solid #f9f9f9 !important;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ border: 1px solid #888888;
width: auto !important;
overflow-y: hidden !important;
+ background-color: #f3f3f3;
}
.nogutter, .pod pre {
- border-left: 10px solid #f9f9f9 !important;
-}
-
-.syntaxhighlighter, .pod pre {
- background-color: #f9f9f9 !important;
-}
-.syntaxhighlighter .line.alt1 {
- background-color: #f9f9f9 !important;
-}
-.syntaxhighlighter .line.alt2 {
- background-color: #f9f9f9 !important;
+ padding-left: 10px;
}
.search-results img,
Something went wrong with that request. Please try again.