Juan de Bravo

Today I’ve been changing a bit the CSS that creates the layout of this site. Almost the whole style was defined by my pal @rafeca while creating his blog. I have borrowed it .

Although I am not an expert on CSS, I like hacking a bit of this .

I summarize the changes in the following sections.

Bottom links showing a “-“ character

I think this is a common issue in a lot of sites: when you define a link containing an image, it may appear an annoying hyphen character on the right side of the image when the cursor is hover it. It’s been happening in this blog on the footer links.

To change this behavior, remove the img element and define the image as background, ensuring the text inside the a element is indented outside the screen, far away from the visible divs.

    <footer>
      <!-- Before -->
      <a class="fadedlink" href="https://github.com/juandebravo">
        <img src="/gfx/github-logo.png" alt="@github">
      </a>
      <!-- Now -->
      <a class="fadedlink footer_link github" href="https://github.com/juandebravo">
        @github
      </a>
    </footer>

.footer_link {
  width: 25px;
  display: inline-block;
  text-indent: -1000px;
}

.github {
  background: url("/gfx/github-logo.png") no-repeat scroll 0 transparent;
}

Increase body font size

This one is the easiest .

body {
  margin: 0;
  line-height: 1.4;
  /* Before */
  font-size: 16px;
  /* Now */
  font-size: 18px;
}

List style type

In both the main and the open source pages, while defining li elements the default circle character was being used. I’ve changed the CSS to support an Unicode code point using the :before clause.

.container ul.posts {
	/* Do not use list decoration */
    list-style: none;
}

.container ul.posts li:before {
	/* Add a before content */
	content: "\0445";
}

Predefined width on the left side while indexing stuff

The main page shows a the list of posts titles and their posting date. The content was not aligned:

Before:

After:

.left_title {
  display: inline-block;
  min-width: 110px;
}

« Home