Differences between revisions 1 and 22 (spanning 21 versions)
Revision 1 as of 2016-08-31 02:43:40
Size: 224
Editor: SamatJain
Comment:
Revision 22 as of 2016-12-26 06:05:12
Size: 2393
Editor: SamatJain
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
Describe BlogWebDesigns here.
Line 5: Line 3:
[[https://stratechery.com/|Stratechery by Ben Thompson – On the business, strategy, and impact of technology.]] Great overall design, love the footnote widget (..., click to see note).
Line 6: Line 6:

https://tridnguyen.com/. Great header. Navigation on left, photo and tagline on right.

https://0x65.net/ and https://0x65.net/j/. beautiful shadows behind headings, reminds me of oldblog.samat.org design. `text-shadow: 0 0 1px #667`

[[https://www.tildedave.com/posts.html]]. Great heading

https://www.slightfuture.com/error-page-404-preview. Error 404 page. has search, and links to most recent posts. Uses Nikola; per-post header images.

http://syntheti.cc/van-build/. Box around photos.

{{{#!highlight css numbers=off
padding: 20px;
background-color: white;
box-shadow: 0px 3px 16px -2px rgba(0, 0, 0, 0.4);
margin: 0.5em auto;
}}}

http://nobi.com/ Great, transparent header.

{{{#!highlight css numbers=off
header {
  background: #333;
  background: 00000080;
}

a { color: white; text-shadow: 0 2px 0 black; }

}}}

[[https://www.mailpile.is/blog/|Mailpile blog]]: line height, extra-large headings

== Full designs ==

https://kjellski.github.io/. Dark colors, monospaced, beautiful blues and greens.

[[http://tiago.acaia.ca/|❤ | ❤]]. Monospaced theme, Nikola-based.

http://blog.jacobtorrey.com/rowhammer-defensive-programming

http://williampross.com/tech-companies-trend-backing-losing-candidate/ Header with animated title text. Header (and homepage) with background graphic, along with animations on scroll.

[[https://blog.aurel32.net/|Aurélien Jarno]]: Nice black, grey, and white look. Rounded boxes.

== Landing pages ==

https://abrah.am/ - Uses Twitter cards, OpenGraph, looks good. Uses JS to load higher-resolution background image. FontAwesome for social network links, etc.

== Themes ==

[[http://blog.base68.com/|The Base]]. Medium-like theme called [[https://github.com/dirkfabisch/mediator|Mediator]]

[[https://mademistakes.com/work/minimal-mistakes-jekyll-theme/|Minimal Mistakes, a Jekyll Theme × Made Mistakes]]. Used by https://blog.kylemanna.com/

[[https://mmistakes.github.io/so-simple-theme/|So Simple Theme]]

Components/aspects of pages

Stratechery by Ben Thompson – On the business, strategy, and impact of technology. Great overall design, love the footnote widget (..., click to see note).

AMP and Incentives - TimKadlec.com. Like the header. Like the date overlaid a line in the heading.

https://tridnguyen.com/. Great header. Navigation on left, photo and tagline on right.

https://0x65.net/ and https://0x65.net/j/. beautiful shadows behind headings, reminds me of oldblog.samat.org design. text-shadow: 0 0 1px #667

https://www.tildedave.com/posts.html. Great heading

https://www.slightfuture.com/error-page-404-preview. Error 404 page. has search, and links to most recent posts. Uses Nikola; per-post header images.

http://syntheti.cc/van-build/. Box around photos.

padding: 20px;
background-color: white;
box-shadow: 0px 3px 16px -2px rgba(0, 0, 0, 0.4);
margin: 0.5em auto;

http://nobi.com/ Great, transparent header.

header {
  background: #333;
  background: 00000080;
}

a { color: white; text-shadow: 0 2px 0 black; }

Mailpile blog: line height, extra-large headings

Full designs

https://kjellski.github.io/. Dark colors, monospaced, beautiful blues and greens.

. Monospaced theme, Nikola-based.

http://blog.jacobtorrey.com/rowhammer-defensive-programming

http://williampross.com/tech-companies-trend-backing-losing-candidate/ Header with animated title text. Header (and homepage) with background graphic, along with animations on scroll.

Aurélien Jarno: Nice black, grey, and white look. Rounded boxes.

Landing pages

https://abrah.am/ - Uses Twitter cards, OpenGraph, looks good. Uses JS to load higher-resolution background image. FontAwesome for social network links, etc.

Themes

The Base. Medium-like theme called Mediator

Minimal Mistakes, a Jekyll Theme × Made Mistakes. Used by https://blog.kylemanna.com/

So Simple Theme

SamatsWiki: BlogWebDesigns (last edited 2018-02-10 23:19:48 by SamatJain)