API tools faq
paste
arabtion

Untitled

arabtion
Feb 14th, 2019
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 123.15 KB | None | 0 0
raw download clone embed print report
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html>
  3. <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='vegeclub.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' 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'>
  4. <head>
  5. <meta content='width=device-width, initial-scale=1' name='viewport'/>
  6. <title><data:view.title.escaped/></title>
  7. <b:include data='blog' name='all-head-content'/>
  8.  
  9. <b:skin version='1.3.0'><![CDATA[/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
  10. /*
  11.  
  12. <!-- Variable definitions -->
  13.  
  14. <Variable name="keycolor" description="Main Color" type="color" default="#8abc0d" value="#729c0b"/>
  15. <Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" />
  16. <Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" />
  17.  
  18. <Variable name="generalFont" description="General fallback font" type="font" default="400 16px Ubuntu, sans-serif" hideEditor="true" value="400 16px Ubuntu, sans-serif"/>
  19. <Variable name="generalFontLato" description="General fallback font, Lato" type="font" default="400 16px Lato, sans-serif" hideEditor="true" value="400 16px Lato, sans-serif"/>
  20. <Variable name="blogTitleFont" description="Main blog title font" type="font" default="500 62px Ubuntu, sans-serif" hideEditor="true" value="500 62px Ubuntu, sans-serif"/>
  21. <Variable name="blogTitleFontLato" description="Main blog title font, Lato" type="font" default="700 62px Lato, sans-serif" hideEditor="true" value="700 62px Lato, sans-serif"/>
  22. <Variable name="blogTitleFontMerriweather" description="Main blog title font, Merriweather" type="font" default="700 62px Merriweather, Georgia, serif" hideEditor="true" value="700 62px Merriweather, Georgia, serif"/>
  23. <Variable name="blogCollapsedTitleFont" description="Collapsed blog title font" type="font" default="500 36px Ubuntu, sans-serif" hideEditor="true" value="500 36px Ubuntu, sans-serif"/>
  24. <Variable name="blogCollapsedTitleFontLato" description="Collapsed blog title font, Lato" type="font" default="700 36px Lato, sans-serif" hideEditor="true" value="700 36px Lato, sans-serif"/>
  25. <Variable name="blogCollapsedTitleFontMerriweather" description="Collapsed blog title font, Merriweather" type="font" default="700 36px Merriweather, Georgia, serif" hideEditor="true" value="700 36px Merriweather, Georgia, serif"/>
  26. <Variable name="blogDescriptionFont" description="Main blog description font" type="font" default="italic 300 14px Merriweather, Georgia, serif" hideEditor="true" value="italic 300 14px Merriweather, Georgia, serif"/>
  27. <Variable name="headerItemFont" description="Header item font" type="font" default="700 12px Ubuntu, sans-serif" hideEditor="true" value="700 12px Ubuntu, sans-serif"/>
  28. <Variable name="headerItemFontLato" description="Header item font, Lato" type="font" default="700 12px Lato, sans-serif" hideEditor="true" value="700 12px Lato, sans-serif"/>
  29. <Variable name="textButtonFont" description="Text button font" type="font" default="500 12px Ubuntu, sans-serif" hideEditor="true" value="500 12px Ubuntu, sans-serif"/>
  30. <Variable name="textButtonFontLato" description="Text button font, Lato" type="font" default="500 12px Lato, sans-serif" hideEditor="true" value="500 12px Lato, sans-serif"/>
  31. <Variable name="searchFont" description="Search font" type="font" default="400 16px Merriweather, Georgia, serif" hideEditor="true" value="400 16px Merriweather, Georgia, serif"/>
  32. <Variable name="searchPlaceholderFont" description="Search placeholder" type="font" default="italic 400 15px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 15px Merriweather, Georgia, serif"/>
  33. <Variable name="sidebarTitleFont" description="Sidebar title font" type="font" default="500 16px Ubuntu, sans-serif" hideEditor="true" value="500 16px Ubuntu, sans-serif"/>
  34. <Variable name="sidebarTitleFontLato" description="Sidebar title font, Lato" type="font" default="500 16px Lato, sans-serif" hideEditor="true" value="500 16px Lato, sans-serif"/>
  35. <Variable name="sidebarTitleFontMerriweather" description="Sidebar title font, Merriweather" type="font" default="700 16px Merriweather, Georgia, sans-serif" hideEditor="true" value="700 16px Merriweather, Georgia, sans-serif"/>
  36. <Variable name="sidebarLinkFont" description="Sidebar link font" type="font" default="400 14px Merriweather, Georgia, serif" hideEditor="true" value="400 14px Merriweather, Georgia, serif"/>
  37. <Variable name="sidebarPostTitleFont" description="Sidebar post title font" type="font" default="500 14px Ubuntu, sans-serif" hideEditor="true" value="500 14px Ubuntu, sans-serif"/>
  38. <Variable name="sidebarPostTitleFontLato" description="Sidebar post title font, Lato" type="font" default="500 14px Lato, sans-serif" hideEditor="true" value="500 14px Lato, sans-serif"/>
  39. <Variable name="sidebarPostFont" description="Sidebar post font" type="font" default="italic 400 14px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 14px Merriweather, Georgia, serif"/>
  40. <Variable name="titleFont" description="Title font" type="font" default="500 24px Ubuntu, sans-serif" hideEditor="true" value="500 24px Ubuntu, sans-serif"/>
  41. <Variable name="titleFontLato" description="Title font, Lato" type="font" default="900 24px Lato, sans-serif" hideEditor="true" value="900 24px Lato, sans-serif"/>
  42. <Variable name="titleFontMerriweather" description="Title font, Merriweather" type="font" default="900 24px Merriweather, Georgia, serif" hideEditor="true" value="900 24px Merriweather, Georgia, serif"/>
  43. <Variable name="bylineFont" description="Byline font" type="font" default="italic 400 12px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 12px Merriweather, Georgia, serif"/>
  44. <Variable name="postFilterFont" description="Filter font" type="font" default="italic 400 18px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 18px Merriweather, Georgia, serif"/>
  45. <Variable name="labelsFont" description="Labels font" type="font" default="500 10.5px Ubuntu, sans-serif" hideEditor="true" value="500 10.5px Ubuntu, sans-serif"/>
  46. <Variable name="labelsFontLato" description="Labels font, Lato" type="font" default="500 10px Lato, sans-serif" hideEditor="true" value="500 10px Lato, sans-serif"/>
  47. <Variable name="sharingFont" description="Sharing font" type="font" default="400 14px Ubuntu, sans-serif" hideEditor="true" value="400 14px Ubuntu, sans-serif"/>
  48. <Variable name="sharingFontLato" description="Sharing font, Lato" type="font" default="400 14px Lato, sans-serif" hideEditor="true" value="400 14px Lato, sans-serif"/>
  49. <Variable name="bodyFont" description="Post body font" type="font" default="400 16px Merriweather, Georgia, serif" hideEditor="true" value="400 16px Merriweather, Georgia, serif"/>
  50. <Variable name="bodyLineHeight" description="Line height of body text" type="length" default="32px" hideEditor="true" value="32px"/>
  51. <Variable name="bodyFontSmall" description="Post body font (small)" type="font" default="400 14px Merriweather, Georgia, serif" hideEditor="true" value="400 14px Merriweather, Georgia, serif"/>
  52. <Variable name="bodyLineHeightSmall" description="Line height of body text (small)" type="length" default="24px" hideEditor="true" value="24px"/>
  53.  
  54. <Variable name="white" description="White" type="color" default="#fff" hideEditor="true" value="#ffffff"/>
  55. <Variable name="black50" description="Black 50" type="color" default="#fafafa" hideEditor="true" value="#fafafa"/>
  56. <Variable name="lightGray" description="Light gray" type="color" default="#f7f7f7" hideEditor="true" value="#f7f7f7"/>
  57. <Variable name="lightishGray" description="Lightish gray" type="color" default="#efefef" hideEditor="true" value="#efefef"/>
  58. <Variable name="black600" description="Black 600" type="color" default="#757575" hideEditor="true" value="#757575"/>
  59. <Variable name="darkishGray" description="Darkish gray" type="color" default="#535353" hideEditor="true" value="#535353"/>
  60. <Variable name="black800" description="Black 800 " type="color" default="#424242" hideEditor="true" value="#424242"/>
  61. <Variable name="black900" description="Black 900" type="color" default="#212121" hideEditor="true" value="#212121"/>
  62. <Variable name="offBlack" description="Off black" type="color" default="#1f1f1f" hideEditor="true" value="#1f1f1f"/>
  63. <Variable name="black" description="Black" type="color" default="#000" hideEditor="true" value="#000000"/>
  64.  
  65. <Variable name="vegeGreen" description="Vege green keycolor" type="color" default="#729c0b" hideEditor="true" value="#729c0b"/>
  66. <Variable name="lime" description="Lime keycolor" type="color" default="#f4ff81" hideEditor="true" value="#f4ff81"/>
  67. <Variable name="blueGray" description="Blue-gray color" type="color" default="#607d8b" hideEditor="true" value="#607d8b"/>
  68. <Variable name="blueGrayDark" description="Blue-gray color (darkened)" type="color" default="#263238" hideEditor="true" value="#263238"/>
  69. <Variable name="beige" description="Beige-blue background color" type="color" default="#eed7c2" hideEditor="true" value="#eed7c2"/>
  70. <Variable name="beigeDark" description="Beige-blue accent color" type="color" default="#da7d5e" hideEditor="true" value="#da7d5e"/>
  71. <Variable name="beigeBlue" description="Beige-blue keycolor" type="color" default="#374561" hideEditor="true" value="#374561"/>
  72. <Variable name="aqua" description="Aqua keycolor" type="color" default="#18ffff" hideEditor="true" value="#18ffff"/>
  73. <Variable name="peach" description="Peach background" type="color" default="#f59b82" hideEditor="true" value="#f59b82"/>
  74. <Variable name="peachBright" description="Peach keycolor" type="color" default="#ee582e" hideEditor="true" value="#ee582e"/>
  75. <Variable name="peachDark" description="Peach background (darkened)" type="color" default="#e8937b" hideEditor="true" value="#e8937b"/>
  76.  
  77. <Variable name="transpDark03" description="Transparent background (3%)" type="color" default="rgba(0, 0, 0, 0.03)" hideEditor="true" value="rgba(0, 0, 0, 0.03)"/>
  78. <Variable name="transpDark10" description="Transparent background (10%)" type="color" default="rgba(0, 0, 0, 0.1)" hideEditor="true" value="rgba(0, 0, 0, 0.1)"/>
  79. <Variable name="transpDark30" description="Transparent background (30%)" type="color" default="rgba(0, 0, 0, 0.3)" hideEditor="true" value="rgba(0, 0, 0, 0.3)"/>
  80. <Variable name="transpLight" description="Transparent background (light)" type="color" default="rgba(255, 255, 255, 0.3)" hideEditor="true" value="rgba(255, 255, 255, 0.3)"/>
  81. <Variable name="transpBlack" description="Transparent background (black)" type="color" default="rgba(0, 0, 0, 0.87)" hideEditor="true" value="rgba(0, 0, 0, 0.87)"/>
  82.  
  83. <Group description="Body">
  84. <Variable name="body.background.color" description="Body background color" type="color" default="#f7f7f7" value="#f7f7f7"/>
  85. <Variable name="body.background" description="Background" type="background" color="#f7f7f7" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
  86. <Variable name="body.text.font" description="Font" type="font" default="$(generalFont)" value="400 16px Ubuntu, sans-serif"/>
  87. <Variable name="body.text.color" description="Color" type="color" default="#000000" value="#000000"/>
  88. <Variable name="body.link.color" description="Link color" type="color" default="$(keycolor)" value="#729c0b"/>
  89. <Variable name="body.link.visited.color" description="Visited Link Color" type="color" default="$(body.link.color)" value="#729c0b"/>
  90. <Variable name="body.link.hover.color" description="Link Hover Color" type="color" default="$(body.link.color)" value="#729c0b"/>
  91. <Variable name="body.button.font" description="Button font" type="font" default="$(textButtonFont)" value="500 12px Ubuntu, sans-serif"/>
  92. <Variable name="body.button.color" description="Button color" type="color" default="$(keycolor)" value="#729c0b"/>
  93. </Group>
  94.  
  95. <Group description="Blog title" selector="div.widget.Header">
  96. <Variable name="blog.title.font" description="Title Font" type="font" default="$(blogTitleFont)" value="500 62px Ubuntu, sans-serif"/>
  97. <Variable name="blog.collapsed.title.font" description="Collapsed title font" type="font" default="$(blogCollapsedTitleFont)" value="500 36px Ubuntu, sans-serif"/>
  98. <Variable name="blog.collapsed.title.color" description="Collapsed title color" type="color" default="$(blog.title.color)" value="#1f1f1f"/>
  99. <Variable name="blog.title.color" description="Title color" type="color" default="#1f1f1f" value="#1f1f1f"/>
  100. <Variable name="header.background.color" description="Header bar color" type="color" default="#efefef" value="#efefef"/>
  101. <Variable name="header.icons.color" description="Header icons color" type="color" default="$(keycolor)" value="#729c0b"/>
  102. <Variable name="header.separator.color" description="Header separator color" type="color" default="rgba(0, 0, 0, 0.3)" value="rgba(0, 0, 0, 0.3)"/>
  103. <Variable name="blog.description.font" description="Description font" type="font" default="$(blogDescriptionFont)" value="italic 300 14px Merriweather, Georgia, serif"/>
  104. <Variable name="blog.description.color" description="Description Color" type="color" default="#1f1f1f" value="#1f1f1f"/>
  105. </Group>
  106.  
  107. <Group description="Tabs" selector="div.widget.PageList">
  108. <Variable name="tabs.text.font" description="Font" type="font" default="$(headerItemFont)" value="700 12px Ubuntu, sans-serif"/>
  109. <Variable name="tabs.text.color" description="Text color" type="color" default="$(keycolor)" value="#729c0b"/>
  110. <Variable name="tabs.selected.color" description="Selected color" type="color" default="$(tabs.text.color)" value="#729c0b"/>
  111. <Variable name="tabs.background.color" description="Tabs background color" type="color" default="#fff" value="#ffffff"/>
  112. </Group>
  113.  
  114. <Group description="Posts" selector="div.widget.Blog">
  115. <Variable name="posts.background.color" description="Post background color" type="color" default="#fff" value="#ffffff"/>
  116. <Variable name="posts.title.color" description="Post title color" type="color" default="#212121" value="#212121"/>
  117. <Variable name="posts.title.font" description="Post title font" type="font" default="$(titleFont)" value="500 24px Ubuntu, sans-serif"/>
  118. <Variable name="posts.byline.color" description="Post byline color" type="color" default="#757575" value="#757575"/>
  119. <Variable name="posts.byline.font" description="Post byline font" type="font" default="$(bylineFont)" value="italic 400 12px Merriweather, Georgia, serif"/>
  120. <Variable name="posts.text.font" description="Post text font" type="font" default="$(bodyFont)" value="400 16px Merriweather, Georgia, serif"/>
  121. <Variable name="posts.text.color" description="Post text color" type="color" default="$(body.text.color)" value="#000000"/>
  122. <Variable name="posts.text.lineHeight" description="Post text line height" min="10px" max="60px" type="length" default="$(bodyLineHeight)" value="32px"/>
  123. <Variable name="posts.snippet.text.font" description="Post snippet text font" type="font" default="$(bodyFontSmall)" value="400 14px Merriweather, Georgia, serif"/>
  124. <Variable name="posts.snippet.text.lineHeight" description="Post snippet text line height" min="10px" max="60px" type="length" default="$(bodyLineHeightSmall)" value="24px"/>
  125. <Variable name="posts.link.color" description="Post link color" type="color" default="$(body.link.color)" value="#729c0b"/>
  126. <Variable name="posts.icons.color" description="Post icons color" type="color" default="$(posts.link.color)" value="#729c0b"/>
  127. <Variable name="posts.border.radius" description="Post border radius" type="length" default="0px" min="0px" max="32px" value="0px"/>
  128. <Variable name="postFilter.background.color" description="Filter background color" type="color" default="$(keycolor)" value="#729c0b"/>
  129. <Variable name="postFilter.message.font" description="Filter text font" type="font" default="$(postFilterFont)" value="italic 400 18px Merriweather, Georgia, serif"/>
  130. <Variable name="postFilter.message.color" description="Filter text color" type="color" default="$(posts.background.color)" value="#ffffff"/>
  131. <Variable name="postFilter.message.link.color" description="Filter keyword color" type="color" default="$(postFilter.message.color)" value="#ffffff"/>
  132. <Variable name="labels.font" description="Label font size" type="font" default="$(labelsFont)" value="500 10.5px Ubuntu, sans-serif"/>
  133. </Group>
  134.  
  135. <Group description="Sharing" selector=".sharing">
  136. <Variable name="sharing.background.color" description="Sharing background color" type="color" default="$(posts.background.color)" value="#ffffff"/>
  137. <Variable name="sharing.text.font" description="Sharing text font" type="font" default="$(sharingFont)" value="400 14px Ubuntu, sans-serif"/>
  138. <Variable name="sharing.text.color" description="Sharing text color" type="color" default="$(posts.text.color)" value="#000000"/>
  139. <Variable name="sharing.icons.color" description="Sharing icons color" type="color" default="$(posts.icons.color)" value="#729c0b"/>
  140. </Group>
  141.  
  142. <Group description="Blockquotes">
  143. <Variable name="blockquote.color" description="Blockquote color" type="color" default="#424242" value="#424242"/>
  144. <Variable name="blockquote.font" description="Blockquote font" type="font" default="$(body.text.font)" value="400 16px Ubuntu, sans-serif"/>
  145. </Group>
  146.  
  147. <Group description="Pictures">
  148. <Variable name="picture.caption.text.color" description="Caption text color" type="color" default="#424242" value="#424242"/>
  149. <Variable name="picture.caption.font" description="Caption font" type="font" default="$(body.text.font)" value="400 16px Ubuntu, sans-serif"/>
  150. </Group>
  151.  
  152. <Group description="Sidebar" selector="div.sidebar_feed">
  153. <Variable name="sidebar.background.color" description="Background color" type="color" default="$(body.background.color)" value="#f7f7f7"/>
  154. <Variable name="sidebar.separator.color" description="Separator color" type="color" default="rgba(0, 0, 0, 0.12)" value="rgba(0, 0, 0, 0.12)"/>
  155. <Variable name="widget.title.font" description="Gadget title font" type="font" default="$(sidebarTitleFont)" value="500 16px Ubuntu, sans-serif"/>
  156. <Variable name="widget.title.color" description="Gadget title color" type="color" default="$(body.text.color)" value="#000000"/>
  157. <Variable name="sidebar.icons.color" description="Sidebar icons color" type="color" default="$(keycolor)" value="#729c0b"/>
  158. <Variable name="sidebar.link.font" description="Link font" type="font" default="$(sidebarLinkFont)" value="400 14px Merriweather, Georgia, serif"/>
  159. <Variable name="sidebar.link.color" description="Link color" type="color" default="$(keycolor)" value="#729c0b"/>
  160. <Variable name="sidebar.posts.title.font" description="Post title font" type="font" default="$(sidebarPostTitleFont)" value="500 14px Ubuntu, sans-serif"/>
  161. <Variable name="sidebar.posts.text.font" description="Post text font" type="font" default="$(sidebarPostFont)" value="italic 400 14px Merriweather, Georgia, serif"/>
  162. <Variable name="sidebar.posts.text.color" description="Post text color" type="color" default="#535353" value="#535353"/>
  163. </Group>
  164.  
  165. <Group description="Search bar" selector="div.search">
  166. <Variable name="search.text.color" description="Text color" type="color" default="$(offBlack)" value="#1f1f1f"/>
  167. <Variable name="search.icon.color" description="Icon color" type="color" default="rgba(0, 0, 0, 0.38)" value="rgba(0, 0, 0, 0.38)"/>
  168. <Variable name="search.font" description="Text font" type="font" default="$(searchFont)" value="400 16px Merriweather, Georgia, serif"/>
  169. <Variable name="search.placeholder.font" description="Placeholder text font" type="font" default="$(searchPlaceholderFont)" value="italic 400 15px Merriweather, Georgia, serif"/>
  170. <Variable name="search.placeholder.color" description="Placeholder text color" type="font" default="rgba(0, 0, 0, 0.38)" value="rgba(0, 0, 0, 0.38)"/>
  171. <Variable name="search.background.color" description="Background color" type="color" default="rgba(0, 0, 0, 0.03)" value="rgba(0, 0, 0, 0.03)"/>
  172. </Group>
  173.  
  174. <Group description="Attribution" selector=".widget.Attribution">
  175. <Variable name="attribution.text.color" description="Attribution text color" type="color" default="$(body.text.color)" value="#000000"/>
  176. <Variable name="attribution.link.color" description="Attribution link color" type="color" default="$(body.link.color)" value="#729c0b"/>
  177. <Variable name="attribution.icon.color" description="Attribution icon color" type="color" default="#757575" hideEditor="true" value="#757575"/>
  178. </Group>
  179.  
  180. <Group description="Widths">
  181. <Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="280px" value="280px"/>
  182. <Variable name="posts.width.stream" description="Post width (stream)" type="length" min="100px" max="1000px" default="385px" value="385px"/>
  183. </Group>
  184. */
  185.  
  186. /*!************************************************
  187. * Blogger Template Style
  188. * Name: Emporio
  189. **************************************************/
  190. body{
  191. overflow-wrap:break-word;
  192. word-break:break-word;
  193. word-wrap:break-word
  194. }
  195. .hidden{
  196. display:none
  197. }
  198. .invisible{
  199. visibility:hidden
  200. }
  201. .container::after,.float-container::after{
  202. clear:both;
  203. content:'';
  204. display:table
  205. }
  206. .clearboth{
  207. clear:both
  208. }
  209. #comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit{
  210. background:0 0;
  211. border:0;
  212. box-shadow:none;
  213. color:$(body.link.color);
  214. cursor:pointer;
  215. font-size:14px;
  216. font-weight:700;
  217. outline:0;
  218. text-decoration:none;
  219. text-transform:uppercase;
  220. width:auto
  221. }
  222. .dim-overlay{
  223. background-color:rgba(0,0,0,.54);
  224. height:100vh;
  225. left:0;
  226. position:fixed;
  227. top:0;
  228. width:100%
  229. }
  230. #sharing-dim-overlay{
  231. background-color:transparent
  232. }
  233. input::-ms-clear{
  234. display:none
  235. }
  236. .blogger-logo,.svg-icon-24.blogger-logo{
  237. fill:#ff9800;
  238. opacity:1
  239. }
  240. .skip-navigation{
  241. background-color:#fff;
  242. box-sizing:border-box;
  243. color:#000;
  244. display:block;
  245. height:0;
  246. left:0;
  247. line-height:50px;
  248. overflow:hidden;
  249. padding-top:0;
  250. position:fixed;
  251. text-align:center;
  252. top:0;
  253. -webkit-transition:box-shadow .3s,height .3s,padding-top .3s;
  254. transition:box-shadow .3s,height .3s,padding-top .3s;
  255. width:100%;
  256. z-index:900
  257. }
  258. .skip-navigation:focus{
  259. 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);
  260. height:50px
  261. }
  262. #main{
  263. outline:0
  264. }
  265. .main-heading{
  266. position:absolute;
  267. clip:rect(1px,1px,1px,1px);
  268. padding:0;
  269. border:0;
  270. height:1px;
  271. width:1px;
  272. overflow:hidden
  273. }
  274. .Attribution{
  275. margin-top:1em;
  276. text-align:center
  277. }
  278. .Attribution .blogger img,.Attribution .blogger svg{
  279. vertical-align:bottom
  280. }
  281. .Attribution .blogger img{
  282. margin-$endSide:.5em
  283. }
  284. .Attribution div{
  285. line-height:24px;
  286. margin-top:.5em
  287. }
  288. .Attribution .copyright,.Attribution .image-attribution{
  289. font-size:.7em;
  290. margin-top:1.5em
  291. }
  292. .BLOG_mobile_video_class{
  293. display:none
  294. }
  295. .bg-photo{
  296. background-attachment:scroll!important
  297. }
  298. body .CSS_LIGHTBOX{
  299. z-index:900
  300. }
  301. .extendable .show-less,.extendable .show-more{
  302. border-color:$(body.link.color);
  303. color:$(body.link.color);
  304. margin-top:8px
  305. }
  306. .extendable .show-less.hidden,.extendable .show-more.hidden{
  307. display:none
  308. }
  309. .inline-ad{
  310. display:none;
  311. max-width:100%;
  312. overflow:hidden
  313. }
  314. .adsbygoogle{
  315. display:block
  316. }
  317. #cookieChoiceInfo{
  318. bottom:0;
  319. top:auto
  320. }
  321. iframe.b-hbp-video{
  322. border:0
  323. }
  324. .post-body img{
  325. max-width:100%
  326. }
  327. .post-body iframe{
  328. max-width:100%
  329. }
  330. .post-body a[imageanchor="1"]{
  331. display:inline-block
  332. }
  333. .byline{
  334. margin-$endSide:1em
  335. }
  336. .byline:last-child{
  337. margin-$endSide:0
  338. }
  339. .link-copied-dialog{
  340. max-width:520px;
  341. outline:0
  342. }
  343. .link-copied-dialog .modal-dialog-buttons{
  344. margin-top:8px
  345. }
  346. .link-copied-dialog .goog-buttonset-default{
  347. background:0 0;
  348. border:0
  349. }
  350. .link-copied-dialog .goog-buttonset-default:focus{
  351. outline:0
  352. }
  353. .paging-control-container{
  354. margin-bottom:16px
  355. }
  356. .paging-control-container .paging-control{
  357. display:inline-block
  358. }
  359. .paging-control-container .comment-range-text::after,.paging-control-container .paging-control{
  360. color:$(body.link.color)
  361. }
  362. .paging-control-container .comment-range-text,.paging-control-container .paging-control{
  363. margin-$endSide:8px
  364. }
  365. .paging-control-container .comment-range-text::after,.paging-control-container .paging-control::after{
  366. content:'\00B7';
  367. cursor:default;
  368. padding-$startSide:8px;
  369. pointer-events:none
  370. }
  371. .paging-control-container .comment-range-text:last-child::after,.paging-control-container .paging-control:last-child::after{
  372. content:none
  373. }
  374. .byline.reactions iframe{
  375. height:20px
  376. }
  377. .b-notification{
  378. color:#000;
  379. background-color:#fff;
  380. border-bottom:solid 1px #000;
  381. box-sizing:border-box;
  382. padding:16px 32px;
  383. text-align:center
  384. }
  385. .b-notification.visible{
  386. -webkit-transition:margin-top .3s cubic-bezier(.4,0,.2,1);
  387. transition:margin-top .3s cubic-bezier(.4,0,.2,1)
  388. }
  389. .b-notification.invisible{
  390. position:absolute
  391. }
  392. .b-notification-close{
  393. position:absolute;
  394. right:8px;
  395. top:8px
  396. }
  397. .no-posts-message{
  398. line-height:40px;
  399. text-align:center
  400. }
  401. @media screen and (max-width:745px){
  402. body.item-view .post-body a[imageanchor="1"][style*="float: left;"],body.item-view .post-body a[imageanchor="1"][style*="float: right;"]{
  403. float:none!important;
  404. clear:none!important
  405. }
  406. body.item-view .post-body a[imageanchor="1"] img{
  407. display:block;
  408. height:auto;
  409. margin:0 auto
  410. }
  411. body.item-view .post-body>.separator:first-child>a[imageanchor="1"]:first-child{
  412. margin-top:20px
  413. }
  414. .post-body a[imageanchor]{
  415. display:block
  416. }
  417. body.item-view .post-body a[imageanchor="1"]{
  418. margin-left:0!important;
  419. margin-right:0!important
  420. }
  421. body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"]{
  422. margin-top:16px
  423. }
  424. }
  425. .item-control{
  426. display:none
  427. }
  428. #comments{
  429. border-top:1px dashed rgba(0,0,0,.54);
  430. margin-top:20px;
  431. padding:20px
  432. }
  433. #comments .comment-thread ol{
  434. margin:0;
  435. padding-left:0;
  436. padding-$startSide:0
  437. }
  438. #comments .comment .comment-replybox-single,#comments .comment-thread .comment-replies{
  439. margin-left:60px
  440. }
  441. #comments .comment-thread .thread-count{
  442. display:none
  443. }
  444. #comments .comment{
  445. list-style-type:none;
  446. padding:0 0 30px;
  447. position:relative
  448. }
  449. #comments .comment .comment{
  450. padding-bottom:8px
  451. }
  452. .comment .avatar-image-container{
  453. position:absolute
  454. }
  455. .comment .avatar-image-container img{
  456. border-radius:50%
  457. }
  458. .avatar-image-container svg,.comment .avatar-image-container .avatar-icon{
  459. border-radius:50%;
  460. border:solid 1px $(posts.icons.color);
  461. box-sizing:border-box;
  462. fill:$(posts.icons.color);
  463. height:35px;
  464. margin:0;
  465. padding:7px;
  466. width:35px
  467. }
  468. .comment .comment-block{
  469. margin-top:10px;
  470. margin-$startSide:60px;
  471. padding-bottom:0
  472. }
  473. #comments .comment-author-header-wrapper{
  474. margin-left:40px
  475. }
  476. #comments .comment .thread-expanded .comment-block{
  477. padding-bottom:20px
  478. }
  479. #comments .comment .comment-header .user,#comments .comment .comment-header .user a{
  480. color:$(posts.title.color);
  481. font-style:normal;
  482. font-weight:700
  483. }
  484. #comments .comment .comment-actions{
  485. bottom:0;
  486. margin-bottom:15px;
  487. position:absolute
  488. }
  489. #comments .comment .comment-actions>*{
  490. margin-right:8px
  491. }
  492. #comments .comment .comment-header .datetime{
  493. bottom:0;
  494. color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),.54);
  495. display:inline-block;
  496. font-size:13px;
  497. font-style:italic;
  498. margin-$startSide:8px
  499. }
  500. #comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a{
  501. color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),.54)
  502. }
  503. #comments .comment .comment-content,.comment .comment-body{
  504. margin-top:12px;
  505. word-break:break-word
  506. }
  507. .comment-body{
  508. margin-bottom:12px
  509. }
  510. #comments.embed[data-num-comments="0"]{
  511. border:0;
  512. margin-top:0;
  513. padding-top:0
  514. }
  515. #comments.embed[data-num-comments="0"] #comment-post-message,#comments.embed[data-num-comments="0"] div.comment-form>p,#comments.embed[data-num-comments="0"] p.comment-footer{
  516. display:none
  517. }
  518. #comment-editor-src{
  519. display:none
  520. }
  521. .comments .comments-content .loadmore.loaded{
  522. max-height:0;
  523. opacity:0;
  524. overflow:hidden
  525. }
  526. .extendable .remaining-items{
  527. height:0;
  528. overflow:hidden;
  529. -webkit-transition:height .3s cubic-bezier(.4,0,.2,1);
  530. transition:height .3s cubic-bezier(.4,0,.2,1)
  531. }
  532. .extendable .remaining-items.expanded{
  533. height:auto
  534. }
  535. .svg-icon-24,.svg-icon-24-button{
  536. cursor:pointer;
  537. height:24px;
  538. width:24px;
  539. min-width:24px
  540. }
  541. .touch-icon{
  542. margin:-12px;
  543. padding:12px
  544. }
  545. .touch-icon:active,.touch-icon:focus{
  546. background-color:rgba(153,153,153,.4);
  547. border-radius:50%
  548. }
  549. svg:not(:root).touch-icon{
  550. overflow:visible
  551. }
  552. html[dir=rtl] .rtl-reversible-icon{
  553. -webkit-transform:scaleX(-1);
  554. -ms-transform:scaleX(-1);
  555. transform:scaleX(-1)
  556. }
  557. .svg-icon-24-button,.touch-icon-button{
  558. background:0 0;
  559. border:0;
  560. margin:0;
  561. outline:0;
  562. padding:0
  563. }
  564. .touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{
  565. background-color:transparent
  566. }
  567. .touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{
  568. background-color:rgba(153,153,153,.4);
  569. border-radius:50%
  570. }
  571. .Profile .default-avatar-wrapper .avatar-icon{
  572. border-radius:50%;
  573. border:solid 1px $(sidebar.icons.color);
  574. box-sizing:border-box;
  575. fill:$(sidebar.icons.color);
  576. margin:0
  577. }
  578. .Profile .individual .default-avatar-wrapper .avatar-icon{
  579. padding:25px
  580. }
  581. .Profile .individual .avatar-icon,.Profile .individual .profile-img{
  582. height:90px;
  583. width:90px
  584. }
  585. .Profile .team .default-avatar-wrapper .avatar-icon{
  586. padding:8px
  587. }
  588. .Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{
  589. height:40px;
  590. width:40px
  591. }
  592. .snippet-container{
  593. margin:0;
  594. position:relative;
  595. overflow:hidden
  596. }
  597. .snippet-fade{
  598. bottom:0;
  599. box-sizing:border-box;
  600. position:absolute;
  601. width:96px
  602. }
  603. .snippet-fade{
  604. $endSide:0
  605. }
  606. .snippet-fade:after{
  607. content:'\2026'
  608. }
  609. .snippet-fade:after{
  610. float:$endSide
  611. }
  612. .centered-top-container.sticky{
  613. left:0;
  614. position:fixed;
  615. right:0;
  616. top:0;
  617. width:auto;
  618. z-index:8;
  619. -webkit-transition-property:opacity,-webkit-transform;
  620. transition-property:opacity,-webkit-transform;
  621. transition-property:transform,opacity;
  622. transition-property:transform,opacity,-webkit-transform;
  623. -webkit-transition-duration:.2s;
  624. transition-duration:.2s;
  625. -webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
  626. transition-timing-function:cubic-bezier(.4,0,.2,1)
  627. }
  628. .centered-top-placeholder{
  629. display:none
  630. }
  631. .collapsed-header .centered-top-placeholder{
  632. display:block
  633. }
  634. .centered-top-container .Header .replaced h1,.centered-top-placeholder .Header .replaced h1{
  635. display:none
  636. }
  637. .centered-top-container.sticky .Header .replaced h1{
  638. display:block
  639. }
  640. .centered-top-container.sticky .Header .header-widget{
  641. background:0 0
  642. }
  643. .centered-top-container.sticky .Header .header-image-wrapper{
  644. display:none
  645. }
  646. .centered-top-container img,.centered-top-placeholder img{
  647. max-width:100%
  648. }
  649. .collapsible{
  650. -webkit-transition:height .3s cubic-bezier(.4,0,.2,1);
  651. transition:height .3s cubic-bezier(.4,0,.2,1)
  652. }
  653. .collapsible,.collapsible>summary{
  654. display:block;
  655. overflow:hidden
  656. }
  657. .collapsible>:not(summary){
  658. display:none
  659. }
  660. .collapsible[open]>:not(summary){
  661. display:block
  662. }
  663. .collapsible:focus,.collapsible>summary:focus{
  664. outline:0
  665. }
  666. .collapsible>summary{
  667. cursor:pointer;
  668. display:block;
  669. padding:0
  670. }
  671. .collapsible:focus>summary,.collapsible>summary:focus{
  672. background-color:transparent
  673. }
  674. .collapsible>summary::-webkit-details-marker{
  675. display:none
  676. }
  677. .collapsible-title{
  678. -webkit-box-align:center;
  679. -webkit-align-items:center;
  680. -ms-flex-align:center;
  681. align-items:center;
  682. display:-webkit-box;
  683. display:-webkit-flex;
  684. display:-ms-flexbox;
  685. display:flex
  686. }
  687. .collapsible-title .title{
  688. -webkit-box-flex:1;
  689. -webkit-flex:1 1 auto;
  690. -ms-flex:1 1 auto;
  691. flex:1 1 auto;
  692. -webkit-box-ordinal-group:1;
  693. -webkit-order:0;
  694. -ms-flex-order:0;
  695. order:0;
  696. overflow:hidden;
  697. text-overflow:ellipsis;
  698. white-space:nowrap
  699. }
  700. .collapsible-title .chevron-down,.collapsible[open] .collapsible-title .chevron-up{
  701. display:block
  702. }
  703. .collapsible-title .chevron-up,.collapsible[open] .collapsible-title .chevron-down{
  704. display:none
  705. }
  706. .flat-button{
  707. cursor:pointer;
  708. display:inline-block;
  709. font-weight:700;
  710. text-transform:uppercase;
  711. border-radius:2px;
  712. padding:8px;
  713. margin:-8px
  714. }
  715. .flat-icon-button{
  716. background:0 0;
  717. border:0;
  718. margin:0;
  719. outline:0;
  720. padding:0;
  721. margin:-12px;
  722. padding:12px;
  723. cursor:pointer;
  724. box-sizing:content-box;
  725. display:inline-block;
  726. line-height:0
  727. }
  728. .flat-icon-button,.flat-icon-button .splash-wrapper{
  729. border-radius:50%
  730. }
  731. .flat-icon-button .splash.animate{
  732. -webkit-animation-duration:.3s;
  733. animation-duration:.3s
  734. }
  735. body#layout .bg-photo,body#layout .bg-photo-overlay{
  736. display:none
  737. }
  738. body#layout .page_body{
  739. padding:0;
  740. position:relative;
  741. top:0
  742. }
  743. body#layout .page{
  744. display:inline-block;
  745. left:inherit;
  746. position:relative;
  747. vertical-align:top;
  748. width:540px
  749. }
  750. body#layout .centered{
  751. max-width:954px
  752. }
  753. body#layout .navigation{
  754. display:none
  755. }
  756. body#layout .sidebar-container{
  757. display:inline-block;
  758. width:40%
  759. }
  760. body#layout .hamburger-menu,body#layout .search{
  761. display:none
  762. }
  763. .overflowable-container{
  764. max-height:$(tabs.text.font.size + 2 * 16px);
  765. overflow:hidden;
  766. position:relative
  767. }
  768. .overflow-button{
  769. cursor:pointer
  770. }
  771. #overflowable-dim-overlay{
  772. background:0 0
  773. }
  774. .overflow-popup{
  775. 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);
  776. background-color:$(tabs.background.color);
  777. left:0;
  778. max-width:calc(100% - 32px);
  779. position:absolute;
  780. top:0;
  781. visibility:hidden;
  782. z-index:101
  783. }
  784. .overflow-popup ul{
  785. list-style:none
  786. }
  787. .overflow-popup .tabs li,.overflow-popup li{
  788. display:block;
  789. height:auto
  790. }
  791. .overflow-popup .tabs li{
  792. padding-left:0;
  793. padding-right:0
  794. }
  795. .overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{
  796. display:none
  797. }
  798. .widget.Sharing .sharing-button{
  799. display:none
  800. }
  801. .widget.Sharing .sharing-buttons li{
  802. padding:0
  803. }
  804. .widget.Sharing .sharing-buttons li span{
  805. display:none
  806. }
  807. .post-share-buttons{
  808. position:relative
  809. }
  810. .centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
  811. fill:$(sharing.icons.color)
  812. }
  813. .sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .touch-icon{
  814. background-color:transparent
  815. }
  816. .share-buttons{
  817. background-color:$(sharing.background.color);
  818. border-radius:2px;
  819. 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);
  820. color:$(sharing.text.color);
  821. list-style:none;
  822. margin:0;
  823. padding:8px 0;
  824. position:absolute;
  825. top:-11px;
  826. min-width:200px;
  827. z-index:101
  828. }
  829. .share-buttons.hidden{
  830. display:none
  831. }
  832. .sharing-button{
  833. background:0 0;
  834. border:0;
  835. margin:0;
  836. outline:0;
  837. padding:0;
  838. cursor:pointer
  839. }
  840. .share-buttons li{
  841. margin:0;
  842. height:48px
  843. }
  844. .share-buttons li:last-child{
  845. margin-bottom:0
  846. }
  847. .share-buttons li .sharing-platform-button{
  848. box-sizing:border-box;
  849. cursor:pointer;
  850. display:block;
  851. height:100%;
  852. margin-bottom:0;
  853. padding:0 16px;
  854. position:relative;
  855. width:100%
  856. }
  857. .share-buttons li .sharing-platform-button:focus,.share-buttons li .sharing-platform-button:hover{
  858. background-color:rgba(128,128,128,.1);
  859. outline:0
  860. }
  861. .share-buttons li svg[class*=" sharing-"],.share-buttons li svg[class^=sharing-]{
  862. position:absolute;
  863. top:10px
  864. }
  865. .share-buttons li span.sharing-platform-button{
  866. position:relative;
  867. top:0
  868. }
  869. .share-buttons li .platform-sharing-text{
  870. display:block;
  871. font-size:16px;
  872. line-height:48px;
  873. white-space:nowrap
  874. }
  875. .share-buttons li .platform-sharing-text{
  876. margin-$startSide:56px
  877. }
  878. .sidebar-container{
  879. background-color:$(sidebar.background.color);
  880. max-width:$(sidebar.width);
  881. overflow-y:auto;
  882. -webkit-transition-property:-webkit-transform;
  883. transition-property:-webkit-transform;
  884. transition-property:transform;
  885. transition-property:transform,-webkit-transform;
  886. -webkit-transition-duration:.3s;
  887. transition-duration:.3s;
  888. -webkit-transition-timing-function:cubic-bezier(0,0,.2,1);
  889. transition-timing-function:cubic-bezier(0,0,.2,1);
  890. width:$(sidebar.width);
  891. z-index:101;
  892. -webkit-overflow-scrolling:touch
  893. }
  894. .sidebar-container .navigation{
  895. line-height:0;
  896. padding:16px
  897. }
  898. .sidebar-container .sidebar-back{
  899. cursor:pointer
  900. }
  901. .sidebar-container .widget{
  902. background:0 0;
  903. margin:0 16px;
  904. padding:16px 0
  905. }
  906. .sidebar-container .widget .title{
  907. color:$(widget.title.color);
  908. margin:0
  909. }
  910. .sidebar-container .widget ul{
  911. list-style:none;
  912. margin:0;
  913. padding:0
  914. }
  915. .sidebar-container .widget ul ul{
  916. margin-$startSide:1em
  917. }
  918. .sidebar-container .widget li{
  919. font-size:16px;
  920. line-height:normal
  921. }
  922. .sidebar-container .widget+.widget{
  923. border-top:1px solid $(sidebar.separator.color)
  924. }
  925. .BlogArchive li{
  926. margin:16px 0
  927. }
  928. .BlogArchive li:last-child{
  929. margin-bottom:0
  930. }
  931. .Label li a{
  932. display:inline-block
  933. }
  934. .BlogArchive .post-count,.Label .label-count{
  935. float:$endSide;
  936. margin-$startSide:.25em
  937. }
  938. .BlogArchive .post-count::before,.Label .label-count::before{
  939. content:'('
  940. }
  941. .BlogArchive .post-count::after,.Label .label-count::after{
  942. content:')'
  943. }
  944. .widget.Translate .skiptranslate>div{
  945. display:block!important
  946. }
  947. .widget.Profile .profile-link{
  948. display:-webkit-box;
  949. display:-webkit-flex;
  950. display:-ms-flexbox;
  951. display:flex
  952. }
  953. .widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{
  954. -webkit-box-flex:0;
  955. -webkit-flex:0 0 auto;
  956. -ms-flex:0 0 auto;
  957. flex:0 0 auto;
  958. margin-$endSide:1em
  959. }
  960. .widget.Profile .individual .profile-link{
  961. -webkit-box-orient:vertical;
  962. -webkit-box-direction:normal;
  963. -webkit-flex-direction:column;
  964. -ms-flex-direction:column;
  965. flex-direction:column
  966. }
  967. .widget.Profile .team .profile-link .profile-name{
  968. -webkit-align-self:center;
  969. -ms-flex-item-align:center;
  970. -ms-grid-row-align:center;
  971. align-self:center;
  972. display:block;
  973. -webkit-box-flex:1;
  974. -webkit-flex:1 1 auto;
  975. -ms-flex:1 1 auto;
  976. flex:1 1 auto
  977. }
  978. .dim-overlay{
  979. background-color:rgba(0,0,0,.54);
  980. z-index:100
  981. }
  982. body.sidebar-visible{
  983. overflow-y:hidden
  984. }
  985. @media screen and (max-width:$(posts.width.stream + 15px + sidebar.width)){
  986. .sidebar-container{
  987. bottom:0;
  988. position:fixed;
  989. top:0;
  990. left:auto;
  991. right:0
  992. }
  993. .sidebar-container.sidebar-invisible{
  994. -webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);
  995. transition-timing-function:cubic-bezier(.4,0,.6,1);
  996. -webkit-transform:translateX(100%);
  997. -ms-transform:translateX(100%);
  998. transform:translateX(100%)
  999. }
  1000. }
  1001. .dialog{
  1002. 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);
  1003. background:$(posts.background.color);
  1004. box-sizing:border-box;
  1005. color:$(posts.text.color);
  1006. padding:30px;
  1007. position:fixed;
  1008. text-align:center;
  1009. width:calc(100% - 24px);
  1010. z-index:101
  1011. }
  1012. .dialog input[type=email],.dialog input[type=text]{
  1013. background-color:transparent;
  1014. border:0;
  1015. border-bottom:solid 1px rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),.12);
  1016. color:$(posts.text.color);
  1017. display:block;
  1018. font-family:$(body.text.font.family);
  1019. font-size:16px;
  1020. line-height:24px;
  1021. margin:auto;
  1022. padding-bottom:7px;
  1023. outline:0;
  1024. text-align:center;
  1025. width:100%
  1026. }
  1027. .dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{
  1028. color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
  1029. }
  1030. .dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{
  1031. color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
  1032. }
  1033. .dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{
  1034. color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
  1035. }
  1036. .dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{
  1037. color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
  1038. }
  1039. .dialog input[type=email]:focus,.dialog input[type=text]:focus{
  1040. border-bottom:solid 2px $(posts.link.color);
  1041. padding-bottom:6px
  1042. }
  1043. .dialog input.no-cursor{
  1044. color:transparent;
  1045. text-shadow:0 0 0 $(posts.text.color)
  1046. }
  1047. .dialog input.no-cursor:focus{
  1048. outline:0
  1049. }
  1050. .dialog input.no-cursor:focus{
  1051. outline:0
  1052. }
  1053. .dialog input[type=submit]{
  1054. font-family:$(body.text.font.family)
  1055. }
  1056. .dialog .goog-buttonset-default{
  1057. color:$(posts.link.color)
  1058. }
  1059. .loading-spinner-large{
  1060. -webkit-animation:mspin-rotate 1.568s infinite linear;
  1061. animation:mspin-rotate 1.568s infinite linear;
  1062. height:48px;
  1063. overflow:hidden;
  1064. position:absolute;
  1065. width:48px;
  1066. z-index:200
  1067. }
  1068. .loading-spinner-large>div{
  1069. -webkit-animation:mspin-revrot 5332ms infinite steps(4);
  1070. animation:mspin-revrot 5332ms infinite steps(4)
  1071. }
  1072. .loading-spinner-large>div>div{
  1073. -webkit-animation:mspin-singlecolor-large-film 1333ms infinite steps(81);
  1074. animation:mspin-singlecolor-large-film 1333ms infinite steps(81);
  1075. background-size:100%;
  1076. height:48px;
  1077. width:3888px
  1078. }
  1079. .mspin-black-large>div>div,.mspin-grey_54-large>div>div{
  1080. background-image:url(https://www.blogblog.com/indie/mspin_black_large.svg)
  1081. }
  1082. .mspin-white-large>div>div{
  1083. background-image:url(https://www.blogblog.com/indie/mspin_white_large.svg)
  1084. }
  1085. .mspin-grey_54-large{
  1086. opacity:.54
  1087. }
  1088. @-webkit-keyframes mspin-singlecolor-large-film{
  1089. from{
  1090. -webkit-transform:translateX(0);
  1091. transform:translateX(0)
  1092. }
  1093. to{
  1094. -webkit-transform:translateX(-3888px);
  1095. transform:translateX(-3888px)
  1096. }
  1097. }
  1098. @keyframes mspin-singlecolor-large-film{
  1099. from{
  1100. -webkit-transform:translateX(0);
  1101. transform:translateX(0)
  1102. }
  1103. to{
  1104. -webkit-transform:translateX(-3888px);
  1105. transform:translateX(-3888px)
  1106. }
  1107. }
  1108. @-webkit-keyframes mspin-rotate{
  1109. from{
  1110. -webkit-transform:rotate(0);
  1111. transform:rotate(0)
  1112. }
  1113. to{
  1114. -webkit-transform:rotate(360deg);
  1115. transform:rotate(360deg)
  1116. }
  1117. }
  1118. @keyframes mspin-rotate{
  1119. from{
  1120. -webkit-transform:rotate(0);
  1121. transform:rotate(0)
  1122. }
  1123. to{
  1124. -webkit-transform:rotate(360deg);
  1125. transform:rotate(360deg)
  1126. }
  1127. }
  1128. @-webkit-keyframes mspin-revrot{
  1129. from{
  1130. -webkit-transform:rotate(0);
  1131. transform:rotate(0)
  1132. }
  1133. to{
  1134. -webkit-transform:rotate(-360deg);
  1135. transform:rotate(-360deg)
  1136. }
  1137. }
  1138. @keyframes mspin-revrot{
  1139. from{
  1140. -webkit-transform:rotate(0);
  1141. transform:rotate(0)
  1142. }
  1143. to{
  1144. -webkit-transform:rotate(-360deg);
  1145. transform:rotate(-360deg)
  1146. }
  1147. }
  1148. .subscribe-popup{
  1149. max-width:364px
  1150. }
  1151. .subscribe-popup h3{
  1152. color:$(posts.title.color);
  1153. font-size:1.8em;
  1154. margin-top:0
  1155. }
  1156. .subscribe-popup .FollowByEmail h3{
  1157. display:none
  1158. }
  1159. .subscribe-popup .FollowByEmail .follow-by-email-submit{
  1160. color:$(posts.link.color);
  1161. display:inline-block;
  1162. margin:0 auto;
  1163. margin-top:24px;
  1164. width:auto;
  1165. white-space:normal
  1166. }
  1167. .subscribe-popup .FollowByEmail .follow-by-email-submit:disabled{
  1168. cursor:default;
  1169. opacity:.3
  1170. }
  1171. @media (max-width:800px){
  1172. .blog-name div.widget.Subscribe{
  1173. margin-bottom:16px
  1174. }
  1175. body.item-view .blog-name div.widget.Subscribe{
  1176. margin:8px auto 16px auto;
  1177. width:100%
  1178. }
  1179. }
  1180. .sidebar-container .svg-icon-24{
  1181. fill:$(sidebar.icons.color)
  1182. }
  1183. .centered-top .svg-icon-24{
  1184. fill:$(header.icons.color)
  1185. }
  1186. .centered-bottom .svg-icon-24.touch-icon,.centered-bottom a .svg-icon-24,.centered-bottom button .svg-icon-24{
  1187. fill:$(body.link.color)
  1188. }
  1189. .post-wrapper .svg-icon-24.touch-icon,.post-wrapper a .svg-icon-24,.post-wrapper button .svg-icon-24{
  1190. fill:$(posts.icons.color)
  1191. }
  1192. .centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
  1193. fill:$(sharing.icons.color)
  1194. }
  1195. .svg-icon-24.hamburger-menu{
  1196. fill:$(body.link.color)
  1197. }
  1198. body#layout .page_body{
  1199. padding:0;
  1200. position:relative;
  1201. top:0
  1202. }
  1203. body#layout .page{
  1204. display:inline-block;
  1205. left:inherit;
  1206. position:relative;
  1207. vertical-align:top;
  1208. width:540px
  1209. }
  1210. body{
  1211. background:$(body.background);
  1212. background-color:$(body.background.color);
  1213. background-size:cover;
  1214. color:$(body.text.color);
  1215. font:$(body.text.font);
  1216. margin:0;
  1217. min-height:100vh
  1218. }
  1219. h3,h3.title{
  1220. color:$(body.text.color)
  1221. }
  1222. .post-wrapper .post-title,.post-wrapper .post-title a,.post-wrapper .post-title a:hover,.post-wrapper .post-title a:visited{
  1223. color:$(posts.title.color)
  1224. }
  1225. a{
  1226. color:$(body.link.color);
  1227. font-style:normal;
  1228. text-decoration:none
  1229. }
  1230. a:visited{
  1231. color:$(body.link.visited.color)
  1232. }
  1233. a:hover{
  1234. color:$(body.link.hover.color)
  1235. }
  1236. blockquote{
  1237. color:$(blockquote.color);
  1238. font:$(blockquote.font);
  1239. font-size:x-large;
  1240. font-style:italic;
  1241. font-weight:300;
  1242. text-align:center
  1243. }
  1244. .dim-overlay{
  1245. z-index:100
  1246. }
  1247. .page{
  1248. box-sizing:border-box;
  1249. display:-webkit-box;
  1250. display:-webkit-flex;
  1251. display:-ms-flexbox;
  1252. display:flex;
  1253. -webkit-box-orient:vertical;
  1254. -webkit-box-direction:normal;
  1255. -webkit-flex-direction:column;
  1256. -ms-flex-direction:column;
  1257. flex-direction:column;
  1258. min-height:100vh;
  1259. padding-bottom:1em
  1260. }
  1261. .page>*{
  1262. -webkit-box-flex:0;
  1263. -webkit-flex:0 0 auto;
  1264. -ms-flex:0 0 auto;
  1265. flex:0 0 auto
  1266. }
  1267. .page>#footer{
  1268. margin-top:auto
  1269. }
  1270. .bg-photo-container{
  1271. overflow:hidden
  1272. }
  1273. .bg-photo-container,.bg-photo-container .bg-photo{
  1274. height:464px;
  1275. width:100%
  1276. }
  1277. .bg-photo-container .bg-photo{
  1278. background-position:center;
  1279. background-size:cover;
  1280. z-index:-1
  1281. }
  1282. .centered{
  1283. margin:0 auto;
  1284. position:relative;
  1285. width:$(3 * posts.width.stream + 2 * 16px + 15px + sidebar.width)
  1286. }
  1287. .centered .main,.centered .main-container{
  1288. float:$startSide
  1289. }
  1290. .centered .main{
  1291. padding-bottom:1em
  1292. }
  1293. .centered .centered-bottom::after{
  1294. clear:both;
  1295. content:'';
  1296. display:table
  1297. }
  1298. @media (min-width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width + 1px)){
  1299. .page_body.has-vertical-ads .centered{
  1300. width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width)
  1301. }
  1302. }
  1303. @media (min-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width + 1px)) and (max-width:$(3 * posts.width.stream + 2 * 16px + 15px + sidebar.width)){
  1304. .centered{
  1305. width:$(2 * posts.width.stream + 1 * 16px + 15px + sidebar.width)
  1306. }
  1307. }
  1308. @media (min-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width + 1px)) and (max-width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width)){
  1309. .page_body.has-vertical-ads .centered{
  1310. width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)
  1311. }
  1312. }
  1313. @media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
  1314. .centered{
  1315. width:$(posts.width.stream + 15px + sidebar.width)
  1316. }
  1317. }
  1318. @media (max-width:$(posts.width.stream + 15px + sidebar.width)){
  1319. .centered{
  1320. max-width:600px;
  1321. width:100%
  1322. }
  1323. }
  1324. .feed-view .post-wrapper.hero,.main,.main-container,.post-filter-message,.top-nav .section{
  1325. width:$(3 * posts.width.stream + 2 * 16px)
  1326. }
  1327. @media (min-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width + 1px)) and (max-width:$(3 * posts.width.stream + 2 * 16px + 15px + sidebar.width)){
  1328. .feed-view .post-wrapper.hero,.main,.main-container,.post-filter-message,.top-nav .section{
  1329. width:$(2 * posts.width.stream + 1 * 16px)
  1330. }
  1331. }
  1332. @media (min-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width + 1px)) and (max-width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width)){
  1333. .feed-view .page_body.has-vertical-ads .post-wrapper.hero,.page_body.has-vertical-ads .feed-view .post-wrapper.hero,.page_body.has-vertical-ads .main,.page_body.has-vertical-ads .main-container,.page_body.has-vertical-ads .post-filter-message,.page_body.has-vertical-ads .top-nav .section{
  1334. width:$(2 * posts.width.stream + 1 * 16px)
  1335. }
  1336. }
  1337. @media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
  1338. .feed-view .post-wrapper.hero,.main,.main-container,.post-filter-message,.top-nav .section{
  1339. width:auto
  1340. }
  1341. }
  1342. .widget .title{
  1343. font-size:$(body.text.font.size * 1.125);
  1344. line-height:$(body.text.font.size * 1.75);
  1345. margin:$(body.text.font.size * 1.125) 0
  1346. }
  1347. .extendable .show-less,.extendable .show-more{
  1348. color:$(body.button.color);
  1349. font:$(body.button.font);
  1350. cursor:pointer;
  1351. text-transform:uppercase;
  1352. margin:0 -16px;
  1353. padding:16px
  1354. }
  1355. .widget.Profile{
  1356. font:$(body.text.font)
  1357. }
  1358. .sidebar-container .widget.Profile{
  1359. padding:16px
  1360. }
  1361. .widget.Profile h2{
  1362. display:none
  1363. }
  1364. .widget.Profile .title{
  1365. margin:16px 32px
  1366. }
  1367. .widget.Profile .profile-img{
  1368. border-radius:50%
  1369. }
  1370. .widget.Profile .individual{
  1371. display:-webkit-box;
  1372. display:-webkit-flex;
  1373. display:-ms-flexbox;
  1374. display:flex
  1375. }
  1376. .widget.Profile .individual .profile-info{
  1377. -webkit-align-self:center;
  1378. -ms-flex-item-align:center;
  1379. -ms-grid-row-align:center;
  1380. align-self:center;
  1381. margin-$startSide:16px
  1382. }
  1383. .widget.Profile .profile-datablock{
  1384. margin-top:0;
  1385. margin-bottom:.75em
  1386. }
  1387. .widget.Profile .profile-link{
  1388. background-image:none!important;
  1389. font-family:inherit;
  1390. overflow:hidden;
  1391. max-width:100%
  1392. }
  1393. .widget.Profile .individual .profile-link{
  1394. margin:0 -10px;
  1395. padding:0 10px;
  1396. display:block
  1397. }
  1398. .widget.Profile .individual .profile-data a.profile-link.g-profile,.widget.Profile .team a.profile-link.g-profile .profile-name{
  1399. font:$(widget.title.font);
  1400. color:$(widget.title.color);
  1401. margin-bottom:.75em
  1402. }
  1403. .widget.Profile .individual .profile-data a.profile-link.g-profile{
  1404. line-height:1.25
  1405. }
  1406. .widget.Profile .individual>a:first-child{
  1407. -webkit-flex-shrink:0;
  1408. -ms-flex-negative:0;
  1409. flex-shrink:0
  1410. }
  1411. .widget.Profile .profile-textblock{
  1412. display:none
  1413. }
  1414. .widget.Profile dd{
  1415. margin:0
  1416. }
  1417. .widget.Profile ul{
  1418. list-style:none;
  1419. padding:0
  1420. }
  1421. .widget.Profile ul li{
  1422. margin:10px 0 30px
  1423. }
  1424. .widget.Profile .team .extendable,.widget.Profile .team .extendable .first-items,.widget.Profile .team .extendable .remaining-items{
  1425. margin:0;
  1426. padding:0;
  1427. max-width:100%
  1428. }
  1429. .widget.Profile .team-member .profile-name-container{
  1430. -webkit-box-flex:0;
  1431. -webkit-flex:0 1 auto;
  1432. -ms-flex:0 1 auto;
  1433. flex:0 1 auto
  1434. }
  1435. .widget.Profile .team .extendable .show-less,.widget.Profile .team .extendable .show-more{
  1436. position:relative;
  1437. $startSide:56px
  1438. }
  1439. #comments a,.post-wrapper a{
  1440. color:$(posts.link.color)
  1441. }
  1442. div.widget.Blog .blog-posts .post-outer{
  1443. border:0
  1444. }
  1445. div.widget.Blog .post-outer{
  1446. padding-bottom:0
  1447. }
  1448. .post .thumb{
  1449. float:left;
  1450. height:20%;
  1451. width:20%
  1452. }
  1453. .no-posts-message,.status-msg-body{
  1454. margin:10px 0
  1455. }
  1456. .blog-pager{
  1457. text-align:center
  1458. }
  1459. .post-title{
  1460. margin:0
  1461. }
  1462. .post-title,.post-title a{
  1463. font:$(posts.title.font)
  1464. }
  1465. .post-body{
  1466. color:$(posts.text.color);
  1467. display:block;
  1468. font:$(posts.text.font);
  1469. line-height:$(posts.text.lineHeight);
  1470. margin:0
  1471. }
  1472. .post-snippet{
  1473. color:$(posts.text.color);
  1474. font:$(posts.snippet.text.font);
  1475. line-height:$(posts.snippet.text.lineHeight);
  1476. margin:8px 0;
  1477. max-height:$(posts.snippet.text.lineHeight * 3)
  1478. }
  1479. .post-snippet .snippet-fade{
  1480. background:-webkit-linear-gradient($startSide,$(posts.background.color) 0,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);
  1481. background:linear-gradient(to $startSide,$(posts.background.color) 0,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);
  1482. color:$(posts.text.color);
  1483. bottom:0;
  1484. position:absolute
  1485. }
  1486. .post-body img{
  1487. height:inherit;
  1488. max-width:100%
  1489. }
  1490. .byline,.byline.post-author a,.byline.post-timestamp a{
  1491. color:$(posts.byline.color);
  1492. font:$(posts.byline.font)
  1493. }
  1494. .byline.post-author{
  1495. text-transform:lowercase
  1496. }
  1497. .byline.post-author a{
  1498. text-transform:none
  1499. }
  1500. .item-byline .byline,.post-header .byline{
  1501. margin-$endSide:0
  1502. }
  1503. .post-share-buttons .share-buttons{
  1504. background:$(sharing.background.color);
  1505. color:$(sharing.text.color);
  1506. font:$(sharing.text.font)
  1507. }
  1508. .tr-caption{
  1509. color:$(picture.caption.text.color);
  1510. font:$(picture.caption.font);
  1511. font-size:1.1em;
  1512. font-style:italic
  1513. }
  1514. .post-filter-message{
  1515. background-color:$(postFilter.background.color);
  1516. box-sizing:border-box;
  1517. color:$(postFilter.message.color);
  1518. display:-webkit-box;
  1519. display:-webkit-flex;
  1520. display:-ms-flexbox;
  1521. display:flex;
  1522. font:$(postFilter.message.font);
  1523. margin-bottom:16px;
  1524. margin-top:32px;
  1525. padding:12px 16px
  1526. }
  1527. .post-filter-message>div:first-child{
  1528. -webkit-box-flex:1;
  1529. -webkit-flex:1 0 auto;
  1530. -ms-flex:1 0 auto;
  1531. flex:1 0 auto
  1532. }
  1533. .post-filter-message a{
  1534. color:$(body.button.color);
  1535. font:$(body.button.font);
  1536. cursor:pointer;
  1537. text-transform:uppercase;
  1538. color:$(postFilter.message.link.color);
  1539. padding-$startSide:30px;
  1540. white-space:nowrap
  1541. }
  1542. .post-filter-message .search-label,.post-filter-message .search-query{
  1543. font-style:italic;
  1544. quotes:'\201c' '\201d' '\2018' '\2019'
  1545. }
  1546. .post-filter-message .search-label::before,.post-filter-message .search-query::before{
  1547. content:open-quote
  1548. }
  1549. .post-filter-message .search-label::after,.post-filter-message .search-query::after{
  1550. content:close-quote
  1551. }
  1552. #blog-pager{
  1553. margin-top:2em;
  1554. margin-bottom:1em
  1555. }
  1556. #blog-pager a{
  1557. color:$(body.button.color);
  1558. font:$(body.button.font);
  1559. cursor:pointer;
  1560. text-transform:uppercase
  1561. }
  1562. .Label{
  1563. overflow-x:hidden
  1564. }
  1565. .Label ul{
  1566. list-style:none;
  1567. padding:0
  1568. }
  1569. .Label li{
  1570. display:inline-block;
  1571. overflow:hidden;
  1572. max-width:100%;
  1573. text-overflow:ellipsis;
  1574. white-space:nowrap
  1575. }
  1576. .Label .first-ten{
  1577. margin-top:16px
  1578. }
  1579. .Label .show-all{
  1580. border-color:$(body.link.color);
  1581. color:$(body.link.color);
  1582. cursor:pointer;
  1583. display:inline-block;
  1584. font-style:normal;
  1585. margin-top:8px;
  1586. text-transform:uppercase
  1587. }
  1588. .Label .show-all.hidden{
  1589. display:inline-block
  1590. }
  1591. .Label li a,.Label span.label-size,.byline.post-labels a{
  1592. background-color:rgba($(sidebar.link.color.red),$(sidebar.link.color.green),$(sidebar.link.color.blue),.1);
  1593. border-radius:2px;
  1594. color:$(sidebar.link.color);
  1595. cursor:pointer;
  1596. display:inline-block;
  1597. font:$(labels.font);
  1598. line-height:1.5;
  1599. margin:4px 4px 4px 0;
  1600. padding:4px 8px;
  1601. text-transform:uppercase;
  1602. vertical-align:middle
  1603. }
  1604. body.item-view .byline.post-labels a{
  1605. background-color:rgba($(posts.link.color.red),$(posts.link.color.green),$(posts.link.color.blue),.1);
  1606. color:$(posts.link.color)
  1607. }
  1608. .FeaturedPost .item-thumbnail img{
  1609. max-width:100%
  1610. }
  1611. .sidebar-container .FeaturedPost .post-title a{
  1612. color:$(sidebar.link.color);
  1613. font:$(sidebar.posts.title.font)
  1614. }
  1615. body.item-view .PopularPosts{
  1616. display:inline-block;
  1617. overflow-y:auto;
  1618. vertical-align:top;
  1619. width:280px
  1620. }
  1621. .PopularPosts h3.title{
  1622. font:$(widget.title.font)
  1623. }
  1624. .PopularPosts .post-title{
  1625. margin:0 0 16px
  1626. }
  1627. .PopularPosts .post-title a{
  1628. color:$(sidebar.link.color);
  1629. font:$(sidebar.posts.title.font);
  1630. line-height:$(sidebar.posts.text.font.size * 12 / 7)
  1631. }
  1632. .PopularPosts .item-thumbnail{
  1633. clear:both;
  1634. height:152px;
  1635. overflow-y:hidden;
  1636. width:100%
  1637. }
  1638. .PopularPosts .item-thumbnail img{
  1639. padding:0;
  1640. width:100%
  1641. }
  1642. .PopularPosts .popular-posts-snippet{
  1643. color:$(sidebar.posts.text.color);
  1644. font:$(sidebar.posts.text.font);
  1645. line-height:$(sidebar.posts.text.font.size * 12 / 7);
  1646. max-height:calc($(sidebar.posts.text.font.size * 12 / 7) * 4);
  1647. overflow:hidden
  1648. }
  1649. .PopularPosts .popular-posts-snippet .snippet-fade{
  1650. color:$(sidebar.posts.text.color)
  1651. }
  1652. .PopularPosts .post{
  1653. margin:30px 0;
  1654. position:relative
  1655. }
  1656. .PopularPosts .post+.post{
  1657. padding-top:1em
  1658. }
  1659. .popular-posts-snippet .snippet-fade{
  1660. background:-webkit-linear-gradient($startSide,$(sidebar.background.color) 0,$(sidebar.background.color) 20%,$(sidebar.background.color.transparent) 100%);
  1661. background:linear-gradient(to $startSide,$(sidebar.background.color) 0,$(sidebar.background.color) 20%,$(sidebar.background.color.transparent) 100%);
  1662. $endSide:0;
  1663. height:$(sidebar.posts.text.font.size * 12 / 7);
  1664. line-height:$(sidebar.posts.text.font.size * 12 / 7);
  1665. position:absolute;
  1666. top:calc($(sidebar.posts.text.font.size * 12 / 7) * 3);
  1667. width:96px
  1668. }
  1669. .Attribution{
  1670. color:$(attribution.text.color)
  1671. }
  1672. .Attribution a,.Attribution a:hover,.Attribution a:visited{
  1673. color:$(attribution.link.color)
  1674. }
  1675. .Attribution svg{
  1676. fill:$(attribution.icon.color)
  1677. }
  1678. .inline-ad{
  1679. margin-bottom:16px
  1680. }
  1681. .item-view .inline-ad{
  1682. display:block
  1683. }
  1684. .vertical-ad-container{
  1685. float:$startSide;
  1686. margin-$startSide:15px;
  1687. min-height:1px;
  1688. width:128px
  1689. }
  1690. .item-view .vertical-ad-container{
  1691. margin-top:30px
  1692. }
  1693. .inline-ad-placeholder,.vertical-ad-placeholder{
  1694. background:$(posts.background.color);
  1695. border:1px solid #000;
  1696. opacity:.9;
  1697. vertical-align:middle;
  1698. text-align:center
  1699. }
  1700. .inline-ad-placeholder span,.vertical-ad-placeholder span{
  1701. margin-top:290px;
  1702. display:block;
  1703. text-transform:uppercase;
  1704. font-weight:700;
  1705. color:$(posts.title.color)
  1706. }
  1707. .vertical-ad-placeholder{
  1708. height:600px
  1709. }
  1710. .vertical-ad-placeholder span{
  1711. margin-top:290px;
  1712. padding:0 40px
  1713. }
  1714. .inline-ad-placeholder{
  1715. height:90px
  1716. }
  1717. .inline-ad-placeholder span{
  1718. margin-top:35px
  1719. }
  1720. .centered-top-container.sticky,.sticky .centered-top{
  1721. background-color:$(header.background.color)
  1722. }
  1723. .centered-top{
  1724. -webkit-box-align:start;
  1725. -webkit-align-items:flex-start;
  1726. -ms-flex-align:start;
  1727. align-items:flex-start;
  1728. display:-webkit-box;
  1729. display:-webkit-flex;
  1730. display:-ms-flexbox;
  1731. display:flex;
  1732. -webkit-flex-wrap:wrap;
  1733. -ms-flex-wrap:wrap;
  1734. flex-wrap:wrap;
  1735. margin:0 auto;
  1736. padding-top:40px;
  1737. max-width:$(3 * posts.width.stream + 2 * 16px + 15px + sidebar.width)
  1738. }
  1739. .page_body.has-vertical-ads .centered-top{
  1740. max-width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width)
  1741. }
  1742. .centered-top .blog-name,.centered-top .hamburger-section,.centered-top .search{
  1743. margin-$startSide:16px
  1744. }
  1745. .centered-top .return_link{
  1746. -webkit-box-flex:0;
  1747. -webkit-flex:0 0 auto;
  1748. -ms-flex:0 0 auto;
  1749. flex:0 0 auto;
  1750. height:24px;
  1751. -webkit-box-ordinal-group:1;
  1752. -webkit-order:0;
  1753. -ms-flex-order:0;
  1754. order:0;
  1755. width:24px
  1756. }
  1757. .centered-top .blog-name{
  1758. -webkit-box-flex:1;
  1759. -webkit-flex:1 1 0;
  1760. -ms-flex:1 1 0px;
  1761. flex:1 1 0;
  1762. -webkit-box-ordinal-group:2;
  1763. -webkit-order:1;
  1764. -ms-flex-order:1;
  1765. order:1
  1766. }
  1767. .centered-top .search{
  1768. -webkit-box-flex:0;
  1769. -webkit-flex:0 0 auto;
  1770. -ms-flex:0 0 auto;
  1771. flex:0 0 auto;
  1772. -webkit-box-ordinal-group:3;
  1773. -webkit-order:2;
  1774. -ms-flex-order:2;
  1775. order:2
  1776. }
  1777. .centered-top .hamburger-section{
  1778. display:none;
  1779. -webkit-box-flex:0;
  1780. -webkit-flex:0 0 auto;
  1781. -ms-flex:0 0 auto;
  1782. flex:0 0 auto;
  1783. -webkit-box-ordinal-group:4;
  1784. -webkit-order:3;
  1785. -ms-flex-order:3;
  1786. order:3
  1787. }
  1788. .centered-top .subscribe-section-container{
  1789. -webkit-box-flex:1;
  1790. -webkit-flex:1 0 100%;
  1791. -ms-flex:1 0 100%;
  1792. flex:1 0 100%;
  1793. -webkit-box-ordinal-group:5;
  1794. -webkit-order:4;
  1795. -ms-flex-order:4;
  1796. order:4
  1797. }
  1798. .centered-top .top-nav{
  1799. -webkit-box-flex:1;
  1800. -webkit-flex:1 0 100%;
  1801. -ms-flex:1 0 100%;
  1802. flex:1 0 100%;
  1803. margin-top:32px;
  1804. -webkit-box-ordinal-group:6;
  1805. -webkit-order:5;
  1806. -ms-flex-order:5;
  1807. order:5
  1808. }
  1809. .sticky .centered-top{
  1810. -webkit-box-align:center;
  1811. -webkit-align-items:center;
  1812. -ms-flex-align:center;
  1813. align-items:center;
  1814. box-sizing:border-box;
  1815. -webkit-flex-wrap:nowrap;
  1816. -ms-flex-wrap:nowrap;
  1817. flex-wrap:nowrap;
  1818. padding:0 16px
  1819. }
  1820. .sticky .centered-top .blog-name{
  1821. -webkit-box-flex:0;
  1822. -webkit-flex:0 1 auto;
  1823. -ms-flex:0 1 auto;
  1824. flex:0 1 auto;
  1825. max-width:none;
  1826. min-width:0
  1827. }
  1828. .sticky .centered-top .subscribe-section-container{
  1829. border-$startSide:1px solid $(header.separator.color);
  1830. -webkit-box-flex:1;
  1831. -webkit-flex:1 0 auto;
  1832. -ms-flex:1 0 auto;
  1833. flex:1 0 auto;
  1834. margin:0 16px;
  1835. -webkit-box-ordinal-group:3;
  1836. -webkit-order:2;
  1837. -ms-flex-order:2;
  1838. order:2
  1839. }
  1840. .sticky .centered-top .search{
  1841. -webkit-box-flex:1;
  1842. -webkit-flex:1 0 auto;
  1843. -ms-flex:1 0 auto;
  1844. flex:1 0 auto;
  1845. -webkit-box-ordinal-group:4;
  1846. -webkit-order:3;
  1847. -ms-flex-order:3;
  1848. order:3
  1849. }
  1850. .sticky .centered-top .hamburger-section{
  1851. -webkit-box-ordinal-group:5;
  1852. -webkit-order:4;
  1853. -ms-flex-order:4;
  1854. order:4
  1855. }
  1856. .sticky .centered-top .top-nav{
  1857. display:none
  1858. }
  1859. .search{
  1860. position:relative;
  1861. width:250px
  1862. }
  1863. .search,.search .search-expand,.search .section{
  1864. height:48px
  1865. }
  1866. .search .search-expand{
  1867. background:0 0;
  1868. border:0;
  1869. margin:0;
  1870. outline:0;
  1871. padding:0;
  1872. display:none;
  1873. margin-$startSide:auto
  1874. }
  1875. .search .search-expand-text{
  1876. display:none
  1877. }
  1878. .search .search-expand .svg-icon-24,.search .search-submit-container .svg-icon-24{
  1879. fill:$(search.icon.color);
  1880. -webkit-transition:.3s fill cubic-bezier(.4,0,.2,1);
  1881. transition:.3s fill cubic-bezier(.4,0,.2,1)
  1882. }
  1883. .search h3{
  1884. display:none
  1885. }
  1886. .search .section{
  1887. background-color:$(search.background.color);
  1888. box-sizing:border-box;
  1889. $endSide:0;
  1890. line-height:24px;
  1891. overflow-x:hidden;
  1892. position:absolute;
  1893. top:0;
  1894. -webkit-transition-duration:.3s;
  1895. transition-duration:.3s;
  1896. -webkit-transition-property:background-color,width;
  1897. transition-property:background-color,width;
  1898. -webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
  1899. transition-timing-function:cubic-bezier(.4,0,.2,1);
  1900. width:250px;
  1901. z-index:8
  1902. }
  1903. .search.focused .section{
  1904. background-color:$(search.background.color)
  1905. }
  1906. .search form{
  1907. display:-webkit-box;
  1908. display:-webkit-flex;
  1909. display:-ms-flexbox;
  1910. display:flex
  1911. }
  1912. .search form .search-submit-container{
  1913. -webkit-box-align:center;
  1914. -webkit-align-items:center;
  1915. -ms-flex-align:center;
  1916. align-items:center;
  1917. display:-webkit-box;
  1918. display:-webkit-flex;
  1919. display:-ms-flexbox;
  1920. display:flex;
  1921. -webkit-box-flex:0;
  1922. -webkit-flex:0 0 auto;
  1923. -ms-flex:0 0 auto;
  1924. flex:0 0 auto;
  1925. height:48px;
  1926. -webkit-box-ordinal-group:1;
  1927. -webkit-order:0;
  1928. -ms-flex-order:0;
  1929. order:0
  1930. }
  1931. .search form .search-input{
  1932. -webkit-box-flex:1;
  1933. -webkit-flex:1 1 auto;
  1934. -ms-flex:1 1 auto;
  1935. flex:1 1 auto;
  1936. -webkit-box-ordinal-group:2;
  1937. -webkit-order:1;
  1938. -ms-flex-order:1;
  1939. order:1
  1940. }
  1941. .search form .search-input input{
  1942. box-sizing:border-box;
  1943. height:48px;
  1944. width:100%
  1945. }
  1946. .search .search-submit-container input[type=submit]{
  1947. display:none
  1948. }
  1949. .search .search-submit-container .search-icon{
  1950. margin:0;
  1951. padding:12px 8px
  1952. }
  1953. .search .search-input input{
  1954. background:0 0;
  1955. border:0;
  1956. color:$(search.text.color);
  1957. font:$(search.font);
  1958. outline:0;
  1959. padding:0 8px
  1960. }
  1961. .search .search-input input::-webkit-input-placeholder{
  1962. color:$(search.placeholder.color);
  1963. font:$(search.placeholder.font);
  1964. line-height:48px
  1965. }
  1966. .search .search-input input::-moz-placeholder{
  1967. color:$(search.placeholder.color);
  1968. font:$(search.placeholder.font);
  1969. line-height:48px
  1970. }
  1971. .search .search-input input:-ms-input-placeholder{
  1972. color:$(search.placeholder.color);
  1973. font:$(search.placeholder.font);
  1974. line-height:48px
  1975. }
  1976. .search .search-input input::placeholder{
  1977. color:$(search.placeholder.color);
  1978. font:$(search.placeholder.font);
  1979. line-height:48px
  1980. }
  1981. .search .dim-overlay{
  1982. background-color:transparent
  1983. }
  1984. .centered-top .Header h1{
  1985. box-sizing:border-box;
  1986. color:$(blog.title.color);
  1987. font:$(blog.title.font);
  1988. margin:0;
  1989. padding:0
  1990. }
  1991. .centered-top .Header h1 a,.centered-top .Header h1 a:hover,.centered-top .Header h1 a:visited{
  1992. color:inherit;
  1993. font-size:inherit
  1994. }
  1995. .centered-top .Header p{
  1996. color:$(blog.description.color);
  1997. font:$(blog.description.font);
  1998. line-height:1.7;
  1999. margin:16px 0;
  2000. padding:0
  2001. }
  2002. .sticky .centered-top .Header h1{
  2003. color:$(blog.collapsed.title.color);
  2004. font-size:32px;
  2005. margin:16px 0;
  2006. padding:0;
  2007. overflow:hidden;
  2008. text-overflow:ellipsis;
  2009. white-space:nowrap
  2010. }
  2011. .sticky .centered-top .Header p{
  2012. display:none
  2013. }
  2014. .subscribe-section-container{
  2015. border-left:0;
  2016. margin:0
  2017. }
  2018. .subscribe-section-container .subscribe-button{
  2019. background:0 0;
  2020. border:0;
  2021. margin:0;
  2022. outline:0;
  2023. padding:0;
  2024. color:$(body.button.color);
  2025. cursor:pointer;
  2026. display:inline-block;
  2027. font:$(tabs.text.font);
  2028. margin:0 auto;
  2029. padding:16px;
  2030. text-transform:uppercase;
  2031. white-space:nowrap
  2032. }
  2033. .top-nav .PageList h3{
  2034. margin-$startSide:16px
  2035. }
  2036. .top-nav .PageList ul{
  2037. list-style:none;
  2038. margin:0;
  2039. padding:0
  2040. }
  2041. .top-nav .PageList ul li{
  2042. color:$(body.button.color);
  2043. font:$(body.button.font);
  2044. cursor:pointer;
  2045. text-transform:uppercase;
  2046. font:$(tabs.text.font)
  2047. }
  2048. .top-nav .PageList ul li a{
  2049. background-color:$(tabs.background.color);
  2050. color:$(tabs.text.color);
  2051. display:block;
  2052. height:$(tabs.text.font.size + 2 * 16px);
  2053. line-height:$(tabs.text.font.size + 2 * 16px);
  2054. overflow:hidden;
  2055. padding:0 22px;
  2056. text-overflow:ellipsis;
  2057. vertical-align:middle
  2058. }
  2059. .top-nav .PageList ul li.selected a{
  2060. color:$(tabs.selected.color)
  2061. }
  2062. .top-nav .PageList ul li:first-child a{
  2063. padding-left:16px
  2064. }
  2065. .top-nav .PageList ul li:last-child a{
  2066. padding-right:16px
  2067. }
  2068. .top-nav .PageList .dim-overlay{
  2069. opacity:0
  2070. }
  2071. .top-nav .overflowable-contents li{
  2072. float:$startSide;
  2073. max-width:100%
  2074. }
  2075. .top-nav .overflow-button{
  2076. -webkit-box-align:center;
  2077. -webkit-align-items:center;
  2078. -ms-flex-align:center;
  2079. align-items:center;
  2080. display:-webkit-box;
  2081. display:-webkit-flex;
  2082. display:-ms-flexbox;
  2083. display:flex;
  2084. height:$(tabs.text.font.size + 2 * 16px);
  2085. -webkit-box-flex:0;
  2086. -webkit-flex:0 0 auto;
  2087. -ms-flex:0 0 auto;
  2088. flex:0 0 auto;
  2089. padding:0 16px;
  2090. position:relative;
  2091. -webkit-transition:opacity .3s cubic-bezier(.4,0,.2,1);
  2092. transition:opacity .3s cubic-bezier(.4,0,.2,1);
  2093. width:24px
  2094. }
  2095. .top-nav .overflow-button.hidden{
  2096. display:none
  2097. }
  2098. .top-nav .overflow-button svg{
  2099. margin-top:0
  2100. }
  2101. @media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
  2102. .search{
  2103. width:24px
  2104. }
  2105. .search .search-expand{
  2106. display:block;
  2107. position:relative;
  2108. z-index:8
  2109. }
  2110. .search .search-expand .search-expand-icon{
  2111. fill:transparent
  2112. }
  2113. .search .section{
  2114. background-color:$(search.background.color.transparent);
  2115. width:32px;
  2116. z-index:7
  2117. }
  2118. .search.focused .section{
  2119. width:250px;
  2120. z-index:8
  2121. }
  2122. .search .search-submit-container .svg-icon-24{
  2123. fill:$(header.icons.color)
  2124. }
  2125. .search.focused .search-submit-container .svg-icon-24{
  2126. fill:$(search.icon.color)
  2127. }
  2128. .blog-name,.return_link,.subscribe-section-container{
  2129. opacity:1;
  2130. -webkit-transition:opacity .3s cubic-bezier(.4,0,.2,1);
  2131. transition:opacity .3s cubic-bezier(.4,0,.2,1)
  2132. }
  2133. .centered-top.search-focused .blog-name,.centered-top.search-focused .return_link,.centered-top.search-focused .subscribe-section-container{
  2134. opacity:0
  2135. }
  2136. body.search-view .centered-top.search-focused .blog-name .section,body.search-view .centered-top.search-focused .subscribe-section-container{
  2137. display:none
  2138. }
  2139. }
  2140. @media (max-width:745px){
  2141. .top-nav .section.no-items#page_list_top{
  2142. display:none
  2143. }
  2144. .centered-top{
  2145. padding-top:16px
  2146. }
  2147. .centered-top .header_container{
  2148. margin:0 auto;
  2149. max-width:600px
  2150. }
  2151. .centered-top .hamburger-section{
  2152. -webkit-box-align:center;
  2153. -webkit-align-items:center;
  2154. -ms-flex-align:center;
  2155. align-items:center;
  2156. display:-webkit-box;
  2157. display:-webkit-flex;
  2158. display:-ms-flexbox;
  2159. display:flex;
  2160. height:48px;
  2161. margin-$endSide:24px
  2162. }
  2163. .widget.Header h1{
  2164. font:$(blog.collapsed.title.font);
  2165. padding:0
  2166. }
  2167. .top-nav .PageList{
  2168. max-width:100%;
  2169. overflow-x:auto
  2170. }
  2171. .centered-top-container.sticky .centered-top{
  2172. -webkit-flex-wrap:wrap;
  2173. -ms-flex-wrap:wrap;
  2174. flex-wrap:wrap
  2175. }
  2176. .centered-top-container.sticky .blog-name{
  2177. -webkit-box-flex:1;
  2178. -webkit-flex:1 1 0;
  2179. -ms-flex:1 1 0px;
  2180. flex:1 1 0
  2181. }
  2182. .centered-top-container.sticky .search{
  2183. -webkit-box-flex:0;
  2184. -webkit-flex:0 0 auto;
  2185. -ms-flex:0 0 auto;
  2186. flex:0 0 auto
  2187. }
  2188. .centered-top-container.sticky .hamburger-section,.centered-top-container.sticky .search{
  2189. margin-bottom:8px;
  2190. margin-top:8px
  2191. }
  2192. .centered-top-container.sticky .subscribe-section-container{
  2193. border:0;
  2194. -webkit-box-flex:1;
  2195. -webkit-flex:1 0 100%;
  2196. -ms-flex:1 0 100%;
  2197. flex:1 0 100%;
  2198. margin:-16px 0 0;
  2199. -webkit-box-ordinal-group:6;
  2200. -webkit-order:5;
  2201. -ms-flex-order:5;
  2202. order:5
  2203. }
  2204. body.item-view .centered-top-container.sticky .subscribe-section-container{
  2205. margin-$startSide:24px
  2206. }
  2207. .centered-top-container.sticky .subscribe-button{
  2208. padding:8px 16px 16px;
  2209. margin-bottom:0
  2210. }
  2211. .centered-top-container.sticky .widget.Header h1{
  2212. font-size:16px;
  2213. margin:0
  2214. }
  2215. }
  2216. body.sidebar-visible .page{
  2217. overflow-y:scroll
  2218. }
  2219. .sidebar-container{
  2220. float:$startSide;
  2221. margin-$startSide:15px
  2222. }
  2223. .sidebar-container a{
  2224. font:$(sidebar.link.font);
  2225. color:$(sidebar.link.color)
  2226. }
  2227. .sidebar-container .sidebar-back{
  2228. float:$endSide
  2229. }
  2230. .sidebar-container .navigation{
  2231. display:none
  2232. }
  2233. .sidebar-container .widget{
  2234. margin:auto 0;
  2235. padding:24px
  2236. }
  2237. .sidebar-container .widget .title{
  2238. font:$(widget.title.font)
  2239. }
  2240. @media (min-width:$(posts.width.stream + 15px + sidebar.width + 1px)) and (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
  2241. .error-view .sidebar-container{
  2242. display:none
  2243. }
  2244. }
  2245. @media (max-width:$(posts.width.stream + 15px + sidebar.width)){
  2246. .sidebar-container{
  2247. margin-$startSide:0;
  2248. max-width:none;
  2249. width:100%
  2250. }
  2251. .sidebar-container .navigation{
  2252. display:block;
  2253. padding:24px
  2254. }
  2255. .sidebar-container .navigation+.sidebar.section{
  2256. clear:both
  2257. }
  2258. .sidebar-container .widget{
  2259. padding-$startSide:32px
  2260. }
  2261. .sidebar-container .widget.Profile{
  2262. padding-$startSide:24px
  2263. }
  2264. }
  2265. .post-wrapper{
  2266. background-color:$(posts.background.color);
  2267. position:relative
  2268. }
  2269. .feed-view .blog-posts{
  2270. margin-$endSide:-15px;
  2271. width:calc(100% + 15px)
  2272. }
  2273. .feed-view .post-wrapper{
  2274. border-radius:$(posts.border.radius);
  2275. float:$startSide;
  2276. overflow:hidden;
  2277. -webkit-transition:.3s box-shadow cubic-bezier(.4,0,.2,1);
  2278. transition:.3s box-shadow cubic-bezier(.4,0,.2,1);
  2279. width:$(posts.width.stream)
  2280. }
  2281. .feed-view .post-wrapper:hover{
  2282. 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)
  2283. }
  2284. .feed-view .post-wrapper.hero{
  2285. background-position:center;
  2286. background-size:cover;
  2287. position:relative
  2288. }
  2289. .feed-view .post-wrapper .post,.feed-view .post-wrapper .post .snippet-thumbnail{
  2290. background-color:$(posts.background.color);
  2291. padding:24px 16px
  2292. }
  2293. .feed-view .post-wrapper .snippet-thumbnail{
  2294. -webkit-transition:.3s opacity cubic-bezier(.4,0,.2,1);
  2295. transition:.3s opacity cubic-bezier(.4,0,.2,1)
  2296. }
  2297. .feed-view .post-wrapper.has-labels.image .snippet-thumbnail-container{
  2298. background-color:$(posts.background.color.inverse)
  2299. }
  2300. .feed-view .post-wrapper.has-labels:hover .snippet-thumbnail{
  2301. opacity:.7
  2302. }
  2303. .feed-view .inline-ad,.feed-view .post-wrapper{
  2304. margin-bottom:15px;
  2305. margin-top:0;
  2306. margin-$endSide:15px;
  2307. margin-$startSide:0
  2308. }
  2309. .feed-view .post-wrapper.hero .post-title a{
  2310. font-size:$(posts.title.font.size * 5 / 6);
  2311. line-height:$(posts.title.font.size)
  2312. }
  2313. .feed-view .post-wrapper.not-hero .post-title a{
  2314. font-size:$(posts.title.font.size * 2 / 3);
  2315. line-height:$(posts.title.font.size)
  2316. }
  2317. .feed-view .post-wrapper .post-title a{
  2318. display:block;
  2319. margin:-296px -16px;
  2320. padding:296px 16px;
  2321. position:relative;
  2322. text-overflow:ellipsis;
  2323. z-index:2
  2324. }
  2325. .feed-view .post-wrapper .byline,.feed-view .post-wrapper .comment-link{
  2326. position:relative;
  2327. z-index:3
  2328. }
  2329. .feed-view .not-hero.post-wrapper.no-image .post-title-container{
  2330. position:relative;
  2331. top:-90px
  2332. }
  2333. .feed-view .post-wrapper .post-header{
  2334. padding:5px 0
  2335. }
  2336. .feed-view .byline{
  2337. line-height:$(posts.byline.font.size)
  2338. }
  2339. .feed-view .hero .byline{
  2340. line-height:$(posts.byline.font.size * 1.3)
  2341. }
  2342. .feed-view .hero .byline,.feed-view .hero .byline.post-author a,.feed-view .hero .byline.post-timestamp a{
  2343. font-size:$(posts.byline.font.size + 2px)
  2344. }
  2345. .feed-view .post-comment-link{
  2346. float:$startSide
  2347. }
  2348. .feed-view .post-share-buttons{
  2349. float:$endSide
  2350. }
  2351. .feed-view .header-buttons-byline{
  2352. margin-top:16px;
  2353. height:24px
  2354. }
  2355. .feed-view .header-buttons-byline .byline{
  2356. height:24px
  2357. }
  2358. .feed-view .post-header-right-buttons .post-comment-link,.feed-view .post-header-right-buttons .post-jump-link{
  2359. display:block;
  2360. float:left;
  2361. margin-left:16px
  2362. }
  2363. .feed-view .post .num_comments{
  2364. display:inline-block;
  2365. font:$(posts.title.font);
  2366. font-size:$(posts.title.font.size / 2);
  2367. margin:-14px 6px 0;
  2368. vertical-align:middle
  2369. }
  2370. .feed-view .post-wrapper .post-jump-link{
  2371. float:right
  2372. }
  2373. .feed-view .post-wrapper .post-footer{
  2374. margin-top:15px
  2375. }
  2376. .feed-view .post-wrapper .snippet-thumbnail,.feed-view .post-wrapper .snippet-thumbnail-container{
  2377. height:184px;
  2378. overflow-y:hidden
  2379. }
  2380. .feed-view .post-wrapper .snippet-thumbnail{
  2381. display:block;
  2382. background-position:center;
  2383. background-size:cover;
  2384. width:100%
  2385. }
  2386. .feed-view .post-wrapper.hero .snippet-thumbnail,.feed-view .post-wrapper.hero .snippet-thumbnail-container{
  2387. height:272px;
  2388. overflow-y:hidden
  2389. }
  2390. @media (min-width:$(posts.width.stream + 15px + sidebar.width + 1px)){
  2391. .feed-view .post-title a .snippet-container{
  2392. height:$(posts.title.font.size * 2);
  2393. max-height:$(posts.title.font.size * 2)
  2394. }
  2395. .feed-view .post-title a .snippet-fade{
  2396. background:-webkit-linear-gradient($startSide,$(posts.background.color) 0,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);
  2397. background:linear-gradient(to $startSide,$(posts.background.color) 0,$(posts.background.color) 20%,$(posts.background.color.transparent) 100%);
  2398. color:transparent;
  2399. height:$(posts.title.font.size);
  2400. width:96px
  2401. }
  2402. .feed-view .hero .post-title-container .post-title a .snippet-container{
  2403. height:$(posts.title.font.size);
  2404. max-height:$(posts.title.font.size)
  2405. }
  2406. .feed-view .hero .post-title a .snippet-fade{
  2407. height:$(posts.title.font.size)
  2408. }
  2409. .feed-view .post-header-left-buttons{
  2410. position:relative
  2411. }
  2412. .feed-view .post-header-left-buttons:hover .touch-icon{
  2413. opacity:1
  2414. }
  2415. .feed-view .hero.post-wrapper.no-image .post-authordate,.feed-view .hero.post-wrapper.no-image .post-title-container{
  2416. position:relative;
  2417. top:-150px
  2418. }
  2419. .feed-view .hero.post-wrapper.no-image .post-title-container{
  2420. text-align:center
  2421. }
  2422. .feed-view .hero.post-wrapper.no-image .post-authordate{
  2423. -webkit-box-pack:center;
  2424. -webkit-justify-content:center;
  2425. -ms-flex-pack:center;
  2426. justify-content:center
  2427. }
  2428. .feed-view .labels-outer-container{
  2429. margin:0 -4px;
  2430. opacity:0;
  2431. position:absolute;
  2432. top:20px;
  2433. -webkit-transition:.2s opacity;
  2434. transition:.2s opacity;
  2435. width:calc(100% - 2 * 16px)
  2436. }
  2437. .feed-view .post-wrapper.has-labels:hover .labels-outer-container{
  2438. opacity:1
  2439. }
  2440. .feed-view .labels-container{
  2441. max-height:calc($(labels.font.size * 1.5 + 8px) + 2 * 4px);
  2442. overflow:hidden
  2443. }
  2444. .feed-view .labels-container .labels-more,.feed-view .labels-container .overflow-button-container{
  2445. display:inline-block;
  2446. float:$endSide
  2447. }
  2448. .feed-view .labels-items{
  2449. padding:0 4px
  2450. }
  2451. .feed-view .labels-container a{
  2452. display:inline-block;
  2453. max-width:calc(100% - 16px);
  2454. overflow-x:hidden;
  2455. text-overflow:ellipsis;
  2456. white-space:nowrap;
  2457. vertical-align:top
  2458. }
  2459. .feed-view .labels-more{
  2460. min-width:$(labels.font.size * 1.5 + 8px);
  2461. padding:0;
  2462. width:$(labels.font.size * 1.5 + 8px)
  2463. }
  2464. .feed-view .labels-more{
  2465. margin-$startSide:8px
  2466. }
  2467. .feed-view .byline.post-labels{
  2468. margin:0
  2469. }
  2470. .feed-view .byline.post-labels a,.feed-view .labels-more a{
  2471. background-color:$(posts.background.color);
  2472. color:$(posts.link.color);
  2473. box-shadow:0 0 2px 0 rgba(0,0,0,.18);
  2474. opacity:.9
  2475. }
  2476. .feed-view .labels-more a{
  2477. border-radius:50%;
  2478. display:inline-block;
  2479. font:$(labels.font);
  2480. line-height:$(labels.font.size * 1.5 + 8px);
  2481. height:$(labels.font.size * 1.5 + 8px);
  2482. padding:0;
  2483. text-align:center;
  2484. width:$(labels.font.size * 1.5 + 8px);
  2485. max-width:$(labels.font.size * 1.5 + 8px)
  2486. }
  2487. }
  2488. @media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
  2489. .feed-view .centered{
  2490. padding-right:0
  2491. }
  2492. .feed-view .centered .main-container{
  2493. float:none
  2494. }
  2495. .feed-view .blog-posts{
  2496. margin-$endSide:0;
  2497. width:auto
  2498. }
  2499. .feed-view .post-wrapper{
  2500. float:none
  2501. }
  2502. .feed-view .post-wrapper.hero{
  2503. width:$(posts.width.stream + 15px + sidebar.width)
  2504. }
  2505. .feed-view .page_body .centered div.widget.FeaturedPost,.feed-view div.widget.Blog{
  2506. width:$(posts.width.stream)
  2507. }
  2508. .post-filter-message,.top-nav{
  2509. margin-top:32px
  2510. }
  2511. .widget.Header h1{
  2512. font:$(blog.collapsed.title.font)
  2513. }
  2514. .post-filter-message{
  2515. display:block
  2516. }
  2517. .post-filter-message a{
  2518. display:block;
  2519. margin-top:8px;
  2520. padding-left:0
  2521. }
  2522. .feed-view .not-hero .post-title-container .post-title a .snippet-container{
  2523. height:auto
  2524. }
  2525. .feed-view .vertical-ad-container{
  2526. display:none
  2527. }
  2528. .feed-view .blog-posts .inline-ad{
  2529. display:block
  2530. }
  2531. }
  2532. @media (max-width:$(posts.width.stream + 15px + sidebar.width)){
  2533. .feed-view .centered .main{
  2534. float:none;
  2535. width:100%
  2536. }
  2537. .feed-view .centered .centered-bottom{
  2538. max-width:600px;
  2539. width:auto
  2540. }
  2541. .feed-view .centered-bottom .hero.post-wrapper,.feed-view .centered-bottom .post-wrapper{
  2542. max-width:600px;
  2543. width:auto
  2544. }
  2545. .feed-view #header{
  2546. width:auto
  2547. }
  2548. .feed-view .page_body .centered div.widget.FeaturedPost,.feed-view div.widget.Blog{
  2549. top:50px;
  2550. width:100%;
  2551. z-index:6
  2552. }
  2553. .feed-view .main>.widget .title,.feed-view .post-filter-message{
  2554. margin-left:8px;
  2555. margin-right:8px
  2556. }
  2557. .feed-view .hero.post-wrapper{
  2558. background-color:$(posts.link.color);
  2559. border-radius:0;
  2560. height:416px
  2561. }
  2562. .feed-view .hero.post-wrapper .post{
  2563. bottom:0;
  2564. box-sizing:border-box;
  2565. margin:16px;
  2566. position:absolute;
  2567. width:calc(100% - 32px)
  2568. }
  2569. .feed-view .hero.no-image.post-wrapper .post{
  2570. box-shadow:0 0 16px rgba(0,0,0,.2);
  2571. padding-top:120px;
  2572. top:0
  2573. }
  2574. .feed-view .hero.no-image.post-wrapper .post-footer{
  2575. position:absolute;
  2576. bottom:16px;
  2577. width:calc(100% - 32px)
  2578. }
  2579. .hero.post-wrapper h3{
  2580. white-space:normal
  2581. }
  2582. .feed-view .post-wrapper h3,.feed-view .post-wrapper:hover h3{
  2583. width:auto
  2584. }
  2585. .feed-view .hero.post-wrapper{
  2586. margin:0 0 15px 0
  2587. }
  2588. .feed-view .inline-ad,.feed-view .post-wrapper{
  2589. margin:0 8px 16px
  2590. }
  2591. .feed-view .post-labels{
  2592. display:none
  2593. }
  2594. .feed-view .post-wrapper .snippet-thumbnail{
  2595. background-size:cover;
  2596. display:block;
  2597. height:184px;
  2598. margin:0;
  2599. max-height:184px;
  2600. width:100%
  2601. }
  2602. .feed-view .post-wrapper.hero .snippet-thumbnail,.feed-view .post-wrapper.hero .snippet-thumbnail-container{
  2603. height:416px;
  2604. max-height:416px
  2605. }
  2606. .feed-view .header-author-byline{
  2607. display:none
  2608. }
  2609. .feed-view .hero .header-author-byline{
  2610. display:block
  2611. }
  2612. }
  2613. .item-view .page_body{
  2614. padding-top:70px
  2615. }
  2616. .item-view .centered,.item-view .centered .main,.item-view .centered .main-container,.item-view .page_body.has-vertical-ads .centered,.item-view .page_body.has-vertical-ads .centered .main,.item-view .page_body.has-vertical-ads .centered .main-container{
  2617. width:100%
  2618. }
  2619. .item-view .main-container{
  2620. max-width:890px;
  2621. margin-$endSide:15px
  2622. }
  2623. .item-view .centered-bottom{
  2624. max-width:1185px;
  2625. margin-left:auto;
  2626. margin-right:auto;
  2627. padding-right:0;
  2628. padding-top:0;
  2629. width:100%
  2630. }
  2631. .item-view .page_body.has-vertical-ads .centered-bottom{
  2632. max-width:1328px;
  2633. width:100%
  2634. }
  2635. .item-view .bg-photo{
  2636. -webkit-filter:blur(12px);
  2637. filter:blur(12px);
  2638. -webkit-transform:scale(1.05);
  2639. -ms-transform:scale(1.05);
  2640. transform:scale(1.05)
  2641. }
  2642. .item-view .bg-photo-container+.centered .centered-bottom{
  2643. margin-top:0
  2644. }
  2645. .item-view .bg-photo-container+.centered .centered-bottom .post-wrapper{
  2646. margin-top:-368px
  2647. }
  2648. .item-view .bg-photo-container+.centered-bottom{
  2649. margin-top:0
  2650. }
  2651. .item-view .inline-ad{
  2652. margin-bottom:0;
  2653. margin-top:30px;
  2654. padding-bottom:16px
  2655. }
  2656. .item-view .post-wrapper{
  2657. border-radius:$(posts.border.radius) $(posts.border.radius) 0 0;
  2658. float:none;
  2659. height:auto;
  2660. margin:0;
  2661. padding:32px;
  2662. width:auto
  2663. }
  2664. .item-view .post-outer{
  2665. padding:8px
  2666. }
  2667. .item-view .comments{
  2668. border-radius:0 0 $(posts.border.radius) $(posts.border.radius);
  2669. color:$(posts.text.color);
  2670. margin:0 8px 8px
  2671. }
  2672. .item-view .post-title{
  2673. font:$(posts.title.font)
  2674. }
  2675. .item-view .post-header{
  2676. display:block;
  2677. width:auto
  2678. }
  2679. .item-view .post-share-buttons{
  2680. display:block;
  2681. margin-bottom:40px;
  2682. margin-top:20px
  2683. }
  2684. .item-view .post-footer{
  2685. display:block
  2686. }
  2687. .item-view .post-footer a{
  2688. color:$(body.button.color);
  2689. font:$(body.button.font);
  2690. cursor:pointer;
  2691. text-transform:uppercase;
  2692. color:$(posts.link.color)
  2693. }
  2694. .item-view .post-footer-line{
  2695. border:0
  2696. }
  2697. .item-view .sidebar-container{
  2698. box-sizing:border-box;
  2699. margin-$startSide:0;
  2700. margin-top:15px;
  2701. max-width:280px;
  2702. padding:0;
  2703. width:280px
  2704. }
  2705. .item-view .sidebar-container .widget{
  2706. padding:15px 0
  2707. }
  2708. @media (max-width:1328px){
  2709. .item-view .centered{
  2710. width:100%
  2711. }
  2712. .item-view .centered .centered-bottom{
  2713. margin-left:auto;
  2714. margin-right:auto;
  2715. padding-right:0;
  2716. padding-top:0;
  2717. width:100%
  2718. }
  2719. .item-view .centered .main-container{
  2720. float:none;
  2721. margin:0 auto
  2722. }
  2723. .item-view div.section.main div.widget.PopularPosts{
  2724. margin:0 2.5%;
  2725. position:relative;
  2726. top:0;
  2727. width:95%
  2728. }
  2729. .item-view .bg-photo-container+.centered .main{
  2730. margin-top:0
  2731. }
  2732. .item-view div.widget.Blog{
  2733. margin:auto;
  2734. width:100%
  2735. }
  2736. .item-view .post-share-buttons{
  2737. margin-bottom:32px
  2738. }
  2739. .item-view .sidebar-container{
  2740. float:none;
  2741. margin:0;
  2742. max-height:none;
  2743. max-width:none;
  2744. padding:0 15px;
  2745. position:static;
  2746. width:100%
  2747. }
  2748. .item-view .sidebar-container .section{
  2749. margin:15px auto;
  2750. max-width:480px
  2751. }
  2752. .item-view .sidebar-container .section .widget{
  2753. position:static;
  2754. width:100%
  2755. }
  2756. .item-view .vertical-ad-container{
  2757. display:none
  2758. }
  2759. .item-view .blog-posts .inline-ad{
  2760. display:block
  2761. }
  2762. }
  2763. @media (max-width:745px){
  2764. .item-view.has-subscribe .bg-photo-container,.item-view.has-subscribe .centered-bottom{
  2765. padding-top:88px
  2766. }
  2767. .item-view .bg-photo,.item-view .bg-photo-container{
  2768. width:auto;
  2769. height:296px
  2770. }
  2771. .item-view .bg-photo-container+.centered .centered-bottom .post-wrapper{
  2772. margin-top:-240px
  2773. }
  2774. .item-view .bg-photo-container+.centered .centered-bottom,.item-view .page_body.has-subscribe .bg-photo-container+.centered .centered-bottom{
  2775. margin-top:0
  2776. }
  2777. .item-view .post-outer{
  2778. background:$(posts.background.color)
  2779. }
  2780. .item-view .post-outer .post-wrapper{
  2781. padding:16px
  2782. }
  2783. .item-view .comments{
  2784. margin:0
  2785. }
  2786. }
  2787. #comments{
  2788. background:$(posts.background.color);
  2789. border-top:1px solid $(sidebar.separator.color);
  2790. margin-top:0;
  2791. padding:32px
  2792. }
  2793. #comments .comment-form .title,#comments h3.title{
  2794. position:absolute;
  2795. clip:rect(1px,1px,1px,1px);
  2796. padding:0;
  2797. border:0;
  2798. height:1px;
  2799. width:1px;
  2800. overflow:hidden
  2801. }
  2802. #comments .comment-form{
  2803. border-bottom:1px solid $(sidebar.separator.color);
  2804. border-top:1px solid $(sidebar.separator.color)
  2805. }
  2806. .item-view #comments .comment-form h4{
  2807. position:absolute;
  2808. clip:rect(1px,1px,1px,1px);
  2809. padding:0;
  2810. border:0;
  2811. height:1px;
  2812. width:1px;
  2813. overflow:hidden
  2814. }
  2815. #comment-holder .continue{
  2816. display:none
  2817. }
  2818. ]]></b:skin>
  2819.  
  2820. <b:template-skin>
  2821. <![CDATA[
  2822. body#layout .hidden,
  2823. body#layout .invisible {
  2824. display: inherit;
  2825. }
  2826. body#layout .centered-bottom {
  2827. position: relative;
  2828. }
  2829. body#layout .section.featured-post,
  2830. body#layout .section.main,
  2831. body#layout .section.vertical-ad-container {
  2832. float: left;
  2833. width: 55%;
  2834. }
  2835. body#layout .sidebar-container {
  2836. display: inline-block;
  2837. width: 39%;
  2838. }
  2839. body#layout .centered-bottom:after {
  2840. clear: both;
  2841. content: "";
  2842. display: table;
  2843. }
  2844. body#layout .hamburger-menu,
  2845. body#layout .search {
  2846. display: none;
  2847. }
  2848. ]]>
  2849. </b:template-skin>
  2850.  
  2851.  
  2852. <b:if cond='data:blog.adsenseClientId and !data:widgets.AdSense.empty'>
  2853. <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
  2854. </b:if>
  2855. <b:include data='blog' name='google-analytics'/>
  2856.  
  2857. <script async='async' src='https://www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>
  2858. </head>
  2859.  
  2860. <body>
  2861. <b:class cond='data:view.isPreview' name='preview'/>
  2862. <b:class cond='data:view.isMultipleItems' name='feed-view'/>
  2863. <b:class cond='data:view.isSingleItem' name='item-view'/>
  2864. <b:class cond='data:view.isArchive' name='archive-view'/>
  2865. <b:class cond='data:view.isLabelSearch' name='label-view'/>
  2866. <b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>
  2867. <b:class cond='data:view.isError' name='error-view'/>
  2868. <b:class name='version-1-3-0'/>
  2869.  
  2870. <b:include name='skipNavigation'/>
  2871. <div class='page'>
  2872. <b:with value='data:widgets.AdSense any (w =&gt; w.sectionId == &quot;ads&quot;)' var='hasVerticalAds'>
  2873. <div class='page_body'>
  2874. <b:class cond='data:hasVerticalAds' name='has-vertical-ads'/>
  2875.  
  2876. <b:if cond='data:view.isSingleItem'>
  2877. <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>
  2878. <b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/>
  2879. <div class='bg-photo-container'>
  2880. <div class='bg-photo'/>
  2881. </div>
  2882. </b:if>
  2883. </b:if>
  2884. <div class='centered'>
  2885. <b:if cond='not data:view.isSingleItem'>
  2886. <div class='centered-top-placeholder'/>
  2887. </b:if>
  2888. <header class='centered-top-container' role='banner'>
  2889. <b:class cond='data:view.isSingleItem' name='sticky'/>
  2890. <div class='centered-top'>
  2891. <b:class cond='data:view.isSearch and data:view.search.query' name='search-focused'/>
  2892.  
  2893. <b:if cond='data:view.isSingleItem'>
  2894. <a class='return_link' expr:href='data:blog.homepageUrl'>
  2895. <b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>
  2896. </a>
  2897. <b:else/>
  2898. <div class='hamburger-section'>
  2899. <b:include data='{ iconClass: &quot;touch-icon hamburger-menu&quot; }' name='menuIcon'/>
  2900. </div>
  2901. </b:if>
  2902.  
  2903. <div class='blog-name'>
  2904.  
  2905. </div>
  2906.  
  2907. <b:if cond='data:view.isLayoutMode or data:widgets any (w =&gt; w.sectionId == &quot;search_top&quot;)'>
  2908. <div class='search'>
  2909. <b:class cond='data:view.isSearch and data:view.search.query' name='focused'/>
  2910. <button class='search-expand touch-icon-button' expr:aria-label='data:messages.search.escaped'>
  2911. <div class='search-expand-text'><data:messages.search/></div>
  2912. <b:include data='{ iconClass: &quot;touch-icon search-expand-icon&quot; }' name='searchIcon'/>
  2913. </button>
  2914. <b:section id='search_top' name='Search (Top)' showaddelement='false'/>
  2915. </div>
  2916. </b:if>
  2917.  
  2918. <b:if cond='data:view.isLayoutMode or data:widgets any (w =&gt; w.sectionId == &quot;subscription&quot;)'>
  2919. <section class='subscribe-section-container'>
  2920. <button class='subscribe-button'><b:eval expr='data:messages.subscribe'/></button>
  2921. <div class='subscribe-popup-container'>
  2922. <div aria-labelledby='subscribe-title' class='subscribe-popup dialog hidden' role='dialog' tabindex='-1'>
  2923. <div role='document'>
  2924. <h3 class='subscribe-title' id='subscribe-title'><b:eval expr='data:messages.subscribeToThisBlog'/></h3>
  2925.  
  2926. </div>
  2927. </div>
  2928. </div>
  2929. </section>
  2930. </b:if>
  2931.  
  2932. <b:if cond='data:view.isLayoutMode or not data:view.isSingleItem'>
  2933. <nav class='top-nav' role='navigation'>
  2934. <b:section id='page_list_top' name='Page List (Top)' showaddelement='false'>
  2935. <b:widget id='PageList1' locked='true' title='' type='PageList' version='2' visible='false'>
  2936. <b:widget-settings>
  2937. <b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'https://tgarba1.blogspot.com/', 'title': 'الصفحة الرئيسية', 'position': 0}}]]></b:widget-setting>
  2938. <b:widget-setting name='homeTitle'>الصفحة الرئيسية</b:widget-setting>
  2939. </b:widget-settings>
  2940. <b:includable id='main'>
  2941. <b:include name='widget-title'/>
  2942. <b:include name='content'/>
  2943. </b:includable>
  2944. <b:includable id='content'>
  2945. <div class='widget-content'>
  2946. <b:include cond='data:widget.sectionId == &quot;page_list_top&quot;' name='overflowablePageList'/>
  2947. <b:include cond='data:widget.sectionId != &quot;page_list_top&quot;' name='pageList'/>
  2948. </div>
  2949. </b:includable>
  2950. <b:includable id='overflowButton'>
  2951. <b:include name='verticalMoreIcon'/>
  2952. </b:includable>
  2953. <b:includable id='overflowablePageList'>
  2954. <div class='overflowable-container'>
  2955. <div class='overflowable-contents'>
  2956. <div class='container'>
  2957. <b:with value='true' var='overflow'>
  2958. <b:with value='&quot;tabs&quot;' var='pageListClass'>
  2959. <b:include name='pageList'/>
  2960. </b:with>
  2961. </b:with>
  2962. </div>
  2963. </div>
  2964. <div class='overflow-button hidden'>
  2965. <b:include name='overflowButton'/>
  2966. </div>
  2967. </div>
  2968. </b:includable>
  2969. <b:includable id='pageLink'>
  2970. <li>
  2971. <b:class cond='data:overflow' name='overflowable-item'/>
  2972. <b:class cond='data:link.isCurrentPage' name='selected'/>
  2973.  
  2974. <a expr:href='data:link.href'><data:link.title/></a>
  2975. </li>
  2976. </b:includable>
  2977. <b:includable id='pageList'>
  2978. <ul>
  2979. <b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
  2980. <b:loop values='data:links' var='link'>
  2981. <b:include name='pageLink'/>
  2982. </b:loop>
  2983. </ul>
  2984. </b:includable>
  2985. </b:widget>
  2986. <b:widget id='HTML1' locked='false' title='' type='HTML' visible='true'>
  2987. <b:widget-settings>
  2988. <b:widget-setting name='content'><![CDATA[<embed width="350" height="250" src="//www.xatech.com/web_gear/chat/chat.swf" flashvars="id=217227129&amp;gn=8henwa&amp;xc=14368" type="application/x-shockwave-flash" __idm_id__="79873"></embed>]]></b:widget-setting>
  2989. </b:widget-settings>
  2990. <b:includable id='main'>
  2991. <b:include name='widget-title'/>
  2992. <div class='widget-content'>
  2993. <data:content/>
  2994. </div>
  2995. </b:includable>
  2996. </b:widget>
  2997. </b:section>
  2998. </nav>
  2999. </b:if>
  3000. </div>
  3001.  
  3002. </header>
  3003. <div class='centered-bottom'>
  3004. <b:if cond='data:view.isArchive or (data:view.isSearch and data:view.search.resultsMessage)'>
  3005. <div class='post-filter-message'>
  3006. <div>
  3007. <b:if cond='data:view.isArchive'>
  3008. <data:view.archive.rangeMessage/>
  3009. <b:elseif cond='data:view.isSearch and data:view.search.resultsMessage'/>
  3010. <data:view.search.resultsMessageHtml/>
  3011. </b:if>
  3012. </div>
  3013. <div>
  3014. <a expr:href='data:blog.homepageUrl'><data:messages.viewAll/></a>
  3015. </div>
  3016. </div>
  3017. </b:if>
  3018.  
  3019. <main class='main-container' id='main' role='main' tabindex='-1'>
  3020. <b:if cond='data:view.isMultipleItems'>
  3021. <h2 class='main-heading'><data:messages.posts/></h2>
  3022. </b:if>
  3023.  
  3024. <b:section class='featured-post' id='featured_post' name='Featured Post' showaddelement='false'>
  3025. <b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='true' title='' type='FeaturedPost' version='2' visible='true'>
  3026. <b:widget-settings>
  3027. <b:widget-setting name='showSnippet'>false</b:widget-setting>
  3028. <b:widget-setting name='showPostTitle'>true</b:widget-setting>
  3029. <b:widget-setting name='showFirstImage'>true</b:widget-setting>
  3030. <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
  3031. </b:widget-settings>
  3032. <b:includable id='main' var='this'>
  3033. <b:include name='widget-title'/>
  3034. <div class='widget-content'>
  3035. <b:include name='snippetedPosts'/>
  3036. </div>
  3037. </b:includable>
  3038. <b:includable id='commentsLink'>
  3039. <a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url' expr:onclick='data:post.commentsUrlOnclick'>
  3040. <b:include name='commentIcon'/>
  3041. <span class='num_comments'>
  3042. <data:post.numberOfComments/>
  3043. </span>
  3044. </a>
  3045. </b:includable>
  3046. <b:includable id='footerBylines'>
  3047. <!-- Set the calling parent element to be a container. -->
  3048. <b:class name='container'/>
  3049.  
  3050. <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3051. <b:include name='super.footerBylines'/>
  3052. <b:else/>
  3053. <b:include data='{ items: [[&quot;comments&quot;]] }' name='footerBylinesOverride'/>
  3054. </b:if>
  3055. <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
  3056. </b:includable>
  3057. <b:includable id='headerByline'>
  3058. <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3059. <b:include name='super.headerByline'/>
  3060. <b:else/>
  3061. <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;, &quot;labels&quot;] }' name='headerBylineOverride'/>
  3062. </b:if>
  3063. <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
  3064. </b:includable>
  3065. <b:includable id='postLabels'>
  3066. <b:if cond='data:view.isMultipleItems'>
  3067. <div class='labels-outer-container'>
  3068. <div class='labels-container overflowable-container overflowable-no-popup'>
  3069. <div class='labels-items overflowable-contents byline post-labels'>
  3070. <b:loop index='i' values='data:post.labels' var='label'>
  3071. <span class='overflowable-item'>
  3072. <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  3073. </span>
  3074. </b:loop>
  3075. </div>
  3076. <span class='labels-more overflow-button hidden'>
  3077. <a expr:href='data:post.link ?: data:post.url'>+<span class='overflow-count'/></a>
  3078. </span>
  3079. </div>
  3080. </div>
  3081. <b:else/>
  3082. <b:include name='super.postLabels'/>
  3083. </b:if>
  3084. </b:includable>
  3085. <b:includable id='postShareButtons' var='post'>
  3086. <!-- We call super.postShareButtons from the migrated positions. -->
  3087. </b:includable>
  3088. <b:includable id='postTitle' var='post'>
  3089. <!-- Snippetize the post title -->
  3090. <div class='post-title-container'>
  3091. <a expr:name='data:post.id'/>
  3092. <h3 class='post-title entry-title'>
  3093. <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
  3094. <a expr:href='data:post.link ?: data:post.url'>
  3095. <div class='snippet-container r-snippet-container'>
  3096. <div class='r-snippetized'>
  3097. <data:post.title/>
  3098. </div>
  3099. <b:if cond='data:post.title != &quot;&quot;'>
  3100. <div class='snippet-fade r-snippet-fade hidden'/>
  3101. </b:if>
  3102. </div>
  3103. </a>
  3104. <b:else/>
  3105. <data:post.title/>
  3106. </b:if>
  3107. </h3>
  3108. </div>
  3109. </b:includable>
  3110. <b:includable id='postWrapperClasses'>
  3111. <b:class cond='data:post.featuredImage' name='image'/>
  3112. <b:class cond='not data:post.featuredImage' name='no-image'/>
  3113. <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>
  3114. </b:includable>
  3115. <b:includable id='snippetedPostContent'>
  3116. <b:if cond='data:widget.sectionId != &quot;featured_post&quot;'>
  3117. <b:include name='super.snippetedPostContent'/>
  3118. <b:else/>
  3119. <b:with value='&quot;post-thumb-&quot; + data:post.id' var='thumbClassName'>
  3120. <b:if cond='data:post.featuredImage'>
  3121. <style>
  3122. @media (min-width: 746px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 800, &quot;800:272&quot;).cssEscaped'/>);} }
  3123. @media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185, &quot;1185:272&quot;).cssEscaped'/>);} }
  3124. @media (max-width: 400px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, &quot;1:1&quot;).cssEscaped'/>); } }
  3125. @media (min-width: 401px) and (max-width: 745px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 745, &quot;745:400&quot;).cssEscaped'/>); } }
  3126. </style>
  3127. </b:if>
  3128.  
  3129. <div expr:class='&quot;post-wrapper hero post-&quot; + data:post.id'>
  3130. <b:include name='postWrapperClasses'/>
  3131. <b:include name='feedPostImage'/>
  3132.  
  3133. <div class='slide'>
  3134. <div class='post hentry'>
  3135. <b:include cond='data:postDisplay.showTitle' data='post' name='postTitle'/>
  3136. <b:include name='headerByline'/>
  3137. <b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>
  3138. <div class='post-footer'>
  3139. <b:include name='footerBylines'/>
  3140. </div>
  3141. </div>
  3142. </div>
  3143. </div>
  3144. </b:with>
  3145. </b:if>
  3146. </b:includable>
  3147. <b:includable id='snippetedPostThumbnail'>
  3148. <div class='item-thumbnail'>
  3149. <a expr:href='data:post.url'>
  3150. <b:include data='{ image: data:post.featuredImage, imageSizes: [280,560,840,1120,1400] }' name='responsiveImage'/>
  3151. </a>
  3152. </div>
  3153. </b:includable>
  3154. </b:widget>
  3155. </b:section>
  3156.  
  3157. <b:section class='main' id='page_body' name='Page Body' showaddelement='false'>
  3158. <b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog' version='2' visible='true'>
  3159. <b:widget-settings>
  3160. <b:widget-setting name='showDateHeader'>false</b:widget-setting>
  3161. <b:widget-setting name='style.textcolor'>#729c0b</b:widget-setting>
  3162. <b:widget-setting name='showShareButtons'>true</b:widget-setting>
  3163. <b:widget-setting name='showCommentLink'>true</b:widget-setting>
  3164. <b:widget-setting name='style.urlcolor'>#efefef</b:widget-setting>
  3165. <b:widget-setting name='showAuthor'>false</b:widget-setting>
  3166. <b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
  3167. <b:widget-setting name='style.linkcolor'>#f7f7f7</b:widget-setting>
  3168. <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
  3169. <b:widget-setting name='style.bgcolor'>#000000</b:widget-setting>
  3170. <b:widget-setting name='timestampLabel'/>
  3171. <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
  3172. <b:widget-setting name='style.layout'>1x1</b:widget-setting>
  3173. <b:widget-setting name='showLabels'>true</b:widget-setting>
  3174. <b:widget-setting name='showLocation'>true</b:widget-setting>
  3175. <b:widget-setting name='postLabelsLabel'/>
  3176. <b:widget-setting name='showTimestamp'>true</b:widget-setting>
  3177. <b:widget-setting name='postsPerAd'>1</b:widget-setting>
  3178. <b:widget-setting name='showBacklinks'>false</b:widget-setting>
  3179. <b:widget-setting name='style.bordercolor'>#000000</b:widget-setting>
  3180. <b:widget-setting name='showInlineAds'>false</b:widget-setting>
  3181. <b:widget-setting name='showReactions'>false</b:widget-setting>
  3182. </b:widget-settings>
  3183. <b:includable id='main'>
  3184. <b:include name='noContentPlaceholder'/>
  3185. <b:include name='super.main'/>
  3186. </b:includable>
  3187. <b:includable id='aboutPostAuthor'>
  3188. <div class='author-name'>
  3189. <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
  3190. <span>
  3191. <data:post.author.name/>
  3192. </span>
  3193. </a>
  3194. </div>
  3195. <div>
  3196. <span class='author-desc'>
  3197. <data:post.author.aboutMe/>
  3198. </span>
  3199. </div>
  3200. </b:includable>
  3201. <b:includable id='addComments'>
  3202. <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  3203. <b:message name='messages.postAComment'/>
  3204. </a>
  3205. </b:includable>
  3206. <b:includable id='commentAuthorAvatar'>
  3207. <div class='avatar-image-container'>
  3208. <img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
  3209. </div>
  3210. </b:includable>
  3211. <b:includable id='commentDeleteIcon' var='comment'>
  3212. <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
  3213. <b:if cond='data:showCmtPopup'>
  3214. <div class='goog-toggle-button'>
  3215. <div class='goog-inline-block comment-action-icon'/>
  3216. </div>
  3217. <b:else/>
  3218. <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
  3219. <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
  3220. </a>
  3221. </b:if>
  3222. </span>
  3223. </b:includable>
  3224. <b:includable id='commentForm' var='post'>
  3225. <div class='comment-form'>
  3226. <a name='comment-form'/>
  3227. <h4 id='comment-post-message'><data:messages.postAComment/></h4>
  3228. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3229. <p><data:this.messages.blogComment/></p>
  3230. </b:if>
  3231. <b:include data='post' name='commentFormIframeSrc'/>
  3232. <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%'/>
  3233. <data:post.cmtfpIframe/>
  3234. <script type='text/javascript'>
  3235. BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
  3236. </script>
  3237. </div>
  3238. </b:includable>
  3239. <b:includable id='commentFormIframeSrc' var='post'>
  3240. <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
  3241. </b:includable>
  3242. <b:includable id='commentItem' var='comment'>
  3243. <div class='comment' expr:id='&quot;c&quot; + data:comment.id'>
  3244. <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
  3245.  
  3246. <div class='comment-block'>
  3247. <div class='comment-author'>
  3248. <b:if cond='data:comment.authorUrl'>
  3249. <b:message name='messages.authorSaidWithLink'>
  3250. <b:param expr:value='data:comment.author' name='authorName'/>
  3251. <b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
  3252. </b:message>
  3253. <b:else/>
  3254. <b:message name='messages.authorSaid'>
  3255. <b:param expr:value='data:comment.author' name='authorName'/>
  3256. </b:message>
  3257. </b:if>
  3258. </div>
  3259. <div expr:class='&quot;comment-body&quot; + (data:comment.isDeleted ? &quot; deleted&quot; : &quot;&quot;)'>
  3260. <data:comment.body/>
  3261. </div>
  3262. <div class='comment-footer'>
  3263. <span class='comment-timestamp'>
  3264. <a expr:href='data:comment.url' title='comment permalink'>
  3265. <data:comment.timestamp/>
  3266. </a>
  3267. <b:include data='comment' name='commentDeleteIcon'/>
  3268. </span>
  3269. </div>
  3270. </div>
  3271. </div>
  3272. </b:includable>
  3273. <b:includable id='commentList' var='comments'>
  3274. <div id='comments-block'>
  3275. <b:loop values='data:comments' var='comment'>
  3276. <b:include data='comment' name='commentItem'/>
  3277. </b:loop>
  3278. </div>
  3279. </b:includable>
  3280. <b:includable id='commentPicker' var='post'>
  3281. <b:if cond='data:post.commentSource == 1'>
  3282. <b:include data='post' name='iframeComments'/>
  3283. <b:elseif cond='data:post.showThreadedComments'/>
  3284. <b:include data='post' name='threadedComments'/>
  3285. <b:else/>
  3286. <b:include data='post' name='comments'/>
  3287. </b:if>
  3288. </b:includable>
  3289. <b:includable id='comments' var='post'>
  3290. <section expr:class='&quot;comments&quot; + (data:post.embedCommentForm ? &quot; embed&quot; : &quot;&quot;)' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  3291. <a name='comments'/>
  3292. <b:if cond='data:post.allowComments'>
  3293.  
  3294. <b:include name='commentsTitle'/>
  3295.  
  3296. <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  3297. <b:include cond='data:post.comments' data='post.comments' name='commentList'/>
  3298. </div>
  3299.  
  3300. <b:if cond='data:post.commentPagingRequired'>
  3301. <div class='paging-control-container'>
  3302. <b:if cond='data:post.hasOlderLinks'>
  3303. <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
  3304. <data:messages.oldest/>
  3305. </a>
  3306. <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
  3307. <data:messages.older/>
  3308. </a>
  3309. </b:if>
  3310.  
  3311. <span class='comment-range-text'>
  3312. <data:post.commentRangeText/>
  3313. </span>
  3314.  
  3315. <b:if cond='data:post.hasNewerLinks'>
  3316. <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
  3317. <data:messages.newer/>
  3318. </a>
  3319. <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
  3320. <data:messages.newest/>
  3321. </a>
  3322. </b:if>
  3323. </div>
  3324. </b:if>
  3325.  
  3326. <div class='footer'>
  3327. <b:if cond='data:post.embedCommentForm'>
  3328. <b:if cond='data:post.allowNewComments'>
  3329. <b:include data='post' name='commentForm'/>
  3330. <b:else/>
  3331. <data:post.noNewCommentsText/>
  3332. </b:if>
  3333. <b:else/>
  3334. <b:if cond='data:post.allowComments'>
  3335. <b:include data='post' name='addComments'/>
  3336. </b:if>
  3337. </b:if>
  3338. </div>
  3339. </b:if>
  3340. <b:if cond='data:showCmtPopup'>
  3341. <div id='comment-popup'>
  3342. <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  3343. </iframe>
  3344. </div>
  3345. </b:if>
  3346. </section>
  3347. </b:includable>
  3348. <b:includable id='commentsLink'>
  3349. <a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url' expr:onclick='data:post.commentsUrlOnclick'>
  3350. <b:include name='commentIcon'/>
  3351. <span class='num_comments'>
  3352. <data:post.numberOfComments/>
  3353. </span>
  3354. </a>
  3355. </b:includable>
  3356. <b:includable id='commentsTitle'>
  3357. <h3 class='title'><data:messages.comments/></h3>
  3358. </b:includable>
  3359. <b:includable id='defaultAdUnit'>
  3360. <!-- Clear out style (need non-empty string) -->
  3361. <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  3362. <b:include name='super.defaultAdUnit'/>
  3363. </b:with>
  3364. </b:includable>
  3365. <b:includable id='feedLinks'>
  3366. <!-- Don't show feed links. -->
  3367. </b:includable>
  3368. <b:includable id='feedLinksBody' var='links'>
  3369. <div class='feed-links'>
  3370. <data:messages.subscribeTo/>
  3371. <b:loop values='data:links' var='f'>
  3372. <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  3373. </b:loop>
  3374. </div>
  3375. </b:includable>
  3376. <b:includable id='footerBylines'>
  3377. <!-- Set the calling parent element to be a container. -->
  3378. <b:class name='container'/>
  3379.  
  3380. <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3381. <b:include name='super.footerBylines'/>
  3382. <b:else/>
  3383. <b:include data='{ items: [[&quot;comments&quot;]] }' name='footerBylinesOverride'/>
  3384. </b:if>
  3385. <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
  3386. </b:includable>
  3387. <b:includable id='headerByline'>
  3388. <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3389. <b:include name='super.headerByline'/>
  3390. <b:else/>
  3391. <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;, &quot;labels&quot;] }' name='headerBylineOverride'/>
  3392. </b:if>
  3393. <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
  3394. </b:includable>
  3395. <b:includable id='homePageLink'>
  3396. <b:comment>We don&#39;t show home page links in Emporio.</b:comment>
  3397. </b:includable>
  3398. <b:includable id='iframeComments' var='post'>
  3399. <b:if cond='data:post.allowIframeComments'>
  3400. <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
  3401. <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
  3402.  
  3403. <b:if cond='!data:post.embedCommentForm'>
  3404. <b:include data='post' name='commentsLink'/>
  3405. </b:if>
  3406. </b:if>
  3407. </b:includable>
  3408. <b:includable id='inlineAd' var='post'>
  3409. <!-- Cap the total number of ads (widgets and inline ads). -->
  3410. <b:include cond='data:post.adNumber lt 3' data='post' name='super.inlineAd'/>
  3411. </b:includable>
  3412. <b:includable id='nextPageLink'>
  3413. <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
  3414. <data:messages.morePosts/>
  3415. </a>
  3416. </b:includable>
  3417. <b:includable id='post' var='post'>
  3418. <b:with value='&quot;post-thumb-&quot; + data:post.id' var='thumbClassName'>
  3419. <div expr:class='&quot;post-wrapper not-hero post-&quot; + data:post.id'>
  3420. <b:include name='postWrapperClasses'/>
  3421.  
  3422. <!-- Standard feed thumbs always added, as they're needed for mobile view. -->
  3423. <b:include cond='data:post.featuredImage and data:view.isMultipleItems' name='standardPostImageStyle'/>
  3424. <b:include name='feedPostImage'/>
  3425.  
  3426. <div class='slide'>
  3427. <b:include data='post' name='super.post'/>
  3428. </div>
  3429. </div>
  3430. </b:with>
  3431. </b:includable>
  3432. <b:includable id='postBody' var='post'>
  3433. <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  3434. <div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>
  3435. <data:post.body/>
  3436. </div>
  3437. </b:includable>
  3438. <b:includable id='postBodySnippet' var='post'>
  3439. <div class='post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>
  3440. <b:if cond='data:post.featuredImage and not data:view.isMultipleItems'>
  3441. <b:with value='&quot;post-&quot; + data:post.id' var='className'>
  3442. <style>
  3443. .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385, &quot;385:185&quot;).cssEscaped'/>);}
  3444. @media (max-width: 285px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 285, &quot;285:185&quot;).cssEscaped'/>);} }
  3445. @media (max-width: 385px) and (min-width: 286px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385, &quot;385:185&quot;).cssEscaped'/>);} }
  3446. @media (max-width: 485px) and (min-width: 386px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 485, &quot;485:185&quot;).cssEscaped'/>);} }
  3447. @media (max-width: 745px) and (min-width: 486px) { .<data:className/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 585, &quot;585:185&quot;).cssEscaped'/>);} }
  3448. </style>
  3449. <div class='snippet-thumbnail-container'>
  3450. <div expr:class='&quot;snippet-thumbnail &quot; + data:className'/>
  3451. </div>
  3452. </b:with>
  3453. </b:if>
  3454. <div style='clear: both;'/>
  3455. </div>
  3456. </b:includable>
  3457. <b:includable id='postCommentsAndAd'>
  3458. <b:include cond='not data:view.isHomepage or data:widgets.FeaturedPost none (w =&gt; w.sectionId == &quot;featured_post&quot; and w.postId == data:post.id)' name='super.postCommentsAndAd'/>
  3459. </b:includable>
  3460. <b:includable id='postCommentsLink'>
  3461. <b:if cond='data:view.isMultipleItems'>
  3462. <span class='byline post-comment-link container'>
  3463. <b:include cond='data:post.commentSource != 1' name='commentsLink'/>
  3464. <b:include cond='data:post.commentSource == 1' name='commentsLinkIframe'/>
  3465. </span>
  3466. </b:if>
  3467. </b:includable>
  3468. <b:includable id='postFooter' var='post'>
  3469. <div class='post-footer'>
  3470. <b:include name='footerBylines'/>
  3471. <b:include data='post' name='postFooterAuthorProfile'/>
  3472. </div>
  3473. </b:includable>
  3474. <b:includable id='postFooterAuthorProfile' var='post'>
  3475. <b:if cond='data:post.author.aboutMe and data:view.isPost'>
  3476. <div class='author-profile'>
  3477. <b:if cond='data:post.author.authorPhoto.url'>
  3478. <img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
  3479. <div class='author-about'>
  3480. <b:include data='post' name='aboutPostAuthor'/>
  3481. </div>
  3482. <b:else/>
  3483. <b:include data='post' name='aboutPostAuthor'/>
  3484. </b:if>
  3485. </div>
  3486. </b:if>
  3487. </b:includable>
  3488. <b:includable id='postHeader' var='post'>
  3489. <b:include name='headerByline'/>
  3490. </b:includable>
  3491. <b:includable id='postJumpLink' var='post'>
  3492. <b:comment>We don&#39;t show &#39;read more&#39; links in Emporio.</b:comment>
  3493. </b:includable>
  3494. <b:includable id='postLabels'>
  3495. <b:if cond='data:view.isMultipleItems'>
  3496. <div class='labels-outer-container'>
  3497. <div class='labels-container overflowable-container overflowable-no-popup'>
  3498. <div class='labels-items overflowable-contents byline post-labels'>
  3499. <b:loop index='i' values='data:post.labels' var='label'>
  3500. <span class='overflowable-item'>
  3501. <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  3502. </span>
  3503. </b:loop>
  3504. </div>
  3505. <span class='labels-more overflow-button hidden'>
  3506. <a expr:href='data:post.link ?: data:post.url'>+<span class='overflow-count'/></a>
  3507. </span>
  3508. </div>
  3509. </div>
  3510. <b:else/>
  3511. <b:include name='super.postLabels'/>
  3512. </b:if>
  3513. </b:includable>
  3514. <b:includable id='postMeta' var='post'>
  3515. <b:include data='post' name='postMetadataJSON'/>
  3516. </b:includable>
  3517. <b:includable id='postPagination'>
  3518. <div class='blog-pager container' id='blog-pager'>
  3519. <b:include cond='data:newerPageUrl' name='previousPageLink'/>
  3520. <b:include cond='data:olderPageUrl' name='nextPageLink'/>
  3521. <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
  3522. </div>
  3523. </b:includable>
  3524. <b:includable id='postShareButtons' var='post'>
  3525. <!-- We call super.postShareButtons from the migrated positions. -->
  3526. </b:includable>
  3527. <b:includable id='postTitle' var='post'>
  3528. <!-- Snippetize the post title -->
  3529. <div class='post-title-container'>
  3530. <a expr:name='data:post.id'/>
  3531. <h3 class='post-title entry-title'>
  3532. <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
  3533. <a expr:href='data:post.link ?: data:post.url'>
  3534. <div class='snippet-container r-snippet-container'>
  3535. <div class='r-snippetized'>
  3536. <data:post.title/>
  3537. </div>
  3538. <b:if cond='data:post.title != &quot;&quot;'>
  3539. <div class='snippet-fade r-snippet-fade hidden'/>
  3540. </b:if>
  3541. </div>
  3542. </a>
  3543. <b:else/>
  3544. <data:post.title/>
  3545. </b:if>
  3546. </h3>
  3547. </div>
  3548. </b:includable>
  3549. <b:includable id='postWrapperClasses'>
  3550. <b:class cond='data:post.featuredImage' name='image'/>
  3551. <b:class cond='not data:post.featuredImage' name='no-image'/>
  3552. <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>
  3553. </b:includable>
  3554. <b:includable id='previousPageLink'>
  3555. <b:comment>We don&#39;t show previeus page links in Emporio.</b:comment>
  3556. </b:includable>
  3557. <b:includable id='snippetedPostThumbnail'>
  3558. <div class='item-thumbnail'>
  3559. <a expr:href='data:post.url'>
  3560. <b:include data='{ image: data:post.featuredImage, imageSizes: [280,560,840,1120,1400] }' name='responsiveImage'/>
  3561. </a>
  3562. </div>
  3563. </b:includable>
  3564. <b:includable id='threadedCommentForm' var='post'>
  3565. <div class='comment-form'>
  3566. <a name='comment-form'/>
  3567. <h4 id='comment-post-message'><data:messages.postAComment/></h4>
  3568. <b:if cond='data:this.messages.blogComment != &quot;&quot;'>
  3569. <p><data:this.messages.blogComment/></p>
  3570. </b:if>
  3571. <b:include data='post' name='commentFormIframeSrc'/>
  3572. <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%'/>
  3573. <data:post.cmtfpIframe/>
  3574. <script type='text/javascript'>
  3575. BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
  3576. </script>
  3577. </div>
  3578. </b:includable>
  3579. <b:includable id='threadedCommentJs' var='post'>
  3580. <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
  3581. <b:template-script inline='true' name='threaded_comments'/>
  3582. <script type='text/javascript'>
  3583. blogger.widgets.blog.initThreadedComments(
  3584. <data:post.commentJso/>,
  3585. <data:post.commentMsgs/>,
  3586. <data:post.commentConfig/>);
  3587. </script>
  3588. </b:includable>
  3589. <b:includable id='threadedComments' var='post'>
  3590. <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  3591. <a name='comments'/>
  3592.  
  3593. <b:include name='commentsTitle'/>
  3594.  
  3595. <div class='comments-content'>
  3596. <b:if cond='data:post.embedCommentForm'>
  3597. <b:include data='post' name='threadedCommentJs'/>
  3598. </b:if>
  3599. <div id='comment-holder'>
  3600. <data:post.commentHtml/>
  3601. </div>
  3602. </div>
  3603.  
  3604. <p class='comment-footer'>
  3605. <b:if cond='data:post.allowNewComments'>
  3606. <b:include data='post' name='threadedCommentForm'/>
  3607. <b:else/>
  3608. <data:post.noNewCommentsText/>
  3609. </b:if>
  3610. </p>
  3611.  
  3612. <b:if cond='data:showCmtPopup'>
  3613. <div id='comment-popup'>
  3614. <iframe allowtransparency='allowtransparency' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  3615. </iframe>
  3616. </div>
  3617. </b:if>
  3618. </section>
  3619. </b:includable>
  3620. </b:widget>
  3621. </b:section>
  3622. </main>
  3623.  
  3624. <b:section ads='true' class='vertical-ad-container' id='ads' name='Ads' showaddelement='false'>
  3625. <b:widget id='AdSense1' locked='true' title='' type='AdSense' version='2' visible='false'>
  3626. <b:includable id='main'>
  3627. <div class='widget-content'>
  3628. <b:if cond='data:adCode'>
  3629. <data:adCode/>
  3630. <b:else/>
  3631. <b:include name='defaultAdUnit'/>
  3632. </b:if>
  3633. </div>
  3634. </b:includable>
  3635. <b:includable id='defaultAdUnit'>
  3636. <!-- Clear out style (need non-empty string) -->
  3637. <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  3638. <b:include name='super.defaultAdUnit'/>
  3639. </b:with>
  3640. </b:includable>
  3641. </b:widget>
  3642. <b:widget id='AdSense2' locked='true' title='' type='AdSense' version='2' visible='false'>
  3643. <b:includable id='main'>
  3644. <div class='widget-content'>
  3645. <b:if cond='data:adCode'>
  3646. <data:adCode/>
  3647. <b:else/>
  3648. <b:include name='defaultAdUnit'/>
  3649. </b:if>
  3650. </div>
  3651. </b:includable>
  3652. <b:includable id='defaultAdUnit'>
  3653. <!-- Clear out style (need non-empty string) -->
  3654. <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  3655. <b:include name='super.defaultAdUnit'/>
  3656. </b:with>
  3657. </b:includable>
  3658. </b:widget>
  3659. </b:section>
  3660.  
  3661. <aside class='sidebar-container container' role='complementary'>
  3662. <b:class cond='not data:view.isSingleItem' name='sidebar-invisible'/>
  3663. <b:if cond='not data:view.isSingleItem or data:view.isLayoutMode'>
  3664. <!-- Display different sidebars for feed page / item page. -->
  3665. <div class='navigation'>
  3666. <b:include data='{ iconClass: &quot;touch-icon sidebar-back&quot; }' name='closeIcon'/>
  3667. </div>
  3668. <b:section class='sidebar' id='sidebar_feed' name='Sidebar' preferred='yes'/>
  3669. </b:if>
  3670. <b:if cond='data:view.isSingleItem or data:view.isLayoutMode'>
  3671. <b:section id='sidebar_item' name='Sidebar (Item Page)'/>
  3672. </b:if>
  3673. </aside> <!-- close sidebar-container -->
  3674. </div> <!-- close centered-bottom -->
  3675. </div> <!-- close centered -->
  3676. </div> <!-- close page_body -->
  3677. </b:with>
  3678.  
  3679. <b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'/>
  3680. </div>
  3681.  
  3682. <b:template-script async='true' name='vegeclub' version='1.0.0'/>
  3683. </body>
  3684. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!