jmg
/
baysec
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

adjust layout..

main
John-Mark Gurney 8 years ago
parent
08c3c72757
commit
f63f88e497
6 changed files with 179 additions and 434 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -1
      content/index.html
  2. +147
    -403
      content/media/css/site.css
  3. +11
    -6
      layout/base.j2
  4. +8
    -21
      layout/blog.j2
  5. +12
    -2
      layout/listing.j2
  6. +1
    -1
      layout/macros.j2

+ 0
- 1
content/index.html View File

@@ -7,5 +7,4 @@ listable: false
---
{% block page_title %}
BaySec is a meetup for security professionals that happens the third Tuesday of each month.
An <a href="/calendar.ics">ICS calendar</a> is available.
{% endblock %}

+ 147
- 403
content/media/css/site.css View File

@@ -1,468 +1,212 @@
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
text-decoration:inherit;
font-size: 100%;
padding: 0;
border: 0;
margin: 0;
}
/*****************************************************************************/
/*
/* Common
/*
/*****************************************************************************/

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
/* Global Reset */

table {
border-collapse: collapse;
* {
margin: 0;
padding: 0;
}

:focus {
outline: 0;
html, body {
height: 100%;
}

::-moz-focus-inner {
border: 0;
body {
background-color: white;
/* font: 16px helvetica, arial, clean, sans-serif;
*font-size: small;
*/
text-align: center;
font-family: "Menlo", "Monaco", "Lucida Console", "Courier New", "Courier", "monospace";
font-size: medium;
}

.clear {
clear: both;
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}

/* clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
h1 {
margin-bottom: 1em;
}

.clearfix {
display: block;
}


* html .clearfix {
height: 1%;
p {
margin: 1em 0;
}

a {
color: #37e;
text-decoration: underline;
}

a:hover{
color: #222;
}

body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #efefef;
padding: 0;
margin: 0;
}

#container{
background-color: #eaeaea;
width: 640px;
margin: 0 auto;
padding: 12px;
-moz-box-shadow: 0px 4px 12px #ccc; /* FF3.5+ */
-webkit-box-shadow: 0px 4px 12px #ccc; /* Saf3.0+, Chrome */
box-shadow: 0px 4px 12px #ccc; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc')"; /* IE8 */
color: #00aa19;
}

footer{
font-size: 10px;
text-align: center;
margin-top: 24px;
a:hover {
color: black;
}

/* Button styles from the awesome: http://www.webdesignerwall.com/demo/css-buttons.html */

.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
a:visited {
color: #006f2c;
}

.bigrounded {
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.medium {
font-size: 12px;
padding: .4em 1.5em .42em;
}
.small {
font-size: 11px;
padding: .2em 1em .275em;
table {
font-size: inherit;
font: 100%;
}

/*****************************************************************************/
/*
/* Home
/*
/*****************************************************************************/

/* white */
.white {
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
color: #999;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
background: -moz-linear-gradient(top, #ededed, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
ul.posts {
list-style-type: none;
margin-bottom: 2em;
}

.banner{
border-bottom: 12px solid #222;
padding: 0 12px;
position: relative;
}
ul.posts li {
line-height: 1.75em;
}

.banner h1{
font-weight: 100;
font-size: 32px;
line-height: 48px;
}
ul.posts span {
color: #aaa;
font-family: Monaco, "Courier New", monospace;
font-size: 80%;
}

/*****************************************************************************/
/*
/* Site
/*
/*****************************************************************************/

.banner h3{
color: #666;
font-weight: normal;
font-size: 16px;
line-height: 24px;
margin-bottom: 12px;
.site {
font-size: 110%;
text-align: justify;
width: 40em;
margin: 1.5em auto 2em auto;
line-height: 1.5em;
}

.banner nav{
position: absolute;
right: 0;
bottom: 0;
.title {
color: #006f29;
font-weight: bold;
margin-bottom: 2em;
}

.banner nav li{
list-style-type: none;
float: left;
}
.site .title a {
font-size: 2em;
color: #00441d;
text-decoration: none;
}

.banner nav li a.button{
margin:0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.site .title a:hover {
color: black;
}

.banner nav li a.button:hover{
color: #000;
}
.banner nav li a.button.active{
color: #d7d7d7;
border: solid 1px #333;
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
background: -moz-linear-gradient(top, #666, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.site .title a.extra {
color: #aaa;
text-decoration: none;
margin-left: 1em;
}

.blog_excerpt{
padding-bottom: 24px;
}
.site .title a.extra:hover {
color: black;
}

.blog_excerpt .post time{
float: none;
clear: left;
}
.site .meta {
color: #aaa;
}

.blog_excerpt .button{
float: right;
}
.site .footer {
font-size: 70%;
color: #666;
border-top: 4px solid #eee;
margin-top: 2em;
overflow: hidden;
display: block;
}

.blog_excerpt h3,
h1.title{
font-size: 24px;
line-height: 36px;
border-bottom: 1px solid #ccc;
}
.site .footer .contact {
}

.blog_excerpt h3{
margin-bottom: 24px;
}
.site .footer .contact li {
display: inline-block;
}

section.content{
padding: 12px;
}
.site .footer .contact a {
color: #8085C1;
}

/* listing */
.site .footer .copyright {
float: right;
display: inline;
}

.listing{
margin-top: 24px;
}

.listing img{
width: 120px;
height: 120px;
}
/*****************************************************************************/
/*
/* Posts
/*
/*****************************************************************************/

.listing li{
background-color: #ededed;
list-style-type: none;
float: left;
width: 272px;
margin-right: 24px;
margin-bottom: 24px;
padding: 12px;
-moz-box-shadow: 0px 4px 12px #ccc; /* FF3.5+ */
-webkit-box-shadow: 0px 4px 12px #ccc; /* Saf3.0+, Chrome */
box-shadow: 0px 4px 12px #ccc; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc')"; /* IE8 */
#post {

}

.listing li:nth-child(2){
margin-right: 0;
}
/* standard */

.listing li:nth-child(3){
clear: left;
}
#post pre {
border: 1px solid #ddd;
background-color: #eef;
padding: 0 .4em;
}

.listing li p{
font-size: 10px;
line-height: 12px;
margin-bottom: 12px;
}
#post ul,
#post ol {
margin-left: 1.35em;
}
#post small {
font-size: 12px;
}

#post code {
border: 1px solid #ddd;
background-color: #eef;
font-size: 85%;
padding: 0 .2em;
}

.listing h3{
font-size: 16px;
line-height: 20px;
}
#post pre code {
border: none;
}

.listing time{
display:block;
border-top: 1px solid #ccc;
padding-top: 4px;
font-size: 10px;
}
/* terminal */

/* Content */
#post pre.terminal {
border: 1px solid black;
background-color: #333;
color: white;
}

article.post p{
font-size: 12px;
line-height: 24px;
margin: 6px 0;
}
#post pre.terminal code {
background-color: #333;
}

article.post img{
display: block;
margin-bottom: 24px;
#related {
margin-top: 2em;
}

.post time{
font-size: 12px;
color: #999;
float:left;
margin-top: 6px;
}
#related h2 {
margin-bottom: 1em;
}

ul.tags{
margin-bottom: 24px;
text-align: right;
}

ul.tags li{
list-style-type: none;
display: inline;
}

ul.tags li a{
color: #999;
text-decoration: none;
}

h1.tag:before,
ul.tags li a:before{
content: '\00AB';
}

h1.tag:after,
ul.tags li a:after{
content: '\00BB';
}

ul.tags li a:hover{
color: #222;
}

h1 a, h2 a, h3 a{
text-decoration: none;
}

nav.post_nav{
background-color: #efefef;
position: fixed;
width: 124px;
margin-left: -186px;
font-size: 12px;
padding: 12px;
padding-right: 24px;
-moz-box-shadow: 0px 2px 4px #ccc; /* FF3.5+ */
-webkit-box-shadow: 0px 2px 4px #ccc; /* Saf3.0+, Chrome */
box-shadow: 0px 2px 4px #ccc; /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=12px, OffY=12px, Color='#ccc')"; /* IE8 */

}

a.backlink{
display:block;
line-height: 24px;
margin-bottom: 12px;
}

a.backlink:before{
content: '\2190';
}

a.prev:before{
content: '\00AB';
}

a.next:after{
content: '\00BB';
}

a.prev{
margin-right: 12px;
}

a.prev,
a.next{
display: block;
float: left;
margin-bottom: 12px;
}

a.next{ float: right };

a.backlink:hover, a.prev:hover, a.next:hover{
color: #222;
}

.post_nav a.disabled{
color: #ccc;
}

.post_nav a{
color: #666;
text-decoration: none;
}

.post_nav div{
display: block;
float: left;
width: 58px;
overflow: hidden;
margin-left: 4px;
}

#facebook_like{
margin-top: 1px;
}

.archives ul.posts{
margin-top: 24px;
}

.archives li.post{
list-style-type: none;
border-bottom: 1px dotted #ccc;
padding: 12px 0;

}

.archives li.post time{
color: #999;
margin-right: 24px;
display:block;
float: left;
width: 120px;
}

.archives li.post a{
float: left;
}

.archives ul.tags{
float: right;
margin-bottom:0;
}


.codebox {
margin-top: 8px;
margin-bottom: 12px;
}
.code {
position: relative;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
background-color: #F0F3F3;
}
.code figcaption {
font-size: 10px;
position: absolute;
bottom: 3px;
right: 12px;
color: rgba(0, 0, 0, 0.5);
}
.highlight pre {
font-size: 12px;
padding: 16px 12px 12px;
line-height: 24px;
margin-bottom: 8px;
}

+ 11
- 6
layout/base.j2 View File

@@ -48,10 +48,9 @@
</head>
<body id="{{ resource.meta.id if resource.meta.id else resource.slug }}">
{% block content %}
<div id="container">
<div class="site" id="main" role="main">
{% block container %}
<div id="main" role="main">
<header class="banner clearfix">
<header class="banner clearfix title">
{% block header -%}
<h1>BaySec</h1>
<h3>SF Bay Area Security Professional Meetup</h3>
@@ -61,12 +60,18 @@
{% block main %}
{% endblock main %}
</section>
</div>
{% endblock container %}
</div> <!--! end of #container -->
<footer>
Powered by <a href="https://github.com/hyde/hyde">hyde</a>.
<div class="footer">
<div class="contact">
<ul>
<li><a href="/calendar.ics">Calendar</a></li>
<li><a href="https://twitter.com/search?f=tweets&vertical=default&q=%23baysec&src=typd">Twitter</a></li>
<li class="copyright">Brought to you by <a href="https://github.com/baysec/baysec">some folks</a>.</li>
</div>
</div>
</footer>
</div>
{% endblock content%}
{% block js %}
<!-- Javascript at the bottom for fast page loading -->


+ 8
- 21
layout/blog.j2 View File

@@ -4,19 +4,17 @@
<article class="post">
<nav class="post_nav">
<a class="backlink" href="/">Back to list</a>
<a class="prev{{' disabled' if not resource.prev_by_time }}"
title="{{ resource.prev_by_time.meta.title }}"
{% if resource.prev_by_time %}
href="{{ content_url(resource.prev_by_time.url) }}"{% endif %}>
Previous
</a>

<a class="next{{' disabled' if not resource.next_by_time }}"
title="{{ resource.next_by_time.meta.title }}"
{% if resource.next_by_time %}
href="{{ content_url(resource.next_by_time.url) }}"{% endif %}>
Next
</a>
Previous</a>

<a class="prev{{' disabled' if not resource.prev_by_time }}"
title="{{ resource.prev_by_time.meta.title }}"
{% if resource.prev_by_time %}
href="{{ content_url(resource.prev_by_time.url) }}"{% endif %}>
Next</a>

<br>
<div id="twitter_share">
@@ -27,19 +25,8 @@
<script type="text/javascript"
src="https://platform.twitter.com/widgets.js"></script>
</div>
<div id="facebook_like">
<iframe src="https://www.facebook.com/plugins/like.php?href&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:450px; height:65px;"
allowTransparency="true"></iframe>
</div>
</nav>
<h1 class="title">
<a href="{{ content_url(resource.url) }}">
{{ resource.meta.title }}
</a>
</h1>
<h1>{{ resource.meta.title }}</h1>
<time datetime="{{ resource.meta.created.strftime('%Y-%m-%d') }}">
Posted: {{ resource.meta.created.strftime('%a, %d %b %Y') }}
</time>


+ 12
- 2
layout/listing.j2 View File

@@ -3,8 +3,18 @@
{% block main %}
{% block page_title %}<h1 class="title">{{ resource.meta.title }}</h1>{% endblock %}

<ul class="listing clearfix">
{% for res in resource.node.walk_resources_sorted_by_time() %}
<br/>
<br/>
<h2>Next Baysec Event</h2>
<h2> {% for res in resource.node.walk_resources_sorted_by_time()[0:1] %}
{{ render_link(res) }}
{% endfor %}
</h2>

<br/>
<h2>Previous Baysec Events</h2>
<ul class="posts">
{% for res in resource.node.walk_resources_sorted_by_time()[1:] %}
<li>
{{ render_link(res) }}
</li>


+ 1
- 1
layout/macros.j2 View File

@@ -1,6 +1,6 @@
{% macro render_link(res, class=None) %}
{% refer to res.relative_path as post %}
<h3><a href="{{ content_url(res.url) }}">{{ res.meta.title }}</a></h3>
<a href="{{ content_url(res.url) }}">{{ res.meta.title }}</a>
{% endmacro %}

{% macro render_excerpt(res, class=None) %}


Write Preview
Loading…
Cancel
Save