[GitHub/WoltLab/WCF.git] / com.woltlab.wcf / templates / ampHeader.tpl

<!doctype html>
<html amp lang="{@$__wcf->language->getFixedLanguageCode()}">
	<head>
		<meta charset="utf-8">
		<title>{@$pageTitle} - {PAGE_TITLE|language}</title>
		<link rel="canonical" href="{$regularCanonicalURL}">
		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
		{if !$headContent|empty}
			{@$headContent}
		{/if}
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600">
		<style amp-custom>
			html {
				box-sizing: border-box;
			}
			
			*,
			*::before,
			*::after {
				box-sizing: inherit;
			}
			
			body {
				background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBackground')};
				font-family: "Open Sans", "Segoe UI", "Lucida Grande", "Helvetica", sans-serif;
				font-size: 14px;
			}
			
			a {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentLink')};
				text-decoration: none;
			}
			
			a:hover {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentLinkActive')};
				text-decoration: none;
			}
			
			button {
				background: none;
				border: none;
				color: inherit;
				display: block;
				font-family: "Open Sans", "Segoe UI", "Lucida Grande", "Helvetica", sans-serif;
				font-size: 14px;
				margin-top: 5px;
				outline: 0;
				overflow: hidden;
				padding: 0;
				text-transform: uppercase;
			}
			
			.header {
				background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfHeaderBackground')};
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfHeaderText')};
				padding: 20px;
			}
			
			.header button {
				margin-top: 10px;
			}
			
			.footer {
				background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightBackground')};
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightText')};
				padding: 20px 10px;
			}
			
			.footer a {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightLink')};
			}
			
			.footer a:hover {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightLinkActive')};
				text-decoration: none;
			}
			
			.footer .copyright {
				text-align: center;
			}
			
			.main {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentText')};
				padding: 30px 10px;
			}
			
			.section {
				margin-top: 30px;
			}
			
			.sectionTitle {
				font-weight: 300;
				font-size: 23px;
				line-height: 1.05;
				margin: 0;
			}
			
			.article .articleTitle {
				font-weight: 300;
				font-size: 23px;
				line-height: 1.05;
				margin: 0;
			}
			
			.article .articleAuthor {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
				display: inline-block;
				font-size: 14px;
				font-weight: 400;
				margin: 5px 0 0 0;
			}
			
			.article .articleAuthor::after {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
				content: "\00b7";
				margin-left: 6px;
			}
			
			.article .articleDate {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
			}
			
			.article .articleImage {
				margin: 0;
			}
			
			.article .articleImage figcaption {
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
				font-size: smaller;
				margin-top: 5px;
				text-align: center;
			}
			
			.article .articleImage,
			.article .articleContent,
			.article .articleTeaser {
				margin-top: 30px;
			}
			
			.article .articleTeaser {
				font-weight: 600;
			}
			
			amp-user-notification {
				background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfStatusInfoBackground')};
				color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfStatusInfoText')};
				padding: 10px;
			}
			
			amp-sidebar {
				padding: 20px 10px 10px;
				width: 250px;
			}
			
			amp-sidebar button {
				margin-top: 0;
				position: absolute;
				right: 10px;
				top: 10px;
			}
			
			amp-sidebar h3 {
				font-size: 18px;
				font-weight: 400;
				margin: 20px 0 0;
			}
			
			amp-sidebar ol {
				margin: 10px 0 0;
				padding: 0;
			}
			
			amp-sidebar ol ol {
				margin-left: 20px;
				margin-top: 0;
			}
			
			amp-sidebar ol + ol {
				margin-top: 0;
			}
			
			amp-sidebar li {
				list-style: none;
			}
			
			amp-sidebar li a {
				display: block;
				padding: 7px 7px 7px 0;
			}
			
			amp-carousel {
				margin-top: 20px;
			}
			
			amp-carousel figcaption {
				background-color: rgba(0, 0, 0, .6);
				bottom: 0;
				color: #fff;
				left: 0;
				padding: 10px;
				position: absolute;
				right: 0;
			}
			
			.breadcrumbs li:nth-child(2) {
				padding-left: 20px;
			}
			.breadcrumbs li:nth-child(3) {
				padding-left: 30px;
			}
			.breadcrumbs li:nth-child(4) {
				padding-left: 40px;
			}
		</style>
		{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}
		<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
		<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
		<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
		<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
		<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
		<script async src="https://cdn.ampproject.org/v0.js"></script>
	</head>
<body>
	<header class="header">
		<div class="logo">
			<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>
		</div>
		
		<button on='tap:sidebar.toggle'>{lang}wcf.global.page.pagination{/lang}</button>
	</header>
	<main class="main">
Commit	Line	Data
6a4d8742 MW	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}
217d53e7	11	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600">
6a4d8742 MW	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 {
56cfe6af	24	background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBackground')};
6a4d8742 MW	25	font-family: "Open Sans", "Segoe UI", "Lucida Grande", "Helvetica", sans-serif;
	26	font-size: 14px;
	27	}
	28
	29	a {
56cfe6af	30	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentLink')};
6a4d8742 MW	31	text-decoration: none;
	32	}
	33
	34	a:hover {
56cfe6af	35	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentLinkActive')};
6a4d8742 MW	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 {
56cfe6af MW	54	background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfHeaderBackground')};
56cfe6af MW	55	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfHeaderText')};
6a4d8742 MW	56	padding: 20px;
	57	}
	58
	59	.header button {
	60	margin-top: 10px;
	61	}
	62
	63	.footer {
56cfe6af MW	64	background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightBackground')};
56cfe6af MW	65	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightText')};
6a4d8742 MW	66	padding: 20px 10px;
	67	}
	68
	69	.footer a {
56cfe6af	70	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightLink')};
6a4d8742 MW	71	}
	72
	73	.footer a:hover {
56cfe6af	74	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfFooterCopyrightLinkActive')};
6a4d8742 MW	75	text-decoration: none;
	76	}
	77
	78	.footer .copyright {
	79	text-align: center;
	80	}
	81
	82	.main {
56cfe6af	83	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentText')};
6a4d8742 MW	84	padding: 30px 10px;
	85	}
	86
9f800585 MW	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
6a4d8742 MW	98	.article .articleTitle {
	99	font-weight: 300;
	100	font-size: 23px;
	101	line-height: 1.05;
	102	margin: 0;
	103	}
	104
	105	.article .articleAuthor {
56cfe6af	106	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
6a4d8742 MW	107	display: inline-block;
	108	font-size: 14px;
	109	font-weight: 400;
	110	margin: 5px 0 0 0;
	111	}
	112
	113	.article .articleAuthor::after {
56cfe6af	114	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
6a4d8742 MW	115	content: "\00b7";
	116	margin-left: 6px;
	117	}
	118
	119	.article .articleDate {
56cfe6af	120	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
6a4d8742 MW	121	}
6a4d8742 MW	122
9f800585 MW	123	.article .articleImage {
	124	margin: 0;
	125	}
	126
	127	.article .articleImage figcaption {
56cfe6af	128	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentDimmedText')};
9f800585 MW	129	font-size: smaller;
	130	margin-top: 5px;
	131	text-align: center;
	132	}
	133
6a4d8742 MW	134	.article .articleImage,
	135	.article .articleContent,
	136	.article .articleTeaser {
	137	margin-top: 30px;
	138	}
	139
	140	.article .articleTeaser {
	141	font-weight: 600;
	142	}
	143
	144	amp-user-notification {
56cfe6af MW	145	background-color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfStatusInfoBackground')};
56cfe6af MW	146	color: {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfStatusInfoText')};
6a4d8742 MW	147	padding: 10px;
	148	}
	149
	150	amp-sidebar {
	151	padding: 20px 10px 10px;
	152	width: 250px;
	153	}
	154
	155	amp-sidebar button {
	156	margin-top: 0;
	157	position: absolute;
	158	right: 10px;
	159	top: 10px;
	160	}
	161
	162	amp-sidebar h3 {
	163	font-size: 18px;
	164	font-weight: 400;
	165	margin: 20px 0 0;
	166	}
	167
	168	amp-sidebar ol {
	169	margin: 10px 0 0;
	170	padding: 0;
	171	}
	172
	173	amp-sidebar ol ol {
	174	margin-left: 20px;
	175	margin-top: 0;
	176	}
	177
	178	amp-sidebar ol + ol {
	179	margin-top: 0;
	180	}
	181
	182	amp-sidebar li {
	183	list-style: none;
	184	}
	185
	186	amp-sidebar li a {
	187	display: block;
	188	padding: 7px 7px 7px 0;
	189	}
	190
9f800585 MW	191	amp-carousel {
	192	margin-top: 20px;
	193	}
	194
	195	amp-carousel figcaption {
56cfe6af	196	background-color: rgba(0, 0, 0, .6);
9f800585 MW	197	bottom: 0;
	198	color: #fff;
	199	left: 0;
	200	padding: 10px;
	201	position: absolute;
	202	right: 0;
	203	}
	204
6a4d8742 MW	205	.breadcrumbs li:nth-child(2) {
	206	padding-left: 20px;
	207	}
	208	.breadcrumbs li:nth-child(3) {
	209	padding-left: 30px;
	210	}
	211	.breadcrumbs li:nth-child(4) {
	212	padding-left: 40px;
	213	}
	214	</style>
	215	{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}
9f800585	216	<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
6a4d8742 MW	217	<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
	218	<script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
	219	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
cfbc3d18	220	<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
6a4d8742 MW	221	<script async src="https://cdn.ampproject.org/v0.js"></script>
	222	</head>
	223	<body>
	224	<header class="header">
	225	<div class="logo">
4a292263	226	<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>
6a4d8742 MW	227	</div>
	228
	229	<button on='tap:sidebar.toggle'>{lang}wcf.global.page.pagination{/lang}</button>
	230	</header>
	231	<main class="main">