Skip to content
Snippets Groups Projects
Commit 8704a373 authored by bbartels's avatar bbartels
Browse files

website: make style mobile friendly

parent b9e1dcdf
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
website/themes/notmyidea/static/css/main.css
+ 90
− 30
View file @ 8704a373
......@@ -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
website/themes/notmyidea/templates/base.html
+ 4
− 2
View file @ 8704a373
......@@ -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 -->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment