From ff5db2b2166a23a20c8584bb9324133205223139 Mon Sep 17 00:00:00 2001
From: Brendan Bartels <bbartels@iastate.edu>
Date: Sat, 19 Nov 2016 18:57:43 -0600
Subject: [PATCH] website: make style mobile friendly
---
website/themes/notmyidea/static/css/main.css | 120 ++++++++++++++-----
website/themes/notmyidea/templates/base.html | 6 +-
2 files changed, 94 insertions(+), 32 deletions(-)
diff --git a/website/themes/notmyidea/static/css/main.css b/website/themes/notmyidea/static/css/main.css
index 03a77e698..9938cf611 100644
--- a/website/themes/notmyidea/static/css/main.css
+++ b/website/themes/notmyidea/static/css/main.css
@@ -22,9 +22,16 @@ body {
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
- margin: 0;
- padding: 0;
text-align: left;
+ width: 90%;
+ display: inline-block;
+ max-width: 50em;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ /*! width: 100%; */
}
/* Headings */
@@ -38,7 +45,7 @@ h6 {font-size: 1em} /* 14px */
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
- margin-bottom: .8em;
+ margin-bottom: .2em;
font-family: 'Yanone Kaffeesatz', arial, serif;
}
@@ -51,7 +58,7 @@ a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
- padding: 0 1px;
+ /*! padding: 0 1px; */
text-decoration: underline;
}
a:hover, a:active {
@@ -76,7 +83,7 @@ em, i {font-style: italic;}
/* Lists */
ul {
list-style: outside disc;
- margin: 0em 0 0 1.5em;
+ /*! margin: 0em 0 0 1.5em; */
}
ol {
@@ -147,7 +154,7 @@ aside, nav, article, figure {
}
/***** Layout *****/
-.body {clear: both; margin: 0 auto; width: 800px;}
+.body {clear: both; margin: 0; /*! *//*! */text-align: left;padding: 2em;}
img.right, figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: left; margin: 0 2em 2em 0;}
@@ -155,17 +162,18 @@ img.left, figure.left {float: left; margin: 0 2em 2em 0;}
Header
*****************/
#banner {
- margin: 0 auto;
- padding: 2.5em 0 0 0;
+ /*! */
+ /*! */
+ padding: 1em 0;
}
/* Banner */
- #banner h1 {font-size: 3.571em; line-height: 0;}
+ #banner h1 {font-size: 3.571em; /*! */}
#banner h1 a:link, #banner h1 a:visited {
color: #000305;
display: block;
font-weight: bold;
- margin: 0 0 .6em .2em;
+ /*! margin: 0 0 .6em .2em; */
text-decoration: none;
}
#banner h1 a:hover, #banner h1 a:active {
@@ -180,25 +188,25 @@ img.left, figure.left {float: left; margin: 0 2em 2em 0;}
#banner nav {
background: #000305;
font-size: 1.143em;
- height: 40px;
+ /*! */
line-height: 30px;
- margin: 0 auto 2em auto;
- padding: 0;
- text-align: center;
- width: 800px;
+ /*! margin: 0 auto 2em auto; */
+ /*! padding: 0; */
+ /*! text-align: center; */
+ /*! 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 li {float: left; display: inline; margin: 0;}
+ #banner nav ul {list-style: none; /*! margin: 0 auto; */ /*! */}
+ #banner nav li {/*! float: left; */ display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
- height: 30px;
+ /*! */
padding: 5px 1.5em;
text-decoration: none;
}
@@ -253,20 +261,27 @@ img.left, figure.left {float: left; margin: 0 2em 2em 0;}
*****************/
#content {
background: #fff;
- margin-bottom: 2em;
- overflow: hidden;
- padding: 20px 20px;
- width: 760px;
+ /*! */
+ /*! */
+ /*! */
+ /*! */
- border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
+#content img {
+ padding: 1em;
+}
+
+/* #content h1, #content h2, #content p, #content img {
+ padding: 0 20px;
+} */
+
/*
Extras
*****************/
-#extras {margin: 0 auto 3em auto; overflow: hidden;}
+#extras {/*! margin: 0 auto 3em auto; */ overflow: hidden;}
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
@@ -341,11 +356,11 @@ img.left, figure.left {float: left; margin: 0 2em 2em 0;}
#about {
background: #fff;
font-style: normal;
- margin-bottom: 2em;
- overflow: hidden;
- padding: 20px;
+ /*! margin-bottom: 2em; */
+ /*! overflow: hidden; */
+ padding: 1em 2em;
text-align: left;
- width: 760px;
+ /*! width: 760px; */
border-radius: 10px;
-moz-border-radius: 10px;
@@ -363,7 +378,7 @@ img.left, figure.left {float: left; margin: 0 2em 2em 0;}
/*
Footer
*****************/
-#contentinfo {padding-bottom: 2em; text-align: right;}
+#contentinfo {/*! padding-bottom: 2em; */ text-align: right;padding: 0;}
/***** Sections *****/
/* Blog */
@@ -376,7 +391,7 @@ img.left, figure.left {float: left; margin: 0 2em 2em 0;}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
.hentry img{display : none ;}
-.entry-title {font-size: 3em; margin-bottom: 10px; margin-top: 0;}
+.entry-title {font-size: 3em; /*! margin-bottom: 10px; */ /*! margin-top: 0; */}
.entry-title a:link, .entry-title a:visited {text-decoration: none; color: #333;}
.entry-title a:visited {background-color: #fff;}
@@ -450,3 +465,48 @@ li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#add-comment input[type='submit'] {float: right; margin: 0 .5em;}
#add-comment * {margin-bottom: .5em;}
+
+html {
+ text-align: center;
+}
+
+footer {
+ padding: 0;
+}
+
+@media screen and (max-width:500px) {
+
+ #banner nav li {
+ display: block;
+ /*! margin: 0; */
+ border-radius: 0;
+ text-align: center;
+ }
+
+ #banner nav {
+ border-radius: 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ }
+
+ body {
+ width: 100%;
+ }
+
+ #banner nav li:first-child a {
+ border-radius: 0;
+ }
+
+ #banner nav li a {
+ width: ;
+ }
+
+ #banner h1 {
+ text-align: center;
+ }
+
+ footer p {
+ padding: 0 2em;
+ text-align: center;
+ }
+}
\ No newline at end of file
diff --git a/website/themes/notmyidea/templates/base.html b/website/themes/notmyidea/templates/base.html
index 45ab4044e..edbb83ffb 100644
--- a/website/themes/notmyidea/templates/base.html
+++ b/website/themes/notmyidea/templates/base.html
@@ -11,6 +11,8 @@
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
{% endif %}
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
@@ -69,9 +71,9 @@
</section><!-- /#extras -->
<footer id="contentinfo" class="body">
- <address id="about" class="vcard body">
+ <div id="about" class="vcard">
Proudly powered by <a href="http://getpelican.com/">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>.
- </address><!-- /#about -->
+ </div><!-- /#about -->
<p>The theme is by <a href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/">Smashing Magazine</a>, thanks!</p>
</footer><!-- /#contentinfo -->
--
GitLab