From 835c182f0ffa21ebea682bd054ccb6f69bb690a4 Mon Sep 17 00:00:00 2001
From: Josh Tynjala <joshtynjala@bowlerhat.dev>
Date: Fri, 17 Jun 2022 15:35:06 -0700
Subject: [PATCH] api: more mobile friendly

---
 .../api-reference/templates/all-classes.xslt  |   1 +
 .../api-reference/templates/all-index.xslt    |   7 +-
 .../api-reference/templates/asdoc-util.xslt   | 181 +++---------------
 .../api-reference/templates/class-files.xslt  |   1 +
 .../api-reference/templates/class-list.xslt   |   1 +
 .../templates/class-summary.xslt              |   1 +
 .../api-reference/templates/index-list.html   |   1 +
 .../api-reference/templates/index.html        |   1 +
 .../api-reference/templates/mxml-tags.html    |   1 +
 .../templates/package-detail.xslt             |   1 +
 .../templates/package-frame.html              |   1 +
 .../api-reference/templates/package-list.xslt |   1 +
 .../templates/package-summary.xslt            |   1 +
 .../api-reference/templates/package.xslt      |   1 +
 .../api-reference/templates/style.css         |  82 ++++++++
 .../api-reference/templates/title-bar.html    |  46 ++---
 16 files changed, 147 insertions(+), 181 deletions(-)

diff --git a/documentation/api-reference/templates/all-classes.xslt b/documentation/api-reference/templates/all-classes.xslt
index c41babe896..4827db1f92 100644
--- a/documentation/api-reference/templates/all-classes.xslt
+++ b/documentation/api-reference/templates/all-classes.xslt
@@ -30,6 +30,7 @@
 						</xsl:otherwise>
 					</xsl:choose>
 				</title>
+				<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 				<base target="classFrame"/>
 				<xsl:call-template name="getStyleLink">
 					<xsl:with-param name="link" select="asdoc/link"/>
diff --git a/documentation/api-reference/templates/all-index.xslt b/documentation/api-reference/templates/all-index.xslt
index 7f5d75ff46..39524fcba4 100644
--- a/documentation/api-reference/templates/all-index.xslt
+++ b/documentation/api-reference/templates/all-index.xslt
@@ -142,6 +142,7 @@
 					<xsl:value-of select="localizedIndex"/>
 					<xsl:call-template name="getPageTitlePostFix"/>
 				</title>
+				<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 				<xsl:call-template name="getStyleLink">
 					<xsl:with-param name="link" select="asdoc/link"/>
 				</xsl:call-template>
@@ -184,7 +185,7 @@
 				</xsl:call-template>
 				<div class="MainContent">
 					<br/>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table class="allIndexTable" border="0" cellspacing="0" cellpadding="0">
 						<xsl:for-each select="$displayLetters">
 							<tr>
 								<td colspan="2">
@@ -233,7 +234,7 @@
 												</xsl:choose>
 											</xsl:if>
 										</xsl:if>
-										<xsl:text disable-output-escaping="yes"><![CDATA[&nbsp;&nbsp;]]></xsl:text>
+										<xsl:text disable-output-escaping="yes"><![CDATA[&nbsp; ]]></xsl:text>
 									</xsl:for-each>
 								</td>
 							</tr>
@@ -961,7 +962,7 @@
 													</xsl:choose>
 												</xsl:if>
 											</xsl:if>
-											<xsl:text disable-output-escaping="yes"><![CDATA[&nbsp;&nbsp;]]></xsl:text>
+											<xsl:text disable-output-escaping="yes"><![CDATA[&nbsp; ]]></xsl:text>
 										</xsl:for-each>
 									</td>
 								</tr>
diff --git a/documentation/api-reference/templates/asdoc-util.xslt b/documentation/api-reference/templates/asdoc-util.xslt
index 008fc7ebff..b40bb30a77 100644
--- a/documentation/api-reference/templates/asdoc-util.xslt
+++ b/documentation/api-reference/templates/asdoc-util.xslt
@@ -732,107 +732,41 @@
 								<xsl:when test="$prog_language_name='javascript'"/>
 								<xsl:otherwise>
 									<xsl:if test="$showProperties=true()">
-										<a href="#propertySummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Properties']]/entry[2]/p"/>
-										</a>
-										<xsl:if
-											test="$showPackageProperties=true()  or $showConstructors=true()  or $showMethods=true()  or $showPackageFunctions=true()  or $showEvents=true()  or $showStyles=true()  or $showEffects=true()  or $showConstants=true()  or $showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#propertySummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Properties']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showPackageProperties">
-										<a href="package.html#propertySummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Properties']]/entry[2]/p"/>
-										</a>
-										<xsl:if
-											test="$showConstructors=true()  or $showMethods=true()  or $showPackageFunctions=true()  or $showEvents=true()  or $showStyles=true()  or $showEffects=true()  or $showConstants=true()  or $showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="package.html#propertySummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Properties']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showConstructors=true()">
-										<a href="#constructorSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Constructor']]/entry[2]/p"/>
-										</a>
-										<xsl:if
-											test="$showMethods=true()  or $showPackageFunctions=true()  or $showEvents=true()  or $showStyles=true()  or $showEffects=true()  or $showConstants=true()  or $showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#constructorSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Constructor']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="not($showMethods=false())">
-										<a href="#methodSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Methods']]/entry[2]/p"/>
-										</a>
-										<xsl:if
-											test="$showPackageFunctions=true()  or $showEvents=true()  or $showStyles=true()  or $showEffects=true()  or $showConstants=true()  or $showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#methodSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Methods']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showPackageFunctions">
-										<a href="package.html#methodSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Functions']]/entry[2]/p"/>
-										</a>
-										<xsl:if
-											test="$showEvents=true()  or $showStyles=true()  or $showEffects=true()  or $showConstants=true()  or $showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="package.html#methodSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Functions']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showEvents=true()">
-										<a href="#eventSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Events']]/entry[2]/p"/>
-										</a>
-										<xsl:if
-											test="$showStyles=true()  or $showSkinState=true() or $showEffects=true()  or $showConstants=true()  or $showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#eventSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Events']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showStyles=true()">
-										<a href="#styleSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Styles']]/entry[2]/p"/>
-										</a>
-										<xsl:if test="$showSkinState=true() or $showEffects=true() or $showConstants=true() or $showPackageConstants or $showInterfaces or $showClasses or $showPackageUse or $showIncludeExamples=true() or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#styleSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Styles']]/entry[2]/p"/></a>
 									</xsl:if>
 
 									<xsl:if test="$showSkinPart=true()">
-										<a href="#SkinPartSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'SkinParts']]/entry[2]/p"/>
-										</a>
-										<xsl:if test="$showSkinState=true() or $showConstants=true() or $showPackageConstants or $showInterfaces or $showClasses or $showPackageUse or $showIncludeExamples=true() or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#SkinPartSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'SkinParts']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showSkinState=true()">
-										<a href="#SkinStateSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'SkinStates']]/entry[2]/p"/>
-										</a>										
-										<xsl:if test="$showEffects=true()  or $showConstants=true()  or $showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#SkinStateSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'SkinStates']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showEffects=true()">
-										<a href="#effectSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Effects']]/entry[2]/p"/>
-										</a>
-										<xsl:if test="$showConstants=true()  or $showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#effectSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Effects']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showConstants=true()">
-										<a href="#constantSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Constants']]/entry[2]/p"/>
-										</a>
-										<xsl:if test="$showPackageConstants=true()  or $showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="#constantSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Constants']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showPackageConstants">
-										<a href="package.html#constantSummary">
-											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Constants']]/entry[2]/p"/>
-										</a>
-										<xsl:if test="$showInterfaces=true()  or $showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
+										<a href="package.html#constantSummary"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Constants']]/entry[2]/p"/></a>
 									</xsl:if>
 									<xsl:if test="$showInterfaces">
 										<a href="package-detail.html#interfaceSummary">
@@ -840,9 +774,6 @@
 												<xsl:with-param name="key">Interfaces</xsl:with-param>
 											</xsl:call-template>
 										</a>
-										<xsl:if test="$showClasses=true()  or $showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
 									</xsl:if>
 									<xsl:if test="$showClasses">
 										<xsl:variable name="href">
@@ -854,25 +785,16 @@
 										<a href="{$href}">
 											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Classes']]/entry[2]/p"/>
 										</a>
-										<xsl:if test="$showPackageUse=true()  or $showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
 									</xsl:if>
 									<xsl:if test="$showPackageUse">
 										<a href="package-use.html">
 											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Use']]/entry[2]/p"/>
 										</a>
-										<xsl:if test="$showIncludeExamples=true()  or $additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
 									</xsl:if>
 									<xsl:if test="$showIncludeExamples=true()">
 										<a href="#includeExamplesSummary">
 											<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Examples']]/entry[2]/p"/>
 										</a>
-										<xsl:if test="$additionalLinks">
-											<xsl:text>&#xA0;| </xsl:text>
-										</xsl:if>
 									</xsl:if>
 									<xsl:if test="$additionalLinks">
 										<xsl:copy-of select="$additionalLinks"/>
@@ -923,19 +845,13 @@
 		<xsl:param name="fileName"/>
 		<xsl:param name="fileName2"/>
 		<xsl:if test="$showPackages">
-			<a href="{$baseRef}package-summary.html" onclick="loadClassListFrame('{$baseRef}all-classes.html')">
-				<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'allPackages']]/entry[2]/p"/>
-			</a>
-			<xsl:text>&#xA0;|&#xA0;</xsl:text>
+			<a href="{$baseRef}package-summary.html" onclick="loadClassListFrame('{$baseRef}all-classes.html')"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'allPackages']]/entry[2]/p"/></a>
 		</xsl:if>
 		<xsl:if test="$showAllClasses">
 			<xsl:choose>
 				<xsl:when test="$prog_language_name='javascript'"/>
 				<xsl:otherwise>
-					<a href="{$baseRef}class-summary.html" onclick="loadClassListFrame('{$baseRef}all-classes.html')">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'allClasses']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;|&#xA0;</xsl:text>
+					<a href="{$baseRef}class-summary.html" onclick="loadClassListFrame('{$baseRef}all-classes.html')"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'allClasses']]/entry[2]/p"/></a>
 				</xsl:otherwise>
 			</xsl:choose>
 		</xsl:if>
@@ -943,48 +859,32 @@
 			<xsl:choose>
 				<xsl:when test="$prog_language_name='javascript'"/>
 				<xsl:otherwise>
-					<a href="{$baseRef}language-elements.html">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'LanguageElements']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;| </xsl:text>
+					<a href="{$baseRef}language-elements.html"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'LanguageElements']]/entry[2]/p"/></a>
 				</xsl:otherwise>
 			</xsl:choose>
 		</xsl:if>
 		<xsl:if test="$showIndex">
 			<xsl:if test="$splitIndex='false'">
-				<a href="{$baseRef}all-index.html" onclick="loadClassListFrame('{$baseRef}index-list.html')">
-					<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Index']]/entry[2]/p"/>
-				</a>
+				<a href="{$baseRef}all-index.html" onclick="loadClassListFrame('{$baseRef}index-list.html')"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Index']]/entry[2]/p"/></a>
 			</xsl:if>
 			<xsl:if test="$splitIndex!='false' and $config/languageElements/@show='true' and $config/languageElements/@operators='true'">
-				<a href="{$baseRef}all-index-Symbols.html" onclick="loadClassListFrame('{$baseRef}index-list.html')">
-					<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Index']]/entry[2]/p"/>
-				</a>
+				<a href="{$baseRef}all-index-Symbols.html" onclick="loadClassListFrame('{$baseRef}index-list.html')"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Index']]/entry[2]/p"/></a>
 			</xsl:if>
 			<xsl:if test="$isLiveDocs">
 				<xsl:text disable-output-escaping="yes">&lt;br/&gt;</xsl:text>
 			</xsl:if>
 			<xsl:if test="$splitIndex!='false' and ($config/languageElements/@show!='true' or $config/languageElements/@operators!='true')">
-				<a href="{$baseRef}all-index-A.html" onclick="loadClassListFrame('{$baseRef}index-list.html')">
-					<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Index']]/entry[2]/p"/>
-				</a>
+				<a href="{$baseRef}all-index-A.html" onclick="loadClassListFrame('{$baseRef}index-list.html')"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Index']]/entry[2]/p"/></a>
 			</xsl:if>
-			<xsl:text>&#xA0;|&#xA0;</xsl:text>
 		</xsl:if>
 		<xsl:if test="$showAppendixes and $config/appendixes/@show='true'">
-			<a href="{$baseRef}appendixes.html">
-				<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Appendix']]/entry[2]/p"/>
-			</a>
-			<xsl:text>&#xA0;|&#xA0;</xsl:text>
+			<a href="{$baseRef}appendixes.html"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Appendix']]/entry[2]/p"/></a>
 		</xsl:if>
 		<xsl:if test="$showConventions">
 			<xsl:choose>
 				<xsl:when test="$prog_language_name='javascript'"/>
 				<xsl:otherwise>
-					<a href="{$baseRef}conventions.html">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Conventions']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;|&#xA0;</xsl:text>
+					<a href="{$baseRef}conventions.html"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Conventions']]/entry[2]/p"/></a>
 				</xsl:otherwise>
 			</xsl:choose>
 		</xsl:if>
@@ -1019,28 +919,16 @@
 		<div width="100%" class="topLinks" align="right" style="padding-bottom:5px">
 			<span id="navigationCell{$copyNum}" style="display:none;font-size:14px;font-weight:bold">
 				<xsl:if test="$showPackages">
-					<a href="{$baseRef}package-summary.html" onclick="loadClassListFrame('{$baseRef}all-classes.html')">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'allPackages']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;| </xsl:text>
+					<a href="{$baseRef}package-summary.html" onclick="loadClassListFrame('{$baseRef}all-classes.html')"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'allPackages']]/entry[2]/p"/></a>
 				</xsl:if>
 				<xsl:if test="$showAllClasses">
-					<a href="{$baseRef}class-summary.html" onclick="loadClassListFrame('{$baseRef}all-classes.html')">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'allClasses']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;| </xsl:text>
+					<a href="{$baseRef}class-summary.html" onclick="loadClassListFrame('{$baseRef}all-classes.html')"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'allClasses']]/entry[2]/p"/></a>
 				</xsl:if>
 				<xsl:if test="$showLanguageElements">
-					<a href="{$baseRef}language-elements.html">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'LanguageElements']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;| </xsl:text>
+					<a href="{$baseRef}language-elements.html"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'LanguageElements']]/entry[2]/p"/></a>
 				</xsl:if>
 				<xsl:if test="$showMXMLOnly">
-					<a href="{$baseRef}mxml-tag-detail.html" onclick="loadClassListFrame('{$baseRef}mxml-tags.html')">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'MXMLOnly']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;| </xsl:text>
+					<a href="{$baseRef}mxml-tag-detail.html" onclick="loadClassListFrame('{$baseRef}mxml-tags.html')"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'MXMLOnly']]/entry[2]/p"/></a>
 				</xsl:if>
 				<xsl:if test="$showIndex">
 					<xsl:if test="$splitIndex='false'">
@@ -1058,28 +946,17 @@
 							<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Index']]/entry[2]/p"/>
 						</a>
 					</xsl:if>
-					<xsl:text>&#xA0;| </xsl:text>
 				</xsl:if>
 				<xsl:if test="$showAppendixes and $config/appendixes/@show='true'">
-					<a href="{$baseRef}appendixes.html">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Appendix']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;| </xsl:text>
+					<a href="{$baseRef}appendixes.html"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Appendix']]/entry[2]/p"/></a>
 				</xsl:if>
 				<xsl:if test="$showConventions">
-					<a href="{$baseRef}conventions.html">
-						<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Conventions']]/entry[2]/p"/>
-					</a>
-					<xsl:text>&#xA0;| </xsl:text>
+					<a href="{$baseRef}conventions.html"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Conventions']]/entry[2]/p"/></a>
 				</xsl:if>
-				<a id="framesLink{$copyNum}" href="{$baseRef}index.html?{$href}{$fileName}.html&amp;{$fileName2}">
-					<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Frames']]/entry[2]/p"/>
-				</a>
-				<a id="noFramesLink{$copyNum}" style="display:none" href="" onclick="parent.location=document.location">
-					<xsl:call-template name="getLocalizedString">
+				<a id="framesLink{$copyNum}" href="{$baseRef}index.html?{$href}{$fileName}.html&amp;{$fileName2}"><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Frames']]/entry[2]/p"/></a>
+				<a id="noFramesLink{$copyNum}" style="display:none" href="" onclick="parent.location=document.location"><xsl:call-template name="getLocalizedString">
 						<xsl:with-param name="key">NoFrames</xsl:with-param>
-					</xsl:call-template>
-				</a>
+					</xsl:call-template></a>
 			</span>
 		</div>
 	</xsl:template>
diff --git a/documentation/api-reference/templates/class-files.xslt b/documentation/api-reference/templates/class-files.xslt
index f430ee5440..96ba29a282 100644
--- a/documentation/api-reference/templates/class-files.xslt
+++ b/documentation/api-reference/templates/class-files.xslt
@@ -127,6 +127,7 @@
 										<xsl:value-of select="$name"/>
 										<xsl:call-template name="getPageTitlePostFix"/>
 									</title>
+									<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 									<xsl:if test="$showIncludeExamples='true' and apiClassifierDetail/example/codeblock">
 										<script src="{$baseRef}AC_OETags.js" type="text/javascript"/>
 									</xsl:if>
diff --git a/documentation/api-reference/templates/class-list.xslt b/documentation/api-reference/templates/class-list.xslt
index c546d8b3f2..43ffd4eaa7 100644
--- a/documentation/api-reference/templates/class-list.xslt
+++ b/documentation/api-reference/templates/class-list.xslt
@@ -49,6 +49,7 @@
 							<title>
 								<xsl:value-of select="$title"/>
 							</title>
+							<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 							<base target="classFrame"/>
 							<xsl:call-template name="getStyleLink">
 								<xsl:with-param name="link" select="/asdoc/link"/>
diff --git a/documentation/api-reference/templates/class-summary.xslt b/documentation/api-reference/templates/class-summary.xslt
index a040f87706..170528fca5 100644
--- a/documentation/api-reference/templates/class-summary.xslt
+++ b/documentation/api-reference/templates/class-summary.xslt
@@ -37,6 +37,7 @@
 					<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = $localTitle]]/entry[2]/p"/>
 					<xsl:call-template name="getPageTitlePostFix"/>
 				</title>
+				<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 				<xsl:call-template name="getStyleLink">
 					<xsl:with-param name="link" select="asdoc/link"/>
 				</xsl:call-template>
diff --git a/documentation/api-reference/templates/index-list.html b/documentation/api-reference/templates/index-list.html
index aa8f36fabe..84b8d0264c 100644
--- a/documentation/api-reference/templates/index-list.html
+++ b/documentation/api-reference/templates/index-list.html
@@ -1,6 +1,7 @@
 <html>
 <head>
 	<title>ActionScript 3.0 Language and Components Reference</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<link rel="stylesheet" href="style.css" type="text/css" />
 	<base target="classFrame" />
 </head>
diff --git a/documentation/api-reference/templates/index.html b/documentation/api-reference/templates/index.html
index e9ba6d84f5..7c1dc8ef30 100644
--- a/documentation/api-reference/templates/index.html
+++ b/documentation/api-reference/templates/index.html
@@ -1,6 +1,7 @@
 <html>
 <head>
     <title>ActionScript 3.0 Language and Components Reference</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <script language="javascript" type="text/javascript">
     	<!--
         window.onload=function(){
diff --git a/documentation/api-reference/templates/mxml-tags.html b/documentation/api-reference/templates/mxml-tags.html
index c917f3a1af..33aed43399 100644
--- a/documentation/api-reference/templates/mxml-tags.html
+++ b/documentation/api-reference/templates/mxml-tags.html
@@ -1,6 +1,7 @@
 <html>
 <head>
 	<link rel="stylesheet" href="style.css" type="text/css" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<title>MXML Only Components - Adobe Flex 3 Language Reference</title>
 </head>
 
diff --git a/documentation/api-reference/templates/package-detail.xslt b/documentation/api-reference/templates/package-detail.xslt
index 7bd81808ad..2336d2b746 100644
--- a/documentation/api-reference/templates/package-detail.xslt
+++ b/documentation/api-reference/templates/package-detail.xslt
@@ -96,6 +96,7 @@
 										<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Summary']]/entry[2]/p"/>
 										<xsl:call-template name="getPageTitlePostFix"/>
 									</title>
+									<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 								</head>
 								<xsl:element name="body">
 									<xsl:if test="$isEclipse">
diff --git a/documentation/api-reference/templates/package-frame.html b/documentation/api-reference/templates/package-frame.html
index 199b29cf4d..da1917786c 100644
--- a/documentation/api-reference/templates/package-frame.html
+++ b/documentation/api-reference/templates/package-frame.html
@@ -1,6 +1,7 @@
 <html>
 <head>
     <title>ActionScript 3.0 Language and Components Reference</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
 <frameset rows="40%,60%" border="2" framespacing="1" bordercolor="#AAAAAA">
     <frame src="package-list.html" name="packageListFrame" scrolling="yes" />
diff --git a/documentation/api-reference/templates/package-list.xslt b/documentation/api-reference/templates/package-list.xslt
index 86fb70f377..d0eb49f895 100644
--- a/documentation/api-reference/templates/package-list.xslt
+++ b/documentation/api-reference/templates/package-list.xslt
@@ -21,6 +21,7 @@
 			<head>
 				<title><xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'PackageList']]/entry[2]/p"/> - <xsl:value-of select="$title-base"/></title>
 				<base target="classFrame"/>
+				<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 				<xsl:call-template name="getStyleLink">
 					<xsl:with-param name="link" select="asdoc/link"/>
 				</xsl:call-template>
diff --git a/documentation/api-reference/templates/package-summary.xslt b/documentation/api-reference/templates/package-summary.xslt
index 221e7e3fbb..20bdded865 100644
--- a/documentation/api-reference/templates/package-summary.xslt
+++ b/documentation/api-reference/templates/package-summary.xslt
@@ -43,6 +43,7 @@
 					<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = $localTitle]]/entry[2]/p"/>
 					<xsl:call-template name="getPageTitlePostFix"/>
 				</title>
+				<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 				<xsl:call-template name="getStyleLink">
 					<xsl:with-param name="link" select="asdoc/link"/>
 				</xsl:call-template>
diff --git a/documentation/api-reference/templates/package.xslt b/documentation/api-reference/templates/package.xslt
index fef3072b3d..a0ed69c780 100644
--- a/documentation/api-reference/templates/package.xslt
+++ b/documentation/api-reference/templates/package.xslt
@@ -113,6 +113,7 @@
 									<xsl:value-of select="$asdoc_terms/row[entry[1][p/text() = 'Details']]/entry[2]/p"/>
 									<xsl:call-template name="getPageTitlePostFix"/>
 								</title>
+								<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 							</head>
 							<xsl:element name="body">
 								<xsl:if test="$isEclipse">
diff --git a/documentation/api-reference/templates/style.css b/documentation/api-reference/templates/style.css
index 2e8a45291d..68507187f9 100644
--- a/documentation/api-reference/templates/style.css
+++ b/documentation/api-reference/templates/style.css
@@ -576,3 +576,85 @@ html>body .listing pre
 .showInheritedSkinPart {
 	display: inline;
 }
+
+/****** start mobile tweaks ******/
+.titleTable tr td.titleTableTopNav a,
+	.titleTable tr td.titleTableSubNav a {
+	padding-right: 6px;
+	padding-left: 6px;
+	border-right: solid 1px #000;
+}
+.titleTable tr td.titleTableTopNav a:last-of-type,
+	.titleTable tr td.titleTableSubNav a:last-of-type,
+	.titleTable tr td.titleTableTopNav a#framesLink1,
+	.titleTable tr td.titleTableTopNav a#noFramesLink11 {
+	border-right: none;
+}
+@media only screen and (max-width: 600px) {
+	.titleTable tr {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.titleTable tr.titleTableRow2 {
+		height: auto;
+		background-size: contain;
+	}
+	.titleTable tr td {
+		display: flex;
+		align-items: center;
+		background-size: contain;
+		align-self: stretch;
+		min-height: 44px;
+		flex-grow: 1;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	.titleTable tr td.titleTableTitle {
+		white-space: normal;
+		flex-grow: 2;
+	}
+	.titleTable tr td.titleTableLogo {
+		display: none;
+	}
+	.titleTable tr td.titleTableSubTitle {
+		flex-grow: 2;
+	}
+	.titleTable tr td.titleTableTopNav {
+		justify-content: end;
+	}
+	.titleTable tr td.titleTableSubNav {
+		justify-content: end;
+	}
+	.MainContent, .summarySection, .detailHeader, .detailBody {
+		margin-left: 8px;
+		margin-right: 8px;
+	}
+	.summaryTable {
+		overflow-x: auto;
+		display: block;
+	}
+	.detailHeader tr {
+		display: flex;
+		align-items: baseline;
+		flex-wrap: wrap;
+	}
+	.detailHeaderName {
+		word-break: break-word;
+		white-space: normal;
+	}
+	.allIndexTable {
+		overflow-x: auto;
+		display: block;
+	}
+	.idxrow,
+	.seeAlso a,
+	.detailBody code {
+		/* word-break: normal; */
+		overflow-wrap: anywhere;
+		word-break: break-word;
+	}
+	.titleTable tr td.titleTableSearch {
+		display: none;
+	}
+}
\ No newline at end of file
diff --git a/documentation/api-reference/templates/title-bar.html b/documentation/api-reference/templates/title-bar.html
index 14d88e401e..9dcda19d99 100644
--- a/documentation/api-reference/templates/title-bar.html
+++ b/documentation/api-reference/templates/title-bar.html
@@ -1,45 +1,39 @@
 <html>
 	<head>
 		<title>ActionScript 3.0 Language Reference</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 		<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 		<link rel="stylesheet" href="print.css" type="text/css" media="print" />
-		<script language="javascript" type="text/javascript" src="asdoc.js" />
+		<script language="javascript" type="text/javascript" src="asdoc.js"></script>
 	</head>
 	<body>
 		<a name="top"></a>
 		<table class="titleTable" cellpadding="0" cellspacing="0">
-		  <tr>
-			<td>
-			  <table class="titleTable" cellpadding="0" cellspacing="0">
+			<tbody>
 				<tr>
-				  <td class="titleTableTitle" align="left">ActionScript&#xA0;3.0&#xA0;Language&#xA0;and&#xA0;Components&#xA0;Reference</td>
-				  <td class="titleTableTopNav" align="right">
-					<a target="classFrame" href="package-summary.html" onclick="loadClassListFrame('all-classes.html')"> All Packages </a>&#xA0;|&#xA0;<a target="classFrame" href="class-summary.html" onclick="loadClassListFrame('all-classes.html')"> All Classes </a>&#xA0;|&#xA0;<a target="classFrame" href="all-index-A.html" onclick="loadClassListFrame('index-list.html')"> Index </a>&#xA0;|&#xA0;<a href="" onclick="top.location=top.classFrame.location"> No Frames </a>
-				  </td>
+					<td class="titleTableTitle" align="left">ActionScript&#xA0;3.0&#xA0;Language&#xA0;and&#xA0;Components&#xA0;Reference</td>
+					<td class="titleTableTopNav" align="right">
+						<a target="classFrame" href="package-summary.html" onclick="loadClassListFrame('all-classes.html')">All Packages</a>
+						<a target="classFrame" href="class-summary.html" onclick="loadClassListFrame('all-classes.html')">All Classes</a>
+						<a target="classFrame" href="all-index-A.html" onclick="loadClassListFrame('index-list.html')">Index</a>
+						<a href="" onclick="top.location=top.classFrame.location">No Frames</a>
+					</td>
+					<td class="titleTableLogo" align="right" rowspan="3">
+						<picture>
+							<img src="images/logo.jpg" srcset="images/logo@2x.jpg 2x" class="logoImage" title="Feathers Logo" alt="Feathers Logo" />
+						</picture>
+					</td>
 				</tr>
-			  </table>
-			</td>
-			<td class="titleTableLogo" align="right" rowspan="3">
-				<picture>
-					<img src="images/logo.jpg" srcset="images/logo@2x.jpg 2x" class="logoImage" title="Feathers Logo" alt="Feathers Logo" />
-				</picture>
-			</td>
-		  </tr>
-		  <tr>
-			<td>
-			  <table class="titleTable" cellpadding="0" cellspacing="0">
 				<tr class="titleTableRow2">
-				  <td class="titleTableSubTitle" id="subTitle" align="left">&#xA0;</td>
-				  <td class="titleTableSubNav" id="subNav" align="right">
+					<td class="titleTableSubTitle" id="subTitle" align="left">&#xA0;</td>
+					<td class="titleTableSubNav" id="subNav" align="right">
 					<a id="propertiesLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('propertySummary');" style="display:none">Properties</a><span id="propertiesBar" style="display:none"> | </span><a id="packagePropertiesLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('propertySummary');" style="display:none">Properties</a><span id="packagePropertiesBar" style="display:none"> | </span><a id="constructorLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('constructorSummary');" style="display:none">Constructor</a><span id="constructorBar" style="display:none"> | </span><a id="methodsLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('methodSummary');" style="display:none">Methods</a><span id="methodsBar" style="display:none"> | </span><a id="packageFunctionsLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('methodSummary');" style="display:none">Functions</a><span id="packageFunctionsBar" style="display:none"> | </span><a id="eventsLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('eventSummary');" style="display:none">Events</a><span id="eventsBar" style="display:none"> | </span><a id="stylesLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('styleSummary');" style="display:none">Styles</a><span id="stylesBar" style="display:none"> | </span><a id="SkinPartLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('SkinPartSummary');" style="display:none"> Skin Parts </a><span id="SkinPartBar" style="display:none"> | </span><a id="SkinStateLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('SkinStateSummary');" style="display:none"> Skin States </a><span id="SkinStateBar" style="display:none"> | </span><a id="effectsLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('effectSummary');" style="display:none">Effects</a><span id="effectsBar" style="display:none"> | </span><a id="constantsLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('constantSummary');" style="display:none">Constants</a><span id="constantsBar" style="display:none"> | </span><a id="packageConstantsLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('constantSummary');" style="display:none">Constants</a><span id="packageConstantsBar" style="display:none"> | </span><a id="interfacesLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('interfaceSummary');" style="display:none">Interfaces</a><span id="interfacesBar" style="display:none"> | </span><a id="classesLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('classSummary');" style="display:none">Classes</a><span id="classesBar" style="display:none"> | </span><a id="packageUseLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('package-use.html');" style="display:none">Use</a><span id="packageUseBar" style="display:none"> | </span><a id="examplesLink" href="#top" onclick="javascript:titleBar_gotoClassFrameAnchor('includeExamplesSummary');" style="display:none">Examples</a>
-				  </td>
+					</td>
 				</tr>
 				<tr class="titleTableRow3">
-				  <td colspan="3">&#xA0;</td>
+					<td colspan="3">&#xA0;</td>
 				</tr>
-			  </table>
-			</td>
-		  </tr>
+			</tbody>
 		</table>
 	</body>
 </html>