logback icon indicating copy to clipboard operation
logback copied to clipboard
verified publisher icon qos-ch

Responsive layout for website

Open Soviut opened this issue 4 years ago • 0 comments

DISABLE WHITESPACE IN GITHUB DIFFS!

A lot of trailing whitespace got cleaned up in the HTML by linting.

image

Desktop

image

  • CSS grid layout for more flexibility
  • Content section now 75ch wide for optimal reading line length, as such the site max width was adjusted
  • <pre> tags now have an overflow: auto to display scrollbars if they're wider than the content region
  • Moved social links to header (twitter and github icons)
  • Navbar external links have target="_blank" to open them in a new tab and rel="noopener" to not pass window.opener
  • Removed right column, no more banner ad

Mobile

image

  • Mobile breakpoint at 1024px
  • Logo reduced in size
  • Grid reorganized into a single column with navbar on top

Soviut avatar Dec 22 '21 06:12 Soviut