aboutsummaryrefslogtreecommitdiff
path: root/source/css (unfollow)
Commit message (Collapse)AuthorFilesLines
2016-01-08Site design refresh part IZhiming Wang2-43/+70
Highlights: * Change font to Times/Times New Roman + Courier; * Text slightly darkened across the board to account for the thinner Times; * Eliminate line numbers; * Use custom highlight.css (based on highlight-css supplied by Pandoc, but hightlight more classes when Pandoc falls short, e.g., span.im for Python from and import). Closes #5 because we don't have line numbers anymore.
2015-12-26theme.css and template.html: Solve overflow problem in code and a tagsZhiming Wang1-0/+5
Over-long inline <code> tag or long literal link in <a> tag used to overflow the container. This is especially bad on phones where width is very limited. This commit hopefully solves the overflow problem. Still no smarter word breaking, but it's probably just an unfortunate limitation of HTML.
2015-11-26theme.css: change color of inline code to #777Zhiming Wang1-0/+2
Droid Sans Mono doesn't stand out too well in a wall of PT Serif. Changing to a greyish color doesn't disrupt the black-and-white feel of the website, while giving inline code a bit more distinction.
2015-10-10theme.css: deal with subpixel antialiasingZhiming Wang1-0/+9
Looks much better in desktop Safari on my non-Retina screen. Code stolen from http://www.intridea.com/blog/2014/5/8/better-font-smoothing-in-chrome-on-mac-os-x.
2015-09-25template: put article-metadata in div tag instead of h2Zhiming Wang1-0/+1
Date and author shouldn't be in the document outline.
2015-09-22theme.css: fix nav icon for IE9Zhiming Wang1-1/+1
2015-09-05theme.css: ix problematic baseline shift of rss-icon in FirefoxZhiming Wang1-0/+7
Before: http://git.io/vGxpJ ; After: http://git.io/vGxpk .
2015-09-05Self host webfontsZhiming Wang2-0/+82
Sometimes (e.g., occasionally in China) Google/FontAwesome webfonts might not be available, rendering the whole site unusable.
2015-08-22Add ultranarrow theme for screens narrower than 500pxZhiming Wang1-0/+3
Just set content width to 90% instead of 80% for narrow.
2015-08-22theme.css: adjust footnote paddingZhiming Wang1-0/+4
Make list indices roughly align with body text.
2015-08-20theme.css: add 5px of vertical margins to <img>'sZhiming Wang1-2/+1
2015-08-08Change style of <hr> tagZhiming Wang1-0/+6
2015-08-08rfooter icons: switch to Font AwesomeZhiming Wang1-21/+7
Use web font to draw icons.
2015-08-08Blog icon text: switch to antialiases normal weightZhiming Wang1-1/+3
Open Sans Light 300 turns out to be too thin when antialiased (e.g., in mobile Safari.)
2015-08-08Draw blog icon with pure HTML and CSSZhiming Wang2-11/+27
Using web font Open Sans (light) instead of Helvetica Neue. Text is thinner, but close enough and feels about right.
2015-08-05Update print.cssZhiming Wang1-4/+3
I forgot to update print.css to match the updated DOM last time.
2015-08-05theme.css: figure caption 80% wideZhiming Wang1-0/+2
To distinguish long captions from article paragraphs.
2015-08-02update normalize.css to v3.0.3Zhiming Wang1-11/+8
2015-07-26rfooter icons: reduce duplication in CSSZhiming Wang1-23/+10
2015-07-26tons of logic and performance improvementsZhiming Wang3-94/+86
The main aim is a more logical DOM structure and more performant CSS.
2015-07-26css: replace padding with margin whenever possibleZhiming Wang3-10/+10
Also adjusted some margins.
2015-07-26adjust content width for different window widthsZhiming Wang2-2/+6
New: * Greater than 1440px: load theme-wide.css, content width: 50%; * Between 1024 and 1440px: standard theme.css, content width: 60%; * Lower than 1024px: load theme-narrow.css, content width: 90% (and floating nav element moves up to page top to make space).
2015-07-26optimize Atom, RSS and CC icons for retina displayZhiming Wang1-3/+6
Again using -webkit-image-set.
2015-07-25narrow theme: 200x200 icon => 150x150Zhiming Wang1-5/+6
200x200 icon wastes too much valuable screen estate on a smart phone.
2015-07-25use -webkit-image-set to make icon look sharper on Retina displaysZhiming Wang2-0/+2
2015-07-25select blog icon with CSSZhiming Wang2-3/+13
This way we can deliver the right size based on the window size (wide or narrow), rather than deliver a universal one then scale down.
2015-07-24pyblog: add postprocessor process_footnote_backlinksZhiming Wang1-0/+13
Add class and variation selector (# U+FE0E: VARIATION SELECTOR-15) to U+21A9: LEFTWARDS ARROW WITH HOOK to fix outstanding font issue of footnote backlinks on mobile. Updated styles accordingly. Trick learned from Daring Fireball. Before: https://i.imgur.com/eUbL1k8.png After: https://i.imgur.com/msv3INn.png
2015-07-23configure viewport and get rid of theme-enlarge.cssZhiming Wang1-8/+0
Viewport configuration per Google's mobile usability suggestions. It not only provides a consistent experience by using device independent pixels, but also help me get rid of theme-enlarge.css, which could result in unexpectedly large font when one accidently resize to a portrait window on the desktop. Thanks Google! See https://developers.google.com/speed/docs/insights/ConfigureViewport.
2015-07-19theme.css: blockquote: add bar on the leftZhiming Wang1-1/+3
The bar is the same as that for pre. Horizontal padding reduced to 1em.
2015-07-17fix line number placementZhiming Wang3-5/+6
Global font size in each style sheet has been tweaked very carefully so that the precise line height is very close to a whole number of pixels, so that precision alignment using em, which aligns something precise (top: 13.5em) to something inprecise (line heights, with accumulated errors due to rounding in every line), is not lost. Note that Firefox is NOT supported, since each line seems to always occupy one more pixel than the calculated line height. For some reason line numbers in the print view are still rather problematic at a page continuation. In Chrome and Safari, the first two line numbers on a new page tend to overlap, so everything afterwards are off (and on Firefox line numbers do not show up on the second page at all). Anyway, printing shouldn't be a big concern.
2015-07-17add print stylesheetZhiming Wang1-0/+15
2015-07-17narrow theme: add 10% padding at article bottomZhiming Wang1-1/+1
2015-07-17design mobile and narrow window friendly themeZhiming Wang3-18/+74
Tested on iPhone 6 Plus (both portrait and landscape).
2015-07-17index.html TOC: use <table> instead of <ul>Zhiming Wang1-5/+7
For better formatting. The following screenshots illustrate the difference: * https://i.imgur.com/ZfkUpBG.png * https://i.imgur.com/S6cRK00.png I also reduced the indentation on the left of each year's index from 2em to 1em.
2015-06-16theme.css: shrink paragraph spacing in and between footnotesZhiming Wang1-0/+4
2015-06-16fix font issues: moving back to Droid Sans Mono for codeZhiming Wang1-2/+10
I just noticed that code font is crazy without Consolas installed (I recently reinstalled my OS and got rid of Office for Mac 2011 — that's probably why). The line numbers are all off (since the line heights are carefully pre-calculated, and fallback fonts of different leadings won't help). Therefore, I'm moving to the quite nice looking and controllable Droid Sans Mono. Isn't as satisfactory as Consolas on the web, but certainly better than Monaco. Note: I originally copied my list Consolas, Monaco, 'Andale Mono', monospace (I added Courier since I like it a lot as the primitive monospace font) from MDN Wiki, but now it looks like a bad choice when I don't have Consolas any more. By the way, MDN Wiki renders line numbers using JS, so at least they are able to calculate the line heights. I'm serving everything statically, so this is a problem.
2015-06-10modify template and stylesheet to include RSS iconZhiming Wang1-2/+16
2015-05-16update to "Searchable settings are one honking great idea..."Zhiming Wang1-2/+2
2015-05-14add noscript tag for javascript embedded asciicastZhiming Wang1-0/+8
2015-05-14add source code line numbersZhiming Wang1-8/+33
The way I handle line numbers and the pre block in general is inspired by the MDN wiki. See, for instance, https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript a screenshot is here: https://i.imgur.com/982TBDc.png Also tweaked other styles, e.g., changed the primary monospace font to Consolas, and slightly tweaked a few old posts.
2015-05-13add support for lfooter (updated) and top level pages...Zhiming Wang1-4/+12
(other than index.html).
2015-05-0920150509 storyboard reached 0.1Zhiming Wang1-0/+4
Also fixed the bugs in pyblog introduced in the last revision and tweaked the theme a bit.
2015-05-06fix minor invalid HTML issuesZhiming Wang1-0/+2
2015-05-05serve the CC icon locallyZhiming Wang1-1/+1
2015-05-0520150505 Graceful handling of SIGINT when using Python's multiprocessing.ProcessZhiming Wang1-0/+4
Also implemented the "touch" action in pyblog, as well as wrote a README.md for the source branch. And some other minor patching.
2015-05-05add feed icon to footerZhiming Wang1-0/+11
Among other fixes and tweaks.
2015-05-05pyblog: implement deploy and gen_deployZhiming Wang1-1/+1
Also changed month to short format on the index page.
2015-05-0520150505: New blog, new startZhiming Wang1-0/+8
Also fixed several problems: 1. Rending SVG and making it a clickable link is basically impossible across multiple browsers. I'm now using a pretty good PNG; 2. Implemented new_post in pyblog; 3. Footnotes related updates to the theme.
2015-05-05handle navigation button and faviconsZhiming Wang1-0/+4
Note that I'm using an <embed> tag with the svg because if wrapped in <img>, the svg won't render on Safari. After using the <embed> tag, the svg renders on all four major browsers on OS X (Chrome, Safari, Firefox, Opera), and it looks nice on all three but Firefox, in which case it's crappy as fuck.
2015-05-05a lot of workZhiming Wang1-0/+14
Mainly generating feed and index.