duckduckgo / zeroclickinfo-goodies

DuckDuckGo Instant Answers based on Perl & JavaScript
https://duckduckhack.com/
Other
981 stars 1.76k forks source link

Cheetsheet: css tweaks #1226

Closed abeyang closed 9 years ago

abeyang commented 9 years ago

Cheatsheets need some visual touches / css love.

First, update the headings:

.zci--cheat_sheets .cheatsheet__title {
  font-size: 1em;
  color: #333;
}

Let's tweak the paddings to the keys, just a bit:

.zci--cheat_sheets code {
  padding: 2px 5px 0px;
  line-height: 1.4;
}

--and align the baseline of the description to the keys:

.zci--cheat_sheets td.cheatsheet__value {
  padding-top: 3px;
}

After, let's create some greater separation between the rows:

.zci--cheat_sheets td {
  padding-bottom: 10px;
}

Finally, let's get rid of the border-line in the footer: Under .zci--cheat_sheets .cheatsheet__footer, please remove the border-top property completely.

In the end, should look something like this: image

Thanks!

spentacular commented 9 years ago

Hey @abeyang I'm lost now. I think too many files are in my repo since I added some pngs because I couldn't get them to disappear.

I also took out this style:

.zci--cheat_sheets .cheatsheet__footer hr {
    color: rgba(0,0,0,.15);
}

I couldn't find any reference to it in the detail.handlebars file in the footer:

<div class="cheatsheet__footer c-list__links">
    <a class="c-list__link  chomp--link  sep--after can-expand">
        <i class="chomp--link__icn"></i>
        <span class="chomp--link__mr">Show More</span>
        <span class="chomp--link__ls">Show Less</span>
    </a>
    <span>{{{moreAt metadata 'none' className="c-list__link"}}}</span>
</div>

This is the screenshot of the finished updates:

screen shot 2015-07-01 at 7 50 49 pm

Let me know if I need to change something in my repo to get that pulled correctly!

abeyang commented 9 years ago

Sweet! We'll review this shortly, and get back to ya!

@moollaza can we get this on a dev machine?

moollaza commented 9 years ago

@spentacular awesome! Can you please make a PR? We can continue the discussion and further changes in there :+1:

spentacular commented 9 years ago

Hey, I think I poorly referenced this here, and saw it in the Weekly Update email, and just wanted to see if there was any updates on the dark styles. Thanks!

moollaza commented 9 years ago

Fixed in #1312