[pypy-commit] pypy.org nikola: improve small screen view
mattip
pypy.commits at gmail.com
Sun Feb 9 14:22:15 EST 2020
Author: Matti Picus <matti.picus at gmail.com>
Branch: nikola
Changeset: r977:7dad7054ae97
Date: 2020-02-09 21:21 +0200
http://bitbucket.org/pypy/pypy.org/changeset/7dad7054ae97/
Log: improve small screen view
diff --git a/public/archive.html b/public/archive.html
--- a/public/archive.html
+++ b/public/archive.html
@@ -23,21 +23,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="index.html">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -57,8 +48,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="listpage"><header><h1>Archive</h1>
</header><p>No posts found.</p>
</article></main><footer id="footer"><p>
diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@@ -7,10 +7,6 @@
--link-hover-color: #e0dad5;
}
-body {
- color: #383939;
-}
-
:visited {
color: darkolivegreen;
}
@@ -109,12 +105,13 @@
}
.nav-container {
- max-width: content-width;
+ max-width: var(--content-width);
margin: 0 auto;
}
nav {
float: right;
+ background: var(--nav-background);
}
nav ul {
list-style: none;
@@ -173,6 +170,22 @@
}
@media only screen and (max-width: 798px) {
+ body {
+ color: #383939;
+ margin: 0;
+ padding: 0;
+ }
+
+ #container {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ margin: 10px;
+ padding: 0;
+ }
+
.nav-mobile {
display: block;
}
@@ -180,6 +193,7 @@
nav {
width: 100%;
padding: 70px 0 15px;
+ background: var(--nav-background);
}
nav ul {
display: none;
@@ -197,6 +211,7 @@
.nav-dropdown {
position: static;
+ padding: 0 0 0 15px;
}
}
diff --git a/public/blog/index.html b/public/blog/index.html
--- a/public/blog/index.html
+++ b/public/blog/index.html
@@ -23,21 +23,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="#">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -57,8 +48,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><div class="postindex">
</div>
diff --git a/public/categories/index.html b/public/categories/index.html
--- a/public/categories/index.html
+++ b/public/categories/index.html
@@ -23,21 +23,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="#">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -57,8 +48,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="tagindex"><header><h1>Tags</h1>
<div class="metadata">
diff --git a/public/compat.html b/public/compat.html
--- a/public/compat.html
+++ b/public/compat.html
@@ -31,21 +31,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="index.html">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -65,8 +56,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h1 class="p-name entry-title" itemprop="headline name"><a href="#" class="u-url">Python compatibility</a></h1>
diff --git a/public/contact.html b/public/contact.html
--- a/public/contact.html
+++ b/public/contact.html
@@ -32,21 +32,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="index.html">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -66,8 +57,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h1 class="p-name entry-title" itemprop="headline name"><a href="#" class="u-url">Contact</a></h1>
diff --git a/public/download.html b/public/download.html
--- a/public/download.html
+++ b/public/download.html
@@ -38,21 +38,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="index.html">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -72,8 +63,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h1 class="p-name entry-title" itemprop="headline name"><a href="#" class="u-url">Download and Install</a></h1>
diff --git a/public/features.html b/public/features.html
--- a/public/features.html
+++ b/public/features.html
@@ -30,21 +30,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="index.html">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -64,8 +55,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h1 class="p-name entry-title" itemprop="headline name"><a href="#" class="u-url">PyPy - Features</a></h1>
diff --git a/public/index.html b/public/index.html
--- a/public/index.html
+++ b/public/index.html
@@ -37,21 +37,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="#">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -71,8 +62,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h1 class="p-name entry-title" itemprop="headline name"><a href="." class="u-url">Welcome to PyPy</a></h1>
diff --git a/public/people.html b/public/people.html
--- a/public/people.html
+++ b/public/people.html
@@ -33,21 +33,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="index.html">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -67,8 +58,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h1 class="p-name entry-title" itemprop="headline name"><a href="#" class="u-url">The PyPy Team (from 2008)</a></h1>
diff --git a/public/performance.html b/public/performance.html
--- a/public/performance.html
+++ b/public/performance.html
@@ -37,21 +37,12 @@
<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div id="container">
- <header id="header"><h1 id="brand"><a href="https://www.pypy.org/" title="PyPy" rel="home">
-
- </a></h1>
-
-
- <!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar -->
- <section class="navigation"><div class="nav-container">
+ <header id="header"><!-- Adapted from https://www.taniarascia.com/responsive-dropdown-navigation-bar --><section class="navigation"><div class="nav-container">
<div class="brand">
<a href="index.html">
<image id="toplogo" src="images/pypy-logo.svg" width="75px;" alt="PyPy/"></image></a>
</div>
- <nav><div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
- <ul class="nav-list">
+ <nav><ul class="nav-list">
<li>
<a href="#!">Features</a>
<ul class="nav-dropdown">
@@ -71,8 +62,10 @@
</ul>
</li>
- </ul></nav>
-</div>
+ </ul></nav><div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
+ </div>
</section></header><main id="content"><article class="post-text storypage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h1 class="p-name entry-title" itemprop="headline name"><a href="#" class="u-url">Performance</a></h1>
diff --git a/public/sitemap.xml b/public/sitemap.xml
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -11,7 +11,7 @@
</url>
<url>
<loc>https://www.pypy.org/archive.html</loc>
- <lastmod>2020-02-09T16:46:00Z</lastmod>
+ <lastmod>2020-02-09T19:10:00Z</lastmod>
</url>
<url>
<loc>https://www.pypy.org/blog/</loc>
@@ -23,26 +23,26 @@
</url>
<url>
<loc>https://www.pypy.org/compat.html</loc>
- <lastmod>2020-02-09T16:46:00Z</lastmod>
+ <lastmod>2020-02-09T19:10:00Z</lastmod>
</url>
<url>
<loc>https://www.pypy.org/contact.html</loc>
- <lastmod>2020-02-09T16:46:00Z</lastmod>
+ <lastmod>2020-02-09T19:10:00Z</lastmod>
</url>
<url>
<loc>https://www.pypy.org/download.html</loc>
- <lastmod>2020-02-09T16:46:00Z</lastmod>
+ <lastmod>2020-02-09T19:10:00Z</lastmod>
</url>
<url>
<loc>https://www.pypy.org/features.html</loc>
- <lastmod>2020-02-09T16:46:00Z</lastmod>
+ <lastmod>2020-02-09T19:10:00Z</lastmod>
</url>
<url>
<loc>https://www.pypy.org/people.html</loc>
- <lastmod>2020-02-09T16:46:00Z</lastmod>
+ <lastmod>2020-02-09T19:10:00Z</lastmod>
</url>
<url>
<loc>https://www.pypy.org/performance.html</loc>
- <lastmod>2020-02-09T16:46:00Z</lastmod>
+ <lastmod>2020-02-09T19:10:00Z</lastmod>
</url>
</urlset>
\ No newline at end of file
diff --git a/public/sitemapindex.xml b/public/sitemapindex.xml
--- a/public/sitemapindex.xml
+++ b/public/sitemapindex.xml
@@ -11,6 +11,6 @@
</sitemap>
<sitemap>
<loc>https://www.pypy.org/sitemap.xml</loc>
- <lastmod>2020-02-09T16:46:00Z</lastmod>
+ <lastmod>2020-02-09T19:10:00Z</lastmod>
</sitemap>
</sitemapindex>
\ No newline at end of file
diff --git a/themes/pypy/assets/css/styles.css b/themes/pypy/assets/css/styles.css
--- a/themes/pypy/assets/css/styles.css
+++ b/themes/pypy/assets/css/styles.css
@@ -7,10 +7,6 @@
--link-hover-color: #e0dad5;
}
-body {
- color: #383939;
-}
-
:visited {
color: darkolivegreen;
}
@@ -109,12 +105,13 @@
}
.nav-container {
- max-width: content-width;
+ max-width: var(--content-width);
margin: 0 auto;
}
nav {
float: right;
+ background: var(--nav-background);
}
nav ul {
list-style: none;
@@ -173,6 +170,22 @@
}
@media only screen and (max-width: 798px) {
+ body {
+ color: #383939;
+ margin: 0;
+ padding: 0;
+ }
+
+ #container {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ margin: 10px;
+ padding: 0;
+ }
+
.nav-mobile {
display: block;
}
@@ -180,6 +193,7 @@
nav {
width: 100%;
padding: 70px 0 15px;
+ background: var(--nav-background);
}
nav ul {
display: none;
@@ -197,6 +211,7 @@
.nav-dropdown {
position: static;
+ padding: 0 0 0 15px;
}
}
diff --git a/themes/pypy/templates/base_header.tmpl b/themes/pypy/templates/base_header.tmpl
--- a/themes/pypy/templates/base_header.tmpl
+++ b/themes/pypy/templates/base_header.tmpl
@@ -17,15 +17,6 @@
{% endmacro %}
{% macro html_site_title() %}
- <h1 id="brand"><a href="{{ abs_link(_link("root", None, lang)) }}" title="{{ blog_title|e }}" rel="home">
- {% if logo_url %}
- <img src="{{ logo_url }}" alt="{{ blog_title|e }}" id="logo">
- {% endif %}
-
- {% if show_blog_title %}
- <span id="blog-title">{{ blog_title|e }}</span>
- {% endif %}
- </a></h1>
{% endmacro %}
{% macro html_navigation_links() %}
@@ -38,13 +29,13 @@
</a>
</div>
<nav>
- <div class="nav-mobile">
- <a id="nav-toggle" href="#!"> <span></span></a>
- </div>
<ul class="nav-list">
{{ html_navigation_links_entries(navigation_links) }}
</ul>
</nav>
+ <div class="nav-mobile">
+ <a id="nav-toggle" href="#!"> <span></span></a>
+ </div>
</div>
</section>
{% endmacro %}
More information about the pypy-commit
mailing list