Twenty Thirteen

draft:0.1

Media Query

Twenty Thirteen
@media (max-width: 1599px)

@media (max-width: 1069px)

@media (max-width: 999px)

@media (max-width: 767px)

@media (max-width: 643px)

@media (max-width: 359px)

Twenty Twelve
@media print {}
@media screen and (min-width: 960px) {}
@media screen and (min-width: 600px) {}

Twentyeleven
@media print {}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}
@media (max-width: 450px) {}
@media (max-width: 650px) {}
@media (max-width: 800px) {}

CSS volume

テーマ 行数
twenty ten 1359
twenty eleven 2694
twenty twelve 1646
Twenty Thirteen 3103

Post formats

  • twentyeleven
    • array( ‘aside’, ‘link’, ‘gallery’, ‘status’, ‘quote’, ‘image’ )
  • twentytwelve
    • array( ‘aside’, ‘image’, ‘link’, ‘quote’ )
  • Twenty Thirteen
    • array(‘aside’, ‘audio’, ‘chat’, ‘gallery’, ‘image’, ‘link’, ‘quote’, ‘status’, ‘video’);

CSS

サイズの、remは、利用されなくなり、px em %で記述されるようになった模様

calc()使ってしまいましたね

calc()

	.toggled-on .menu-toggle:after {
		content: "\f500";
		vertical-align: -webkit-calc(2px);
		vertical-align:calc(2px);
	}

レティーナ対応

/* Retina-specific styles. */
@media print,
	(-o-min-device-pixel-ratio: 5/4),
	(-webkit-min-device-pixel-ratio: 1.25),
	(min-resolution: 120dpi) {

	.site-header .searchform [type="search"] {
		background-image: url(images/search-icon-2x.png);
	}

	.format-audio .audio-content,
	.format-status .entry-content:before,
	.format-status .entry-meta:before,
	.comment-list > li:after,
	.comment-list .children > li:before {
		background-image: url(images/dotted-line-2x.png);
	}
}

アイコンフォント

/**
 * Genericons, a flexible icon-font.
 * License: GPL version 2 or any later version with font exception (http://www.gnu.org/licenses/gpl-faq.html#FontException)
 * See also LICENSE.txt and COPYING.txt in the ./fonts directory.
 * Thanks to FontSquirrel for web-font conversion!
 * More info: genericons.com
 */
@font-face {
	font-family: Genericons;
	src: url(fonts/genericons-regular-webfont.eot);
	src: url(fonts/genericons-regular-webfont.eot?#iefix) format("embedded-opentype"),
		 url(fonts/genericons-regular-webfont.woff) format("woff"),
		 url(fonts/genericons-regular-webfont.ttf) format("truetype"),
		 url(fonts/genericons-regular-webfont.svg#genericonsregular) format("svg");
	font-weight: normal;
	font-style: normal;
}

リセットはノーマライズ

/**
 * 1.0 Reset
 *
 * Modified from Normalize.css to provide cross-browser consistency and a smart
 * default styling of HTML elements.
 *
 * @see http://git.io/normalize
 * ----------------------------------------------------------------------------
 */

Retina Display

Header Iimage Size width height
twenty eleven header 1000px 288px
thumbnail 230px 66px
Twenty Thirteen header 3200px 460px
thumbnail 460px 66px

Post Formats

←