Skip to content
Permalink
Browse files

Don't float Twitter link right in small screens

Before this change, the link to me on Twitter was floated right in the heading part of the page. However, that looked really odd on a mobile, both because of the right float and also because of its positioning before the navigation menu.

This commit moves floating it to the right to inside the `@media` block so this will only happen on screens wider than 700px. It also moves the tag to be after the navigation menu so it doesn't appear before it on mobiles, and removes the top padding as this is now provided by the navigation div.
  • Loading branch information
annashipman committed Jun 26, 2016
1 parent 1e30328 commit f2fccec50a5b24d72b5aaa7b99b2646f2b5ddcee
Showing with 7 additions and 7 deletions.
  1. +1 −1 _includes/header.html
  2. +6 −6 style.css
@@ -14,13 +14,13 @@
<div class="header">
<span class="name"><a href="/">Anna Shipman</a>{{ include.page_name }}</span>
<div class="navigation">
<a href="http://www.twitter.com/annashipman" class="header-text twitter">Follow me on Twitter</a>
<table class="link-group">
<tr>
<td><a href="/jfdi.html" class="header-text">JFDI</a></td>
<td><a href="/cv.html" class="header-text">CV</a></td>
<td><a href="/etc.html" class="header-text">Etc</a></td>
</tr>
</table>
<a href="http://www.twitter.com/annashipman" class="header-text twitter">Follow me on Twitter</a>
</div>
</div>
@@ -86,12 +86,6 @@ h1, h2 {
padding: 20px 0 25px 30px;
}

.twitter{
float:right;
padding-top:20px;
padding-right: 10px;
font-size:0.9em;
}

.name {
padding: 50px 0 0 50px;
@@ -157,6 +151,12 @@ p .pretty-code-sample {
width:46%;
margin-right: 27%;
}

.twitter{
float:right;
padding-right: 10px;
font-size:0.9em;
}
}

.message-container {

0 comments on commit f2fccec

Please sign in to comment.
You can’t perform that action at this time.