mirror of
https://github.com/getpelican/pelican.git
synced 2025-10-15 20:28:56 +02:00
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
This commit is contained in:
Ben Sturmfels
Justin Mayer
parent
332be6e5c8
commit
991cebf95d
2 changed files with 28 additions and 21 deletions
|
|
@ -147,7 +147,8 @@ aside, nav, article, figure {
|
|||
}
|
||||
|
||||
/***** Layout *****/
|
||||
.body {clear: both; margin: 0 auto; width: 800px;}
|
||||
.body {clear: both; margin: 0 auto; max-width: 800px;}
|
||||
img { max-width: 100%; }
|
||||
img.right, figure.right, div.figure.align-right {
|
||||
float: right;
|
||||
margin: 0 0 2em 2em;
|
||||
|
|
@ -159,7 +160,7 @@ img.left, figure.left, div.figure.align-left {
|
|||
|
||||
/* .rst support */
|
||||
div.figure img, figure img { /* to fill figure exactly */
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
div.figure p.caption, figure p.caption { /* margin provided by figure */
|
||||
margin-top: 0;
|
||||
|
|
@ -171,16 +172,21 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
|
|||
*****************/
|
||||
#banner {
|
||||
margin: 0 auto;
|
||||
padding: 2.5em 0 0 0;
|
||||
padding: 0.8em 0 0 0;
|
||||
}
|
||||
|
||||
/* Banner */
|
||||
#banner h1 {font-size: 3.571em; line-height: 0;}
|
||||
#banner h1 {
|
||||
font-size: 3.571em;
|
||||
line-height: 1.0;
|
||||
margin-bottom: .3em;
|
||||
}
|
||||
|
||||
#banner h1 a:link, #banner h1 a:visited {
|
||||
color: #000305;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin: 0 0 .6em .2em;
|
||||
margin: 0 0 0 .2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
#banner h1 a:hover, #banner h1 a:active {
|
||||
|
|
@ -195,19 +201,19 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
|
|||
#banner nav {
|
||||
background: #000305;
|
||||
font-size: 1.143em;
|
||||
height: 40px;
|
||||
overflow: auto;
|
||||
line-height: 30px;
|
||||
margin: 0 auto 2em auto;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 800px;
|
||||
max-width: 800px;
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
|
||||
#banner nav ul {list-style: none; margin: 0 auto; max-width: 800px;}
|
||||
#banner nav li {float: left; display: inline; margin: 0;}
|
||||
|
||||
#banner nav a:link, #banner nav a:visited {
|
||||
|
|
@ -242,7 +248,7 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
|
|||
margin-bottom: 2em;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
width: 760px;
|
||||
max-width: 760px;
|
||||
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
|
|
@ -253,7 +259,7 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
|
|||
border: 2px solid #eee;
|
||||
float: right;
|
||||
margin: 0.786em 2em 0 5em;
|
||||
width: 248px;
|
||||
max-width: 248px;
|
||||
}
|
||||
#featured figure img {display: block; float: right;}
|
||||
|
||||
|
|
@ -271,7 +277,7 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
|
|||
margin-bottom: 2em;
|
||||
overflow: hidden;
|
||||
padding: 20px 20px;
|
||||
width: 760px;
|
||||
max-width: 760px;
|
||||
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
|
|
@ -305,15 +311,15 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
|
|||
/* Blogroll */
|
||||
#extras .blogroll {
|
||||
float: left;
|
||||
width: 615px;
|
||||
max-width: 615px;
|
||||
}
|
||||
|
||||
#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
|
||||
#extras .blogroll li {float: left; margin: 0 20px 0 0; max-width: 185px;}
|
||||
|
||||
/* Social */
|
||||
#extras .social {
|
||||
float: right;
|
||||
width: 175px;
|
||||
max-width: 175px;
|
||||
}
|
||||
|
||||
#extras div[class='social'] a {
|
||||
|
|
@ -359,20 +365,20 @@ div.figure p.caption, figure p.caption { /* margin provided by figure */
|
|||
overflow: hidden;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
width: 760px;
|
||||
max-width: 760px;
|
||||
|
||||
border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
}
|
||||
|
||||
#about .primary {float: left; width: 165px;}
|
||||
#about .primary {float: left; max-width: 165px;}
|
||||
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
|
||||
#about .photo {float: left; margin: 5px 20px;}
|
||||
|
||||
#about .url:link, #about .url:visited {text-decoration: none;}
|
||||
|
||||
#about .bio {float: right; width: 500px;}
|
||||
#about .bio {float: right; max-width: 500px;}
|
||||
|
||||
/*
|
||||
Footer
|
||||
|
|
@ -410,7 +416,7 @@ li:first-child .hentry, #content > .hentry {border: 0; margin: 0;}
|
|||
position: relative;
|
||||
float: left;
|
||||
top: 0.5em;
|
||||
width: 190px;
|
||||
max-width: 190px;
|
||||
}
|
||||
|
||||
/* About the Author */
|
||||
|
|
@ -453,12 +459,12 @@ li:first-child .hentry, #content > .hentry {border: 0; margin: 0;}
|
|||
#comments-list li:nth-child(2n) blockquote {background: #F5f5f5;}
|
||||
|
||||
/* Add a Comment */
|
||||
#add-comment label {clear: left; float: left; text-align: left; width: 150px;}
|
||||
#add-comment label {clear: left; float: left; text-align: left; max-width: 150px;}
|
||||
#add-comment input[type='text'],
|
||||
#add-comment input[type='email'],
|
||||
#add-comment input[type='url'] {float: left; width: 200px;}
|
||||
#add-comment input[type='url'] {float: left; max-width: 200px;}
|
||||
|
||||
#add-comment textarea {float: left; height: 150px; width: 495px;}
|
||||
#add-comment textarea {float: left; height: 150px; max-width: 495px;}
|
||||
|
||||
#add-comment p.req {clear: both; margin: 0 .5em 1em 0; text-align: right;}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<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 }}" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue