base.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{% block title %}{% endblock %}</title>
  5. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  6. <style type="text/css">
  7. body { margin: 0; color: #555; font-size: 14px; }
  8. body, input { font-family: 'Open Sans', sans-serif; }
  9. a { color: #34495e; }
  10. .search-form { margin: 0; padding: 32px; text-align: center; background-color: #e7e6e7; border-bottom: 4px solid #ddd; }
  11. h1 { color: #fff; font-weight: normal; font-size: 24px; margin: 0 0 16px; }
  12. h1 a { color: #16a085; text-decoration: none; }
  13. input {
  14. font-size: 14px; border: none; border-radius: 4px; padding: 12px 16px; color: #444;
  15. -moz-transition: box-shadow 0.2s ease-in;
  16. -webkit-transition: box-shadow 0.2s ease-in;
  17. }
  18. input:focus { border-color: #16a085; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
  19. .result { width: 640px; margin: 16px auto; }
  20. .result .sort { float: right; color: #999; }
  21. .result .sort a {
  22. display: inline-block; text-decoration: none; border-radius: 4px; padding: 5px; color: #666;
  23. font-weight: bold;
  24. -moz-transition: background 0.1s ease-in;
  25. -webkit-transition: background 0.1s ease-in;
  26. }
  27. .result .sort a:hover { background-color: #eee; }
  28. .result .sort a.active { background-color: #16a085; color: #fff; }
  29. .post { margin-bottom: 24px; overflow: hidden; clear: both; }
  30. .post .picture { float: left; margin-right: 10px; border-radius: 25px; width: 50px; height: 50px; background-color: #eee; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
  31. .post .name { display: block; font-weight: bold; color: #16a085; line-height: 22px; padding-top: 3px; }
  32. .post .meta { display: block; color: #999; font-size: 13px; line-height: 22px; }
  33. .post .meta a { color: #999; }
  34. .post .body { line-height: 1.6; }
  35. .post .comments { list-style: none; padding: 0; margin: 0; border-left: 4px solid #ddd; padding-left: 10px; font-size: 13px; }
  36. .post .comments li { margin: 5px 0; }
  37. .post .comment-name { color: #16a085; font-weight: bold; margin-right: 5px; }
  38. .post .comments .permalink { margin-left: 5px; color: #16a085; text-decoration: none; }
  39. .hl { display: inline-block; padding: 0 2px; border-radius: 2px; background-color: yellow; background-color: rgba(255, 255, 0, .5); }
  40. .paging { overflow: hidden; }
  41. .paging .prev { float: left; }
  42. .paging .next { float: right; }
  43. .content { width: 640px; margin: 16px auto; }
  44. .groups { list-style: none; margin: 0; padding: 0; }
  45. .groups li { font-weight: normal; font-size: 24px; margin: 0 0 16px; }
  46. .groups li a { color: #16a085; text-decoration: none; }
  47. .footer { text-align: center; margin: 32px 0 16px; color: #999; }
  48. </style>
  49. </head>
  50. <body>
  51. {% block content %}{% endblock %}
  52. <script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
  53. {% block js %}{% endblock %}
  54. <div class="footer">
  55. Powered by <a href="https://github.com/dittos/groupie">Groupie</a> {{ GROUPIE_VERSION }}
  56. </div>
  57. </body>
  58. </html>