pelican/pelican/themes/notmyidea/templates/base.html
Ben Sturmfels 991cebf95d Update notmyidea theme to scale down to smaller screens
The aim here is to make the theme work respectably on mobile devices
with only modest changes. Providing different layouts at multiple
breakpoints is beyond the scope of this change.

The changes here are:

1. `base.html`: Add a `<meta name="viewport"` element

2. `main.css`:
  * Use "max-width" instead of "width"
  * Set "line-height" on the banner and adjust vertical spacing to match
  * Remove fixed height on the nav bar and force it to contain its
    child elements
2021-09-28 14:03:05 +02:00

83 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html lang="{% block html_lang %}{{ DEFAULT_LANG }}{% endblock html_lang %}">
<head>
{% block head %}
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content="Pelican" />
<title>{% block title %}{{ SITENAME }}{%endblock%}</title>
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />
{% if FEED_ALL_ATOM %}
<link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
{% endif %}
{% if FEED_ALL_RSS %}
<link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
{% endif %}
{% block extra_head %}{% endblock extra_head %}
{% endblock head %}
</head>
<body id="index" class="home">
{% include 'github.html' %}
<header id="banner" class="body">
<h1><a href="{{ SITEURL }}/">{{ SITENAME }}{% if SITESUBTITLE %} <strong>{{ SITESUBTITLE }}</strong>{% endif %}</a></h1>
<nav><ul>
{% for title, link in MENUITEMS %}
<li><a href="{{ link }}">{{ title }}</a></li>
{% endfor %}
{% if DISPLAY_PAGES_ON_MENU -%}
{% for pg in pages %}
<li{% if pg == page %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ pg.url }}">{{ pg.title }}</a></li>
{% endfor %}
{% endif %}
{% if DISPLAY_CATEGORIES_ON_MENU -%}
{% for cat, null in categories %}
<li{% if cat == category %} class="active"{% endif %}><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a></li>
{% endfor %}
{% endif %}
</ul></nav>
</header><!-- /#banner -->
{% block content %}
{% endblock %}
<section id="extras" class="body">
{% if LINKS %}
<div class="blogroll">
<h2>{{ LINKS_WIDGET_NAME | default('links') }}</h2>
<ul>
{% for name, link in LINKS %}
<li><a href="{{ link }}">{{ name }}</a></li>
{% endfor %}
</ul>
</div><!-- /.blogroll -->
{% endif %}
{% if SOCIAL or FEED_ALL_ATOM or FEED_ALL_RSS %}
<div class="social">
<h2>{{ SOCIAL_WIDGET_NAME | default('social') }}</h2>
<ul>
{% if FEED_ALL_ATOM %}
<li><a href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate">atom feed</a></li>
{% endif %}
{% if FEED_ALL_RSS %}
<li><a href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" rel="alternate">rss feed</a></li>
{% endif %}
{% for name, link in SOCIAL %}
<li><a href="{{ link }}">{{ name }}</a></li>
{% endfor %}
</ul>
</div><!-- /.social -->
{% endif %}
</section><!-- /#extras -->
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
Proudly powered by <a href="https://getpelican.com/">Pelican</a>, which takes great advantage of <a href="https://www.python.org/">Python</a>.
</address><!-- /#about -->
<p>The theme is by <a href="https://www.smashingmagazine.com/2009/08/designing-a-html-5-layout-from-scratch/">Smashing Magazine</a>, thanks!</p>
</footer><!-- /#contentinfo -->
{% include 'analytics.html' %}
{% include 'disqus_script.html' %}
</body>
</html>