com.woltlab.wcf/templates/ampHeader.tpl

   1 <!doctype html>
   2 <html amp lang="{@$__wcf->language->getFixedLanguageCode()}">
   3         <head>
   4                 <meta charset="utf-8">
   5                 <title>{@$pageTitle} - {PAGE_TITLE|language}</title>
   6                 <link rel="canonical" href="{$regularCanonicalURL}">
   7                 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   8                 {if !$headContent|empty}
   9                         {@$headContent}
  10                 {/if}
  11                 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600">
  12                 <style amp-custom>
  13                         html {
  14                                 box-sizing: border-box;
  15                         }
  16
  17                         *,
  18                         *::before,
  19                         *::after {
  20                                 box-sizing: inherit;
  21                         }
  22
  23                         body {
  24                                 background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBackground')};
  25                                 font-family: "Open Sans", "Segoe UI", "Lucida Grande", "Helvetica", sans-serif;
  26                                 font-size: 14px;
  27                         }
  28
  29                         a {
  30                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentLink')};
  31                                 text-decoration: none;
  32                         }
  33
  34                         a:hover {
  35                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentLinkActive')};
  36                                 text-decoration: none;
  37                         }
  38
  39                         button {
  40                                 background: none;
  41                                 border: none;
  42                                 color: inherit;
  43                                 display: block;
  44                                 font-family: "Open Sans", "Segoe UI", "Lucida Grande", "Helvetica", sans-serif;
  45                                 font-size: 14px;
  46                                 margin-top: 5px;
  47                                 outline: 0;
  48                                 overflow: hidden;
  49                                 padding: 0;
  50                                 text-transform: uppercase;
  51                         }
  52
  53                         .header {
  54                                 background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfHeaderBackground')};
  55                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfHeaderText')};
  56                                 padding: 20px;
  57                         }
  58
  59                         .header button {
  60                                 margin-top: 10px;
  61                         }
  62
  63                         .footer {
  64                                 background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightBackground')};
  65                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightText')};
  66                                 padding: 20px 10px;
  67                         }
  68
  69                         .footer a {
  70                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightLink')};
  71                         }
  72
  73                         .footer a:hover {
  74                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightLinkActive')};
  75                                 text-decoration: none;
  76                         }
  77
  78                         .footer .copyright {
  79                                 text-align: center;
  80                         }
  81
  82                         .main {
  83                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentText')};
  84                                 padding: 30px 10px;
  85                         }
  86
  87                         .section {
  88                                 margin-top: 30px;
  89                         }
  90
  91                         .sectionTitle {
  92                                 font-weight: 300;
  93                                 font-size: 23px;
  94                                 line-height: 1.05;
  95                                 margin: 0;
  96                         }
  97
  98                         .article .articleTitle {
  99                                 font-weight: 300;
 100                                 font-size: 23px;
 101                                 line-height: 1.05;
 102                                 margin: 0;
 103                         }
 104
 105                         .article .articleAuthor {
 106                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
 107                                 display: inline-block;
 108                                 font-size: 14px;
 109                                 font-weight: 400;
 110                                 margin: 5px 0 0 0;
 111                         }
 112
 113                         .article .articleAuthor::after {
 114                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
 115                                 content: "\00b7";
 116                                 margin-left: 6px;
 117                         }
 118
 119                         .article .articleDate {
 120                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
 121                         }
 122
 123                         .article .articleImage {
 124                                 margin: 0;
 125                         }
 126
 127                         .article .articleImage figcaption {
 128                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
 129                                 font-size: smaller;
 130                                 margin-top: 5px;
 131                                 text-align: center;
 132                         }
 133
 134                         .article .articleImage,
 135                         .article .articleContent,
 136                         .article .articleTeaser {
 137                                 margin-top: 30px;
 138                         }
 139
 140                         .article .articleContent p {
 141                                 margin: 0;
 142                         }
 143
 144                         .article .articleTeaser {
 145                                 font-weight: 600;
 146                         }
 147
 148                         amp-user-notification {
 149                                 background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfStatusInfoBackground')};
 150                                 color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfStatusInfoText')};
 151                                 padding: 10px;
 152                         }
 153
 154                         amp-sidebar {
 155                                 padding: 20px 10px 10px;
 156                                 width: 250px;
 157                         }
 158
 159                         amp-sidebar button {
 160                                 margin-top: 0;
 161                                 position: absolute;
 162                                 right: 10px;
 163                                 top: 10px;
 164                         }
 165
 166                         amp-sidebar h3 {
 167                                 font-size: 18px;
 168                                 font-weight: 400;
 169                                 margin: 20px 0 0;
 170                         }
 171
 172                         amp-sidebar ol {
 173                                 margin: 10px 0 0;
 174                                 padding: 0;
 175                         }
 176
 177                         amp-sidebar ol ol {
 178                                 margin-left: 20px;
 179                                 margin-top: 0;
 180                         }
 181
 182                         amp-sidebar ol + ol {
 183                                 margin-top: 0;
 184                         }
 185
 186                         amp-sidebar li {
 187                                 list-style: none;
 188                         }
 189
 190                         amp-sidebar li a {
 191                                 display: block;
 192                                 padding: 7px 7px 7px 0;
 193                         }
 194
 195                         amp-carousel {
 196                                 margin-top: 20px;
 197                         }
 198
 199                         amp-carousel figcaption {
 200                                 background-color: rgba(0, 0, 0, .6);
 201                                 bottom: 0;
 202                                 color: #fff;
 203                                 left: 0;
 204                                 padding: 10px;
 205                                 position: absolute;
 206                                 right: 0;
 207                         }
 208
 209                         .breadcrumbs li:nth-child(2) {
 210                                 padding-left: 20px;
 211                         }
 212                         .breadcrumbs li:nth-child(3) {
 213                                 padding-left: 30px;
 214                         }
 215                         .breadcrumbs li:nth-child(4) {
 216                                 padding-left: 40px;
 217                         }
 218
 219                         .quoteBox {
 220                                 align-items: center;
 221                                 border: 1px solid {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBorderInner')};
 222                                 border-left-width: 5px;
 223                                 display: flex;
 224                                 flex-wrap: wrap;
 225                                 margin: 0;
 226                                 padding: 5px 10px;
 227                         }
 228                         .quoteBoxIcon {
 229                                 border-radius: 50%;
 230                                 flex: 0 0 16px;
 231                                 margin-right: 5px;
 232                                 overflow: hidden;
 233                         }
 234                         .quoteBoxTitle {
 235                                 flex: 0 0 calc(100% - 21px); /* width + margin */
 236                         }
 237                         .quoteBoxContent {
 238                                 flex: 0 0 100%;
 239                                 font-style: italic;
 240                         }
 241
 242                         .article ~ .section {
 243                                 border-top: 1px solid {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBorder')};
 244                                 margin-top: 20px;
 245                                 padding: 20px 10px 0 10px;
 246                         }
 247
 248                         .codeBox {
 249                                 border: 1px solid {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBorderInner')};
 250                                 border-radius: 3px;
 251                                 margin: 10px 0;
 252                         }
 253                         .codeBoxHeader {
 254                                 border-bottom: 1px solid {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBorderInner')};
 255                                 font-size: larger;
 256                                 padding: 5px 10px;
 257                         }
 258                         .codeBoxCode {
 259                                 margin: 0;
 260                                 max-height: 300px;
 261                                 overflow: auto;
 262                                 padding: 10px;
 263                         }
 264
 265                         .unknownDimensionContainer {
 266                                 position: relative;
 267                                 width: 384px;
 268                                 height: 216px;
 269                                 max-width: 100%;
 270                                 display: inline-block;
 271                         }
 272
 273                         .unknownDimensionContainer amp-img img {
 274                                 object-fit: contain;
 275                         }
 276                 </style>
 277                 {literal}<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>{/literal}
 278                 <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 279                 <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
 280                 <script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
 281                 <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
 282                 <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
 283                 <script async src="https://cdn.ampproject.org/v0.js"></script>
 284         </head>
 285 <body>
 286         <header class="header">
 287                 <div class="logo">
 288                         <a href="{link}{/link}"><amp-img width="{@$__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoWidth')}" height="{@$__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoHeight')}" src="{$__wcf->getStyleHandler()->getStyle()->getPageLogo()}"></amp-img></a>
 289                 </div>
 290
 291                 <button on='tap:sidebar.toggle'>{lang}wcf.global.page.pagination{/lang}</button>
 292         </header>
 293         <main class="main">