Commits

Ernesto Menéndez  committed f4f314a

style

  • Participants
  • Parent commits 666e0db

Comments (0)

Files changed (2)

File app/web/static/css/style.css

 
 body {
     font-family: Helvetica, Verdana, Arial, sans-serif;
-    width: 60em;
-    margin: 0 auto;
-    padding: 5em 0;
 }
 
 h1, h2, h3, h4, h5, h6 {
 
 nav {
     float: right;
-    margin-bottom: 1em;
+    padding-top: 2em;
+    padding-right: 7em;
 }
 
 li.menu-item {
 a.no-deco:link, a.no-deco:visited {
     display: block;
     width: 60px;
-    line-height: 20px;
-    color: #000;
+    line-height: 3em;
+    color: white;
     font-weight: bold;
     text-align: center;
+    background-color: black;
+    border-radius: 20px;
+    margin-left: 5px;
 }
 
 a.no-deco:hover, a.no-deco:active {
-    background-color: #ccc;
+    background-color: #fff;
+    color: black;
 }
 
 header {
     margin-bottom: 1em;
 }
 
-section #content {
-    margin-bottom: 1em;
+#top-area {
+    background-color: orangered;
+    height: 80px;
+    border-bottom: .1em solid #777;
+}
+
+#left-area {
+    float: left;
+    width: 20%;
+    min-height: 800px;
+    overflow: hidden;
+    position: relative;
+    left: 80%;
+    border-right: .1em solid #ccc;
+}
+
+#center-area {
+    float: left;
+    width: 55%;
+    padding: .5em;
+    overflow: hidden;
+    position: relative;
+    left: 80%;
+}
+
+#right-area {
+    float: left;
+    width: 20%;
+    min-height: 800px;
+    margin-left: 1em;
+    border-left: .1em dashed #ccc;
+    padding: .5em;
+    overflow: hidden;
+    position: relative;
+    left: 83%;
+}
+
+#bottom-area {
+    padding-top: 6em;
+}
+
+#container3 {
+    float: left;
+    width: 100%;
+    background-color: #f7f6f5;
+    overflow: hidden;
+    position: relative;
+}
+
+#container2 {
+    float: left; 
+    width: 100%;
+    background-color: white;
+    position: relative;
+    right: 20%;
+}
+
+#container1 {
+    float: left; 
+    width: 100%;
+    background-color: #eeeeee;/*#c0c0c0;*/
+    position: relative;
+    right: 60%;
 }
 
 footer {
-    margin-top: 4em;
     padding: 1em 0;
     border-top: .1em dashed #ccc;
 }
 
 footer #powered_by {
     float: right;
-}
+}

File app/web/templates/base.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
-  {% block head %}
-    <meta charset="utf-8" />
-    <title>{% block title %}{% endblock %} - Ernesto Menéndez</title>
-    <link rel="stylesheet" href="{{ url_for('.static', filename='css/style.css') }}" />
-  {% endblock %}
+    {% block head %}
+        <meta charset="utf-8" />
+        <title>{% block title %}{% endblock %} - Ernesto Menéndez</title>
+        <link rel="stylesheet" href="{{ url_for('.static', filename='css/style.css') }}" />
+    {% endblock %}
 
-  <script type="text/javascript">
-  var _gaq = _gaq || [];
-  _gaq.push(['_setAccount', 'UA-20584242-1']);
-  _gaq.push(['_trackPageview']);
+    <script type="text/javascript">
+        var _gaq = _gaq || [];
+        _gaq.push(['_setAccount', 'UA-20584242-1']);
+        _gaq.push(['_trackPageview']);
 
-  (function() {
-    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-  })();
-  </script>
-
+        (function() {
+            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+        })();
+    </script>
 </head>
 <body>
-  <nav>
-    <ul>
-      <li class="menu-item"><a class="no-deco" href="{{ url_for('contact.index') }}">Contact</a></li>
-      <li class="menu-item"><a class="no-deco" href="{{ url_for('about.index') }}">About</a></li>
-      <li class="menu-item"><a class="no-deco" href="{{ url_for('projects.index') }}">Projects</a></li>
-      <li class="menu-item"><a class="no-deco" href="{{ url_for('blog.index') }}">Blog</a></li>
-      <li class="menu-item"><a class="no-deco" href="{{ url_for('home.index') }}">Home</a></li>
-    </ul>
-  </nav>
-  <header>
-    <div id="logo">
-      <a href="{{ url_for('home.index') }}">Insert logo here...</a>
+    <div id="top-area">
+        <nav>
+            <ul>
+                <li class="menu-item"><a class="no-deco" href="{{ url_for('contact.index') }}">Contact</a></li>
+                <li class="menu-item"><a class="no-deco" href="{{ url_for('about.index') }}">About</a></li>
+                <li class="menu-item"><a class="no-deco" href="{{ url_for('projects.index') }}">Projects</a></li>
+                <li class="menu-item"><a class="no-deco" href="{{ url_for('blog.index') }}">Blog</a></li>
+                <li class="menu-item"><a class="no-deco" href="{{ url_for('home.index') }}">Home</a></li>
+            </ul>
+        </nav>
+        <header>
+            <div id="logo">
+                <a href="{{ url_for('home.index') }}">Insert logo here...</a>
+            </div>
+        </header>
     </div>
-  </header>
-  <section id="content">
-    {% block content %}{% endblock %}
-  </section>
-  <footer>
-    {% block footer %}
-      <p id="powered_by">
-        Made with <a href="http://flask.pocoo.org/">Flask</a> and running on <a href="http://code.google.com/appengine/">Google App Engine</a>.
-      </p>
-      <p>
-        &copy;2010-2011 <a href="http://ernesto-m.appspot.com">Ernesto Menéndez</a> - All rights reserved.
-      </p>
-    {% endblock %}
-  </footer>
-  {% block bottom %}{% endblock %}
+    <div id="container3">
+    <div id="container2">
+    <div id="container1">
+        <div id="left-area">
+        </div>
+        <div id="center-area">
+            <section id="content">
+                {% block content %}{% endblock %}
+            </section>
+            <div id="bottom-area">
+                <footer>
+                    {% block footer %}
+                        <p id="powered_by">
+                            Made with <a href="http://flask.pocoo.org/">Flask</a> and running on <a href="http://code.google.com/appengine/">Google App Engine</a>.
+                        </p>
+                        <p>
+                            &copy;2010-2011 <a href="http://ernesto-m.appspot.com">Ernesto Menéndez</a> - All rights reserved.
+                        </p>
+                    {% endblock %}
+                </footer>
+            </div>
+        </div>
+        <div id="right-area">
+            {% block right %}{% endblock %} <!-- for per-page sidebar-->
+        </div>
+    </div>
+    </div>
+    </div>
+    {% block bottom %}{% endblock %} <!-- for per-page scripts  -->
 </body>
 </html>