Last active
December 21, 2015 15:09
-
-
Save kennethlove/6324460 to your computer and use it in GitHub Desktop.
PyLadies templates ~#27
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>{% block page_title %}My Blog{% endblock %}</title> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css"> | |
| <link rel="stylesheet" href="{{ STATIC_URL }}css/pyladies.css"> | |
| </head> | |
| <body> | |
| <div class="pure-g-r layout"> | |
| <div class="pure-u sidebar"> | |
| <header class="header pure-u-1"> | |
| <hgroup> | |
| <h1 class="brand-title">My Blog</h1> | |
| <h2 class="brand-tagline">Kenneth Love</h2> | |
| </hgroup> | |
| <nav class="nav"> | |
| <ul class="nav-list"> | |
| <li class="nav-item"> | |
| <a class="pure-button" href="{% url 'home' %}">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="pure-button" href="{% url 'blog:list' %}">Posts</a> | |
| </li> | |
| <!-- we'll put links here --> | |
| </ul> | |
| </nav> | |
| </header> | |
| </div> | |
| <div class="pure-u-1 content"> | |
| {% block page_content %}{% endblock %} | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% extends "layouts/base.html" %} | |
| {% block page_title %}{{ post.title }} | {{ block.super }}{% endblock %} | |
| {% block page_content %} | |
| <div class="posts pure-g"> | |
| <section class="post pure-u-1"> | |
| <header class="post-header"> | |
| <h2 class="post-title pure-u-1">{{ post.title }}</h2> | |
| <p class="post-meta pure-u-1">Posted: <time>{{ post.updated_at }}</time></p> | |
| </header> | |
| <div class="post-description pure-u-1"> | |
| {{ post.content_html|safe }} | |
| </div> | |
| </section> | |
| </div> | |
| {% endblock %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% extends "layouts/base.html" %} | |
| {% block page_content %} | |
| <h1>Blog posts</h1> | |
| {% if post_list %} | |
| <ol> | |
| {% for post in post_list %} | |
| <li><a href="{{ post.get_absolute_url }}">{{ post }}</a></li> | |
| {% endfor %} | |
| </ol> | |
| {% endif %} | |
| {% endblock %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: rgb(142, 142, 214); | |
| } | |
| a:hover, | |
| a:focus { | |
| text-decoration: underline; | |
| } | |
| /* LAYOUT CSS */ | |
| .layout { | |
| padding-left: 25%; /* "left col (nav + list)" width */ | |
| position: relative; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| width: 25%; | |
| margin-left: -25%; | |
| background: rgb(24, 33, 61); | |
| color: #fff; | |
| } | |
| .header { | |
| margin: 50% 2em 0; | |
| text-align: right; | |
| } | |
| .brand-title, | |
| .brand-tagline { | |
| margin: 0; | |
| } | |
| .brand-title { | |
| text-transform: uppercase; | |
| } | |
| .brand-tagline { | |
| font-weight: 300; | |
| color: rgb(142, 142, 214); | |
| } | |
| .nav-list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .nav-item { | |
| display: inline-block; | |
| *display: inline; | |
| zoom: 1; | |
| } | |
| .nav-item a { | |
| background: transparent; | |
| border: 3px solid rgb(103, 103, 180); | |
| color: #fff; | |
| margin-top: 1em; | |
| } | |
| .nav-item a:hover, | |
| .nav-item a:focus { | |
| border: 3px solid rgb(142, 142, 214); | |
| color: rgb(142, 142, 214); | |
| text-decoration: none; | |
| } | |
| .content-subhead { | |
| text-transform: uppercase; | |
| color: #aaa; | |
| border-bottom: 1px solid #eee; | |
| padding: 0.4em 0; | |
| font-size: 80%; | |
| font-weight: 500; | |
| letter-spacing: 0.1em; | |
| } | |
| .content { | |
| padding: 2em 3em 0; | |
| } | |
| .post { | |
| padding-bottom: 2em; | |
| } | |
| .post-title { | |
| font-size: 2em; | |
| color: #222; | |
| margin-bottom: 0.2em; | |
| } | |
| .post-avatar { | |
| border-radius: 50px; | |
| float: right; | |
| margin-left: 1em; | |
| } | |
| .post-description { | |
| font-family: Georgia, "Cambria", serif; | |
| color: #444; | |
| line-height: 1.8em; | |
| } | |
| .post-meta { | |
| color: #999; | |
| font-size: 90%; | |
| margin: 0; | |
| } | |
| .post-category { | |
| margin: 0 0.1em; | |
| padding: 0.3em 1em; | |
| color: #fff; | |
| background: #999; | |
| font-size: 80%; | |
| } | |
| .post-category-design { | |
| background: #5aba59; | |
| } | |
| .post-category-pure { | |
| background: #4d85d1; | |
| } | |
| .post-category-yui { | |
| background: #8156a7; | |
| } | |
| .post-category-js { | |
| background: #df2d4f; | |
| } | |
| .post-images { | |
| margin: 1em 0; | |
| } | |
| .post-image-meta { | |
| margin-top: -3.5em; | |
| margin-left: 1em; | |
| color: #fff; | |
| text-shadow: 0 1px 1px #333; | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 1em 0; | |
| } | |
| .footer a { | |
| color: #ccc; | |
| font-size: 80%; | |
| } | |
| .footer .pure-menu a:hover, | |
| .footer .pure-menu a:focus { | |
| background: none; | |
| } | |
| @media (max-width: 767px) { | |
| .sidebar { | |
| width: 100%; | |
| position: relative; | |
| margin: 0; | |
| } | |
| .header { | |
| text-align: center; | |
| top: auto; | |
| margin: 3em auto; | |
| position: static; | |
| } | |
| #layout { | |
| padding: 0; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .content { | |
| padding: 2em 1em 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment