starting adaptive

4 files changed, 89 insertions, 32 deletions

diff --git a/static/main.css b/static/main.css
index 3d6004c..d85cbef 100644
--- a/static/main.css
+++ b/static/main.css
@@ -51,6 +51,18 @@ ul.news li {
   padding: 5px;
 }
 
+#hs_branding {
+  min-width: 0;
+}
+
+#hs_main {
+  min-width: 0;
+}
+
+body {
+  overflow-x: hidden;
+}
+
 span.date { 
   font-weight: bold;
   display: block;
@@ -63,14 +75,21 @@ span.author {
   text-decoration: italic;
 }
 
+#hs_main {
+  position: relative;
+}
+
 #left {
-  margin-right: 310px;
   border-right: 2px groove #fff;
+  margin-right: 250px;
 }
 
 #right {
-  width: 310px;
-  float: right;
+  position: absolute;
+  width: 250px;
+  top: 100px;
+  padding-top: 16px;
+  right: 0;
 }
 
 .clear {
@@ -91,3 +110,41 @@ span.author {
   text-align: center;
   display: block;
 }
+
+@media screen and (max-width: 1024px) {
+  #hs_branding {
+    width: 95%;
+  }
+  #hs_main {
+    width: 95%;
+  }
+}       
+
+@media screen and (max-width: 625px) {
+  #hs_branding {
+    width: 100%;
+  }
+  #hs_main {
+    width: 100%;
+  }
+  #right {
+    position: static;
+    float: none;
+    width: 100%;
+  }  
+  #left {
+    float: none;
+    width: 100%;
+    margin-right: 0;
+    border-right: 0;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  #hs_branding a {
+    font-size: 1.8em;
+  }
+  #hs_branding li a {
+    font-size: 1.2em;
+  }
+}
diff --git a/static/mapka.png b/static/mapka.png
new file mode 100644
index 0000000..8bebd7f
--- /dev/null
+++ b/static/mapka.png
diff --git a/templates/basic.html b/templates/basic.html
index d1cb28e..21582cc 100644
--- a/templates/basic.html
+++ b/templates/basic.html
@@ -15,7 +15,7 @@
     {% block page_scripts %}
     {% endblock %}
     {% block basic_style %}
-      <meta name="viewport" content="width=device-width" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
       <link rel="shortcut icon" href="https://static.hackerspace.pl/img/favicon.ico"/>
       <link rel="apple-touch-icon" href="https://static.hackerspace.pl/img/glider.png"/>
diff --git a/templates/main.html b/templates/main.html
index 0462789..bf8d38b 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -7,6 +7,34 @@
 {% endblock %}
 {% block title %}Hackerspace Warszawa - strona główna{% endblock %}
 {% block content %}
+  <div id="left">
+    <div id="about">
+      <h1>Co to Hackerspace?</h1>
+      <p>
+        Hackerspace to przestrzeń stworzona i utrzymywana przez grupę kreatywnych osób, które łączy fascynacja 
+        ogólno pojętym tworzeniem w duchu <a href="http://ultra.ap.krakow.pl/~raj/hacker-howto.html">kultury 
+        hackerskiej</a>. Przestrzeń stymuluje rozwój projektów, organizując i użyczając potrzebnych narzędzi. 
+        Hackerspace nie zna barier, jeśli masz ciekawy pomysł i szukasz ludzi chętnych do współpracy lub po 
+        prostu potrzebujesz miejsca i sprzętu - zapraszamy!
+      </p>
+      <a href="/about" class="moar">Gdzie jesteśmy? Jak do nas dołączyć? Dowiedz się więcej!</a>
+    </div>
+  <h1>Nowości</h1>
+  <ul class="news">
+  {% for e in entries %}
+  <li class="{{e.tag}}">
+      <a class="news-title" href="{{e.link}}">
+        <span class="date">{{e.updated_display}}</span>
+        <h3>{{e.title|safe}}</h3>
+        by <span class="author">{{e.author_detail.name or 'Anonymous'}}</span> 
+      </a>
+      <p class="news">
+        {{e.summary|safe}}
+      </p>
+    </li>
+  {% endfor %}
+  </ul>
+  </div>
   <div id="right">
     <h1 class"mail">Listy mailingowe</h1>
     <h1 class="twitter">Twitter</h1>
@@ -39,33 +67,5 @@
     }).render().setUser('hackerspacepl').start();
     </script>
   </div>
-  <div id="left">
-    <div id="about">
-      <h1>Co to Hackerspace?</h1>
-      <p>
-        Hackerspace to przestrzeń stworzona i utrzymywana przez grupę kreatywnych osób, które łączy fascynacja 
-        ogólno pojętym tworzeniem w duchu <a href="http://ultra.ap.krakow.pl/~raj/hacker-howto.html">kultury 
-        hackerskiej</a>. Przestrzeń stymuluje rozwój projektów, organizując i użyczając potrzebnych narzędzi. 
-        Hackerspace nie zna barier, jeśli masz ciekawy pomysł i szukasz ludzi chętnych do współpracy lub po 
-        prostu potrzebujesz miejsca i sprzętu - zapraszamy!
-      </p>
-      <a href="/about" class="moar">Gdzie jesteśmy? Jak do nas dołączyć? Dowiedz się więcej!</a>
-    </div>
-  <h1>Nowości</h1>
-  <ul class="news">
-  {% for e in entries %}
-  <li class="{{e.tag}}">
-      <a class="news-title" href="{{e.link}}">
-        <span class="date">{{e.updated_display}}</span>
-        <h3>{{e.title|safe}}</h3>
-        by <span class="author">{{e.author_detail.name or 'Anonymous'}}</span> 
-      </a>
-      <p class="news">
-        {{e.summary|safe}}
-      </p>
-    </li>
-  {% endfor %}
-  </ul>
-  </div>
   <span class="clear"><a href="#top">↑ Powrót na górę ↑</span>
 {% endblock %}