[Blogger公式テーマ]Essential Lightを眺める[HTML:HyperText Markup Language]

投稿者：Y

ラベル：blogger

公開：2020年5月7日

更新：2020年9月10日


概要(0001-3949)

0001：<?xml version="1.0" encoding="UTF-8" ?>
0002：<!DOCTYPE html>
0003：<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='strm.xml' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
0004：  <head>
(中略)
2842：  </head>
2843：
2844：  <body>
(中略)
3948：  </body>
3949：</html>

解説

0001：<?xml version="1.0" encoding="UTF-8" ?>

・XML:Extensible Markup Languageのバージョンが1.0

・文字コードがUTF-8


0002：<!DOCTYPE html>
・文書型がHTML5

0003：<html
(中略)
3949：</html>
・標準のCSS:Cascading Style Sheetsをfalseにする
・標準のwidgetのバージョンが2
・標準のレイアウトのバージョンが3
・responsiveをtrueにする
・テンプレートのURLがstrm.xml
・テンプレートのバージョンが1.0.0
・文字の方向についてdir,言語についてlangで設定する
・xmlns属性はXMLのname space(名前空間)が定義されたURLを指定する
Essential Light

head(0004-2842) 

  1.   <head>
  2.     <meta content='width=device-width, initial-scale=1' name='viewport'/>
  3.     <title><data:view.title.escaped/></title>
  4.     <b:include data='blog' name='all-head-content'/>
  5.  
  6.     <b:skin version='1.0.0'><![CDATA[/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
  7. /*
  8. <!-- Constants -->
  9.  
  10. <Variable name="damionRegular36" description="Damion Regular 36" type="font" default="400 36px Damion, cursive" hideEditor="true"  value="400 36px Damion, cursive"/>
  11. <Variable name="damionRegular62" description="Damion Regular 62" type="font" default="400 62px Damion, cursive" hideEditor="true"  value="400 62px Damion, cursive"/>
  12. <Variable name="playfairDisplayBlack28" description="Playfair Display Black 28" type="font" default="900 28px Playfair Display, serif" hideEditor="true"  value="900 28px Playfair Display, serif"/>
  13. <Variable name="playfairDisplayBlack36" description="Playfair Display Black 36" type="font" default="900 36px Playfair Display, serif" hideEditor="true"  value="900 36px Playfair Display, serif"/>
  14. <Variable name="playfairDisplayBlack44" description="Playfair Display Black 44" type="font" default="900 44px Playfair Display, serif" hideEditor="true"  value="900 44px Playfair Display, serif"/>
  15. <Variable name="robotoNormal15" description="Roboto Normal 15" type="font" default="15px Roboto, sans-serif" hideEditor="true"  value="15px Roboto, sans-serif"/>
  16. <Variable name="robotoNormal16" description="Roboto Normal 16" type="font" default="16px Roboto, sans-serif" hideEditor="true"  value="16px Roboto, sans-serif"/>
  17. <Variable name="robotoLightItalic15" description="Roboto Light Italic 15" type="font" default="italic 300 15px Roboto, sans-serif" hideEditor="true"  value="italic 300 15px Roboto, sans-serif"/>
  18. <Variable name="robotoBold22" description="Roboto Bold 22" type="font" default="bold 22px Roboto, sans-serif" hideEditor="true"  value="bold 22px Roboto, sans-serif"/>
  19. <Variable name="robotoBold30" description="Roboto Bold 30" type="font" default="bold 30px Roboto, sans-serif" hideEditor="true"  value="bold 30px Roboto, sans-serif"/>
  20. <Variable name="robotoBold45" description="Roboto Bold 45" type="font" default="bold 45px Roboto, sans-serif" hideEditor="true"  value="bold 45px Roboto, sans-serif"/>
  21.  
  22. <!-- Variable definitions -->
  23.  
  24. <Variable name="keycolor" description="Main Color" type="color" default="#2196f3"  value="#2196f3"/>
  25. <Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" />
  26. <Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" />
  27.  
  28. <Group description="Page Text">
  29.   <Variable name="body.text.font" description="Font"
  30.       type="font"
  31.       default="$(robotoNormal15)"  value="15px Roboto, sans-serif"/>
  32.   <Variable name="body.text.color" description="Color"
  33.       type="color"
  34.       default="#757575"  value="#757575"/>
  35. </Group>
  36.  
  37. <Group description="Backgrounds">
  38.   <Variable name="body.background.height" description="Background height"
  39.       type="length"
  40.       min="420px"
  41.       max="640px"
  42.       default="480px"  value="480px"/>
  43.   <Variable name="body.background" description="Background"
  44.       color="$(body.background.color)"
  45.       type="background"
  46.       default="$(color) none repeat scroll top left"  value="$(color) none repeat scroll top left"/>
  47.   <Variable name="body.background.shadow" description="Background overlay shadow"
  48.       type="color"
  49.       default="rgba(0,0,0,.26)"  value="rgba(0, 0, 0 ,0)"/>
  50.   <Variable name="body.background.color" description="Body background color"
  51.       type="color"
  52.       default="#eee"  value="#f4f4f4"/>
  53.   <Variable name="posts.background.color" description="Post background color"
  54.       type="color"
  55.       default="#fff"  value="#ffffff"/>
  56.   <Variable name="body.background.blur" description="Background blur"
  57.       type="length"
  58.       min="0px"
  59.       max="50px"
  60.       default="0px"  value="0px"/>
  61. </Group>
  62.  
  63. <Group description="Links">
  64.   <Variable name="body.link.color" description="Link color"
  65.       type="color"
  66.       default="#2196f3"  value="#2196f3"/>
  67.   <Variable name="body.link.visited.color" description="Visited link color"
  68.       type="color"
  69.       default="$(body.link.color)"  value="#2196f3"/>
  70.   <Variable name="body.link.hover.color" description="Link Hover Color"
  71.       type="color"
  72.       default="$(body.link.color)"  value="#2196f3"/>
  73. </Group>
  74.  
  75. <Group description="Blog title" selector="div.widget.Header">
  76.   <Variable name="blog.title.font" description="Font"
  77.       type="font"
  78.       default="$(robotoBold45)"  value="bold 45px Roboto, sans-serif"/>
  79.   <Variable name="blog.title.color" description="Color"
  80.       type="color"
  81.       default="#fff"  value="#424242"/>
  82.   <Variable name="header.icons.color"
  83.       description="Background icons color"
  84.       type="color"
  85.       default="#fff"  value="#424242"/>
  86. </Group>
  87.  
  88. <Group description="Tabs text" selector="div.widget.PageList">
  89.   <Variable name="tabs.font" description="Font"
  90.       type="font"
  91.       family="$(robotoNormal15.family)"
  92.       size="$(robotoNormal15.size)"
  93.       default="700 normal $(size) $(family)"  value="700 normal $(size) $(family)"/>
  94.   <Variable name="tabs.color" description="Text color"
  95.       type="color"
  96.       default="#ccc"  value="#757575"/>
  97.   <Variable name="tabs.selected.color" description="Selected color"
  98.       type="color"
  99.       default="#fff"  value="#424242"/>
  100.   <Variable name="tabs.overflow.background.color" description="Popup background color"
  101.       type="color"
  102.       default="$(posts.background.color)"  value="#ffffff"/>
  103.   <Variable name="tabs.overflow.color" description="Popup text color"
  104.       type="color"
  105.       default="$(posts.text.color)"  value="#757575"/>
  106.   <Variable name="tabs.overflow.selected.color" description="Popup selected color"
  107.       type="color"
  108.       default="$(posts.title.color)"  value="#424242"/>
  109. </Group>
  110.  
  111. <Group description="Posts" selector="div.widget.Blog">
  112.   <Variable name="posts.title.color" description="Post title color"
  113.       type="color"
  114.       default="#424242"  value="#424242"/>
  115.   <Variable name="posts.title.font" description="Post title font"
  116.       type="font"
  117.       default="$(robotoBold22)"  value="bold 22px Roboto, sans-serif"/>
  118.   <Variable name="posts.stream.title.font" description="Post title stream font"
  119.       type="font"
  120.       default="$(robotoBold30)"  value="bold 30px Roboto, sans-serif"/>
  121.   <Variable name="posts.text.font" description="Post text font"
  122.       type="font"
  123.       default="$(body.text.font)"  value="15px Roboto, sans-serif"/>
  124.   <Variable name="posts.text.color" description="Post text color"
  125.       type="color"
  126.       default="$(body.text.color)"  value="#757575"/>
  127.   <Variable name="posts.byline.color" description="Post byline color"
  128.       type="color"
  129.       default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  130.   <Variable name="blockquote.font" description="Blockquote font"
  131.       type="font"
  132.       default="$(robotoLightItalic15)"  value="italic 300 15px Roboto, sans-serif"/>
  133.   <Variable name="blockquote.color" description="Blockquote color"
  134.       type="color"
  135.       default="#444"  value="#444444"/>
  136.   <Variable name="posts.icons.color"
  137.       description="Post icons color"
  138.       type="color"
  139.       default="#707070"  value="#707070"/>
  140.   <Variable name="posts.boxshadow.color" description="Post box shadow color"
  141.       type="color"
  142.       default="rgba(0, 0, 0, 0)"  value="rgba(60, 64, 67, 0.30)"/>
  143. </Group>
  144.  
  145. <Group description="Search">
  146.   <Variable name="search.input.color" description="Input color"
  147.       type="color"
  148.       default="$(blog.title.color)"  value="#424242"/>
  149.   <Variable name="search.input.font" description="Input font"
  150.       type="font"
  151.       default="$(robotoNormal16)"  value="16px Roboto, sans-serif"/>
  152.   <Variable name="search.placeholder.color" description="Placeholder text color"
  153.       type="color"
  154.       default="$(blog.title.color)"  value="#424242"/>
  155. </Group>
  156.  
  157. <Group description="Sharing">
  158.   <Variable name="sharing.background.color"
  159.       description="Sharing background color"
  160.       type="color"
  161.       default="$(posts.background.color)"  value="#ffffff"/>
  162.   <Variable name="sharing.text.color" description="Sharing text color"
  163.       type="color"
  164.       default="$(posts.title.color)"  value="#424242"/>
  165.   <Variable name="sharing.icons.color"
  166.       description="Sharing icons color"
  167.       type="color"
  168.       default="$(sharing.text.color)"  value="#424242"/>
  169. </Group>
  170.  
  171. <Group description="Popular posts" selector="div.widget.PopularPosts">
  172.   <Variable name="popularposts.background.color"
  173.       description="Popular post background color"
  174.       type="color"
  175.       default="$(body.background.color)"  value="#f4f4f4"/>
  176.   <Variable name="popularposts.byline.color"
  177.       description="Popular post byline color"
  178.       type="color"
  179.       default="$(posts.byline.color)"  value="rgba(0, 0, 0, 0.54)"/>
  180.   <Variable name="popularposts.title.color"
  181.       description="Popular post title color"
  182.       type="color"
  183.       default="$(posts.title.color)"  value="#424242"/>
  184.   <Variable name="popularposts.text.color"
  185.       description="Popular post text color"
  186.       type="color"
  187.       default="$(posts.text.color)"  value="#757575"/>
  188.   <Variable name="popularposts.link.color"
  189.       description="Popular post link color"
  190.       type="color"
  191.       default="$(body.link.color)"  value="#2196f3"/>
  192. </Group>
  193.  
  194. <Group description="Post navigation" selector='div.blog-pager'>
  195.   <Variable name="posts.navigation.link.color"
  196.       description="Post navigation links color"
  197.       type="color"
  198.       default="$(body.link.color)"  value="#2196f3"/>
  199.   <Variable name="posts.navigation.link.visited.color"
  200.       description="Post navigation links visited color"
  201.       type="color"
  202.       default="$(body.link.visited.color)"  value="#2196f3"/>
  203.   <Variable name="posts.navigation.link.hover.color"
  204.       description="Post navigations links hover color"
  205.       type="color"
  206.       default="$(body.link.hover.color)"  value="#2196f3"/>
  207. </Group>
  208.  
  209. <Group description="Sidebar" selector="div.sidebar-container">
  210.   <Variable name="sidebar.backgroundColorTop"
  211.       description="Background color (Top)"
  212.       type="color"
  213.       default="#f7f7f7"  value="#f7f7f7"/>
  214.   <Variable name="sidebar.backgroundColorTopHD"
  215.       description="Background color (Top) - HD"
  216.       type="color"
  217.       default="rgba(255, 255, 255, 1)"  value="rgba(255, 255, 255, 1)"/>
  218.   <Variable name="sidebar.backgroundColorBottom"
  219.       description="Background color (Bottom)"
  220.       type="color"
  221.       default="#fff"  value="#ffffff"/>
  222.   <Variable name="sidebar.separator.color"
  223.       description="Separator color"
  224.       type="color"
  225.       default="#ccc"  value="#cccccc"/>
  226.   <Variable name="widget.title.color"
  227.       description="Gadget title color"
  228.       type="color"
  229.       default="#424242"  value="#424242"/>
  230.   <Variable name="sidebar.icons.color"
  231.       description="Sidebar icons color"
  232.       type="color"
  233.       default="#707070"  value="#707070"/>
  234. </Group>
  235.  
  236. <Group description="Author profile" selector='.widget.Profile'>
  237.   <Variable name="profile.title.color" description="Profile title color"
  238.       type="color"
  239.       default="rgba(0,0,0,0.52)"  value="rgba(0,0,0,0.52)"/>
  240.   <Variable name="profile.text.color" description="Profile text color"
  241.       type="color"
  242.       default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  243.   <Variable name="profile.link.color" description="Profile link color"
  244.       type="color"
  245.       default="$(posts.title.color)"  value="#424242"/>
  246. </Group>
  247.  
  248. <Group description="Labels" selector=".widget.Label">
  249.   <Variable name="labels.text.color"
  250.       description="Label text color"
  251.       type="color"
  252.       default="$(body.link.color)"  value="#2196f3"/>
  253.   <Variable name="labels.background.color"
  254.       description="Label background color"
  255.       type="color"
  256.       red="$(labels.text.color.red)"
  257.       green="$(labels.text.color.green)"
  258.       blue="$(labels.text.color.blue)"
  259.       default="rgba($red, $green, $blue, 0.05)"  value="#f7f7f7"/>
  260. </Group>
  261.  
  262. <Group description="Attribution" selector=".widget.Attribution">
  263.   <Variable name="attribution.text.color" description="Attribution text color"
  264.       type="color"
  265.       default="$(body.text.color)"  value="#757575"/>
  266.   <Variable name="attribution.link.color" description="Attribution link color"
  267.       type="color"
  268.       default="$(body.link.color)"  value="#2196f3"/>
  269.   <Variable name="attribution.icon.color" description="Attribution icon color"
  270.       type="color"
  271.       default="#707070"
  272.       hideEditor="true"  value="#707070"/>
  273. </Group>
  274.  
  275. <Group description="Widths">
  276.   <Variable name="sidebar.width" description="Sidebar width" type="length"
  277.             min="100px" max="1000px" default="284px"  value="284px"/>
  278.   <Variable name="content.width" description="Content width" type="length"
  279.             min="600px" max="2400px" default="922px"  value="922px"/>
  280.   <Variable name="content.margin" description="Content margin" type="length"
  281.             min="0px" max="1000px" default="117px"  value="117px"/>
  282. </Group>
  283. */
  284.  
  285. /*!************************************************
  286.  * Blogger Template Style
  287.  * Name: Essential
  288.  **************************************************/
  289. body{
  290. overflow-wrap:break-word;
  291. word-break:break-word;
  292. word-wrap:break-word
  293. }
  294. .hidden{
  295. display:none
  296. }
  297. .invisible{
  298. visibility:hidden
  299. }
  300. .container:after,.float-container:after{
  301. clear:both;
  302. content:"";
  303. display:table
  304. }
  305. .clearboth{
  306. clear:both
  307. }
  308. #comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit,.widget.Profile .profile-link,.widget.Profile .profile-link.visit-profile{
  309. background:transparent;
  310. border:0;
  311. box-shadow:none;
  312. color:$(body.link.color);
  313. cursor:pointer;
  314. font-size:14px;
  315. font-weight:700;
  316. outline:none;
  317. text-decoration:none;
  318. text-transform:uppercase;
  319. width:auto
  320. }
  321. .dim-overlay{
  322. height:100vh;
  323. left:0;
  324. position:fixed;
  325. top:0;
  326. width:100%
  327. }
  328. #sharing-dim-overlay{
  329. background-color:transparent
  330. }
  331. input::-ms-clear{
  332. display:none
  333. }
  334. .blogger-logo,.svg-icon-24.blogger-logo{
  335. fill:#ff9800;
  336. opacity:1
  337. }
  338. .loading-spinner-large{
  339. -webkit-animation:mspin-rotate 1568.63ms linear infinite;
  340. animation:mspin-rotate 1568.63ms linear infinite;
  341. height:48px;
  342. overflow:hidden;
  343. position:absolute;
  344. width:48px;
  345. z-index:200
  346. }
  347. .loading-spinner-large>div{
  348. -webkit-animation:mspin-revrot 5332ms steps(4) infinite;
  349. animation:mspin-revrot 5332ms steps(4) infinite
  350. }
  351. .loading-spinner-large>div>div{
  352. -webkit-animation:mspin-singlecolor-large-film 1333ms steps(81) infinite;
  353. animation:mspin-singlecolor-large-film 1333ms steps(81) infinite;
  354. background-size:100%;
  355. height:48px;
  356. width:3888px
  357. }
  358. .mspin-black-large>div>div,.mspin-grey_54-large>div>div{
  359. background-image:url(https://www.blogblog.com/indie/mspin_black_large.svg)
  360. }
  361. .mspin-white-large>div>div{
  362. background-image:url(https://www.blogblog.com/indie/mspin_white_large.svg)
  363. }
  364. .mspin-grey_54-large{
  365. opacity:.54
  366. }
  367. @-webkit-keyframes mspin-singlecolor-large-film{
  368. 0%{
  369. -webkit-transform:translateX(0);
  370. transform:translateX(0)
  371. }
  372. to{
  373. -webkit-transform:translateX(-3888px);
  374. transform:translateX(-3888px)
  375. }
  376. }
  377. @keyframes mspin-singlecolor-large-film{
  378. 0%{
  379. -webkit-transform:translateX(0);
  380. transform:translateX(0)
  381. }
  382. to{
  383. -webkit-transform:translateX(-3888px);
  384. transform:translateX(-3888px)
  385. }
  386. }
  387. @-webkit-keyframes mspin-rotate{
  388. 0%{
  389. -webkit-transform:rotate(0deg);
  390. transform:rotate(0deg)
  391. }
  392. to{
  393. -webkit-transform:rotate(1turn);
  394. transform:rotate(1turn)
  395. }
  396. }
  397. @keyframes mspin-rotate{
  398. 0%{
  399. -webkit-transform:rotate(0deg);
  400. transform:rotate(0deg)
  401. }
  402. to{
  403. -webkit-transform:rotate(1turn);
  404. transform:rotate(1turn)
  405. }
  406. }
  407. @-webkit-keyframes mspin-revrot{
  408. 0%{
  409. -webkit-transform:rotate(0deg);
  410. transform:rotate(0deg)
  411. }
  412. to{
  413. -webkit-transform:rotate(-1turn);
  414. transform:rotate(-1turn)
  415. }
  416. }
  417. @keyframes mspin-revrot{
  418. 0%{
  419. -webkit-transform:rotate(0deg);
  420. transform:rotate(0deg)
  421. }
  422. to{
  423. -webkit-transform:rotate(-1turn);
  424. transform:rotate(-1turn)
  425. }
  426. }
  427. .skip-navigation{
  428. background-color:#fff;
  429. box-sizing:border-box;
  430. color:#000;
  431. display:block;
  432. height:0;
  433. left:0;
  434. line-height:50px;
  435. overflow:hidden;
  436. padding-top:0;
  437. position:fixed;
  438. text-align:center;
  439. top:0;
  440. -webkit-transition:box-shadow .3s,height .3s,padding-top .3s;
  441. transition:box-shadow .3s,height .3s,padding-top .3s;
  442. width:100%;
  443. z-index:900
  444. }
  445. .skip-navigation:focus{
  446. box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
  447. height:50px
  448. }
  449. #main{
  450. outline:none
  451. }
  452. .main-heading{
  453. position:absolute;
  454. clip:rect(1px,1px,1px,1px);
  455. padding:0;
  456. border:0;
  457. height:1px;
  458. width:1px;
  459. overflow:hidden
  460. }
  461. .Attribution{
  462. margin-top:1em;
  463. text-align:center
  464. }
  465. .Attribution .blogger img,.Attribution .blogger svg{
  466. vertical-align:bottom
  467. }
  468. .Attribution .blogger img{
  469. margin-$endSide:.5em
  470. }
  471. .Attribution div{
  472. line-height:24px;
  473. margin-top:.5em
  474. }
  475. .Attribution .copyright,.Attribution .image-attribution{
  476. font-size:.7em;
  477. margin-top:1.5em
  478. }
  479. .BLOG_mobile_video_class{
  480. display:none
  481. }
  482. .bg-photo{
  483. background-attachment:scroll!important
  484. }
  485. body .CSS_LIGHTBOX{
  486. z-index:900
  487. }
  488. .extendable .show-less,.extendable .show-more{
  489. border-color:$(body.link.color);
  490. color:$(body.link.color);
  491. margin-top:8px
  492. }
  493. .extendable .show-less.hidden,.extendable .show-more.hidden,.inline-ad{
  494. display:none
  495. }
  496. .inline-ad{
  497. max-width:100%;
  498. overflow:hidden
  499. }
  500. .adsbygoogle{
  501. display:block
  502. }
  503. #cookieChoiceInfo{
  504. bottom:0;
  505. top:auto
  506. }
  507. iframe.b-hbp-video{
  508. border:0
  509. }
  510. .post-body iframe,.post-body img{
  511. max-width:100%
  512. }
  513. .post-body a[imageanchor=\31]{
  514. display:inline-block
  515. }
  516. .byline{
  517. margin-$endSide:1em
  518. }
  519. .byline:last-child{
  520. margin-$endSide:0
  521. }
  522. .link-copied-dialog{
  523. max-width:520px;
  524. outline:0
  525. }
  526. .link-copied-dialog .modal-dialog-buttons{
  527. margin-top:8px
  528. }
  529. .link-copied-dialog .goog-buttonset-default{
  530. background:transparent;
  531. border:0
  532. }
  533. .link-copied-dialog .goog-buttonset-default:focus{
  534. outline:0
  535. }
  536. .paging-control-container{
  537. margin-bottom:16px
  538. }
  539. .paging-control-container .paging-control{
  540. display:inline-block
  541. }
  542. .paging-control-container .comment-range-text:after,.paging-control-container .paging-control{
  543. color:$(body.link.color)
  544. }
  545. .paging-control-container .comment-range-text,.paging-control-container .paging-control{
  546. margin-$endSide:8px
  547. }
  548. .paging-control-container .comment-range-text:after,.paging-control-container .paging-control:after{
  549. content:"\b7";
  550. cursor:default;
  551. padding-$startSide:8px;
  552. pointer-events:none
  553. }
  554. .paging-control-container .comment-range-text:last-child:after,.paging-control-container .paging-control:last-child:after{
  555. content:none
  556. }
  557. .byline.reactions iframe{
  558. height:20px
  559. }
  560. .b-notification{
  561. color:#000;
  562. background-color:#fff;
  563. border-bottom:1px solid #000;
  564. box-sizing:border-box;
  565. padding:16px 32px;
  566. text-align:center
  567. }
  568. .b-notification.visible{
  569. -webkit-transition:margin-top .3s cubic-bezier(.4,0,.2,1);
  570. transition:margin-top .3s cubic-bezier(.4,0,.2,1)
  571. }
  572. .b-notification.invisible{
  573. position:absolute
  574. }
  575. .b-notification-close{
  576. position:absolute;
  577. right:8px;
  578. top:8px
  579. }
  580. .no-posts-message{
  581. line-height:40px;
  582. text-align:center
  583. }
  584. @media screen and (max-width:800px){
  585. body.item-view .post-body a[imageanchor=\31][style*=float\:\ left\;],body.item-view .post-body a[imageanchor=\31][style*=float\:\ right\;]{
  586. float:none!important;
  587. clear:none!important
  588. }
  589. body.item-view .post-body a[imageanchor=\31] img{
  590. display:block;
  591. height:auto;
  592. margin:0 auto
  593. }
  594. body.item-view .post-body>.separator:first-child>a[imageanchor=\31]:first-child{
  595. margin-top:20px
  596. }
  597. .post-body a[imageanchor]{
  598. display:block
  599. }
  600. body.item-view .post-body a[imageanchor=\31]{
  601. margin-left:0!important;
  602. margin-right:0!important
  603. }
  604. body.item-view .post-body a[imageanchor=\31]+a[imageanchor=\31]{
  605. margin-top:16px
  606. }
  607. }
  608. .item-control{
  609. display:none
  610. }
  611. #comments{
  612. border-top:1px dashed rgba(0,0,0,.54);
  613. margin-top:20px;
  614. padding:20px
  615. }
  616. #comments .comment-thread ol{
  617. margin:0;
  618. padding-left:0;
  619. padding-$startSide:0
  620. }
  621. #comments .comment-thread .comment-replies,#comments .comment .comment-replybox-single{
  622. margin-left:60px
  623. }
  624. #comments .comment-thread .thread-count{
  625. display:none
  626. }
  627. #comments .comment{
  628. list-style-type:none;
  629. padding:0 0 30px;
  630. position:relative
  631. }
  632. #comments .comment .comment{
  633. padding-bottom:8px
  634. }
  635. .comment .avatar-image-container{
  636. position:absolute
  637. }
  638. .comment .avatar-image-container img{
  639. border-radius:50%
  640. }
  641. .avatar-image-container svg,.comment .avatar-image-container .avatar-icon{
  642. border-radius:50%;
  643. border:1px solid $(posts.icons.color);
  644. box-sizing:border-box;
  645. fill:$(posts.icons.color);
  646. height:35px;
  647. margin:0;
  648. padding:7px;
  649. width:35px
  650. }
  651. .comment .comment-block{
  652. margin-top:10px;
  653. margin-$startSide:60px;
  654. padding-bottom:0
  655. }
  656. #comments .comment-author-header-wrapper{
  657. margin-left:40px
  658. }
  659. #comments .comment .thread-expanded .comment-block{
  660. padding-bottom:20px
  661. }
  662. #comments .comment .comment-header .user,#comments .comment .comment-header .user a{
  663. color:$(posts.title.color);
  664. font-style:normal;
  665. font-weight:700
  666. }
  667. #comments .comment .comment-actions{
  668. bottom:0;
  669. margin-bottom:15px;
  670. position:absolute
  671. }
  672. #comments .comment .comment-actions>*{
  673. margin-right:8px
  674. }
  675. #comments .comment .comment-header .datetime{
  676. bottom:0;
  677. display:inline-block;
  678. font-size:13px;
  679. font-style:italic;
  680. margin-$startSide:8px
  681. }
  682. #comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime,#comments .comment .comment-header .datetime a{
  683. color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),.54)
  684. }
  685. #comments .comment .comment-content,.comment .comment-body{
  686. margin-top:12px;
  687. word-break:break-word
  688. }
  689. .comment-body{
  690. margin-bottom:12px
  691. }
  692. #comments.embed[data-num-comments=\30]{
  693. border:0;
  694. margin-top:0;
  695. padding-top:0
  696. }
  697. #comment-editor-src,#comments.embed[data-num-comments=\30] #comment-post-message,#comments.embed[data-num-comments=\30] div.comment-form>p,#comments.embed[data-num-comments=\30] p.comment-footer{
  698. display:none
  699. }
  700. .comments .comments-content .loadmore.loaded{
  701. max-height:0;
  702. opacity:0;
  703. overflow:hidden
  704. }
  705. .extendable .remaining-items{
  706. height:0;
  707. overflow:hidden;
  708. -webkit-transition:height .3s cubic-bezier(.4,0,.2,1);
  709. transition:height .3s cubic-bezier(.4,0,.2,1)
  710. }
  711. .extendable .remaining-items.expanded{
  712. height:auto
  713. }
  714. .svg-icon-24,.svg-icon-24-button{
  715. cursor:pointer;
  716. height:24px;
  717. width:24px;
  718. min-width:24px
  719. }
  720. .touch-icon{
  721. margin:-12px;
  722. padding:12px
  723. }
  724. .touch-icon:active,.touch-icon:focus{
  725. background-color:hsla(0,0%,60%,.4);
  726. border-radius:50%
  727. }
  728. svg:not(:root).touch-icon{
  729. overflow:visible
  730. }
  731. html[dir=rtl] .rtl-reversible-icon{
  732. -webkit-transform:scaleX(-1);
  733. transform:scaleX(-1)
  734. }
  735. .svg-icon-24-button,.touch-icon-button{
  736. background:transparent;
  737. border:0;
  738. margin:0;
  739. outline:none;
  740. padding:0
  741. }
  742. .touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{
  743. background-color:transparent
  744. }
  745. .touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{
  746. background-color:hsla(0,0%,60%,.4);
  747. border-radius:50%
  748. }
  749. .Profile .default-avatar-wrapper .avatar-icon{
  750. border-radius:50%;
  751. border:1px solid $(posts.icons.color);
  752. box-sizing:border-box;
  753. fill:$(posts.icons.color);
  754. margin:0
  755. }
  756. .Profile .individual .default-avatar-wrapper .avatar-icon{
  757. padding:25px
  758. }
  759. .Profile .individual .avatar-icon,.Profile .individual .profile-img{
  760. height:120px;
  761. width:120px
  762. }
  763. .Profile .team .default-avatar-wrapper .avatar-icon{
  764. padding:8px
  765. }
  766. .Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{
  767. height:40px;
  768. width:40px
  769. }
  770. .snippet-container{
  771. margin:0;
  772. position:relative;
  773. overflow:hidden
  774. }
  775. .snippet-fade{
  776. bottom:0;
  777. box-sizing:border-box;
  778. position:absolute;
  779. width:96px;
  780. $endSide:0
  781. }
  782. .snippet-fade:after{
  783. content:"\2026";
  784. float:$endSide
  785. }
  786. .post-bottom{
  787. -webkit-box-align:center;
  788. align-items:center;
  789. display:-webkit-box;
  790. display:flex;
  791. flex-wrap:wrap
  792. }
  793. .post-footer{
  794. -webkit-box-flex:1;
  795. flex:1 1 auto;
  796. flex-wrap:wrap;
  797. -webkit-box-ordinal-group:2;
  798. order:1
  799. }
  800. .post-footer>*{
  801. -webkit-box-flex:0;
  802. flex:0 1 auto
  803. }
  804. .post-footer .byline:last-child{
  805. margin-$endSide:1em
  806. }
  807. .jump-link{
  808. -webkit-box-flex:0;
  809. flex:0 0 auto;
  810. -webkit-box-ordinal-group:3;
  811. order:2
  812. }
  813. .centered-top-container.sticky{
  814. left:0;
  815. position:fixed;
  816. right:0;
  817. top:0;
  818. width:auto;
  819. z-index:50;
  820. -webkit-transition-property:opacity,-webkit-transform;
  821. transition-property:opacity,-webkit-transform;
  822. transition-property:transform,opacity;
  823. transition-property:transform,opacity,-webkit-transform;
  824. -webkit-transition-duration:.2s;
  825. transition-duration:.2s;
  826. -webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
  827. transition-timing-function:cubic-bezier(.4,0,.2,1)
  828. }
  829. .centered-top-placeholder{
  830. display:none
  831. }
  832. .collapsed-header .centered-top-placeholder{
  833. display:block
  834. }
  835. .centered-top-container .Header .replaced h1,.centered-top-placeholder .Header .replaced h1{
  836. display:none
  837. }
  838. .centered-top-container.sticky .Header .replaced h1{
  839. display:block
  840. }
  841. .centered-top-container.sticky .Header .header-widget{
  842. background:none
  843. }
  844. .centered-top-container.sticky .Header .header-image-wrapper{
  845. display:none
  846. }
  847. .centered-top-container img,.centered-top-placeholder img{
  848. max-width:100%
  849. }
  850. .collapsible{
  851. -webkit-transition:height .3s cubic-bezier(.4,0,.2,1);
  852. transition:height .3s cubic-bezier(.4,0,.2,1)
  853. }
  854. .collapsible,.collapsible>summary{
  855. display:block;
  856. overflow:hidden
  857. }
  858. .collapsible>:not(summary){
  859. display:none
  860. }
  861. .collapsible[open]>:not(summary){
  862. display:block
  863. }
  864. .collapsible:focus,.collapsible>summary:focus{
  865. outline:none
  866. }
  867. .collapsible>summary{
  868. cursor:pointer;
  869. display:block;
  870. padding:0
  871. }
  872. .collapsible:focus>summary,.collapsible>summary:focus{
  873. background-color:transparent
  874. }
  875. .collapsible>summary::-webkit-details-marker{
  876. display:none
  877. }
  878. .collapsible-title{
  879. -webkit-box-align:center;
  880. align-items:center;
  881. display:-webkit-box;
  882. display:flex
  883. }
  884. .collapsible-title .title{
  885. -webkit-box-flex:1;
  886. flex:1 1 auto;
  887. -webkit-box-ordinal-group:1;
  888. order:0;
  889. overflow:hidden;
  890. text-overflow:ellipsis;
  891. white-space:nowrap
  892. }
  893. .collapsible-title .chevron-down,.collapsible[open] .collapsible-title .chevron-up{
  894. display:block
  895. }
  896. .collapsible-title .chevron-up,.collapsible[open] .collapsible-title .chevron-down{
  897. display:none
  898. }
  899. .flat-button{
  900. font-weight:700;
  901. text-transform:uppercase;
  902. border-radius:2px;
  903. padding:8px;
  904. margin:-8px
  905. }
  906. .flat-button,.flat-icon-button{
  907. cursor:pointer;
  908. display:inline-block
  909. }
  910. .flat-icon-button{
  911. background:transparent;
  912. border:0;
  913. outline:none;
  914. margin:-12px;
  915. padding:12px;
  916. box-sizing:content-box;
  917. line-height:0
  918. }
  919. .flat-icon-button,.flat-icon-button .splash-wrapper{
  920. border-radius:50%
  921. }
  922. .flat-icon-button .splash.animate{
  923. -webkit-animation-duration:.3s;
  924. animation-duration:.3s
  925. }
  926. .overflowable-container{
  927. max-height:$(body.text.font.size * 1.2 + 2 * 8px + 2 * 4px + 4px);
  928. overflow:hidden;
  929. position:relative
  930. }
  931. .overflow-button{
  932. cursor:pointer
  933. }
  934. #overflowable-dim-overlay{
  935. background:transparent
  936. }
  937. .overflow-popup{
  938. box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  939. background-color:$(tabs.overflow.background.color);
  940. left:0;
  941. max-width:calc(100% - 32px);
  942. position:absolute;
  943. top:0;
  944. visibility:hidden;
  945. z-index:101
  946. }
  947. .overflow-popup ul{
  948. list-style:none
  949. }
  950. .overflow-popup .tabs li,.overflow-popup li{
  951. display:block;
  952. height:auto
  953. }
  954. .overflow-popup .tabs li{
  955. padding-left:0;
  956. padding-right:0
  957. }
  958. .overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{
  959. display:none
  960. }
  961. .pill-button{
  962. background:transparent;
  963. border:1px solid;
  964. border-radius:12px;
  965. cursor:pointer;
  966. display:inline-block;
  967. padding:4px 16px;
  968. text-transform:uppercase
  969. }
  970. .ripple{
  971. position:relative
  972. }
  973. .ripple>*{
  974. z-index:1
  975. }
  976. .splash-wrapper{
  977. bottom:0;
  978. left:0;
  979. overflow:hidden;
  980. pointer-events:none;
  981. position:absolute;
  982. right:0;
  983. top:0;
  984. z-index:0
  985. }
  986. .splash{
  987. background:#ccc;
  988. border-radius:100%;
  989. display:block;
  990. opacity:.6;
  991. position:absolute;
  992. -webkit-transform:scale(0);
  993. transform:scale(0)
  994. }
  995. .splash.animate{
  996. -webkit-animation:ripple-effect .4s linear;
  997. animation:ripple-effect .4s linear
  998. }
  999. @-webkit-keyframes ripple-effect{
  1000. to{
  1001. opacity:0;
  1002. -webkit-transform:scale(2.5);
  1003. transform:scale(2.5)
  1004. }
  1005. }
  1006. @keyframes ripple-effect{
  1007. to{
  1008. opacity:0;
  1009. -webkit-transform:scale(2.5);
  1010. transform:scale(2.5)
  1011. }
  1012. }
  1013. .search{
  1014. display:-webkit-box;
  1015. display:flex;
  1016. line-height:24px;
  1017. width:24px
  1018. }
  1019. .search.focused,.search.focused .section{
  1020. width:100%
  1021. }
  1022. .search form{
  1023. z-index:101
  1024. }
  1025. .search h3{
  1026. display:none
  1027. }
  1028. .search form{
  1029. display:-webkit-box;
  1030. display:flex;
  1031. -webkit-box-flex:1;
  1032. flex:1 0 0;
  1033. border-bottom:1px solid transparent;
  1034. padding-bottom:8px
  1035. }
  1036. .search form>*{
  1037. display:none
  1038. }
  1039. .search.focused form>*{
  1040. display:block
  1041. }
  1042. .search .search-input label{
  1043. display:none
  1044. }
  1045. .collapsed-header .centered-top-container .search.focused form{
  1046. border-bottom-color:transparent
  1047. }
  1048. .search-expand{
  1049. -webkit-box-flex:0;
  1050. flex:0 0 auto
  1051. }
  1052. .search-expand-text{
  1053. display:none
  1054. }
  1055. .search-close{
  1056. display:inline;
  1057. vertical-align:middle
  1058. }
  1059. .search-input{
  1060. -webkit-box-flex:1;
  1061. flex:1 0 1px
  1062. }
  1063. .search-input input{
  1064. background:none;
  1065. border:0;
  1066. box-sizing:border-box;
  1067. color:$(blog.title.color);
  1068. display:inline-block;
  1069. outline:none;
  1070. width:calc(100% - 48px)
  1071. }
  1072. .search-input input.no-cursor{
  1073. color:transparent;
  1074. text-shadow:0 0 0 $(blog.title.color)
  1075. }
  1076. .collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{
  1077. color:$(posts.title.color)
  1078. }
  1079. .collapsed-header .centered-top-container .search-input input.no-cursor{
  1080. color:transparent;
  1081. text-shadow:0 0 0 $(posts.title.color)
  1082. }
  1083. .collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{
  1084. outline:none
  1085. }
  1086. .search-focused>*{
  1087. visibility:hidden
  1088. }
  1089. .search-focused .search,.search-focused .search-icon{
  1090. visibility:visible
  1091. }
  1092. .widget.Sharing .sharing-button{
  1093. display:none
  1094. }
  1095. .widget.Sharing .sharing-buttons li{
  1096. padding:0
  1097. }
  1098. .widget.Sharing .sharing-buttons li span{
  1099. display:none
  1100. }
  1101. .post-share-buttons{
  1102. position:relative
  1103. }
  1104. .sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .touch-icon{
  1105. background-color:transparent
  1106. }
  1107. .share-buttons{
  1108. background-color:$(sharing.background.color);
  1109. border-radius:2px;
  1110. box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  1111. color:$(sharing.text.color);
  1112. list-style:none;
  1113. margin:0;
  1114. padding:8px 0;
  1115. position:absolute;
  1116. top:-11px;
  1117. min-width:200px;
  1118. z-index:101
  1119. }
  1120. .share-buttons.hidden{
  1121. display:none
  1122. }
  1123. .sharing-button{
  1124. background:transparent;
  1125. border:0;
  1126. margin:0;
  1127. outline:none;
  1128. padding:0;
  1129. cursor:pointer
  1130. }
  1131. .share-buttons li{
  1132. margin:0;
  1133. height:48px
  1134. }
  1135. .share-buttons li:last-child{
  1136. margin-bottom:0
  1137. }
  1138. .share-buttons li .sharing-platform-button{
  1139. box-sizing:border-box;
  1140. cursor:pointer;
  1141. display:block;
  1142. height:100%;
  1143. margin-bottom:0;
  1144. padding:0 16px;
  1145. position:relative;
  1146. width:100%
  1147. }
  1148. .share-buttons li .sharing-platform-button:focus,.share-buttons li .sharing-platform-button:hover{
  1149. background-color:hsla(0,0%,50.2%,.1);
  1150. outline:none
  1151. }
  1152. .share-buttons li svg[class*=sharing-],.share-buttons li svg[class^=sharing-]{
  1153. position:absolute;
  1154. top:10px
  1155. }
  1156. .share-buttons li span.sharing-platform-button{
  1157. position:relative;
  1158. top:0
  1159. }
  1160. .share-buttons li .platform-sharing-text{
  1161. display:block;
  1162. font-size:16px;
  1163. line-height:48px;
  1164. white-space:nowrap;
  1165. margin-$startSide:56px
  1166. }
  1167. .sidebar-container{
  1168. background-color:$(sidebar.backgroundColorBottom);
  1169. max-width:$(sidebar.width);
  1170. overflow-y:auto;
  1171. -webkit-transition-property:-webkit-transform;
  1172. transition-property:-webkit-transform;
  1173. transition-property:transform;
  1174. transition-property:transform,-webkit-transform;
  1175. -webkit-transition-duration:.3s;
  1176. transition-duration:.3s;
  1177. -webkit-transition-timing-function:cubic-bezier(0,0,.2,1);
  1178. transition-timing-function:cubic-bezier(0,0,.2,1);
  1179. width:$(sidebar.width);
  1180. z-index:101;
  1181. -webkit-overflow-scrolling:touch
  1182. }
  1183. .sidebar-container .navigation{
  1184. line-height:0;
  1185. padding:16px
  1186. }
  1187. .sidebar-container .sidebar-back{
  1188. cursor:pointer
  1189. }
  1190. .sidebar-container .widget{
  1191. background:none;
  1192. margin:0 16px;
  1193. padding:16px 0
  1194. }
  1195. .sidebar-container .widget .title{
  1196. color:$(widget.title.color);
  1197. margin:0
  1198. }
  1199. .sidebar-container .widget ul{
  1200. list-style:none;
  1201. margin:0;
  1202. padding:0
  1203. }
  1204. .sidebar-container .widget ul ul{
  1205. margin-$startSide:1em
  1206. }
  1207. .sidebar-container .widget li{
  1208. font-size:16px;
  1209. line-height:normal
  1210. }
  1211. .sidebar-container .widget+.widget{
  1212. border-top:1px dashed $(sidebar.separator.color)
  1213. }
  1214. .BlogArchive li{
  1215. margin:16px 0
  1216. }
  1217. .BlogArchive li:last-child{
  1218. margin-bottom:0
  1219. }
  1220. .Label li a{
  1221. display:inline-block
  1222. }
  1223. .BlogArchive .post-count,.Label .label-count{
  1224. float:$endSide;
  1225. margin-$startSide:.25em
  1226. }
  1227. .BlogArchive .post-count:before,.Label .label-count:before{
  1228. content:"("
  1229. }
  1230. .BlogArchive .post-count:after,.Label .label-count:after{
  1231. content:")"
  1232. }
  1233. .widget.Translate .skiptranslate>div{
  1234. display:block!important
  1235. }
  1236. .widget.Profile .profile-link{
  1237. display:-webkit-box;
  1238. display:flex
  1239. }
  1240. .widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{
  1241. -webkit-box-flex:0;
  1242. flex:0 0 auto;
  1243. margin-$endSide:1em
  1244. }
  1245. .widget.Profile .individual .profile-link{
  1246. -webkit-box-orient:vertical;
  1247. -webkit-box-direction:normal;
  1248. flex-direction:column
  1249. }
  1250. .widget.Profile .team .profile-link .profile-name{
  1251. align-self:center;
  1252. display:block;
  1253. -webkit-box-flex:1;
  1254. flex:1 1 auto
  1255. }
  1256. .dim-overlay{
  1257. background-color:rgba(0,0,0,.54);
  1258. z-index:100
  1259. }
  1260. body.sidebar-visible{
  1261. overflow-y:hidden
  1262. }
  1263. @media screen and (max-width:$(sidebar.width + content.width + content.margin * 2 - 1px)){
  1264. .sidebar-container{
  1265. bottom:0;
  1266. position:fixed;
  1267. top:0;
  1268. left:0;
  1269. right:auto
  1270. }
  1271. .sidebar-container.sidebar-invisible{
  1272. -webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);
  1273. transition-timing-function:cubic-bezier(.4,0,.6,1);
  1274. -webkit-transform:translateX($(sidebar.width * -1));
  1275. transform:translateX($(sidebar.width * -1))
  1276. }
  1277. }
  1278. @media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
  1279. .sidebar-container{
  1280. position:absolute;
  1281. top:0;
  1282. left:0;
  1283. right:auto
  1284. }
  1285. .sidebar-container .navigation{
  1286. display:none
  1287. }
  1288. }
  1289. .dialog{
  1290. box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  1291. background:$(posts.background.color);
  1292. box-sizing:border-box;
  1293. color:$(body.text.color);
  1294. padding:30px;
  1295. position:fixed;
  1296. text-align:center;
  1297. width:calc(100% - 24px);
  1298. z-index:101
  1299. }
  1300. .dialog input[type=email],.dialog input[type=text]{
  1301. background-color:transparent;
  1302. border:0;
  1303. border-bottom:1px solid rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),.12);
  1304. color:$(body.text.color);
  1305. display:block;
  1306. font-family:$(body.text.font.family);
  1307. font-size:16px;
  1308. line-height:24px;
  1309. margin:auto;
  1310. padding-bottom:7px;
  1311. outline:none;
  1312. text-align:center;
  1313. width:100%
  1314. }
  1315. .dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{
  1316. color:$(body.text.color)
  1317. }
  1318. .dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{
  1319. color:$(body.text.color)
  1320. }
  1321. .dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{
  1322. color:$(body.text.color)
  1323. }
  1324. .dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{
  1325. color:$(body.text.color)
  1326. }
  1327. .dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{
  1328. color:$(body.text.color)
  1329. }
  1330. .dialog input[type=email]:focus,.dialog input[type=text]:focus{
  1331. border-bottom:2px solid $(body.link.color);
  1332. padding-bottom:6px
  1333. }
  1334. .dialog input.no-cursor{
  1335. color:transparent;
  1336. text-shadow:0 0 0 $(body.text.color)
  1337. }
  1338. .dialog input.no-cursor:focus{
  1339. outline:none
  1340. }
  1341. .dialog input[type=submit]{
  1342. font-family:$(body.text.font.family)
  1343. }
  1344. .dialog .goog-buttonset-default{
  1345. color:$(body.link.color)
  1346. }
  1347. .subscribe-popup{
  1348. max-width:364px
  1349. }
  1350. .subscribe-popup h3{
  1351. color:$(posts.title.color);
  1352. font-size:1.8em;
  1353. margin-top:0
  1354. }
  1355. .subscribe-popup .FollowByEmail h3{
  1356. display:none
  1357. }
  1358. .subscribe-popup .FollowByEmail .follow-by-email-submit{
  1359. color:$(body.link.color);
  1360. display:inline-block;
  1361. margin:24px auto 0;
  1362. width:auto;
  1363. white-space:normal
  1364. }
  1365. .subscribe-popup .FollowByEmail .follow-by-email-submit:disabled{
  1366. cursor:default;
  1367. opacity:.3
  1368. }
  1369. @media (max-width:800px){
  1370. .blog-name div.widget.Subscribe{
  1371. margin-bottom:16px
  1372. }
  1373. body.item-view .blog-name div.widget.Subscribe{
  1374. margin:8px auto 16px;
  1375. width:100%
  1376. }
  1377. }
  1378. .tabs{
  1379. list-style:none
  1380. }
  1381. .tabs li,.tabs li a{
  1382. display:inline-block
  1383. }
  1384. .tabs li a{
  1385. cursor:pointer;
  1386. font-weight:700;
  1387. text-transform:uppercase;
  1388. padding:12px 8px
  1389. }
  1390. .tabs .selected{
  1391. border-bottom:4px solid $(tabs.selected.color)
  1392. }
  1393. .tabs .selected a{
  1394. color:$(tabs.selected.color)
  1395. }
  1396. body#layout .bg-photo,body#layout .bg-photo-overlay{
  1397. display:none
  1398. }
  1399. body#layout .page_body{
  1400. padding:0;
  1401. position:relative;
  1402. top:0
  1403. }
  1404. body#layout .page{
  1405. display:inline-block;
  1406. left:inherit;
  1407. position:relative;
  1408. vertical-align:top;
  1409. width:540px
  1410. }
  1411. body#layout .centered{
  1412. max-width:954px
  1413. }
  1414. body#layout .navigation{
  1415. display:none
  1416. }
  1417. body#layout .sidebar-container{
  1418. display:inline-block;
  1419. width:40%
  1420. }
  1421. body#layout .hamburger-menu,body#layout .search{
  1422. display:none
  1423. }
  1424. .centered-top-container .svg-icon-24,body.collapsed-header .centered-top-placeholder .svg-icon-24{
  1425. fill:$(header.icons.color)
  1426. }
  1427. .sidebar-container .svg-icon-24{
  1428. fill:$(sidebar.icons.color)
  1429. }
  1430. .centered-bottom .svg-icon-24,body.collapsed-header .centered-top-container .svg-icon-24{
  1431. fill:$(posts.icons.color)
  1432. }
  1433. .centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
  1434. fill:$(sharing.icons.color)
  1435. }
  1436. body{
  1437. background-color:$(body.background.color);
  1438. color:$(body.text.color);
  1439. font:$(body.text.font);
  1440. margin:0;
  1441. min-height:100vh
  1442. }
  1443. img{
  1444. max-width:100%
  1445. }
  1446. h3{
  1447. color:$(body.text.color);
  1448. font-size:16px
  1449. }
  1450. a{
  1451. text-decoration:none;
  1452. color:$(body.link.color)
  1453. }
  1454. a:visited{
  1455. color:$(body.link.visited.color)
  1456. }
  1457. a:hover{
  1458. color:$(body.link.hover.color)
  1459. }
  1460. blockquote{
  1461. color:$(blockquote.color);
  1462. font:$(blockquote.font);
  1463. font-size:x-large;
  1464. text-align:center
  1465. }
  1466. .pill-button{
  1467. font-size:12px
  1468. }
  1469. .bg-photo-container{
  1470. height:$(body.background.height);
  1471. overflow:hidden;
  1472. position:absolute;
  1473. width:100%;
  1474. z-index:1
  1475. }
  1476. .bg-photo{
  1477. background:$(body.background);
  1478. background-attachment:scroll;
  1479. background-size:cover;
  1480. -webkit-filter:blur($(body.background.blur));
  1481. filter:blur($(body.background.blur));
  1482. height:calc(100% + 2 * $(body.background.blur));
  1483. left:$(0 - body.background.blur);
  1484. position:absolute;
  1485. top:$(0 - body.background.blur);
  1486. width:calc(100% + 2 * $(body.background.blur))
  1487. }
  1488. .bg-photo-overlay{
  1489. background:$(body.background.shadow);
  1490. background-size:cover;
  1491. height:$(body.background.height);
  1492. position:absolute;
  1493. width:100%;
  1494. z-index:2
  1495. }
  1496. .hamburger-menu{
  1497. float:left;
  1498. margin-top:0
  1499. }
  1500. .sticky .hamburger-menu{
  1501. float:none;
  1502. position:absolute
  1503. }
  1504. .no-sidebar-widget .hamburger-menu{
  1505. display:none
  1506. }
  1507. .footer .widget .title{
  1508. margin:0;
  1509. line-height:24px
  1510. }
  1511. .search{
  1512. border-bottom:1px solid $(blog.title.color.transparent);
  1513. float:right;
  1514. position:relative;
  1515. -webkit-transition-property:width;
  1516. transition-property:width;
  1517. -webkit-transition-duration:.5s;
  1518. transition-duration:.5s;
  1519. -webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
  1520. transition-timing-function:cubic-bezier(.4,0,.2,1);
  1521. z-index:101
  1522. }
  1523. .search .dim-overlay{
  1524. background-color:transparent
  1525. }
  1526. .search form{
  1527. height:36px;
  1528. -webkit-transition:border-color .2s cubic-bezier(.4,0,.2,1) .5s;
  1529. transition:border-color .2s cubic-bezier(.4,0,.2,1) .5s
  1530. }
  1531. .search.focused{
  1532. width:calc(100% - 48px)
  1533. }
  1534. .search.focused form{
  1535. display:-webkit-box;
  1536. display:flex;
  1537. -webkit-box-flex:1;
  1538. flex:1 0 1px;
  1539. border-color:$(blog.title.color);
  1540. margin-$startSide:-24px;
  1541. padding-$startSide:36px;
  1542. position:relative;
  1543. width:auto
  1544. }
  1545. .item-view .search,.sticky .search{
  1546. $endSide:0;
  1547. float:none;
  1548. margin-left:0;
  1549. position:absolute
  1550. }
  1551. .item-view .search.focused,.sticky .search.focused{
  1552. width:calc(100% - 50px)
  1553. }
  1554. .item-view .search.focused form,.sticky .search.focused form{
  1555. border-bottom-color:$(posts.text.color)
  1556. }
  1557. .centered-top-placeholder.cloned .search form{
  1558. z-index:30
  1559. }
  1560. .search_button{
  1561. -webkit-box-flex:0;
  1562. flex:0 0 24px;
  1563. -webkit-box-orient:vertical;
  1564. -webkit-box-direction:normal;
  1565. flex-direction:column
  1566. }
  1567. .search_button svg{
  1568. margin-top:0
  1569. }
  1570. .search-input{
  1571. height:48px
  1572. }
  1573. .search-input input{
  1574. display:block;
  1575. color:$(search.input.color);
  1576. font:$(search.input.font);
  1577. height:48px;
  1578. line-height:48px;
  1579. padding:0;
  1580. width:100%
  1581. }
  1582. .search-input input::-webkit-input-placeholder{
  1583. color:$(search.placeholder.color);
  1584. opacity:.3
  1585. }
  1586. .search-input input::-moz-placeholder{
  1587. color:$(search.placeholder.color);
  1588. opacity:.3
  1589. }
  1590. .search-input input:-ms-input-placeholder{
  1591. color:$(search.placeholder.color);
  1592. opacity:.3
  1593. }
  1594. .search-input input::-ms-input-placeholder{
  1595. color:$(search.placeholder.color);
  1596. opacity:.3
  1597. }
  1598. .search-input input::placeholder{
  1599. color:$(search.placeholder.color);
  1600. opacity:.3
  1601. }
  1602. .search-action{
  1603. background:transparent;
  1604. border:0;
  1605. color:$(blog.title.color);
  1606. cursor:pointer;
  1607. display:none;
  1608. height:48px;
  1609. margin-top:0
  1610. }
  1611. .sticky .search-action{
  1612. color:$(posts.text.color)
  1613. }
  1614. .search.focused .search-action{
  1615. display:block
  1616. }
  1617. .search.focused .search-action:disabled{
  1618. opacity:.3
  1619. }
  1620. .page_body{
  1621. position:relative;
  1622. z-index:20
  1623. }
  1624. .page_body .widget{
  1625. margin-bottom:16px
  1626. }
  1627. .page_body .centered{
  1628. box-sizing:border-box;
  1629. display:-webkit-box;
  1630. display:flex;
  1631. -webkit-box-orient:vertical;
  1632. -webkit-box-direction:normal;
  1633. flex-direction:column;
  1634. margin:0 auto;
  1635. max-width:$(content.width);
  1636. min-height:100vh;
  1637. padding:24px 0
  1638. }
  1639. .page_body .centered>*{
  1640. -webkit-box-flex:0;
  1641. flex:0 0 auto
  1642. }
  1643. .page_body .centered>.footer{
  1644. margin-top:auto;
  1645. text-align:center
  1646. }
  1647. .blog-name{
  1648. margin:32px 0 16px
  1649. }
  1650. .item-view .blog-name,.sticky .blog-name{
  1651. box-sizing:border-box;
  1652. margin-left:36px;
  1653. min-height:48px;
  1654. opacity:1;
  1655. padding-top:12px
  1656. }
  1657. .blog-name .subscribe-section-container{
  1658. margin-bottom:32px;
  1659. text-align:center;
  1660. -webkit-transition-property:opacity;
  1661. transition-property:opacity;
  1662. -webkit-transition-duration:.5s;
  1663. transition-duration:.5s
  1664. }
  1665. .item-view .blog-name .subscribe-section-container,.sticky .blog-name .subscribe-section-container{
  1666. margin:0 0 8px
  1667. }
  1668. .blog-name .subscribe-empty-placeholder{
  1669. margin-bottom:48px
  1670. }
  1671. .blog-name .PageList{
  1672. margin-top:16px;
  1673. padding-top:8px;
  1674. text-align:center
  1675. }
  1676. .blog-name .PageList .overflowable-contents{
  1677. width:100%
  1678. }
  1679. .blog-name .PageList h3.title{
  1680. color:$(blog.title.color);
  1681. margin:8px auto;
  1682. text-align:center;
  1683. width:100%
  1684. }
  1685. .centered-top-container .blog-name{
  1686. -webkit-transition-property:opacity;
  1687. transition-property:opacity;
  1688. -webkit-transition-duration:.5s;
  1689. transition-duration:.5s
  1690. }
  1691. .item-view .return_link{
  1692. margin-bottom:12px;
  1693. margin-top:12px;
  1694. position:absolute
  1695. }
  1696. .item-view .blog-name{
  1697. display:-webkit-box;
  1698. display:flex;
  1699. flex-wrap:wrap;
  1700. margin:0 48px 27px
  1701. }
  1702. .item-view .subscribe-section-container{
  1703. -webkit-box-flex:0;
  1704. flex:0 0 auto
  1705. }
  1706. .item-view #header,.item-view .Header{
  1707. margin-bottom:5px;
  1708. margin-right:15px
  1709. }
  1710. .item-view .sticky .Header{
  1711. margin-bottom:0
  1712. }
  1713. .item-view .Header p{
  1714. margin:10px 0 0;
  1715. text-align:left
  1716. }
  1717. .item-view .post-share-buttons-bottom{
  1718. margin-$endSide:16px
  1719. }
  1720. .sticky{
  1721. background:$(posts.background.color);
  1722. box-shadow:0 0 20px 0 rgba(0,0,0,.7);
  1723. box-sizing:border-box;
  1724. margin-left:0
  1725. }
  1726. .sticky #header{
  1727. margin-bottom:8px;
  1728. margin-$endSide:8px
  1729. }
  1730. .sticky .centered-top{
  1731. margin:4px auto;
  1732. max-width:$(content.width - 32px);
  1733. min-height:48px
  1734. }
  1735. .sticky .blog-name{
  1736. display:-webkit-box;
  1737. display:flex;
  1738. margin:0 48px
  1739. }
  1740. .sticky .blog-name #header{
  1741. -webkit-box-flex:0;
  1742. flex:0 1 auto;
  1743. -webkit-box-ordinal-group:2;
  1744. order:1;
  1745. overflow:hidden
  1746. }
  1747. .sticky .blog-name .subscribe-section-container{
  1748. -webkit-box-flex:0;
  1749. flex:0 0 auto;
  1750. -webkit-box-ordinal-group:3;
  1751. order:2
  1752. }
  1753. .sticky .Header h1{
  1754. overflow:hidden;
  1755. text-overflow:ellipsis;
  1756. white-space:nowrap;
  1757. margin-$endSide:-10px;
  1758. margin-bottom:-10px;
  1759. padding-$endSide:10px;
  1760. padding-bottom:10px
  1761. }
  1762. .sticky .Header p,.sticky .PageList{
  1763. display:none
  1764. }
  1765. .search-focused .hamburger-menu,.search-focused>*{
  1766. visibility:visible
  1767. }
  1768. .item-view .search-focused .blog-name,.sticky .search-focused .blog-name{
  1769. opacity:0
  1770. }
  1771. .centered-bottom,.centered-top-container,.centered-top-placeholder{
  1772. padding:0 16px
  1773. }
  1774. .centered-top{
  1775. position:relative
  1776. }
  1777. .item-view .centered-top.search-focused .subscribe-section-container,.sticky .centered-top.search-focused .subscribe-section-container{
  1778. opacity:0
  1779. }
  1780. .page_body.has-vertical-ads .centered .centered-bottom{
  1781. display:inline-block;
  1782. width:calc(100% - 176px)
  1783. }
  1784. .Header h1{
  1785. font:$(blog.title.font);
  1786. line-height:normal;
  1787. margin:0 0 13px;
  1788. text-align:center;
  1789. width:100%
  1790. }
  1791. .Header h1,.Header h1 a,.Header h1 a:hover,.Header h1 a:visited{
  1792. color:$(blog.title.color)
  1793. }
  1794. .item-view .Header h1,.sticky .Header h1{
  1795. font-size:24px;
  1796. line-height:24px;
  1797. margin:0;
  1798. text-align:left
  1799. }
  1800. .sticky .Header h1,.sticky .Header h1 a,.sticky .Header h1 a:hover,.sticky .Header h1 a:visited{
  1801. color:$(posts.text.color)
  1802. }
  1803. .Header p{
  1804. color:$(blog.title.color);
  1805. margin:0 0 13px;
  1806. opacity:.8;
  1807. text-align:center
  1808. }
  1809. .widget .title{
  1810. line-height:28px
  1811. }
  1812. .BlogArchive li{
  1813. font-size:16px
  1814. }
  1815. .BlogArchive .post-count{
  1816. color:$(posts.text.color)
  1817. }
  1818. #page_body .FeaturedPost,.Blog .blog-posts .post-outer-container{
  1819. background:$(posts.background.color);
  1820. min-height:40px;
  1821. padding:30px 40px;
  1822. width:auto;
  1823. box-shadow:0 1px 4px 0 $(posts.boxshadow.color)
  1824. }
  1825. .Blog .blog-posts .post-outer-container:last-child{
  1826. margin-bottom:0
  1827. }
  1828. .Blog .blog-posts .post-outer-container .post-outer{
  1829. border:0;
  1830. position:relative;
  1831. padding-bottom:.25em
  1832. }
  1833. .post-outer-container{
  1834. margin-bottom:16px
  1835. }
  1836. .post:first-child{
  1837. margin-top:0
  1838. }
  1839. .post .thumb{
  1840. float:left;
  1841. height:20%;
  1842. width:20%
  1843. }
  1844. .post-share-buttons-bottom,.post-share-buttons-top{
  1845. float:$(endSide)
  1846. }
  1847. .post-share-buttons-bottom{
  1848. margin-$endSide:24px
  1849. }
  1850. .post-footer,.post-header{
  1851. clear:$(startSide);
  1852. color:$(posts.byline.color);
  1853. margin:0;
  1854. width:inherit
  1855. }
  1856. .blog-pager{
  1857. text-align:center
  1858. }
  1859. .blog-pager a{
  1860. color:$(posts.navigation.link.color)
  1861. }
  1862. .blog-pager a:visited{
  1863. color:$(posts.navigation.link.visited.color)
  1864. }
  1865. .blog-pager a:hover{
  1866. color:$(posts.navigation.link.hover.color)
  1867. }
  1868. .post-title{
  1869. font:$(posts.title.font);
  1870. float:$(startSide);
  1871. margin:0 0 8px;
  1872. max-width:calc(100% - 48px)
  1873. }
  1874. .post-title a{
  1875. font:$(posts.stream.title.font)
  1876. }
  1877. .post-title,.post-title a,.post-title a:hover,.post-title a:visited{
  1878. color:$(posts.title.color)
  1879. }
  1880. .post-body{
  1881. color:$(posts.text.color);
  1882. font:$(posts.text.font);
  1883. line-height:1.6em;
  1884. margin:1.5em 0 2em;
  1885. display:block
  1886. }
  1887. .post-body img{
  1888. height:inherit
  1889. }
  1890. .post-body .snippet-thumbnail{
  1891. float:$(startSide);
  1892. margin:0;
  1893. margin-$endSide:2em;
  1894. max-height:128px;
  1895. max-width:128px
  1896. }
  1897. .post-body .snippet-thumbnail img{
  1898. max-width:100%
  1899. }
  1900. .main .FeaturedPost .widget-content{
  1901. border:0;
  1902. position:relative;
  1903. padding-bottom:.25em
  1904. }
  1905. .FeaturedPost img{
  1906. margin-top:2em
  1907. }
  1908. .FeaturedPost .snippet-container{
  1909. margin:2em 0
  1910. }
  1911. .FeaturedPost .snippet-container p{
  1912. margin:0
  1913. }
  1914. .FeaturedPost .snippet-thumbnail{
  1915. float:none;
  1916. height:auto;
  1917. margin-bottom:2em;
  1918. margin-$endSide:0;
  1919. overflow:hidden;
  1920. max-height:calc(600px + 2em);
  1921. max-width:100%;
  1922. text-align:center;
  1923. width:100%
  1924. }
  1925. .FeaturedPost .snippet-thumbnail img{
  1926. max-width:100%;
  1927. width:100%
  1928. }
  1929. .byline{
  1930. color:$(posts.byline.color);
  1931. display:inline-block;
  1932. line-height:24px;
  1933. margin-top:8px;
  1934. vertical-align:top
  1935. }
  1936. .byline.post-author:first-child{
  1937. margin-$endSide:0
  1938. }
  1939. .byline.reactions .reactions-label{
  1940. line-height:22px;
  1941. vertical-align:top
  1942. }
  1943. .byline.post-share-buttons{
  1944. position:relative;
  1945. display:inline-block;
  1946. margin-top:0;
  1947. width:100%
  1948. }
  1949. .byline.post-share-buttons .sharing{
  1950. float:$(endSide)
  1951. }
  1952. .flat-button.ripple:hover{
  1953. background-color:rgba($(body.link.color.red),$(body.link.color.green),$(body.link.color.blue),.12)
  1954. }
  1955. .flat-button.ripple .splash{
  1956. background-color:rgba($(body.link.color.red),$(body.link.color.green),$(body.link.color.blue),.4)
  1957. }
  1958. a.timestamp-link,a:active.timestamp-link,a:visited.timestamp-link{
  1959. color:inherit;
  1960. font:inherit;
  1961. text-decoration:inherit
  1962. }
  1963. .post-share-buttons{
  1964. margin-left:0
  1965. }
  1966. .post-share-buttons.invisible{
  1967. display:none
  1968. }
  1969. .clear-sharing{
  1970. min-height:24px
  1971. }
  1972. .comment-link{
  1973. color:$(body.link.color);
  1974. position:relative
  1975. }
  1976. .comment-link .num_comments{
  1977. margin-left:8px;
  1978. vertical-align:top
  1979. }
  1980. #comment-holder .continue{
  1981. display:none
  1982. }
  1983. #comment-editor{
  1984. margin-bottom:20px;
  1985. margin-top:20px
  1986. }
  1987. #comments .comment-form h4,#comments h3.title{
  1988. position:absolute;
  1989. clip:rect(1px,1px,1px,1px);
  1990. padding:0;
  1991. border:0;
  1992. height:1px;
  1993. width:1px;
  1994. overflow:hidden
  1995. }
  1996. .post-filter-message{
  1997. background-color:rgba(0,0,0,.7);
  1998. color:#fff;
  1999. display:table;
  2000. margin-bottom:16px;
  2001. width:100%
  2002. }
  2003. .post-filter-message div{
  2004. display:table-cell;
  2005. padding:15px 28px
  2006. }
  2007. .post-filter-message div:last-child{
  2008. padding-$startSide:0;
  2009. text-align:$(endSide)
  2010. }
  2011. .post-filter-message a{
  2012. white-space:nowrap
  2013. }
  2014. .post-filter-message .search-label,.post-filter-message .search-query{
  2015. font-weight:700;
  2016. color:$(body.link.color)
  2017. }
  2018. #blog-pager{
  2019. margin:2em 0
  2020. }
  2021. #blog-pager a{
  2022. color:$(attribution.link.color);
  2023. font-size:14px
  2024. }
  2025. .subscribe-button{
  2026. border-color:$(blog.title.color);
  2027. color:$(blog.title.color)
  2028. }
  2029. .sticky .subscribe-button{
  2030. border-color:$(posts.text.color);
  2031. color:$(posts.text.color)
  2032. }
  2033. .tabs{
  2034. margin:0 auto;
  2035. padding:0
  2036. }
  2037. .tabs li{
  2038. margin:0 8px;
  2039. vertical-align:top
  2040. }
  2041. .tabs .overflow-button a,.tabs li a{
  2042. color:$(tabs.color);
  2043. font:$(tabs.font);
  2044. line-height:$(body.text.font.size * 1.2)
  2045. }
  2046. .tabs .overflow-button a{
  2047. padding:12px 8px
  2048. }
  2049. .overflow-popup .tabs li{
  2050. text-align:left
  2051. }
  2052. .overflow-popup li a{
  2053. color:$(tabs.overflow.color);
  2054. display:block;
  2055. padding:8px 20px
  2056. }
  2057. .overflow-popup li.selected a{
  2058. color:$(tabs.overflow.selected.color)
  2059. }
  2060. .ReportAbuse.widget{
  2061. margin-bottom:0
  2062. }
  2063. .ReportAbuse a.report_abuse{
  2064. display:inline-block;
  2065. margin-bottom:8px;
  2066. font:$(body.text.font);
  2067. font-weight:400;
  2068. line-height:24px
  2069. }
  2070. .ReportAbuse a.report_abuse,.ReportAbuse a.report_abuse:hover{
  2071. color:#888
  2072. }
  2073. .byline.post-labels a,.Label li,.Label span.label-size{
  2074. background-color:$(labels.background.color);
  2075. border:1px solid $(labels.background.color);
  2076. border-radius:15px;
  2077. display:inline-block;
  2078. margin:4px 4px 4px 0;
  2079. padding:3px 8px
  2080. }
  2081. .byline.post-labels a,.Label a{
  2082. color:$(labels.text.color)
  2083. }
  2084. .Label ul{
  2085. list-style:none;
  2086. padding:0
  2087. }
  2088. .PopularPosts{
  2089. background-color:$(popularposts.background.color);
  2090. padding:30px 40px
  2091. }
  2092. .PopularPosts .item-content{
  2093. color:$(popularposts.text.color);
  2094. margin-top:24px
  2095. }
  2096. .PopularPosts a,.PopularPosts a:hover,.PopularPosts a:visited{
  2097. color:$(popularposts.link.color)
  2098. }
  2099. .PopularPosts .post-title,.PopularPosts .post-title a,.PopularPosts .post-title a:hover,.PopularPosts .post-title a:visited{
  2100. color:$(popularposts.title.color);
  2101. font-size:18px;
  2102. font-weight:700;
  2103. line-height:24px
  2104. }
  2105. .PopularPosts,.PopularPosts h3.title a{
  2106. color:$(posts.text.color);
  2107. font:$(posts.text.font)
  2108. }
  2109. .main .PopularPosts{
  2110. padding:16px 40px
  2111. }
  2112. .PopularPosts h3.title{
  2113. font-size:14px;
  2114. margin:0
  2115. }
  2116. .PopularPosts h3.post-title{
  2117. margin-bottom:0
  2118. }
  2119. .PopularPosts .byline{
  2120. color:$(popularposts.byline.color)
  2121. }
  2122. .PopularPosts .jump-link{
  2123. float:$(endSide);
  2124. margin-top:16px
  2125. }
  2126. .PopularPosts .post-header .byline{
  2127. font-size:.9em;
  2128. font-style:italic;
  2129. margin-top:6px
  2130. }
  2131. .PopularPosts ul{
  2132. list-style:none;
  2133. padding:0;
  2134. margin:0
  2135. }
  2136. .PopularPosts .post{
  2137. padding:20px 0
  2138. }
  2139. .PopularPosts .post+.post{
  2140. border-top:1px dashed $(sidebar.separator.color)
  2141. }
  2142. .PopularPosts .item-thumbnail{
  2143. float:$(startSide);
  2144. margin-$endSide:32px
  2145. }
  2146. .PopularPosts .item-thumbnail img{
  2147. height:88px;
  2148. padding:0;
  2149. width:88px
  2150. }
  2151. .inline-ad{
  2152. margin-bottom:16px
  2153. }
  2154. .desktop-ad .inline-ad{
  2155. display:block
  2156. }
  2157. .adsbygoogle{
  2158. overflow:hidden
  2159. }
  2160. .vertical-ad-container{
  2161. float:$(endSide);
  2162. margin-$endSide:16px;
  2163. width:128px
  2164. }
  2165. .vertical-ad-container .AdSense+.AdSense{
  2166. margin-top:16px
  2167. }
  2168. .inline-ad-placeholder,.vertical-ad-placeholder{
  2169. background:$(posts.background.color);
  2170. border:1px solid #000;
  2171. opacity:.9;
  2172. vertical-align:middle;
  2173. text-align:center
  2174. }
  2175. .inline-ad-placeholder span,.vertical-ad-placeholder span{
  2176. margin-top:290px;
  2177. display:block;
  2178. text-transform:uppercase;
  2179. font-weight:700;
  2180. color:$(posts.title.color)
  2181. }
  2182. .vertical-ad-placeholder{
  2183. height:600px
  2184. }
  2185. .vertical-ad-placeholder span{
  2186. margin-top:290px;
  2187. padding:0 40px
  2188. }
  2189. .inline-ad-placeholder{
  2190. height:90px
  2191. }
  2192. .inline-ad-placeholder span{
  2193. margin-top:36px
  2194. }
  2195. .Attribution{
  2196. display:inline-block;
  2197. color:$(attribution.text.color)
  2198. }
  2199. .Attribution a,.Attribution a:hover,.Attribution a:visited{
  2200. color:$(attribution.link.color)
  2201. }
  2202. .Attribution svg{
  2203. display:none
  2204. }
  2205. .sidebar-container{
  2206. box-shadow:1px 1px 3px rgba(0,0,0,.1)
  2207. }
  2208. .sidebar-container,.sidebar-container .sidebar_bottom{
  2209. background-color:$(sidebar.backgroundColorBottom)
  2210. }
  2211. .sidebar-container .navigation,.sidebar-container .sidebar_top_wrapper{
  2212. background-color:$(sidebar.backgroundColorTop)
  2213. }
  2214. .sidebar-container .sidebar_top{
  2215. overflow:auto
  2216. }
  2217. .sidebar-container .sidebar_bottom{
  2218. width:100%;
  2219. padding-top:16px
  2220. }
  2221. .sidebar-container .widget:first-child{
  2222. padding-top:0
  2223. }
  2224. .no-sidebar-widget .sidebar-container,.preview .sidebar-container{
  2225. display:none
  2226. }
  2227. .sidebar_top .widget.Profile{
  2228. padding-bottom:16px
  2229. }
  2230. .widget.Profile{
  2231. margin:0;
  2232. width:100%
  2233. }
  2234. .widget.Profile h2{
  2235. display:none
  2236. }
  2237. .widget.Profile h3.title{
  2238. color:$(profile.title.color);
  2239. margin:16px 32px
  2240. }
  2241. .widget.Profile .individual{
  2242. text-align:center
  2243. }
  2244. .widget.Profile .individual .profile-link{
  2245. padding:1em
  2246. }
  2247. .widget.Profile .individual .default-avatar-wrapper .avatar-icon{
  2248. margin:auto
  2249. }
  2250. .widget.Profile .team{
  2251. margin-bottom:32px;
  2252. margin-left:32px;
  2253. margin-right:32px
  2254. }
  2255. .widget.Profile ul{
  2256. list-style:none;
  2257. padding:0
  2258. }
  2259. .widget.Profile li{
  2260. margin:10px 0
  2261. }
  2262. .widget.Profile .profile-img{
  2263. border-radius:50%;
  2264. float:none
  2265. }
  2266. .widget.Profile .profile-link{
  2267. color:$(profile.link.color);
  2268. font-size:.9em;
  2269. margin-bottom:1em;
  2270. opacity:.87;
  2271. overflow:hidden
  2272. }
  2273. .widget.Profile .profile-link.visit-profile{
  2274. border-style:solid;
  2275. border-width:1px;
  2276. border-radius:12px;
  2277. cursor:pointer;
  2278. font-size:12px;
  2279. font-weight:400;
  2280. padding:5px 20px;
  2281. display:inline-block;
  2282. line-height:normal
  2283. }
  2284. .widget.Profile dd{
  2285. color:$(profile.text.color);
  2286. margin:0 16px
  2287. }
  2288. .widget.Profile location{
  2289. margin-bottom:1em
  2290. }
  2291. .widget.Profile .profile-textblock{
  2292. font-size:14px;
  2293. line-height:24px;
  2294. position:relative
  2295. }
  2296. body.sidebar-visible .bg-photo-container,body.sidebar-visible .page_body{
  2297. overflow-y:scroll
  2298. }
  2299. @media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
  2300. .sidebar-container{
  2301. min-height:100%;
  2302. overflow:visible;
  2303. z-index:32
  2304. }
  2305. .sidebar-container.show-sidebar-top{
  2306. margin-top:$(body.background.height);
  2307. min-height:calc(100% - $(body.background.height))
  2308. }
  2309. .sidebar-container .sidebar_top_wrapper{
  2310. background-color:$(sidebar.backgroundColorTopHD);
  2311. height:$(body.background.height);
  2312. margin-top:$(body.background.height * -1)
  2313. }
  2314. .sidebar-container .sidebar_top{
  2315. height:$(body.background.height);
  2316. max-height:$(body.background.height)
  2317. }
  2318. .sidebar-container .sidebar_bottom{
  2319. max-width:$(sidebar.width);
  2320. width:$(sidebar.width)
  2321. }
  2322. body.collapsed-header .sidebar-container{
  2323. z-index:15
  2324. }
  2325. .sidebar-container .sidebar_top:empty{
  2326. display:none
  2327. }
  2328. .sidebar-container .sidebar_top>:only-child{
  2329. -webkit-box-flex:0;
  2330. flex:0 0 auto;
  2331. align-self:center;
  2332. width:100%
  2333. }
  2334. .sidebar_top_wrapper.no-items{
  2335. display:none
  2336. }
  2337. }
  2338. .post-snippet.snippet-container{
  2339. max-height:120px
  2340. }
  2341. .post-snippet .snippet-item{
  2342. line-height:24px
  2343. }
  2344. .post-snippet .snippet-fade{
  2345. background:-webkit-linear-gradient($startSide,$(posts.background.color) 0,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);
  2346. background:linear-gradient(to $startSide,$(posts.background.color) 0,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);
  2347. color:$(body.text.color);
  2348. height:24px
  2349. }
  2350. .popular-posts-snippet.snippet-container{
  2351. max-height:72px
  2352. }
  2353. .popular-posts-snippet .snippet-item{
  2354. line-height:24px
  2355. }
  2356. .PopularPosts .popular-posts-snippet .snippet-fade{
  2357. color:$(body.text.color);
  2358. height:24px
  2359. }
  2360. .main .popular-posts-snippet .snippet-fade{
  2361. background:-webkit-linear-gradient($startSide,$(popularposts.background.color) 0,$(popularposts.background.color) 20%,$(popularposts.background.color.transparent) 100%);
  2362. background:linear-gradient(to $startSide,$(popularposts.background.color) 0,$(popularposts.background.color) 20%,$(popularposts.background.color.transparent) 100%)
  2363. }
  2364. .sidebar_bottom .popular-posts-snippet .snippet-fade{
  2365. background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorBottom) 0,$(sidebar.backgroundColorBottom) 20%,$(sidebar.backgroundColorBottom.transparent) 100%);
  2366. background:linear-gradient(to $startSide,$(sidebar.backgroundColorBottom) 0,$(sidebar.backgroundColorBottom) 20%,$(sidebar.backgroundColorBottom.transparent) 100%)
  2367. }
  2368. .profile-snippet.snippet-container{
  2369. max-height:192px
  2370. }
  2371. .has-location .profile-snippet.snippet-container{
  2372. max-height:144px
  2373. }
  2374. .profile-snippet .snippet-item{
  2375. line-height:24px
  2376. }
  2377. .profile-snippet .snippet-fade{
  2378. background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorTop) 0,$(sidebar.backgroundColorTop) 20%,$(sidebar.backgroundColorTop.transparent) 100%);
  2379. background:linear-gradient(to $startSide,$(sidebar.backgroundColorTop) 0,$(sidebar.backgroundColorTop) 20%,$(sidebar.backgroundColorTop.transparent) 100%);
  2380. color:$(profile.text.color);
  2381. height:24px
  2382. }
  2383. @media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
  2384. .profile-snippet .snippet-fade{
  2385. background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorTopHD) 0,$(sidebar.backgroundColorTopHD) 20%,$(sidebar.backgroundColorTopHD.transparent) 100%);
  2386. background:linear-gradient(to $startSide,$(sidebar.backgroundColorTopHD) 0,$(sidebar.backgroundColorTopHD) 20%,$(sidebar.backgroundColorTopHD.transparent) 100%)
  2387. }
  2388. }
  2389. @media screen and (max-width:800px){
  2390. .blog-name{
  2391. margin-top:0
  2392. }
  2393. body.item-view .blog-name{
  2394. margin:0 48px
  2395. }
  2396. .blog-name .subscribe-empty-placeholder{
  2397. margin-bottom:0
  2398. }
  2399. .centered-bottom{
  2400. padding:8px
  2401. }
  2402. body.item-view .centered-bottom{
  2403. padding:0
  2404. }
  2405. body.item-view #header,body.item-view .widget.Header{
  2406. margin-right:0
  2407. }
  2408. body.collapsed-header .centered-top-container .blog-name{
  2409. display:block
  2410. }
  2411. body.collapsed-header .centered-top-container .widget.Header h1{
  2412. text-align:center
  2413. }
  2414. .widget.Header header{
  2415. padding:0
  2416. }
  2417. .widget.Header h1{
  2418. font-size:$(blog.title.font.size * 24/45);
  2419. line-height:$(blog.title.font.size * 24/45);
  2420. margin-bottom:13px
  2421. }
  2422. body.item-view .widget.Header h1,body.item-view .widget.Header p{
  2423. text-align:center
  2424. }
  2425. .blog-name .widget.PageList{
  2426. padding:0
  2427. }
  2428. body.item-view .centered-top{
  2429. margin-bottom:5px
  2430. }
  2431. .search-action,.search-input{
  2432. margin-bottom:-8px
  2433. }
  2434. .search form{
  2435. margin-bottom:8px
  2436. }
  2437. body.item-view .subscribe-section-container{
  2438. margin:5px 0 0;
  2439. width:100%
  2440. }
  2441. #page_body.section div.widget.FeaturedPost,.widget.Blog .blog-posts .post-outer-container,.widget.PopularPosts{
  2442. padding:16px
  2443. }
  2444. .widget.Blog .blog-posts .post-outer-container .post-outer{
  2445. padding:0
  2446. }
  2447. .post:first-child{
  2448. margin:0
  2449. }
  2450. .post-body .snippet-thumbnail{
  2451. margin:0 3vw 3vw 0
  2452. }
  2453. .post-body .snippet-thumbnail img{
  2454. height:20vw;
  2455. width:20vw;
  2456. max-height:128px;
  2457. max-width:128px
  2458. }
  2459. .widget.PopularPosts div.item-thumbnail{
  2460. margin:0 3vw 3vw 0
  2461. }
  2462. .widget.PopularPosts div.item-thumbnail img{
  2463. height:20vw;
  2464. width:20vw;
  2465. max-height:88px;
  2466. max-width:88px
  2467. }
  2468. .post-title{
  2469. line-height:1
  2470. }
  2471. .post-title,.post-title a{
  2472. font-size:20px
  2473. }
  2474. #page_body.section div.widget.FeaturedPost h3 a{
  2475. font-size:22px
  2476. }
  2477. .mobile-ad .inline-ad{
  2478. display:block
  2479. }
  2480. .page_body.has-vertical-ads .vertical-ad-container,.page_body.has-vertical-ads .vertical-ad-container ins{
  2481. display:none
  2482. }
  2483. .page_body.has-vertical-ads .centered .centered-bottom,.page_body.has-vertical-ads .centered .centered-top{
  2484. display:block;
  2485. width:auto
  2486. }
  2487. .post-filter-message div{
  2488. padding:8px 16px
  2489. }
  2490. }
  2491. @media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
  2492. body{
  2493. position:relative
  2494. }
  2495. body.item-view .blog-name{
  2496. margin-left:48px
  2497. }
  2498. .no-sidebar-widget .page_body,.preview .page_body{
  2499. margin-left:0
  2500. }
  2501. .page_body{
  2502. margin-left:$(sidebar.width)
  2503. }
  2504. .search{
  2505. margin-left:0
  2506. }
  2507. .search.focused{
  2508. width:100%
  2509. }
  2510. .sticky{
  2511. padding-left:$(sidebar.width)
  2512. }
  2513. .hamburger-menu{
  2514. display:none
  2515. }
  2516. body.collapsed-header .page_body .centered-top-container{
  2517. padding-left:$(sidebar.width);
  2518. padding-right:0;
  2519. width:100%
  2520. }
  2521. body.collapsed-header .centered-top-container .search.focused{
  2522. width:100%
  2523. }
  2524. body.collapsed-header .centered-top-container .blog-name{
  2525. margin-left:0
  2526. }
  2527. body.collapsed-header.item-view .centered-top-container .search.focused{
  2528. width:calc(100% - 50px)
  2529. }
  2530. body.collapsed-header.item-view .centered-top-container .blog-name{
  2531. margin-left:40px
  2532. }
  2533. }
  2534. ]]></b:skin>
  2535.  
  2536.     <b:template-skin>
  2537.       <![CDATA[
  2538.       body#layout .hidden,
  2539.       body#layout .invisible {
  2540.         display: inherit;
  2541.       }
  2542.       body#layout .navigation {
  2543.         display: none;
  2544.       }
  2545.       body#layout .page,
  2546.       body#layout .sidebar_top,
  2547.       body#layout .sidebar_bottom {
  2548.         display: inline-block;
  2549.         left: inherit;
  2550.         position: relative;
  2551.         vertical-align: top;
  2552.       }
  2553.       body#layout .page {
  2554.         float: right;
  2555.         margin-left: 20px;
  2556.         width: 55%;
  2557.       }
  2558.       body#layout .sidebar-container {
  2559.         float: right;
  2560.         width: 40%;
  2561.       }
  2562.       body#layout .hamburger-menu {
  2563.         display: none;
  2564.       }
  2565.       ]]>
  2566.     </b:template-skin>
  2567.  
  2568.     <b:defaultmarkups>
  2569.       <b:defaultmarkup type='Common'>
  2570.         <b:includable id='widgetNotAvailableInPreview'>
  2571.           <b:if cond='data:widget.type == &quot;AdSense&quot;'>
  2572.             <div class='vertical-ad-placeholder'>
  2573.               <span><b:message name='messages.adsGoHere'/></span>
  2574.             </div>
  2575.           <b:else/>
  2576.             <b:include name='super.widgetNotAvailableInPreview'/>
  2577.           </b:if>
  2578.         </b:includable>
  2579.       </b:defaultmarkup>
  2580.       <b:defaultmarkup type='AdSense,Blog'>
  2581.         <b:includable id='defaultAdUnit'>
  2582.           <b:comment>Clear out style (needs to be a non-empty string)</b:comment>
  2583.           <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  2584.             <b:include name='super.defaultAdUnit'/>
  2585.           </b:with>
  2586.         </b:includable>
  2587.       </b:defaultmarkup>
  2588.       <b:defaultmarkup type='Blog,FeaturedPost'>
  2589.         <b:includable id='headerByline'>
  2590.           <b:include cond='data:view.isMultipleItems or data:widgets.Blog.first.headerByline.items.share' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
  2591.           <b:include name='super.headerByline'/>
  2592.         </b:includable>
  2593.       </b:defaultmarkup>
  2594.       <b:defaultmarkup type='Blog,FeaturedPost,PopularPosts'>
  2595.         <b:includable id='commentsLink'>
  2596.           <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  2597.             <b:include data='{ iconClass: &quot;touch-icon&quot; }' name='commentIcon'/>
  2598.             <span class='num_comments'>
  2599.               <b:if cond='data:post.numberOfComments &gt; 0'>
  2600.                 <b:message name='messages.numberOfComments'>
  2601.                   <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  2602.                 </b:message>
  2603.               <b:else/>
  2604.                 <data:messages.postAComment/>
  2605.               </b:if>
  2606.             </span>
  2607.           </a>
  2608.         </b:includable>
  2609.         <b:includable id='snippetedPostByline'>
  2610.           <b:include name='headerByline'/>
  2611.         </b:includable>
  2612.         <b:includable id='postLabels'>
  2613.           <b:comment>We don&#39;t display labels on the home page.</b:comment>
  2614.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  2615.             <b:include name='super.postLabels'/>
  2616.           </b:if>
  2617.         </b:includable>
  2618.         <b:includable id='postShareButtons' var='post'>
  2619.           <b:comment>We call super.postShareButtons from the migrated positions.</b:comment>
  2620.         </b:includable>
  2621.         <b:includable id='postJumpLink'>
  2622.           <b:comment>Overridden, and migrated to postFooter. Called as postFooterJumpLink.</b:comment>
  2623.         </b:includable>
  2624.         <b:includable id='postFooterJumpLink'>
  2625.           <b:comment>Ripple, and show &#39;keep reading&#39; as the default.</b:comment>
  2626.           <div class='jump-link flat-button ripple'>
  2627.             <a expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
  2628.               <data:blog.jumpLinkMessage/>
  2629.             </a>
  2630.           </div>
  2631.         </b:includable>
  2632.         <b:includable id='postFooter' var='post'>
  2633.           <div class='post-bottom'>
  2634.             <div class='post-footer float-container'>
  2635.               <b:include name='footerBylines'/>
  2636.               <b:include cond='data:widget.type == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/>
  2637.             </div>
  2638.             <b:if cond='data:view.isSingleItem'>
  2639.                 <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom invisible&quot;, overridden: true }' name='maybeAddShareButtons'/>
  2640.             <b:else/>
  2641.               <b:include data='post' name='postFooterJumpLink'/>
  2642.             </b:if>
  2643.           </div>
  2644.         </b:includable>
  2645.       </b:defaultmarkup>
  2646.       <b:defaultmarkup type='Blog'>
  2647.         <b:includable id='main'>
  2648.           <b:include name='noContentPlaceholder'/>
  2649.  
  2650.           <b:comment>Cap the total number of ads (widgets and inline ads).</b:comment>
  2651.           <b:with value='3' var='maxNumAds'>
  2652.           <b:with value='data:widgets.AdSense.size' var='numDesktopAds'>
  2653.           <b:with value='data:widgets.AdSense count (w =&gt; w.sectionId != &quot;ads&quot;)' var='numMobileAds'>
  2654.           <b:comment>Filter out the featured post, but only on the homepage.</b:comment>
  2655.           <b:with value='data:widgets.FeaturedPost filter (w =&gt; w.sectionId == &quot;page_body&quot;) map (w =&gt; w.postId)' var='featuredPostIds'>
  2656.           <b:with value='data:view.isHomepage                                          ? data:posts filter (post =&gt; post.id not in data:featuredPostIds)                                          : data:posts' var='posts'>
  2657.             <b:include name='super.main'/>
  2658.           </b:with>
  2659.           </b:with>
  2660.           </b:with>
  2661.           </b:with>
  2662.           </b:with>
  2663.         </b:includable>
  2664.         <b:includable id='feedLinks'>
  2665.           <b:comment>Don&#39;t show feed links.</b:comment>
  2666.         </b:includable>
  2667.         <b:includable id='postBodySnippet' var='post'>
  2668.           <div class='container post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>
  2669.  
  2670.             <b:if cond='data:post.featuredImage'>
  2671.               <div class='snippet-thumbnail'>
  2672.                 <b:include data='{                                     image: data:post.featuredImage,                                     imageSizes: [32, 64, 128, 256],                                     imageRatio: &quot;1:1&quot;,                                     sourceSizes: &quot;(max-width: 800px) 20vw, 128px&quot;                                  }' name='responsiveImage'/>
  2673.               </div>
  2674.             </b:if>
  2675.             <b:include cond='data:post' data='post' name='postSnippet'/>
  2676.           </div>
  2677.         </b:includable>
  2678.         <b:includable id='previousPageLink'><b:comment>Don&#39;t show</b:comment></b:includable>
  2679.         <b:includable id='homePageLink'><b:comment>Don&#39;t show</b:comment></b:includable>
  2680.         <b:includable id='nextPageLink'>
  2681.           <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
  2682.             <data:messages.morePosts/>
  2683.           </a>
  2684.         </b:includable>
  2685.         <b:includable id='inlineAd' var='post'>
  2686.           <div>
  2687.             <b:class cond='data:post.adNumber + data:numDesktopAds lt data:maxNumAds' name='desktop-ad'/>
  2688.             <b:class cond='data:post.adNumber + data:numMobileAds lt data:maxNumAds' name='mobile-ad'/>
  2689.             <b:include data='post' name='super.inlineAd'/>
  2690.           </div>
  2691.         </b:includable>
  2692.       </b:defaultmarkup>
  2693.       <b:defaultmarkup type='BlogArchive'>
  2694.         <b:includable id='main' var='this'>
  2695.           <details class='collapsible extendable'>
  2696.             <b:attr cond='data:view.isArchive' name='open' value='open'/>
  2697.             <b:with value='true' var='renderAsDetails'>
  2698.             <b:with value='data:messages.archive' var='defaultTitle'>
  2699.               <b:include name='super.main'/>
  2700.             </b:with>
  2701.             </b:with>
  2702.           </details>
  2703.         </b:includable>
  2704.         <b:includable id='flat'>
  2705.           <b:include data='{                               buttonClass: &quot;pill-button&quot;,                               items: data:this.data,                               itemSet: &quot;data&quot;,                               itemsMarkup: &quot;super.flat&quot;                             }' name='extendableItems'/>
  2706.         </b:includable>
  2707.         <b:includable id='hierarchy'>
  2708.           <b:include data='{                               buttonClass: &quot;pill-button&quot;,                               limit: 1,                               items: data:this.data,                               itemSet: &quot;data&quot;,                               itemsMarkup: &quot;super.hierarchy&quot;                             }' name='extendableItems'/>
  2709.         </b:includable>
  2710.       </b:defaultmarkup>
  2711.       <b:defaultmarkup type='BlogSearch'>
  2712.         <b:includable id='searchSubmit'>
  2713.           <input class='search-action flat-button' expr:value='data:messages.search.escaped' type='submit'/>
  2714.         </b:includable>
  2715.       </b:defaultmarkup>
  2716.       <b:defaultmarkup type='Label'>
  2717.         <b:includable id='main' var='this'>
  2718.           <details class='collapsible extendable'>
  2719.             <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
  2720.             <b:class name='version-1-0-0'/>
  2721.             <b:with value='true' var='renderAsDetails'>
  2722.             <b:with value='data:messages.labels' var='defaultTitle'>
  2723.               <b:include name='super.main'/>
  2724.             </b:with>
  2725.             </b:with>
  2726.           </details>
  2727.         </b:includable>
  2728.         <b:includable id='list'>
  2729.           <b:include data='{                               buttonClass: &quot;pill-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.list&quot;                             }' name='extendableItems'/>
  2730.         </b:includable>
  2731.         <b:includable id='cloud'>
  2732.           <b:include data='{                               buttonClass: &quot;pill-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.cloud&quot;                             }' name='extendableItems'/>
  2733.         </b:includable>
  2734.       </b:defaultmarkup>
  2735.       <b:defaultmarkup type='FeaturedPost'>
  2736.         <b:includable id='snippetedPostContent'>
  2737.           <b:comment>Re-order the thumbnail before the snippet, add &#39;Keep reading&#39; link.</b:comment>
  2738.           <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
  2739.           <b:include name='headerByline'/>
  2740.           <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' data='post' name='snippetedPostThumbnail'/>
  2741.           <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
  2742.           <b:include data='post' name='postFooter'/>
  2743.         </b:includable>
  2744.         <b:includable id='snippetedPostThumbnail'>
  2745.           <div class='snippet-thumbnail'>
  2746.             <b:with value='data:post.featuredImage.isYoutube                            ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, &quot;945:600&quot;)                            : &quot;&quot;' var='highRes'>
  2747.               <b:include data='{                                  image: data:post.featuredImage,                                  imageSizes: [256, 512, 945, 1684],                                  imageRatio: &quot;945:600&quot;,                                  sourceSizes: &quot;(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)&quot;,                                  enhancedSourceset: data:highRes                                }' name='responsiveImage'/>
  2748.             </b:with>
  2749.           </div>
  2750.         </b:includable>
  2751.       </b:defaultmarkup>
  2752.       <b:defaultmarkup type='Header'>
  2753.         <b:includable id='image'>
  2754.           <b:include name='super.image'/>
  2755.           <b:comment>If we are replacing the title, force it to render anyway, and it&#39;ll be hidden in CSS.</b:comment>
  2756.           <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>
  2757.         </b:includable>
  2758.         <b:includable id='title'>
  2759.           <div>
  2760.             <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
  2761.             <b:include name='super.title'/>
  2762.           </div>
  2763.         </b:includable>
  2764.       </b:defaultmarkup>
  2765.       <b:defaultmarkup type='PopularPosts'>
  2766.         <b:includable id='main' var='this'>
  2767.           <b:comment>Default the title to &#39;Popular posts from this blog&#39;.</b:comment>
  2768.           <b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
  2769.             <b:include name='super.main'/>
  2770.           </b:with>
  2771.         </b:includable>
  2772.         <b:includable id='snippetedPostContent'>
  2773.           <b:comment>Add a &#39;keep reading&#39; link to the item-content.</b:comment>
  2774.           <b:include name='snippetedPostTitle'/>
  2775.           <b:include name='snippetedPostByline'/>
  2776.           <div class='item-content float-container'>
  2777.             <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
  2778.             <b:if cond='data:this.postDisplay.showSnippet'>
  2779.               <b:with value='&quot;popular-posts&quot;' var='snippetPrefix'>
  2780.                 <b:include cond='data:post' data='post' name='postSnippet'/>
  2781.               </b:with>
  2782.             </b:if>
  2783.             <b:include data='post' name='postFooterJumpLink'/>
  2784.           </div>
  2785.         </b:includable>
  2786.       </b:defaultmarkup>
  2787.       <b:defaultmarkup type='PageList'>
  2788.         <b:includable id='content'>
  2789.           <div class='widget-content'>
  2790.             <b:include cond='data:widget.sectionId == &quot;page_list_top&quot;' name='overflowablePageList'/>
  2791.             <b:include cond='data:widget.sectionId != &quot;page_list_top&quot;' name='pageList'/>
  2792.           </div>
  2793.         </b:includable>
  2794.         <b:includable id='overflowButton'>
  2795.           <a><data:messages.moreEllipsis/></a>
  2796.         </b:includable>
  2797.       </b:defaultmarkup>
  2798.       <b:defaultmarkup type='Profile'>
  2799.         <b:includable id='main' var='this'>
  2800.           <div class='wrapper'>
  2801.             <b:class cond='!data:this.team' name='solo'/>
  2802.             <b:comment>No title for single profiles. Default to &#39;Blog authors&#39; for team.</b:comment>
  2803.             <b:with value='data:messages.blogAuthors' var='defaultTitle'>
  2804.               <b:include cond='data:this.team' name='widget-title'/>
  2805.             </b:with>
  2806.             <b:include name='content'/>
  2807.           </div>
  2808.         </b:includable>
  2809.         <b:includable id='defaultProfileImage'>
  2810.           <div class='default-avatar-wrapper'>
  2811.             <b:include data='{ iconClass: &quot;avatar-icon&quot; }' name='defaultAvatarIcon'/>
  2812.           </div>
  2813.         </b:includable>
  2814.         <b:includable id='userProfileText'>
  2815.           <dd class='profile-textblock profile-snippet snippet-container r-snippet-container'>
  2816.             <div class='snippet-item r-snippetized'>
  2817.               <data:aboutme/>
  2818.             </div>
  2819.             <div class='snippet-fade r-snippet-fade hidden'/>
  2820.           </dd>
  2821.         </b:includable>
  2822.         <b:includable id='viewProfileLink'>
  2823.           <b:comment>Change link to &#39;visit profile&#39;</b:comment>
  2824.           <a class='profile-link visit-profile pill-button' expr:href='data:userUrl' rel='author'>
  2825.             <data:messages.visitProfile/>
  2826.           </a>
  2827.         </b:includable>
  2828.       </b:defaultmarkup>
  2829.     </b:defaultmarkups>
  2830.  
  2831.     <b:include cond='not data:view.isPreview' data='{                         image: data:skin.vars.body_background.image,                         selector: &quot;.bg-photo&quot;,                         imageSizes: [480, 640, 800, 1200, 1600]                      }' name='responsiveImageStyle'/>
  2832.  
  2833.     <b:if cond='data:widgets.AdSense.first or data:blog.adsenseClientId'>
  2834.       <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
  2835.     </b:if>
  2836.     <b:include data='blog' name='google-analytics'/>
  2837.  
  2838.     <script async='async' src='https://www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>
  2839.   </head>

解説

0005：<meta content='width=device-width, initial-scale=1' name='viewport'/>
Responsive Web Designのための設定
・デバイスに合わせた幅
・初期表示倍率は1倍

0006：<title><data:view.title.escaped/></title>
全ページのタイトルを出力する

0009：    <b:skin version='1.0.0'><![CDATA[
(中略)
2537：]]></b:skin>
<b:skin>タグ内にCSSスタイルを宣言する

0010：/*
(中略)
0286：*/
コメントタグで囲まれているためブログには表示されない
編集可能なフォントや色を記述した変数(variable)のリストを入力する
・name：名前
(例)damionRegular36・keycolor
・description：説明
(例)Damion Regular 36・Main Color
・type：「font」または「color」
・default：「フォント」または「カラー」の初期設定
(例)400 36px Damion, cursive・#2196f3
設定した変数は「$variable_name」で使用可能となる

0288：/*!************************************************
0289： * Blogger Template Style
0290： * Name: Essential
0291： **************************************************/
コメントタグで囲まれているためブログには表示されない

0292：body{
0293：overflow-wrap:break-word;
0294：word-break:break-word;
0295：word-wrap:break-word
0296：}
bodyでの単語の折り返しの処理を設定

body(2844-3948) 

  1.   <body>
  2.     <b:class cond='data:view.isPreview' name='preview'/>
  3.     <b:class cond='data:view.isSingleItem' name='item-view'/>
  4.     <b:class cond='data:view.isArchive' name='archive-view'/>
  5.     <b:class cond='data:view.isLabelSearch' name='label-view'/>
  6.     <b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>
  7.     <b:class cond='data:widgets none w =&gt; (w.sectionId in [&quot;sidebar_top&quot;, &quot;sidebar_bottom&quot;])' name='no-sidebar-widget'/>
  8.  
  9.     <b:include name='skipNavigation'/>
  10.  
  11.     <div class='page'>
  12.       <div class='bg-photo-overlay'/>
  13.       <div class='bg-photo-container'>
  14.         <div class='bg-photo'/>
  15.       </div>
  16.  
  17.       <b:with value='data:widgets.AdSense any (w =&gt; w.sectionId == &quot;ads&quot;)' var='hasVerticalAds'>
  18.         <div class='page_body'>
  19.           <b:class cond='data:hasVerticalAds' name='has-vertical-ads'/>
  20.  
  21.           <div class='centered'>
  22.             <div class='centered-top-placeholder'/>
  23.             <header class='centered-top-container' role='banner'>
  24.               <div class='centered-top'>
  25.                 <b:class cond='data:view.isSearch and data:view.search.query' name='search-focused'/>
  26.  
  27.                 <b:if cond='data:view.isSingleItem'>
  28.                   <a class='return_link' expr:href='data:blog.homepageUrl'>
  29.                     <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
  30.                   </a>
  31.                 <b:else/>
  32.                   <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
  33.                 </b:if>
  34.  
  35.                 <b:if cond='data:view.isLayoutMode or data:widgets any (w =&gt; w.sectionId == &quot;search_top&quot;)'>
  36.                   <div class='search'>
  37.                     <b:class cond='data:view.isSearch and data:view.search.query' name='focused'/>
  38.                     <button class='search-expand touch-icon-button' expr:aria-label='data:messages.search.escaped'>
  39.                       <div class='flat-icon-button ripple'>
  40.                         <b:include data='{ iconClass: &quot;search-expand-icon&quot; }' name='searchIcon'/>
  41.                       </div>
  42.                     </button>
  43.                     <b:section id='search_top' name='Search (Top)' showaddelement='false'>
  44.                       <b:widget id='BlogSearch1' locked='true' title='このブログを検索' type='BlogSearch' visible='false'>
  45.                         <b:includable id='main'>
  46.   <b:include name='widget-title'/>
  47.   <b:include name='content'/>
  48. </b:includable>
  49.                         <b:includable id='content'>
  50.   <div class='widget-content' role='search'>
  51.     <b:include name='searchForm'/>
  52.   </div>
  53. </b:includable>
  54.                         <b:includable id='searchForm'>
  55.   <form expr:action='data:blog.searchUrl'>
  56.     <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
  57.     <b:include name='urlParamsAsFormInput'/>
  58.     <div class='search-input'>
  59.       <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q'/>
  60.     </div>
  61.     <b:include name='searchSubmit'/>
  62.   </form>
  63. </b:includable>
  64.                         <b:includable id='searchSubmit'>
  65.           <input class='search-action flat-button' expr:value='data:messages.search.escaped' type='submit'/>
  66.         </b:includable>
  67.                       </b:widget>
  68.                     </b:section>
  69.                   </div>
  70.                 </b:if>
  71.  
  72.                 <div class='clearboth'/>
  73.  
  74.                 <div class='blog-name container'>
  75.                   <b:section class='container' id='header' name='Header' showaddelement='false'>
  76.                     <b:widget id='Header1' locked='true' title='Bloggerブログ (Header)' type='Header' visible='true'>
  77.                       <b:widget-settings>
  78.                         <b:widget-setting name='displayUrl'/>
  79.                         <b:widget-setting name='displayHeight'>0</b:widget-setting>
  80.                         <b:widget-setting name='sectionWidth'>673</b:widget-setting>
  81.                         <b:widget-setting name='useImage'>false</b:widget-setting>
  82.                         <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
  83.                         <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
  84.                         <b:widget-setting name='displayWidth'>0</b:widget-setting>
  85.                       </b:widget-settings>
  86.                       <b:includable id='main' var='this'>
  87.     <div class='header-widget'>
  88.       <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
  89.       <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title'/>
  90.       <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
  91.     </div>
  92.     <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='behindImageStyle'/>
  93.   </b:includable>
  94.                       <b:includable id='behindImageStyle'>
  95.     <b:if cond='data:sourceUrl'>
  96.       <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
  97.       <style type='text/css'>
  98.         .header-widget {
  99.           background-position: <data:blog.locale.languageAlignment/>;
  100.           background-repeat: no-repeat;
  101.           background-size: cover;
  102.         }
  103.       </style>
  104.     </b:if>
  105.   </b:includable>
  106.                       <b:includable id='description'>
  107.     <p>
  108.       <data:this.description/>
  109.     </p>
  110.   </b:includable>
  111.                       <b:includable id='image'>
  112.           <b:include name='super.image'/>
  113.           <b:comment>If we are replacing the title, force it to render anyway, and it&#39;ll be hidden in CSS.</b:comment>
  114.           <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>
  115.         </b:includable>
  116.                       <b:includable id='title'>
  117.           <div>
  118.             <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
  119.             <b:include name='super.title'/>
  120.           </div>
  121.         </b:includable>
  122.                     </b:widget>
  123.                     <b:widget id='Label1' locked='false' title='メニュー' type='Label' visible='true'>
  124.                       <b:widget-settings>
  125.                         <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
  126.                         <b:widget-setting name='display'>LIST</b:widget-setting>
  127.                         <b:widget-setting name='selectedLabelsList'/>
  128.                         <b:widget-setting name='showType'>ALL</b:widget-setting>
  129.                         <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
  130.                       </b:widget-settings>
  131.                       <b:includable id='main' var='this'>
  132.           <details class='collapsible extendable'>
  133.             <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
  134.             <b:class name='version-1-0-0'/>
  135.             <b:with value='true' var='renderAsDetails'>
  136.             <b:with value='data:messages.labels' var='defaultTitle'>
  137.               <b:include name='super.main'/>
  138.             </b:with>
  139.             </b:with>
  140.           </details>
  141.         </b:includable>
  142.                       <b:includable id='cloud'>
  143.           <b:include data='{                               buttonClass: &quot;pill-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.cloud&quot;                             }' name='extendableItems'/>
  144.         </b:includable>
  145.                       <b:includable id='content'>
  146.   <div class='widget-content'>
  147.     <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>
  148.     <b:include cond='data:this.display == &quot;list&quot;' name='list'/>
  149.     <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
  150.   </div>
  151. </b:includable>
  152.                       <b:includable id='list'>
  153.           <b:include data='{                               buttonClass: &quot;pill-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.list&quot;                             }' name='extendableItems'/>
  154.         </b:includable>
  155.                     </b:widget>
  156.                   </b:section>
  157.                   <b:if cond='data:view.isLayoutMode or data:widgets any (w =&gt; w.sectionId == &quot;subscription&quot;)'>
  158.                     <section class='subscribe-section-container'>
  159.                       <button class='subscribe-button pill-button'><b:eval expr='data:messages.subscribe'/></button>
  160.                       <div class='subscribe-popup-container'>
  161.                         <div aria-labelledby='subscribe-title' class='subscribe-popup dialog hidden' role='dialog' tabindex='-1'>
  162.                           <div role='document'>
  163.                             <h3 class='subscribe-title' id='subscribe-title'><b:eval expr='data:messages.subscribeToThisBlog'/></h3>
  164.                             <b:section id='subscription' name='Subscription' showaddelement='false'>
  165.                               <b:widget id='FollowByEmail1' locked='true' title='Follow by Email' type='FollowByEmail' visible='false'>
  166.                                 <b:includable id='main'>
  167.   <b:include name='widget-title'/>
  168.   <b:include name='content'/>
  169. </b:includable>
  170.                                 <b:includable id='content'>
  171.   <div class='widget-content'>
  172.     <div class='follow-by-email-inner'>
  173.       <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
  174.         <input autocomplete='off' class='follow-by-email-address' expr:placeholder='data:messages.emailAddress' name='email' type='email'/>
  175.         <input class='follow-by-email-submit' expr:value='data:messages.getEmailNotifications' type='submit'/>
  176.         <input expr:value='data:feedPath' name='uri' type='hidden'/>
  177.         <input name='loc' type='hidden' value='en_US'/>
  178.       </form>
  179.     </div>
  180.   </div>
  181. </b:includable>
  182.                               </b:widget>
  183.                             </b:section>
  184.                           </div>
  185.                         </div>
  186.                       </div>
  187.                     </section>
  188.                     <b:else/>
  189.                       <div class='subscribe-empty-placeholder'/>
  190.                   </b:if>
  191.                   <b:comment>Nav primarily intended for sections that consist of major navigation blocks.</b:comment>
  192.                   <nav role='navigation'>
  193.                     <b:section class='clearboth' id='page_list_top' name='Page List (Top)' showaddelement='false'>
  194.                       <b:widget cond='!data:view.isPost' id='PageList1' locked='true' title='' type='PageList' visible='false'>
  195.                         <b:widget-settings>
  196.                           <b:widget-setting name='pageListJson'>{}</b:widget-setting>
  197.                           <b:widget-setting name='homeTitle'>ホーム</b:widget-setting>
  198.                         </b:widget-settings>
  199.                         <b:includable id='main'>
  200.   <b:include name='widget-title'/>
  201.   <b:include name='content'/>
  202. </b:includable>
  203.                         <b:includable id='content'>
  204.           <div class='widget-content'>
  205.             <b:include cond='data:widget.sectionId == &quot;page_list_top&quot;' name='overflowablePageList'/>
  206.             <b:include cond='data:widget.sectionId != &quot;page_list_top&quot;' name='pageList'/>
  207.           </div>
  208.         </b:includable>
  209.                         <b:includable id='overflowButton'>
  210.           <a><data:messages.moreEllipsis/></a>
  211.         </b:includable>
  212.                         <b:includable id='overflowablePageList'>
  213.   <div class='overflowable-container'>
  214.     <div class='overflowable-contents'>
  215.       <div class='container'>
  216.         <b:with value='true' var='overflow'>
  217.         <b:with value='&quot;tabs&quot;' var='pageListClass'>
  218.           <b:include name='pageList'/>
  219.         </b:with>
  220.         </b:with>
  221.       </div>
  222.     </div>
  223.     <div class='overflow-button hidden'>
  224.       <b:include name='overflowButton'/>
  225.     </div>
  226.   </div>
  227. </b:includable>
  228.                         <b:includable id='pageLink'>
  229.   <li>
  230.     <b:class cond='data:overflow' name='overflowable-item'/>
  231.     <b:class cond='data:link.isCurrentPage' name='selected'/>
  232.  
  233.     <a expr:href='data:link.href'><data:link.title/></a>
  234.   </li>
  235. </b:includable>
  236.                         <b:includable id='pageList'>
  237.   <ul>
  238.     <b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
  239.     <b:loop values='data:links' var='link'>
  240.       <b:include name='pageLink'/>
  241.     </b:loop>
  242.   </ul>
  243. </b:includable>
  244.                       </b:widget>
  245.                     </b:section>
  246.                   </nav>
  247.                 </div>
  248.               </div>
  249.             </header>
  250.             <div>
  251.               <b:section ads='true' class='vertical-ad-container' id='ads' name='Ads' showaddelement='false'>
  252.                 <b:widget id='AdSense1' locked='true' title='' type='AdSense' visible='false'>
  253.                   <b:widget-settings>
  254.                     <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
  255.                     <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
  256.                     <b:widget-setting name='style.layout'>1x1</b:widget-setting>
  257.                     <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
  258.                     <b:widget-setting name='style.urlcolor'>#2196f3</b:widget-setting>
  259.                     <b:widget-setting name='style.linkcolor'>#757575</b:widget-setting>
  260.                     <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
  261.                   </b:widget-settings>
  262.                   <b:includable id='main'>
  263.   <div class='widget-content'>
  264.     <b:if cond='data:adCode'>
  265.       <data:adCode/>
  266.     <b:else/>
  267.       <b:include name='defaultAdUnit'/>
  268.     </b:if>
  269.   </div>
  270. </b:includable>
  271.                   <b:includable id='defaultAdUnit'>
  272.           <b:comment>Clear out style (needs to be a non-empty string)</b:comment>
  273.           <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  274.             <b:include name='super.defaultAdUnit'/>
  275.           </b:with>
  276.         </b:includable>
  277.                 </b:widget>
  278.                 <b:widget id='AdSense2' locked='true' title='' type='AdSense' visible='false'>
  279.                   <b:widget-settings>
  280.                     <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
  281.                     <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
  282.                     <b:widget-setting name='style.layout'>1x1</b:widget-setting>
  283.                     <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
  284.                     <b:widget-setting name='style.urlcolor'>#2196f3</b:widget-setting>
  285.                     <b:widget-setting name='style.linkcolor'>#757575</b:widget-setting>
  286.                     <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
  287.                   </b:widget-settings>
  288.                   <b:includable id='main'>
  289.   <div class='widget-content'>
  290.     <b:if cond='data:adCode'>
  291.       <data:adCode/>
  292.     <b:else/>
  293.       <b:include name='defaultAdUnit'/>
  294.     </b:if>
  295.   </div>
  296. </b:includable>
  297.                   <b:includable id='defaultAdUnit'>
  298.           <b:comment>Clear out style (needs to be a non-empty string)</b:comment>
  299.           <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  300.             <b:include name='super.defaultAdUnit'/>
  301.           </b:with>
  302.         </b:includable>
  303.                 </b:widget>
  304.               </b:section>
  305.               <main class='centered-bottom' id='main' role='main' tabindex='-1'>
  306.                 <b:if cond='data:view.isMultipleItems'>
  307.                   <h2 class='main-heading'><data:messages.posts/></h2>
  308.                 </b:if>
  309.                 <b:if cond='data:view.isArchive or (data:view.isSearch and data:view.search.resultsMessageHtml)'>
  310.                   <div class='post-filter-message'>
  311.                     <div>
  312.                       <b:if cond='data:view.isArchive'>
  313.                         <data:view.archive.rangeMessage/>
  314.                       <b:elseif cond='data:view.isSearch and data:view.search.resultsMessageHtml'/>
  315.                         <data:view.search.resultsMessageHtml/>
  316.                       </b:if>
  317.                     </div>
  318.                     <div>
  319.                       <a class='flat-button ripple' expr:href='data:blog.homepageUrl'>
  320.                         <data:messages.showAll/>
  321.                       </a>
  322.                     </div>
  323.                   </div>
  324.                 </b:if>
  325.                 <b:section class='main' id='page_body' name='Page Body' showaddelement='false'>
  326.                   <b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='true' title='' type='FeaturedPost' visible='false'>
  327.                     <b:widget-settings>
  328.                       <b:widget-setting name='showSnippet'>false</b:widget-setting>
  329.                       <b:widget-setting name='showPostTitle'>false</b:widget-setting>
  330.                       <b:widget-setting name='showFirstImage'>false</b:widget-setting>
  331.                       <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
  332.                     </b:widget-settings>
  333.                     <b:includable id='main' var='this'>
  334.   <b:include name='widget-title'/>
  335.   <div class='widget-content'>
  336.     <b:include name='snippetedPosts'/>
  337.   </div>
  338. </b:includable>
  339.                     <b:includable id='commentsLink'>
  340.           <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  341.             <b:include data='{ iconClass: &quot;touch-icon&quot; }' name='commentIcon'/>
  342.             <span class='num_comments'>
  343.               <b:if cond='data:post.numberOfComments &gt; 0'>
  344.                 <b:message name='messages.numberOfComments'>
  345.                   <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  346.                 </b:message>
  347.               <b:else/>
  348.                 <data:messages.postAComment/>
  349.               </b:if>
  350.             </span>
  351.           </a>
  352.         </b:includable>
  353.                     <b:includable id='headerByline'>
  354.           <b:include cond='data:view.isMultipleItems or data:widgets.Blog.first.headerByline.items.share' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
  355.           <b:include name='super.headerByline'/>
  356.         </b:includable>
  357.                     <b:includable id='postFooter' var='post'>
  358.           <div class='post-bottom'>
  359.             <div class='post-footer float-container'>
  360.               <b:include name='footerBylines'/>
  361.               <b:include cond='data:widget.type == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/>
  362.             </div>
  363.             <b:if cond='data:view.isSingleItem'>
  364.                 <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom invisible&quot;, overridden: true }' name='maybeAddShareButtons'/>
  365.             <b:else/>
  366.               <b:include data='post' name='postFooterJumpLink'/>
  367.             </b:if>
  368.           </div>
  369.         </b:includable>
  370.                     <b:includable id='postFooterJumpLink'>
  371.           <b:comment>Ripple, and show &#39;keep reading&#39; as the default.</b:comment>
  372.           <div class='jump-link flat-button ripple'>
  373.             <a expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
  374.               <data:blog.jumpLinkMessage/>
  375.             </a>
  376.           </div>
  377.         </b:includable>
  378.                     <b:includable id='postJumpLink'>
  379.           <b:comment>Overridden, and migrated to postFooter. Called as postFooterJumpLink.</b:comment>
  380.         </b:includable>
  381.                     <b:includable id='postLabels'>
  382.           <b:comment>We don&#39;t display labels on the home page.</b:comment>
  383.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  384.             <b:include name='super.postLabels'/>
  385.           </b:if>
  386.         </b:includable>
  387.                     <b:includable id='postShareButtons' var='post'>
  388.           <b:comment>We call super.postShareButtons from the migrated positions.</b:comment>
  389.         </b:includable>
  390.                     <b:includable id='snippetedPostByline'>
  391.           <b:include name='headerByline'/>
  392.         </b:includable>
  393.                     <b:includable id='snippetedPostContent'>
  394.           <b:comment>Re-order the thumbnail before the snippet, add &#39;Keep reading&#39; link.</b:comment>
  395.           <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
  396.           <b:include name='headerByline'/>
  397.           <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' data='post' name='snippetedPostThumbnail'/>
  398.           <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>
  399.           <b:include data='post' name='postFooter'/>
  400.         </b:includable>
  401.                     <b:includable id='snippetedPostThumbnail'>
  402.           <div class='snippet-thumbnail'>
  403.             <b:with value='data:post.featuredImage.isYoutube                            ? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, &quot;945:600&quot;)                            : &quot;&quot;' var='highRes'>
  404.               <b:include data='{                                  image: data:post.featuredImage,                                  imageSizes: [256, 512, 945, 1684],                                  imageRatio: &quot;945:600&quot;,                                  sourceSizes: &quot;(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)&quot;,                                  enhancedSourceset: data:highRes                                }' name='responsiveImage'/>
  405.             </b:with>
  406.           </div>
  407.         </b:includable>
  408.                   </b:widget>
  409.                   <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true'>
  410.                     <b:widget-settings>
  411.                       <b:widget-setting name='showDateHeader'>false</b:widget-setting>
  412.                       <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
  413.                       <b:widget-setting name='showShareButtons'>false</b:widget-setting>
  414.                       <b:widget-setting name='authorLabel'/>
  415.                       <b:widget-setting name='showCommentLink'>false</b:widget-setting>
  416.                       <b:widget-setting name='style.urlcolor'>#2196f3</b:widget-setting>
  417.                       <b:widget-setting name='showAuthor'>false</b:widget-setting>
  418.                       <b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
  419.                       <b:widget-setting name='style.linkcolor'>#757575</b:widget-setting>
  420.                       <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
  421.                       <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
  422.                       <b:widget-setting name='timestampLabel'>投稿日&#65306;</b:widget-setting>
  423.                       <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
  424.                       <b:widget-setting name='style.layout'>1x1</b:widget-setting>
  425.                       <b:widget-setting name='showLabels'>false</b:widget-setting>
  426.                       <b:widget-setting name='showLocation'>false</b:widget-setting>
  427.                       <b:widget-setting name='postLabelsLabel'/>
  428.                       <b:widget-setting name='showTimestamp'>false</b:widget-setting>
  429.                       <b:widget-setting name='postsPerAd'>1</b:widget-setting>
  430.                       <b:widget-setting name='showBacklinks'>true</b:widget-setting>
  431.                       <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
  432.                       <b:widget-setting name='showInlineAds'>true</b:widget-setting>
  433.                       <b:widget-setting name='backlinksLabel'/>
  434.                       <b:widget-setting name='showReactions'>false</b:widget-setting>
  435.                     </b:widget-settings>
  436.                     <b:includable id='main'>
  437.           <b:include name='noContentPlaceholder'/>
  438.  
  439.           <b:comment>Cap the total number of ads (widgets and inline ads).</b:comment>
  440.           <b:with value='3' var='maxNumAds'>
  441.           <b:with value='data:widgets.AdSense.size' var='numDesktopAds'>
  442.           <b:with value='data:widgets.AdSense count (w =&gt; w.sectionId != &quot;ads&quot;)' var='numMobileAds'>
  443.           <b:comment>Filter out the featured post, but only on the homepage.</b:comment>
  444.           <b:with value='data:widgets.FeaturedPost filter (w =&gt; w.sectionId == &quot;page_body&quot;) map (w =&gt; w.postId)' var='featuredPostIds'>
  445.           <b:with value='data:view.isHomepage                                          ? data:posts filter (post =&gt; post.id not in data:featuredPostIds)                                          : data:posts' var='posts'>
  446.             <b:include name='super.main'/>
  447.           </b:with>
  448.           </b:with>
  449.           </b:with>
  450.           </b:with>
  451.           </b:with>
  452.         </b:includable>
  453.                     <b:includable id='aboutPostAuthor'>
  454.   <div class='author-name'>
  455.     <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
  456.       <span>
  457.         <data:post.author.name/>
  458.       </span>
  459.     </a>
  460.   </div>
  461.   <div>
  462.     <span class='author-desc'>
  463.       <data:post.author.aboutMe/>
  464.     </span>
  465.   </div>
  466. </b:includable>
  467.                     <b:includable id='addComments'>
  468.   <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  469.     <b:message name='messages.postAComment'/>
  470.   </a>
  471. </b:includable>
  472.                     <b:includable id='commentAuthorAvatar'>
  473.   <div class='avatar-image-container'>
  474.     <img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
  475.   </div>
  476. </b:includable>
  477.                     <b:includable id='commentDeleteIcon' var='comment'>
  478.   <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
  479.     <b:if cond='data:showCmtPopup'>
  480.       <div class='goog-toggle-button'>
  481.         <div class='goog-inline-block comment-action-icon'/>
  482.       </div>
  483.     <b:else/>
  484.       <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
  485.         <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
  486.       </a>
  487.     </b:if>
  488.   </span>
  489. </b:includable>
  490.                     <b:includable id='commentForm' var='post'>
  491.   <div class='comment-form'>
  492.     <a name='comment-form'/>
  493.     <h4 id='comment-post-message'><data:messages.postAComment/></h4>
  494.     <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  495.       <p><data:this.messages.blogComment/></p>
  496.     </b:if>
  497.     <b:include data='post' name='commentFormIframeSrc'/>
  498.     <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
  499.     <data:post.cmtfpIframe/>
  500.     <script type='text/javascript'>
  501.       BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
  502.     </script>
  503.   </div>
  504. </b:includable>
  505.                     <b:includable id='commentFormIframeSrc' var='post'>
  506.   <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
  507. </b:includable>
  508.                     <b:includable id='commentItem' var='comment'>
  509.   <div class='comment' expr:id='&quot;c&quot; + data:comment.id'>
  510.     <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
  511.  
  512.     <div class='comment-block'>
  513.       <div class='comment-author'>
  514.         <b:if cond='data:comment.authorUrl'>
  515.           <b:message name='messages.authorSaidWithLink'>
  516.             <b:param expr:value='data:comment.author' name='authorName'/>
  517.             <b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
  518.           </b:message>
  519.         <b:else/>
  520.           <b:message name='messages.authorSaid'>
  521.             <b:param expr:value='data:comment.author' name='authorName'/>
  522.           </b:message>
  523.         </b:if>
  524.       </div>
  525.       <div expr:class='&quot;comment-body&quot; + (data:comment.isDeleted ? &quot; deleted&quot; : &quot;&quot;)'>
  526.         <data:comment.body/>
  527.       </div>
  528.       <div class='comment-footer'>
  529.         <span class='comment-timestamp'>
  530.           <a expr:href='data:comment.url' title='comment permalink'>
  531.             <data:comment.timestamp/>
  532.           </a>
  533.           <b:include data='comment' name='commentDeleteIcon'/>
  534.         </span>
  535.       </div>
  536.     </div>
  537.   </div>
  538. </b:includable>
  539.                     <b:includable id='commentList' var='comments'>
  540.   <div id='comments-block'>
  541.     <b:loop values='data:comments' var='comment'>
  542.       <b:include data='comment' name='commentItem'/>
  543.     </b:loop>
  544.   </div>
  545. </b:includable>
  546.                     <b:includable id='commentPicker' var='post'>
  547.   <b:if cond='data:post.showThreadedComments'>
  548.     <b:include data='post' name='threadedComments'/>
  549.   <b:else/>
  550.     <b:include data='post' name='comments'/>
  551.   </b:if>
  552. </b:includable>
  553.                     <b:includable id='comments' var='post'>
  554.   <section expr:class='&quot;comments&quot; + (data:post.embedCommentForm ? &quot; embed&quot; : &quot;&quot;)' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  555.     <a name='comments'/>
  556.     <b:if cond='data:post.allowComments'>
  557.  
  558.       <b:include name='commentsTitle'/>
  559.  
  560.       <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  561.         <b:include cond='data:post.comments' data='post.comments' name='commentList'/>
  562.       </div>
  563.  
  564.       <b:if cond='data:post.commentPagingRequired'>
  565.         <div class='paging-control-container'>
  566.           <b:if cond='data:post.hasOlderLinks'>
  567.             <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
  568.               <data:messages.oldest/>
  569.             </a>
  570.             <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
  571.               <data:messages.older/>
  572.             </a>
  573.           </b:if>
  574.  
  575.           <span class='comment-range-text'>
  576.             <data:post.commentRangeText/>
  577.           </span>
  578.  
  579.           <b:if cond='data:post.hasNewerLinks'>
  580.             <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
  581.               <data:messages.newer/>
  582.             </a>
  583.             <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
  584.               <data:messages.newest/>
  585.             </a>
  586.           </b:if>
  587.         </div>
  588.       </b:if>
  589.  
  590.       <div class='footer'>
  591.         <b:if cond='data:post.embedCommentForm'>
  592.           <b:if cond='data:post.allowNewComments'>
  593.             <b:include data='post' name='commentForm'/>
  594.           <b:else/>
  595.             <data:post.noNewCommentsText/>
  596.           </b:if>
  597.         <b:else/>
  598.           <b:if cond='data:post.allowComments'>
  599.             <b:include data='post' name='addComments'/>
  600.           </b:if>
  601.         </b:if>
  602.       </div>
  603.     </b:if>
  604.     <b:if cond='data:showCmtPopup'>
  605.       <div id='comment-popup'>
  606.         <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  607.         </iframe>
  608.       </div>
  609.     </b:if>
  610.   </section>
  611. </b:includable>
  612.                     <b:includable id='commentsLink'>
  613.           <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  614.             <b:include data='{ iconClass: &quot;touch-icon&quot; }' name='commentIcon'/>
  615.             <span class='num_comments'>
  616.               <b:if cond='data:post.numberOfComments &gt; 0'>
  617.                 <b:message name='messages.numberOfComments'>
  618.                   <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  619.                 </b:message>
  620.               <b:else/>
  621.                 <data:messages.postAComment/>
  622.               </b:if>
  623.             </span>
  624.           </a>
  625.         </b:includable>
  626.                     <b:includable id='commentsTitle'>
  627.   <h3 class='title'><data:messages.comments/></h3>
  628. </b:includable>
  629.                     <b:includable id='defaultAdUnit'>
  630.           <b:comment>Clear out style (needs to be a non-empty string)</b:comment>
  631.           <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  632.             <b:include name='super.defaultAdUnit'/>
  633.           </b:with>
  634.         </b:includable>
  635.                     <b:includable id='feedLinks'>
  636.           <b:comment>Don&#39;t show feed links.</b:comment>
  637.         </b:includable>
  638.                     <b:includable id='feedLinksBody' var='links'>
  639.   <div class='feed-links'>
  640.   <data:messages.subscribeTo/>
  641.   <b:loop values='data:links' var='f'>
  642.      <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  643.   </b:loop>
  644.   </div>
  645. </b:includable>
  646.                     <b:includable id='headerByline'>
  647.           <b:include cond='data:view.isMultipleItems or data:widgets.Blog.first.headerByline.items.share' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
  648.           <b:include name='super.headerByline'/>
  649.         </b:includable>
  650.                     <b:includable id='homePageLink'><b:comment>Don&#39;t show</b:comment></b:includable>
  651.                     <b:includable id='iframeComments' var='post'>
  652.   <!-- G+ comments, no longer available. The includable is retained for backwards-compatibility. -->
  653. </b:includable>
  654.                     <b:includable id='inlineAd' var='post'>
  655.           <div>
  656.             <b:class cond='data:post.adNumber + data:numDesktopAds lt data:maxNumAds' name='desktop-ad'/>
  657.             <b:class cond='data:post.adNumber + data:numMobileAds lt data:maxNumAds' name='mobile-ad'/>
  658.             <b:include data='post' name='super.inlineAd'/>
  659.           </div>
  660.         </b:includable>
  661.                     <b:includable id='nextPageLink'>
  662.           <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
  663.             <data:messages.morePosts/>
  664.           </a>
  665.         </b:includable>
  666.                     <b:includable id='post' var='post'>
  667.   <div class='post'>
  668.     <b:include data='post' name='postMeta'/>
  669.     <b:include data='post' name='postTitle'/>
  670.     <b:include name='headerByline'/>
  671.     <b:if cond='data:view.isSingleItem'>
  672.       <b:include data='post' name='postBody'/>
  673.     <b:else/>
  674.       <b:include data='post' name='postBodySnippet'/>
  675.       <b:include data='post' name='postJumpLink'/>
  676.     </b:if>
  677.     <b:include data='post' name='postFooter'/>
  678.   </div>
  679. </b:includable>
  680.                     <b:includable id='postBody' var='post'>
  681.   <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  682.   <div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>
  683.     <data:post.body/>
  684.   </div>
  685. </b:includable>
  686.                     <b:includable id='postBodySnippet' var='post'>
  687.           <div class='container post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>
  688.  
  689.             <b:if cond='data:post.featuredImage'>
  690.               <div class='snippet-thumbnail'>
  691.                 <b:include data='{                                     image: data:post.featuredImage,                                     imageSizes: [32, 64, 128, 256],                                     imageRatio: &quot;1:1&quot;,                                     sourceSizes: &quot;(max-width: 800px) 20vw, 128px&quot;                                  }' name='responsiveImage'/>
  692.               </div>
  693.             </b:if>
  694.             <b:include cond='data:post' data='post' name='postSnippet'/>
  695.           </div>
  696.         </b:includable>
  697.                     <b:includable id='postCommentsAndAd' var='post'>
  698.   <article class='post-outer-container'>
  699.     <!-- Post title and body -->
  700.     <div class='post-outer'>
  701.       <b:include data='post' name='post'/>
  702.     </div>
  703.  
  704.     <!-- Comments -->
  705.     <b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
  706.  
  707.     <!-- Show ad inside post container, after comments, if single item. -->
  708.     <b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>
  709.   </article>
  710.  
  711.   <!-- Show ad outside post container (between posts) for feed pages. -->
  712.   <b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>
  713. </b:includable>
  714.                     <b:includable id='postCommentsLink'>
  715.   <b:if cond='data:view.isMultipleItems'>
  716.     <span class='byline post-comment-link container'>
  717.       <b:include cond='data:post.commentSource != 1' name='commentsLink'/>
  718.     </span>
  719.   </b:if>
  720. </b:includable>
  721.                     <b:includable id='postFooter' var='post'>
  722.           <div class='post-bottom'>
  723.             <div class='post-footer float-container'>
  724.               <b:include name='footerBylines'/>
  725.               <b:include cond='data:widget.type == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/>
  726.             </div>
  727.             <b:if cond='data:view.isSingleItem'>
  728.                 <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom invisible&quot;, overridden: true }' name='maybeAddShareButtons'/>
  729.             <b:else/>
  730.               <b:include data='post' name='postFooterJumpLink'/>
  731.             </b:if>
  732.           </div>
  733.         </b:includable>
  734.                     <b:includable id='postFooterAuthorProfile' var='post'>
  735.   <b:if cond='data:post.author.aboutMe and data:view.isPost'>
  736.     <div class='author-profile'>
  737.       <b:if cond='data:post.author.authorPhoto.url'>
  738.         <img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
  739.         <div class='author-about'>
  740.           <b:include data='post' name='aboutPostAuthor'/>
  741.         </div>
  742.       <b:else/>
  743.         <b:include data='post' name='aboutPostAuthor'/>
  744.       </b:if>
  745.     </div>
  746.   </b:if>
  747. </b:includable>
  748.                     <b:includable id='postFooterJumpLink'>
  749.           <b:comment>Ripple, and show &#39;keep reading&#39; as the default.</b:comment>
  750.           <div class='jump-link flat-button ripple'>
  751.             <a expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
  752.               <data:blog.jumpLinkMessage/>
  753.             </a>
  754.           </div>
  755.         </b:includable>
  756.                     <b:includable id='postHeader' var='post'>
  757.   <b:include name='headerByline'/>
  758. </b:includable>
  759.                     <b:includable id='postJumpLink'>
  760.           <b:comment>Overridden, and migrated to postFooter. Called as postFooterJumpLink.</b:comment>
  761.         </b:includable>
  762.                     <b:includable id='postLabels'>
  763.           <b:comment>We don&#39;t display labels on the home page.</b:comment>
  764.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  765.             <b:include name='super.postLabels'/>
  766.           </b:if>
  767.         </b:includable>
  768.                     <b:includable id='postMeta' var='post'>
  769.   <b:include data='post' name='postMetadataJSON'/>
  770. </b:includable>
  771.                     <b:includable id='postPagination'>
  772.   <div class='blog-pager container' id='blog-pager'>
  773.     <b:include cond='data:newerPageUrl' name='previousPageLink'/>
  774.     <b:include cond='data:olderPageUrl' name='nextPageLink'/>
  775.     <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
  776.   </div>
  777. </b:includable>
  778.                     <b:includable id='postShareButtons' var='post'>
  779.           <b:comment>We call super.postShareButtons from the migrated positions.</b:comment>
  780.         </b:includable>
  781.                     <b:includable id='postTitle' var='post'>
  782.   <a expr:name='data:post.id'/>
  783.   <b:if cond='data:post.title != &quot;&quot;'>
  784.     <h3 class='post-title entry-title'>
  785.       <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
  786.         <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
  787.       <b:else/>
  788.         <data:post.title/>
  789.       </b:if>
  790.     </h3>
  791.   </b:if>
  792. </b:includable>
  793.                     <b:includable id='previousPageLink'><b:comment>Don&#39;t show</b:comment></b:includable>
  794.                     <b:includable id='snippetedPostByline'>
  795.           <b:include name='headerByline'/>
  796.         </b:includable>
  797.                     <b:includable id='threadedCommentForm' var='post'>
  798.   <div class='comment-form'>
  799.     <a name='comment-form'/>
  800.     <h4 id='comment-post-message'><data:messages.postAComment/></h4>
  801.     <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  802.       <p><data:this.messages.blogComment/></p>
  803.     </b:if>
  804.     <b:include data='post' name='commentFormIframeSrc'/>
  805.     <iframe allowtransparency='allowtransparency' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight ?: &quot;90px&quot;' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
  806.     <data:post.cmtfpIframe/>
  807.     <script type='text/javascript'>
  808.       BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
  809.     </script>
  810.   </div>
  811. </b:includable>
  812.                     <b:includable id='threadedCommentJs' var='post'>
  813.   <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
  814.   <b:template-script inline='true' name='threaded_comments'/>
  815.   <script type='text/javascript'>
  816.     blogger.widgets.blog.initThreadedComments(
  817.         <data:post.commentJso/>,
  818.         <data:post.commentMsgs/>,
  819.         <data:post.commentConfig/>);
  820.   </script>
  821. </b:includable>
  822.                     <b:includable id='threadedComments' var='post'>
  823.   <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  824.     <a name='comments'/>
  825.  
  826.     <b:include name='commentsTitle'/>
  827.  
  828.     <div class='comments-content'>
  829.       <b:if cond='data:post.embedCommentForm'>
  830.         <b:include data='post' name='threadedCommentJs'/>
  831.       </b:if>
  832.       <div id='comment-holder'>
  833.          <data:post.commentHtml/>
  834.       </div>
  835.     </div>
  836.  
  837.     <p class='comment-footer'>
  838.       <b:if cond='data:post.allowNewComments'>
  839.         <b:include data='post' name='threadedCommentForm'/>
  840.       <b:else/>
  841.         <data:post.noNewCommentsText/>
  842.       </b:if>
  843.     </p>
  844.  
  845.     <b:if cond='data:showCmtPopup'>
  846.       <div id='comment-popup'>
  847.         <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  848.         </iframe>
  849.       </div>
  850.     </b:if>
  851.   </section>
  852. </b:includable>
  853.                   </b:widget>
  854.                   <b:widget cond='data:view.isSingleItem and data:posts any (p =&gt; p.id != data:view.postId)' id='PopularPosts1' locked='true' title='' type='PopularPosts' visible='false'>
  855.                     <b:widget-settings>
  856.                       <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
  857.                       <b:widget-setting name='showThumbnails'>false</b:widget-setting>
  858.                       <b:widget-setting name='showSnippets'>false</b:widget-setting>
  859.                       <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
  860.                     </b:widget-settings>
  861.                     <b:includable id='main' var='this'>
  862.           <b:comment>Default the title to &#39;Popular posts from this blog&#39;.</b:comment>
  863.           <b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
  864.             <b:include name='super.main'/>
  865.           </b:with>
  866.         </b:includable>
  867.                     <b:includable id='commentsLink'>
  868.           <a class='comment-link' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  869.             <b:include data='{ iconClass: &quot;touch-icon&quot; }' name='commentIcon'/>
  870.             <span class='num_comments'>
  871.               <b:if cond='data:post.numberOfComments &gt; 0'>
  872.                 <b:message name='messages.numberOfComments'>
  873.                   <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  874.                 </b:message>
  875.               <b:else/>
  876.                 <data:messages.postAComment/>
  877.               </b:if>
  878.             </span>
  879.           </a>
  880.         </b:includable>
  881.                     <b:includable id='postFooter' var='post'>
  882.           <div class='post-bottom'>
  883.             <div class='post-footer float-container'>
  884.               <b:include name='footerBylines'/>
  885.               <b:include cond='data:widget.type == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/>
  886.             </div>
  887.             <b:if cond='data:view.isSingleItem'>
  888.                 <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom invisible&quot;, overridden: true }' name='maybeAddShareButtons'/>
  889.             <b:else/>
  890.               <b:include data='post' name='postFooterJumpLink'/>
  891.             </b:if>
  892.           </div>
  893.         </b:includable>
  894.                     <b:includable id='postFooterJumpLink'>
  895.           <b:comment>Ripple, and show &#39;keep reading&#39; as the default.</b:comment>
  896.           <div class='jump-link flat-button ripple'>
  897.             <a expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
  898.               <data:blog.jumpLinkMessage/>
  899.             </a>
  900.           </div>
  901.         </b:includable>
  902.                     <b:includable id='postJumpLink'>
  903.           <b:comment>Overridden, and migrated to postFooter. Called as postFooterJumpLink.</b:comment>
  904.         </b:includable>
  905.                     <b:includable id='postLabels'>
  906.           <b:comment>We don&#39;t display labels on the home page.</b:comment>
  907.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  908.             <b:include name='super.postLabels'/>
  909.           </b:if>
  910.         </b:includable>
  911.                     <b:includable id='postShareButtons' var='post'>
  912.           <b:comment>We call super.postShareButtons from the migrated positions.</b:comment>
  913.         </b:includable>
  914.                     <b:includable id='snippetedPostByline'>
  915.           <b:include name='headerByline'/>
  916.         </b:includable>
  917.                     <b:includable id='snippetedPostContent'>
  918.           <b:comment>Add a &#39;keep reading&#39; link to the item-content.</b:comment>
  919.           <b:include name='snippetedPostTitle'/>
  920.           <b:include name='snippetedPostByline'/>
  921.           <div class='item-content float-container'>
  922.             <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='snippetedPostThumbnail'/>
  923.             <b:if cond='data:this.postDisplay.showSnippet'>
  924.               <b:with value='&quot;popular-posts&quot;' var='snippetPrefix'>
  925.                 <b:include cond='data:post' data='post' name='postSnippet'/>
  926.               </b:with>
  927.             </b:if>
  928.             <b:include data='post' name='postFooterJumpLink'/>
  929.           </div>
  930.         </b:includable>
  931.                   </b:widget>
  932.                 </b:section>
  933.               </main>
  934.             </div>
  935.             <b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>
  936.               <b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'>
  937.                 <b:widget-settings>
  938.                   <b:widget-setting name='copyright'/>
  939.                 </b:widget-settings>
  940.                 <b:includable id='main' var='this'>
  941.   <div class='widget-content'>
  942.     <div class='blogger'>
  943.       <a expr:href='data:bloggerUrl' rel='nofollow'>
  944.         <b:include name='flatBloggerIcon'/>
  945.         <b:message name='messages.poweredByBlogger'/>
  946.       </a>
  947.     </div>
  948.  
  949.     <b:if cond='data:imageAuthor'>
  950.       <div class='image-attribution'>
  951.         <b:if cond='data:imageAuthor.url'>
  952.           <b:message name='messages.templateImagesByLink'>
  953.             <b:param expr:value='data:imageAuthor.url'/>
  954.             <b:param expr:value='data:imageAuthor.name'/>
  955.           </b:message>
  956.         <b:else/>
  957.           <b:message name='messages.templateImagesBy'>
  958.             <b:param expr:value='data:imageAuthor.name'/>
  959.           </b:message>
  960.         </b:if>
  961.       </div>
  962.     </b:if>
  963.  
  964.     <b:if cond='data:copyright != &quot;&quot;'>
  965.       <div class='copyright'><data:copyright/></div>
  966.     </b:if>
  967.   </div>
  968. </b:includable>
  969.               </b:widget>
  970.               <b:widget id='ReportAbuse1' locked='true' title='' type='ReportAbuse' visible='false'>
  971.                 <b:includable id='main'>
  972.   <b:include name='reportAbuse'/>
  973. </b:includable>
  974.               </b:widget>
  975.             </b:section>
  976.           </div>
  977.         </div>
  978.       </b:with>
  979.     </div>
  980.     <aside class='sidebar-container container sidebar-invisible' role='complementary'>
  981.       <b:class cond='data:widgets any w =&gt; w.sectionId == &quot;sidebar_top&quot;' name='show-sidebar-top'/>
  982.       <div class='navigation'>
  983.         <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple sidebar-back&quot; }' name='backArrowIcon'/>
  984.       </div>
  985.       <div class='sidebar_top_wrapper'>
  986.         <b:class cond='data:widgets none w =&gt; w.sectionId == &quot;sidebar_top&quot;' name='no-items'/>
  987.         <b:section class='sidebar_top' id='sidebar_top' name='Sidebar (Top)'>
  988.           <b:widget id='Profile1' locked='true' title='自己紹介' type='Profile' visible='false'>
  989.             <b:widget-settings>
  990.               <b:widget-setting name='showaboutme'>false</b:widget-setting>
  991.               <b:widget-setting name='showlocation'>false</b:widget-setting>
  992.             </b:widget-settings>
  993.             <b:includable id='main' var='this'>
  994.           <div class='wrapper'>
  995.             <b:class cond='!data:this.team' name='solo'/>
  996.             <b:comment>No title for single profiles. Default to &#39;Blog authors&#39; for team.</b:comment>
  997.             <b:with value='data:messages.blogAuthors' var='defaultTitle'>
  998.               <b:include cond='data:this.team' name='widget-title'/>
  999.             </b:with>
  1000.             <b:include name='content'/>
  1001.           </div>
  1002.         </b:includable>
  1003.             <b:includable id='authorProfileImage'>
  1004.   <img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:authorPhoto.height' expr:src='data:authorPhoto.image' expr:width='data:authorPhoto.width'/>
  1005. </b:includable>
  1006.             <b:includable id='content'>
  1007.   <b:if cond='data:team'>
  1008.     <div class='widget-content team'>
  1009.       <b:include name='teamProfile'/>
  1010.     </div>
  1011.   <b:else/>
  1012.     <div class='widget-content individual'>
  1013.       <b:include name='userProfile'/>
  1014.     </div>
  1015.   </b:if>
  1016. </b:includable>
  1017.             <b:includable id='defaultProfileImage'>
  1018.           <div class='default-avatar-wrapper'>
  1019.             <b:include data='{ iconClass: &quot;avatar-icon&quot; }' name='defaultAvatarIcon'/>
  1020.           </div>
  1021.         </b:includable>
  1022.             <b:includable id='profileImage'>
  1023.   <b:if cond='data:authorPhoto.image'>
  1024.     <b:include name='authorProfileImage'/>
  1025.   <b:else/>
  1026.     <b:include name='defaultProfileImage'/>
  1027.   </b:if>
  1028. </b:includable>
  1029.             <b:includable id='teamProfile'>
  1030.   <ul>
  1031.     <b:loop values='data:authors' var='author'>
  1032.       <li>
  1033.         <div class='team-member'>
  1034.           <b:include data='author' name='teamProfileLink'/>
  1035.         </div>
  1036.       </li>
  1037.     </b:loop>
  1038.   </ul>
  1039. </b:includable>
  1040.             <b:includable id='teamProfileLink'>
  1041.   <a class='profile-link g-profile' expr:href='data:userUrl' rel='nofollow'>
  1042.     <b:include name='profileImage'/>
  1043.     <span class='profile-name'><data:display-name/></span>
  1044.   </a>
  1045. </b:includable>
  1046.             <b:includable id='userGoogleProfile'>
  1047.   <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
  1048. </b:includable>
  1049.             <b:includable id='userLocation'>
  1050.   <dd class='profile-data location'><data:location/></dd>
  1051. </b:includable>
  1052.             <b:includable id='userProfile'>
  1053.   <b:include name='userProfileImage'/>
  1054.   <b:include name='userProfileInfo'/>
  1055. </b:includable>
  1056.             <b:includable id='userProfileData'>
  1057.   <dt class='profile-data'>
  1058.     <b:include name='userProfileLink'/>
  1059.     <b:include cond='data:hasgoogleprofile' name='userGoogleProfile'/>
  1060.   </dt>
  1061. </b:includable>
  1062.             <b:includable id='userProfileImage'>
  1063.   <a expr:href='data:userUrl' rel='nofollow'>
  1064.     <b:include name='profileImage'/>
  1065.   </a>
  1066. </b:includable>
  1067.             <b:includable id='userProfileInfo'>
  1068.   <div class='profile-info'>
  1069.     <dl class='profile-datablock'>
  1070.       <b:class cond='data:showlocation and data:location != &quot;&quot;' name='has-location'/>
  1071.  
  1072.       <b:include name='userProfileData'/>
  1073.       <b:include cond='data:showlocation and data:location != &quot;&quot;' name='userLocation'/>
  1074.       <b:include cond='data:aboutme != &quot;&quot;' name='userProfileText'/>
  1075.     </dl>
  1076.     <b:include name='viewProfileLink'/>
  1077.   </div>
  1078. </b:includable>
  1079.             <b:includable id='userProfileLink'>
  1080.   <a class='profile-link g-profile' expr:href='data:userUrl' rel='author nofollow'>
  1081.     <data:displayname/>
  1082.   </a>
  1083. </b:includable>
  1084.             <b:includable id='userProfileText'>
  1085.           <dd class='profile-textblock profile-snippet snippet-container r-snippet-container'>
  1086.             <div class='snippet-item r-snippetized'>
  1087.               <data:aboutme/>
  1088.             </div>
  1089.             <div class='snippet-fade r-snippet-fade hidden'/>
  1090.           </dd>
  1091.         </b:includable>
  1092.             <b:includable id='viewProfileLink'>
  1093.           <b:comment>Change link to &#39;visit profile&#39;</b:comment>
  1094.           <a class='profile-link visit-profile pill-button' expr:href='data:userUrl' rel='author'>
  1095.             <data:messages.visitProfile/>
  1096.           </a>
  1097.         </b:includable>
  1098.           </b:widget>
  1099.         </b:section>
  1100.       </div>
  1101.       <b:section class='sidebar_bottom' id='sidebar_bottom' name='Sidebar (Bottom)' preferred='yes'/>
  1102.     </aside>
  1103.  
  1104.     <b:template-script async='true' name='strm' version='1.0.0'/>
  1105.   </body>

解説

2845：    <b:class cond='data:view.isPreview' name='preview'/>
2846：    <b:class cond='data:view.isSingleItem' name='item-view'/>
2847：    <b:class cond='data:view.isArchive' name='archive-view'/>
2848：    <b:class cond='data:view.isLabelSearch' name='label-view'/>
2849：    <b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>
data:〇〇〇で〇〇〇からデータを出力
view.×××は×××のビュー
・isPreview：プレビュー
・isSingleItem：投稿などの単一ページ
・isArchive：アーカイブ
・isLabelSearch：ラベル検索
・isSearch：検索

2852：    <b:include name='skipNavigation'/>
b:includeはb:includable内に入力されたコンテンツを出力する

2860：      <b:with value='data:widgets.AdSense any (w =&gt; w.sectionId == &quot;ads&quot;)' var='hasVerticalAds'>
b:withを使用して、valueで算出された値をvarに保存する

2870：                <b:if cond='data:view.isSingleItem'>
2871：                  <a class='return_link' expr:href='data:blog.homepageUrl'>
2872：                    <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
2873：                  </a>
2874：                <b:else/>
2875：                  <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
2876：                </b:if>
b:if内の条件が
・真ならば直下のコンテンツを表示
・偽ならばb:else直下のコンテンツを表示

2886：                    <b:section id='search_top' name='Search (Top)' showaddelement='false'>
2887：                      <b:widget id='BlogSearch1' locked='true' title='このブログを検索' type='BlogSearch' visible='false'>
(中略)
2910：                      </b:widget>
2911：                    </b:section>
bodyはいくつかのb:sectionとその中にあるb:widgetで構成される
b:sectionのid
・search_top
・header
・subscription
・page_list_top
・ads
・page_body
・footer
・sidebar_top
・sidebar_bottom