User:Gregorlove.com/redesign

I am working on tweaking the CSS for the wiki/redesign. This is a test page with all sorts of wiki design elements on one page.

Long Text Section

This text should be easier to read because it has a more comfortable line measure (45 to 75 characters). See: http://webtypography.net/2.1.2

Note as the browser gets wider, the font size will increase a bit, for easier reading on higher resolution screens.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet risus augue. Cras accumsan ipsum et tortor accumsan tincidunt. Donec sit amet orci non diam ultricies varius. Aliquam pretium, urna quis semper lacinia, tellus diam eleifend urna, vel dapibus nibh elit non lectus. Cras scelerisque malesuada consectetur. Proin suscipit arcu quam, eget facilisis massa tincidunt sed. Nam ac vehicula eros. Quisque sed erat quis risus semper cursus sit amet et magna. Nulla nec justo tellus. Aenean semper eros in lorem dapibus, ac fermentum ante rhoncus. Nulla commodo nisl nec imperdiet interdum. Vestibulum sodales purus sapien, non vehicula risus eleifend id. Duis malesuada fringilla eros, et porta odio interdum quis.

Nunc eget nulla lectus. Nunc iaculis ac elit mattis lacinia. Quisque a placerat arcu, lacinia vestibulum massa. Curabitur posuere cursus tempor. In dictum tellus metus, non convallis leo sodales iaculis. Ut ultricies justo enim, non scelerisque risus dignissim ac. Donec rutrum aliquam neque, eu sollicitudin elit vehicula id. Vivamus libero mauris, euismod ut porta a, interdum non odio. Nulla dignissim rhoncus quam eget consequat. Morbi et porta risus. Donec tempus aliquet neque bibendum aliquet. Sed a egestas tortor.

Nam semper, leo vitae lobortis euismod, nunc nunc feugiat nunc, vel pretium ante odio at elit. Donec sem diam, varius quis urna ac, ultrices lobortis lorem. Maecenas mattis arcu sit amet dui rhoncus, vel faucibus turpis aliquam. Nulla facilisi. Sed pretium dolor eget tristique vulputate. Vivamus elementum risus in augue euismod ullamcorper. Integer pharetra cursus erat vitae sagittis. Phasellus tincidunt nulla in ante dignissim, vehicula ultrices massa dapibus. Integer adipiscing, orci eu luctus ullamcorper, sem arcu vulputate nunc, ut tincidunt ligula enim vitae nisl. Phasellus feugiat tincidunt turpis, at pulvinar tellus sollicitudin sed. Aliquam diam nibh, consequat in justo quis, rhoncus tincidunt dui. Etiam et eleifend nisi. Donec vitae mi eu ipsum sagittis venenatis.

Fusce ac odio magna. Suspendisse libero risus, convallis et lectus sit amet, luctus bibendum tortor. Etiam urna tellus, tincidunt sit amet dolor eu, mattis blandit enim. Duis nec massa tincidunt, vulputate augue eu, sollicitudin massa. Vestibulum consequat in velit vel hendrerit. Nulla commodo elit id pretium placerat. Pellentesque ultrices, velit sit amet vulputate suscipit, dolor erat commodo sapien, nec aliquam enim massa a odio. Proin id vehicula lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec sed euismod quam, eget accumsan libero.

Donec rhoncus est sit amet odio accumsan, non tincidunt neque tristique. Etiam hendrerit libero ipsum, a facilisis augue semper quis. Sed posuere ligula sit amet blandit feugiat. Vestibulum vehicula libero risus, at rutrum massa eleifend sed. Proin id lacinia ipsum, in porta neque. Etiam fringilla posuere posuere. Quisque at nisi convallis, iaculis nunc at, varius dui.

Lists!

This is some text appearing immediately before a list.

• First-level list item
  • Second-level list item
    • Third-level list item
      • Yo dawg, we heard you like lists
        • So we put lists inside yo lists

This is some text appearing immediately after a list.

Code

/* Meta */
pre {
	line-height: 1.4rem;
	font-family: monaco, menlo, consolas, courier, monospace;
	margin: 1.25rem 0;
	padding: 1em;
	border: 1px solid #DDD;
	color: #000;
	background-color: #F9F9F9;
	border-radius: 4px;
	white-space: pre-wrap;
}

 /* This is a really long piece of code to test line wrapping Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet risus augue. Cras accumsan ipsum et tortor accumsan tincidunt. Donec sit amet orci non diam ultricies varius. Aliquam pretium, urna quis semper lacinia, tellus diam eleifend urna, vel dapibus nibh elit non lectus. Cras scelerisque malesuada consectetur. Proin suscipit arcu quam, eget facilisis massa tincidunt sed. Nam ac vehicula eros. Quisque sed erat quis risus semper cursus sit amet et magna. Nulla nec justo tellus. Aenean semper eros in lorem dapibus, ac fermentum ante rhoncus. Nulla commodo nisl nec imperdiet interdum. Vestibulum sodales purus sapien, non vehicula risus eleifend id. Duis malesuada fringilla eros, et porta odio interdum quis. You shouldn't write code like this. 

Text wrapped in code elements looks like this.

Thumbnail

disappear altogether on a phone