this is now responsive and should look nice on tablets too
diff --git a/README.md b/README.md
index 769aee2..e95bf6e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# SVBHACK
-pelican-svbhack is a theme for [Pelican](http://getpelican.com), it is my hack of a svbtle-like theme. It started as a fork of [pelican-svbtle](https://github.com/wting/pelican-svbtle) but then was almost completely rewritten.
+pelican-svbhack is a responsive theme for [Pelican](http://getpelican.com), it is my hack of a svbtle-like theme. It started as a fork of [pelican-svbtle](https://github.com/wting/pelican-svbtle) but then was almost completely rewritten.
## DEMO
@@ -8,7 +8,8 @@
## FEATURES
-- syntax highlighting for code blocks
+- responsive
+- syntax highlighting for pre blocks
- supports google analytics
- custom list of links
diff --git a/static/css/style.less b/static/css/style.less
index acfc508..537ecd8 100644
--- a/static/css/style.less
+++ b/static/css/style.less
@@ -35,18 +35,11 @@
}
aside {
- width: 25%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
- border-right: @light-grey 1px solid;
-
div#user_meta {
- max-width: 192px;
margin: 0;
padding: 40px;
font-family: 'PT Serif', serif;
+ text-align: center;
h1 {
margin-bottom: 10px;
@@ -66,11 +59,13 @@
li {
padding: 10px 0 10px 0;
+ display: inline;
+
a {
color: @med-grey;
border: 2px solid @light-grey;
.border-radius(10px);
- padding: 5px 15px 5px 15px;
+ padding: 5px 10px 5px 10px;
}
}
}
@@ -78,15 +73,9 @@
}
main {
- width: 75%;
- position: absolute;
- top: 0;
- left: 25%;
- overflow-x: hidden;
- overflow-y: hidden;
-
header {
padding: 40px;
+ border-top: @light-grey 1px solid;
border-bottom: @light-grey 1px solid;
h3 {
@@ -97,7 +86,8 @@
article {
padding: 40px;
- max-width: 672px;
+ min-width: 140px;
+ max-width: 608px;
h1 {
font-size: 1.5em;
@@ -142,7 +132,7 @@
}
blockquote {
- padding-left: 20px;
+ padding-left: 15px;
color: @med-grey;
}
@@ -194,3 +184,39 @@
}
}
}
+
+@media screen and (min-width: 1024px) {
+ aside {
+ width: 25%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ border-right: @light-grey 1px solid;
+
+ div#user_meta {
+ min-width: 140px;
+ max-width: 192px;
+ text-align: left;
+
+ ul {
+ li {
+ display: block;
+ }
+ }
+ }
+ }
+
+ main {
+ width: 75%;
+ position: absolute;
+ top: 0;
+ left: 25%;
+ overflow-x: hidden;
+ overflow-y: hidden;
+
+ header {
+ border-top: 0;
+ }
+ }
+}
diff --git a/templates/base.html b/templates/base.html
index ce36b5b..00429dd 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,6 +10,7 @@
<title>{% block title %}{{ SITENAME }}{% endblock %}</title>
<meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width; initial-scale=1.0">
{% if FEED_ALL_ATOM %}
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
{% endif %}