Use HTML lists for hyperlinks (#7127)

* Use HTML lists for hyperlinks * consistent spacing in css file Co-authored-by: root <[email protected]> Co-authored-by: Vsevolod <[email protected]> Co-authored-by: PankajBhojwani <[email protected]>
microsoft · Apr 14, 2022 · cf19264 · cf19264
1 parent 19f4acd
commit cf19264
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 41 deletions.
diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/index.ejs b/source/nodejs/adaptivecards-site/themes/adaptivecards/layout/index.ejs
@@ -39,96 +39,108 @@
 		</div>
 
 		<div class="w3-col l3">
-			<div role="heading" aria-level="2" class="platform-header"><%- site.data.home.en.made_for_title %>
-            </div>
+			<ul class="platform-list">
+				<div role="heading" aria-level="2" class="platform-header"><%- site.data.home.en.made_for_title %>
+				</div>
+
+				<div class="w3-row">
+					<% for(var link of site.data.home.en.made_for) { %>	
+						<li>
+							<div class="w3-col s4 m3 l12"><a
+								href="<%- link.href %>"><i
+									class="<%- link.fa %>"></i> <%- link.title %></a></div>
+						</li>
+					<% } %>
+				</div>
+			</ul>
 
 			<div class="w3-row">
-				<% for(var link of site.data.home.en.made_for) { %>
-					<div class="w3-col s4 m3 l12"><a
-						href="<%- link.href %>"><i
-							class="<%- link.fa %>"></i> <%- link.title %></a></div>
-				<% } %>
+				<div class="w3-col s6 l12">
+					<ul class="platform-list">
+						<div role="heading" aria-level="3" class="platform-header"><%- site.data.home.en.releases_title %>
+						</div>
+						<% for(var link of site.data.home.en.releases) { %>
+							<li>
+								<div>
+									<a href="<%- link.href %>" aria-label="<%- link.title %>">
+										<i class="<%- link.fa %>" aria-hidden="true"></i>
+										<%- link.title %>
+									</a>
+									<span class="w3-tag w3-round w3-tiny <%- link.tag_class %>"><%- link.tag %></span>
+								</div>
+							</li>
+						<% } %>
+					</ul>
+				</div>
 			</div>
 
 			<div class="w3-row">
 				<div class="w3-col s6 l12">
-					<div role="heading" aria-level="3" class="platform-header"><%- site.data.home.en.releases_title %>
-                    </div>
-					<% for(var link of site.data.home.en.releases) { %>
-						<div>
-                            <a href="<%- link.href %>" aria-label="<%- link.title %>">
-                                <i class="<%- link.fa %>" aria-hidden="true"></i>
-                                <%- link.title %>
-                            </a>
-                            <span class="w3-tag w3-round w3-tiny <%- link.tag_class %>"><%- link.tag %></span>
-                        </div>
-					<% } %>
+					<ul class="platform-list">
+						<div role="heading" aria-level="3" class="platform-header">Github</div>
+						<li>
+							<div>
+								<a href="https://github.com/microsoft/AdaptiveCards/" target="_blank" rel="noopener">
+									<i class="fab fa-github"></i>
+									AdaptiveCards
+								</a>
+							</div>
+						</li>
+					</ul>
 				</div>
 			</div>
-
-            <div class="w3-row">
-                <div class="w3-col s6 l12">
-                    <div role="heading" aria-level="3" class="platform-header">Github</div>
-                    <div>
-                        <a href="https://github.com/microsoft/AdaptiveCards/" target="_blank" rel="noopener">
-                            <i class="fab fa-github"></i>
-                            AdaptiveCards
-                        </a>
-                    </div>
-                </div>
-            </div>
 		</div>
 	</div>
 
 	<div class="divider"></div>
 
 	<%- partial("_partial/home-section", {
-        section: site.data.home.en.home_section
+		section: site.data.home.en.home_section
 	}) %>
 
 	<%- partial("_partial/section-details", {
 		sections: site.data.home.en.partner_details
-    }) %>
+	}) %>
 
 	<div class="w3-padding-32"></div>
 
 	<%- partial("_partial/quote", {
-        quote: site.data.home.en.quotes.richard
+		quote: site.data.home.en.quotes.richard
 	}) %>
 
 	<div class="divider"></div>
 
 	<%- partial("_partial/home-section", {
-        section: site.data.home.en.extensibility_section
+		section: site.data.home.en.extensibility_section
 	}) %>
 
 	<%- partial("_partial/section-details", {
-        sections: site.data.home.en.extensibility_details
+		sections: site.data.home.en.extensibility_details
 	}) %>
 
 	<div class="w3-padding-32"></div>
 
 	<%- partial("_partial/quote", {
-        quote: site.data.home.en.quotes.bill
+		quote: site.data.home.en.quotes.bill
 	}) %>
 
 	<div class="divider"></div>
 
 	<%- partial("_partial/home-section", {
-        section: site.data.home.en.design_section
+		section: site.data.home.en.design_section
 	}) %>
 
 	<div class="w3-padding-32"></div>
 
 	<%- partial("_partial/quote", { 
-        quote: site.data.home.en.quotes.joe
-    }) %>
+		quote: site.data.home.en.quotes.joe
+	}) %>
 
 	<div class="divider"></div>
 
 
 	<%- partial("_partial/home-section", {
-        section: site.data.home.en.template_section
+		section: site.data.home.en.template_section
 	}) %>
 
 	<%- partial("_partial/section-details", {
@@ -138,7 +150,7 @@
 	<div class="w3-padding-32"></div>
 
 	<%- partial("_partial/quote", {
-        quote: site.data.home.en.quotes.tim
+		quote: site.data.home.en.quotes.tim
 	}) %>
 
 </div>
diff --git a/source/nodejs/adaptivecards-site/themes/adaptivecards/source/css/style.css b/source/nodejs/adaptivecards-site/themes/adaptivecards/source/css/style.css
@@ -525,6 +525,14 @@ dir {
   color: #696969;
 }
 
+.platform-list {
+  list-style-type: none;
+  padding-left: 0;
+  -webkit-margin-after: 0;
+  -webkit-margin-before: 0;
+  margin-bottom: 0;
+}
+
 .homepage .divider {
   border-bottom: solid 1px #ddd;
   margin-top: 64px;