Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

design stuff

  • Loading branch information...
commit 9d6e27ec61cd7c935b7ba5125def1ad96aa71416 1 parent 9957dc1
@ngokevin ngokevin authored
View
20 content/blog/20130112_metaguide.mkd
@@ -1,4 +1,4 @@
-title: How to write a guide
+title: How to Write a Guide
category: blog
tags: guide
author: "Emily Dunham <dunhame@onid.oregonstate.edu>"
@@ -7,14 +7,14 @@ date: 2013-02-12
1) **Identify a topic** about which we need a guide. If you have an idea, great! If you're looking for something to write about, check out the [open issues][issues] about Guides. Ask around in the IRC channel and at meetings about what people would like to see guides on, as well.
-* Remember that you don't have to start out as an expert on a topic in order to create a great guide. In fact, someone new to a subject is at an advantage when writing an introduction for other newbies, because experts often leave out information that seems obvious based on their years of experience.
+* Remember that you don't have to start out as an expert on a topic in order to create a great guide. In fact, someone new to a subject is at an advantage when writing an introduction for other newbies, because experts often leave out information that seems obvious based on their years of experience.
* To learn more about best practices and other areas that require expertise with your subject, interview an expert! They're usually happy to share, especially to help make a guide from which many people will benefit, and they'll thank you for taking the time to write up and publish their advice.
-2) Make sure that your idea has a ticket open and assigned to you in the [guides category][issues] on our GitHub issue tracker. This will allow others to give feedback on your idea and what information they'd like to see in your guide, and it's good practice for professional software development workflows.
-* If you're unable to create issues or assign an issue to yourself, make sure you're a member of the LUG organization. To become a member on GitHub, contact [an admin][ghlist].
+2) Make sure that your idea has a ticket open and assigned to you in the [guides category][issues] on our GitHub issue tracker. This will allow others to give feedback on your idea and what information they'd like to see in your guide, and it's good practice for professional software development workflows.
+* If you're unable to create issues or assign an issue to yourself, make sure you're a member of the LUG organization. To become a member on GitHub, contact [an admin][ghlist].
-3) **Outline the topic** of your guide. [Etherpad][etherpad] is a great place to draft your ideas and share them with others. You can create a custom URL for your etherpad by navigating to etherpad.osuosl.org/your-guide-topic-idea, substituting your topic for the placeholder text. If a pad by that name doesn't exist yet, you'll get the option of creating it.
+3) **Outline the topic** of your guide. [Etherpad][etherpad] is a great place to draft your ideas and share them with others. You can create a custom URL for your etherpad by navigating to etherpad.osuosl.org/your-guide-topic-idea, substituting your topic for the placeholder text. If a pad by that name doesn't exist yet, you'll get the option of creating it.
#### Your guide should include:
@@ -30,15 +30,15 @@ date: 2013-02-12
* Summary or checklist of the most important steps
-4) **Get feedback** on your outline. If you're new to the topic, check with an expert to see whether there are any holes or inaccuracies in the planned article. If you're an expert, have someone less familiar with the topic read through your outline to be sure you don't leave any major questions unanswered for the people that your writeup is supposed to be guiding.
+4) **Get feedback** on your outline. If you're new to the topic, check with an expert to see whether there are any holes or inaccuracies in the planned article. If you're an expert, have someone less familiar with the topic read through your outline to be sure you don't leave any major questions unanswered for the people that your writeup is supposed to be guiding.
-5) **Complete the content** of your guide. Try to keep it clear and concise. When you think you're finished, read it out loud to your roommate, laptop, or cat. Fix the parts that sound funny, because if it doesn't sound good to you, it'll be just as bad for everyone else who tries to read it.
+5) **Complete the content** of your guide. Try to keep it clear and concise. When you think you're finished, read it out loud to your roommate, laptop, or cat. Fix the parts that sound funny, because if it doesn't sound good to you, it'll be just as bad for everyone else who tries to read it.
-6) **Make it pretty**. Most LUG guides are formatted using [Markdown][mkd], which is an easy markup language to learn. Look at the source of the [other guides][guides]and compare it to how they show up on the website, to get a feel for how Markdown syntax works. And, for the love of grammar, PROOFREAD IT! If you're not sure you've caught all the errors, or just want some feedback, drop a link to your draft in the IRC channel and we'll help you out.
+6) **Make it pretty**. Most LUG guides are formatted using [Markdown][mkd], which is an easy markup language to learn. Look at the source of the [other guides][guides]and compare it to how they show up on the website, to get a feel for how Markdown syntax works. And, for the love of grammar, PROOFREAD IT! If you're not sure you've caught all the errors, or just want some feedback, drop a link to your draft in the IRC channel and we'll help you out.
-7) **Get it online!** Clone or fork the [website repository][site] on Github, add your guide to the [content section][guides], then submit your changes for approval via patch or pull request. If you'd like help, any [LUG officer][officers] or [LUG github admin][ghlist] can walk you through the process or help you find resources to answer your questions.
+7) **Get it online!** Clone or fork the [website repository][site] on Github, add your guide to the [content section][guides], then submit your changes for approval via patch or pull request. If you'd like help, any [LUG officer][officers] or [LUG github admin][ghlist] can walk you through the process or help you find resources to answer your questions.
-* You can create a new file without leaving the Github web page using the + icon which appears after "OSULUG-Website / content / " in [the source][guides].
+* You can create a new file without leaving the Github web page using the + icon which appears after "OSULUG-Website / content / " in [the source][guides].
8) Congratulations, **you're done!** Double-check that your guide appears correctly on the LUG website, and brag about your successful writing career to all your friends.
View
2  content/guides.mkd
@@ -5,7 +5,7 @@ tags: navigation
navrank: 3
image:
url: /img/penguin_how.jpg
- where: left
+ where: right
---
"Linux Survival Guide" or "How Not to Suck at Linux" by fellow OSULUG members.
View
3  content/home.mkd
@@ -7,7 +7,8 @@ pagination:
post_limit: 9
---
-#Welcome to the OSU LUG website!
+##Welcome to the OSU LUG website!
+<br/>
We keep in touch via the [mailing list][ml], and via the `#osu-lug` IRC
channel on `irc.freenode.net`. For more info on IRC, check out our [IRC
View
95 media/css/base.css
@@ -1,8 +1,28 @@
+html, body {
+ margin: 0;
+ padding: 0; }
+
+html {
+ height: 100%;
+ min-height: 100%;
+ position: relative; }
+
body {
- background-color: #f7f7fc;
- color: #5a5a5a;
+ background: url("http://subtlepatterns.com/patterns/scribble_light.png") repeat scroll 0 0 transparent;
+ color: #646464;
font-family: 'Scada', sans-serif; }
+.wrap {
+ -moz-box-shadow: 0 0 1px 1px #646464;
+ -webkit-box-shadow: 0 0 1px 1px #646464;
+ box-shadow: 0 0 1px 1px #646464;
+ border-radius: 3px;
+ background: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/cream_dust.png") repeat scroll 0 0 transparent;
+ min-height: 100%;
+ margin: 0 auto;
+ padding: 0 36px;
+ width: 960px; }
+
h1, h2, h3, h4, h5, h6 {
font-family: 'Bree Serif', serif; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
@@ -33,9 +53,9 @@ ul li, ol li {
.main {
margin-top: 13px; }
.main img {
- -moz-box-shadow: 2px 2px 4px #5a5a5a;
- -webkit-box-shadow: 2px 2px 4px #5a5a5a;
- box-shadow: 2px 2px 4px #5a5a5a; }
+ -moz-box-shadow: 2px 2px 4px #646464;
+ -webkit-box-shadow: 2px 2px 4px #646464;
+ box-shadow: 2px 2px 4px #646464; }
.main p img {
margin-bottom: 5px;
max-height: 320px;
@@ -127,20 +147,17 @@ hr.padded {
.navigation a {
padding: 15px;
margin-left: 5px;
- color: #5a5a5a;
+ color: #646464;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }
.navigation a:hover {
- text-decoration: none;
- color: #5a5a5a;
- background-color: #f5f5f5; }
+ color: #f07719;
+ text-decoration: underline; }
.navigation a.current_nav {
- -moz-box-shadow: 1px 1px 1px #aaaaaa;
- -webkit-box-shadow: 1px 1px 1px #aaaaaa;
- box-shadow: 1px 1px 1px #aaaaaa;
- background-color: #f5f5f5; }
+ color: #f07719;
+ text-decoration: underline; }
.heading {
margin-top: 10px; }
@@ -153,7 +170,8 @@ hr.padded {
line-height: 28px; }
ul.subpage-list {
- list-style: none; }
+ list-style: none;
+ margin-top: 2em; }
ul.subpage-list li {
margin-bottom: 20px;
line-height: inherit; }
@@ -180,25 +198,32 @@ ul.subpage-list {
padding: 0;
line-height: 1.2em;
margin-bottom: 5px;
- color: #5a5a5a; }
+ color: #646464; }
#people img {
float: left;
margin-right: 20px;
width: 125px;
height: 125px; }
-.featured-blog .featured-header {
- margin-bottom: 13px; }
-.featured-blog img {
- float: left;
- margin: 0 35px 20px 0;
- max-width: 960px;
- max-height: 320px; }
+.people {
+ margin-top: 2em; }
+
+.featured-blog {
+ margin: 2em 0 3em; }
+ .featured-blog .featured-header {
+ margin-bottom: 13px; }
+ .featured-blog img {
+ float: left;
+ margin: 0 35px 20px 0;
+ max-width: 960px;
+ max-height: 320px; }
.sliding-index {
margin-top: 26px;
max-height: 1100px;
min-height: 1100px; }
+ .sliding-index > div {
+ margin-bottom: 3em; }
div.recent-blogs.columns {
margin-left: 0; }
@@ -208,29 +233,33 @@ div.recent-blogs.columns {
display: inline;
margin-left: 13px; }
div.recent-blogs.columns .sliding-btn a {
- color: #5a5a5a; }
+ color: #646464; }
div.events.columns {
float: right; }
- div.events.columns ol {
- margin-top: 26px; }
+ div.events.columns ul {
+ list-style: none;
+ margin: 26px 0 0;
+ padding-left: 0; }
+ div.events.columns ul li {
+ margin-bottom: 2em; }
div.events.columns .no-events {
font-style: italic; }
.footer {
- -moz-box-shadow: 2px 2px 4px #5a5a5a;
- -webkit-box-shadow: 2px 2px 4px #5a5a5a;
- box-shadow: 2px 2px 4px #5a5a5a;
- background-color: #f5f5f5;
height: 100px;
+ margin: 0 auto;
margin-top: -100px;
- padding-top: 20px;
- text-align: center; }
+ text-align: center;
+ width: 960px; }
+ .footer span {
+ position: relative;
+ top: 20px; }
.footer a {
- color: #f07719; }
+ color: #0f948a; }
.footer p {
font-size: 14px;
- line-height: 13px; }
+ line-height: 26px; }
.c:after {
content: ".";
View
64 media/css/base.scss
@@ -1,10 +1,32 @@
@import "globals.scss";
+
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ height: 100%;
+ min-height: 100%;
+ position: relative;
+}
+
body {
- background-color: rgb(247, 247, 252);
+ background: url("http://subtlepatterns.com/patterns/scribble_light.png") repeat scroll 0 0 transparent;
color: $gray;
font-family: 'Scada', sans-serif;
}
+.wrap {
+ @include box-shadow(0 0 1px 1px $gray);
+ border-radius: 3px;
+ background: url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/cream_dust.png") repeat scroll 0 0 transparent;
+ min-height: 100%;
+ margin: 0 auto;
+ padding: 0 36px;
+ width: 960px;
+}
+
h1, h2, h3, h4, h5, h6 {
font-family: 'Bree Serif', serif;
a {
@@ -179,13 +201,12 @@ hr.padded {
-moz-border-radius: 5px;
border-radius: 5px;
&:hover {
- text-decoration: none;
- color: $gray;
- background-color: $white;
+ color: $orange;
+ text-decoration: underline;
}
&.current_nav {
- @include box-shadow(1px 1px 1px $light-gray);
- background-color: $white;
+ color: $orange;
+ text-decoration: underline;
}
}
}
@@ -204,6 +225,7 @@ hr.padded {
ul.subpage-list {
list-style: none;
+ margin-top: 2em;
li {
margin-bottom: 20px;
line-height: inherit;
@@ -245,8 +267,13 @@ ul.subpage-list {
height: 125px;
}
}
+.people {
+ margin-top: 2em
+
+}
.featured-blog {
+ margin: 2em 0 3em;
.featured-header {
margin-bottom: 13px;
}
@@ -262,6 +289,9 @@ ul.subpage-list {
margin-top: 26px;
max-height: 1100px;
min-height: 1100px;
+ &>div {
+ margin-bottom: 3em;
+ }
}
div.recent-blogs.columns {
@@ -280,8 +310,13 @@ div.recent-blogs.columns {
div.events.columns {
float: right;
- ol {
- margin-top: 26px;
+ ul {
+ list-style: none;
+ margin: 26px 0 0;
+ padding-left: 0;
+ li {
+ margin-bottom: 2em;
+ }
}
.no-events {
font-style: italic;
@@ -289,18 +324,21 @@ div.events.columns {
}
.footer {
- @include img-box-shadow();
- background-color: $white;
height: 100px;
+ margin: 0 auto;
margin-top: -100px;
- padding-top: 20px;
text-align:center;
+ width: 960px;
+ span {
+ position: relative;
+ top: 20px;
+ }
a {
- color: $orange;
+ color: $light-blue;
}
p {
font-size: 14px;
- line-height: 13px;
+ line-height: 26px;
}
}
View
10 media/css/big_index.css
@@ -24,9 +24,11 @@ h3.big-index-title {
.big-index pre, .big-index code {
display: none; }
-.big-index-item hr, hr.blog-divider {
+.big-index-item {
clear: both;
- margin-top: 2em; }
+ margin-bottom: 4em; }
+ .big-index-item:first-child {
+ margin-top: 2em; }
.big-index-post {
margin-top: 13px;
@@ -38,5 +40,7 @@ h3.big-index-title {
margin-bottom: 1.4em; }
.metadata {
- color: #aaaaaa;
+ color: #646464;
+ font-size: 13px;
+ line-height: 0px;
font-weight: bold; }
View
11 media/css/big_index.scss
@@ -32,9 +32,12 @@ h3.big-index-title {
}
}
-.big-index-item hr, hr.blog-divider {
+.big-index-item {
clear: both;
- margin-top: 2em;
+ margin-bottom: 4em;
+ &:first-child {
+ margin-top: 2em;
+ }
}
.big-index-post {
@@ -50,6 +53,8 @@ h3.big-index-title {
}
.metadata {
- color: $light-gray;
+ color: $gray;
+ font-size: 13px;
+ line-height: 0px;
font-weight: bold;
}
View
10 media/css/globals.scss
@@ -1,11 +1,12 @@
-$light-gray: rgb(170, 170, 170);
-$gray: rgb(90, 90, 90);
-$orange: rgb(240, 119, 25);
$creamy-orange: rgb(248, 205, 126);
-$light-blue: rgb(15, 148, 138);
$dark-blue: rgb(10, 42, 104);
+$gray: rgb(100, 100, 100);
+$light-blue: rgb(15, 148, 138);
+$light-gray: rgb(170, 170, 170);
+$orange: rgb(240, 119, 25);
$white: rgb(245, 245, 245);
+
@mixin box-shadow($shadow) {
-moz-box-shadow: $shadow;
-webkit-box-shadow: $shadow;
@@ -47,4 +48,3 @@ from($color1), to($color2));
@mixin img-box-shadow() {
@include box-shadow(2px 2px 4px $gray);
}
-
View
4 media/css/lib/sticky_footer.css
@@ -13,9 +13,7 @@ http://www.cssstickyfooter.com
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
-html, body, .wrap {height: 100%;}
-
-body > .wrap {height: auto; min-height: 100%;}
+body {min-height: 100%; position: relative;}
.main {padding-bottom: 150px;} /* must be same height as the footer */
View
16 templates/base.html
@@ -18,7 +18,6 @@
<body>
<div class="wrap">
- <div class="container">
<div class="header">
<div class="row">
@@ -72,19 +71,14 @@
{% endblock %}
</div>
+ <div class="footer">
+ <span>
+ <p>Powered by <a href="https://github.com/mythmon/wok"><b>wok</b></a></p>
+ <p>Source on <a href="https://github.com/OSULUG/OSULUG-Website"><b>GitHub</b></a></p>
+ </span>
</div>
</div>
- <div class="footer">
- <span>
- <p>A wild LUG appears!</p>
- <p>
- Powered by <a href="https://github.com/mythmon/wok"><b>wok</b></a>.
- Source on <a href="https://github.com/OSULUG/OSULUG-Website"><b>GitHub</b></a>.
- </p>
- </span>
- </div>
-
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26001055-1']);
View
9 templates/contact.html
@@ -3,9 +3,10 @@
{% block content %}
{{ super() }}
- <hr class="padded">
- <h2>Officers</h2>
+ <div class="people">
+ <h2>Officers</h2>
- {% set people_tag = "officer" %}
- {% include "people.html" with context %}
+ {% set people_tag = "officer" %}
+ {% include "people.html" with context %}
+ </div>
{% endblock %}
View
25 templates/home.html
@@ -22,7 +22,6 @@ <h3 class="big-index-title"><a href="{{blog.url}}">{{
</pre>
</code>
<a href="{{blog.url}}">more</a>
- <hr class="padded">
</div>
</div>
</div>
@@ -31,28 +30,25 @@ <h3 class="big-index-title"><a href="{{blog.url}}">{{
<!--End Featured Blog Post-->
<div class="row">
- <div class="events span4 columns">
+ <div class="events span5 columns">
<!--Upcoming Events-->
<h3>Upcoming Events</h3>
- <ol>
+ <ul>
{% for event in site.categories['events'] | sort(attribute='datetime') if event.datetime > site.datetime %}
<li class="list">
- <h3>
- <a href="{{ event.url }}">{{ event.title }}</a>
- </h3>
<h4>
+ <a href="{{ event.url }}">{{ event.title }}</a>
+ </h4>
+ <span class="metadata">
{% if event.location %}
- {{ event.location }} -
+ {{ event.location }} |
{% endif %}
{{ event.date.strftime('%A %B %d, %Y') }}
- </h4>
+ </span>
{{ event.preview }}
</li>
- {% if not loop.last %}
- <hr>
- {% endif %}
{% endfor %}
- </ol>
+ </ul>
{% for event in site.categories['events'] | sort(attribute='datetime', reverse=True) %}
{% if loop.first and event.datetime < site.datetime %}
<p class="no-events">Check back soon for future events!</p>
@@ -62,7 +58,7 @@ <h3 class="big-index-title"><a href="{{blog.url}}">{{
</div>
<!--Blog Posts-->
- <div class="span11 columns recent-blogs">
+ <div class="span10 columns recent-blogs">
<div class="big-index">
<h3 class="recent-blogs-header">Recent Blogs</h3>
<form class="sliding-btn" method="link" action="/blog/index.html">
@@ -100,9 +96,6 @@ <h3 class="big-index-title"><a href="{{blog.url}}">{{ blog.title }}</a></h3>
{{blog.content|truncate(length=450)}}
<a href="{{blog.url}}">more</a>
</div >
- {% if not loop.last %}
- <hr class="blog-divider">
- {% endif %}
<!--End Blog Preview Post-->
</div>
{% endif %}
View
11 templates/index-big.html
@@ -20,9 +20,11 @@
<link rel="stylesheet" type="text/css" href="/css/big_index.css" />
{% endblock %}
-{% block content %}
- <h2 style="display:inline;">{{ page.title }}</h2>
+{% block title %}
+ <h2>{{ page.title }}</h2>
+{% endblock %}
+{% block content %}
<div class="paging">
{% if page.pagination %}
{% if page.pagination.prev_page %}
@@ -40,10 +42,6 @@ <h2 style="display:inline;">{{ page.title }}</h2>
{% for subpage in pagination.page_items %}
<div class="big-index-item">
- {% if not loop.first %}
- <hr/>
- {% endif %}
-
<div class="big-index-heading">
<h3 class="big-index-title"><a href="{{subpage.url}}">{{subpage.title}}</a></h3>
{% set page = subpage %}
@@ -60,7 +58,6 @@ <h3 class="big-index-title"><a href="{{subpage.url}}">{{subpage.title}}</a></h3>
</pre>
</span>
</div>
-
</div>
{% endfor %}
</div>
View
5 templates/index-tag.html
@@ -1,8 +1,11 @@
{% extends "base.html" %}
+{% block title %}
+ <h2>{{ page.title }}</h2>
+{% endblock %}
+
{% block content %}
-<h2>{{ page.title }}</h2>
{{ page.content }}
<ul class="subpage-list">
Please sign in to comment.
Something went wrong with that request. Please try again.