blog: Mobile-friendly design
This change complements change golang/go#9062 (because godoc and
the blog share a style sheet) and makes the blog responsive for
mobile.
Change-Id: Ibcd415034c067a6ebc4489dc8b5f32ec9c1a38d6
Reviewed-on: https://go-review.googlesource.com/9063
Reviewed-by: Chris Broadfoot <cbro@golang.org>
diff --git a/template/root.tmpl b/template/root.tmpl
index f592043..2fa81d0 100644
--- a/template/root.tmpl
+++ b/template/root.tmpl
@@ -5,6 +5,8 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="viewport" content="width=device-width">
+ <meta name="theme-color" content="#375EAB">
<title>{{template "title" .}}</title>
<link type="text/css" rel="stylesheet" href="/lib/godoc/style.css">
<link rel="alternate" type="application/atom+xml" title="blog.golang.org - Atom Feed" href="//blog.golang.org/feed.atom" />
@@ -13,11 +15,10 @@
#sidebar {
float: right;
padding-left: 20px;
- width: 250px;
- background: white;
- }
- #sidebar p, #sidebar ul {
- margin: 20px 5px;
+ width: 40%;
+ max-width: 250px;
+ background: #F3F3F3;
+ margin: 20px 0 20px 20px;
}
#sidebar ul {
padding: 0;
@@ -44,12 +45,18 @@
#content .title {
margin: 20px 0;
}
+ #content img {
+ max-width: 100%;
+ }
</style>
</head>
<body>
<div id="topbar"><div class="container">
+<div class="top-heading" id="heading-wide"><a href="{{.GodocURL}}/">The Go Programming Language</a></div>
+<div class="top-heading" id="heading-narrow"><a href="{{.GodocURL}}/">Go</a></div>
+<a href="#" id="menu-button"><span id="menu-button-arrow">▽</span></a>
<form method="GET" action="{{.GodocURL}}/search">
<div id="menu">
<a href="{{.GodocURL}}/doc/">Documents</a>
@@ -59,7 +66,6 @@
<a href="{{.BasePath}}/">Blog</a>
<input type="text" id="search" name="q" class="inactive" value="Search" placeholder="Search">
</div>
-<div id="heading"><a href="{{.GodocURL}}/">The Go Programming Language</a></div>
</form>
</div></div>
