My responsive and beautiful site

Making the DOM order match the visual order
http://www.w3.org/TR/WCAG20-TECHS/C27.html

The button you’re using the to toggle the search form is after the form in the DOM, which can disrupt the flow of the document and confuse users with assistive technologies.

Try putting the form after the toggle button:

<a href="#" class="genericon" title="Search">
 <span class="screen-reader-text">Search</span>
</a>
<form method="get" id="searchform" class="searchform" action="http://shaansingh.me/" role="search">
 <label for="s" class="screen-reader-text">Search</label>
 <input type="search" class="field" name="s" value="" id="s" placeholder="Search …">
 <input type="submit" class="submit" id="searchsubmit" value="Search">
</form>

I understand it is then difficult to style the way you want it. A technique you could use is instead of toggling the CSS display style you could just change some CSS positioning.

For example:
Instead of displaying none the form to begin with, you could use absolute positioning to move it upwards visually in the document;

#searchform {
 position: absolute;
 top: -36px;
}

Then instead of displaying block the form after you toggle the button, you could position the form to a zero position (by toggling a class as you probably were doing);

#searchform.toggled {
 top: 0;
}

Maybe then you could try some CSS transitions too 😉

The toggle button doesn’t have any focus styling, perhaps you could just add an outline using the default;

outline: 1px dotted;

I always love minimalism.

nice !