archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Merge pull request #5 from RealOrangeOne/styling

Browse source 
Styling
This commit is contained in:
Jake Howard 2017-01-23 14:22:29 +00:00 committed by GitHub
commit a93a80e757
21 changed files with 106 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
content/pages/about.html
View file

@ -4,16 +4,6 @@
<meta name="no_container" content="true" /> <meta name="no_container" content="true" />
</head> </head>
<body> <body>
<section class="bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h1 class="section-heading">About Me</h1>
<hr class="light">
</div>
</div>
</div>
</section>
<section id="me"> <section id="me">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -23,7 +13,7 @@
I work as a full stack developer, but I prefer working on servers and mobile apps. I work as a full stack developer, but I prefer working on servers and mobile apps.
</p> </p>
</div> </div>
<div class="col-sm-4 text-center"> <div class="col-sm-4 text-center github-card-container">
<div data-theme="medium" data-github="RealOrangeOne" class="github-card"></div> <div data-theme="medium" data-github="RealOrangeOne" class="github-card"></div>
</div> </div>
</div> </div>

17
content/pages/homepage.html
View file

@ -98,14 +98,15 @@
<section class="bg-primary" id="blog"> <section class="bg-primary" id="blog">
<div class="container text-center"> <div class="container text-center">
<h2 class="section-heading">Blog</h2> <h2 class="section-heading">Blog</h2>
{% for article in categories|category_find("blog")|limit(4) %}
<hr class="light"> <hr class="light">
{% for article in categories|category_find("blog")|limit(4) %}
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-12">
<p class="h3"><a href="{{ article.url }}">{{ article.title }}</a></p> <p class="h3"><a href="{{ article.url }}">{{ article.title }}</a></p>
<p>{{ article.summary|striptags|e }}</p> <p>{{ article.summary|striptags|e }}</p>
</div> </div>
</div> </div>
<hr class="light">
{% endfor %} {% endfor %}
<a href="/blog/" class="btn btn-primary-dark btn-xl">View all posts</a> <a href="/blog/" class="btn btn-primary-dark btn-xl">View all posts</a>
</div> </div>
@ -116,15 +117,13 @@
<h2 class="section-heading">More Content</h2> <h2 class="section-heading">More Content</h2>
<hr class="primary"> <hr class="primary">
<p>There's more than just my project and blog!</p> <p>There's more than just my project and blog!</p>
<a class="btn btn-primary btn-xl margin" href="/college/"> {% for category, articles in categories %}
College {% if category.name not in ['blog', 'projects'] %}
</a> <a class="btn btn-primary btn-xl margin" href="{{ category.url }}">
<a class="btn btn-primary btn-xl margin" href="/setup/"> {{ category.name }}
Setup
</a>
<a class="btn btn-primary btn-xl margin" href="/work/">
Work
</a> </a>
{% endif %}
{% endfor %}
</div> </div>
</section> </section>
</body> </body>

9
pelicanconf.py
View file

@ -68,10 +68,10 @@ FEED_DOMAIN = SITEURL
PLUGIN_PATHS = ["plugins", "pelican_plugins"] PLUGIN_PATHS = ["plugins", "pelican_plugins"]
PLUGINS = [ PLUGINS = [
'sitemap', 'sitemap',
'pelican-jinja2content', 'screenfetch',
'metatags', 'metatags',
'autopages', 'autopages',
'screenfetch', 'pelican-jinja2content',
'post_build', 'post_build',
'static_build' 'static_build'
] ]
@ -108,7 +108,10 @@ from plugins import filters
JINJA_FILTERS = { JINJA_FILTERS = {
"datetime": filters.format_datetime, "datetime": filters.format_datetime,
"category_find": filters.category_find, "category_find": filters.category_find,
"limit": filters.limit "limit": filters.limit,
"get_title": filters.get_title,
"get_html_title": filters.get_html_title,
"get_image": filters.get_image
} }
JINJA_ENVIRONMENT = { JINJA_ENVIRONMENT = {

20
plugins/filters.py
View file

@ -1,6 +1,10 @@
import iso8601 import iso8601
def get_attribute(cls, attr, default=None):
return getattr(cls, attr, default)
def format_datetime(value): def format_datetime(value):
return iso8601.parse_date(str(value)).strftime("%x") return iso8601.parse_date(str(value)).strftime("%x")
@ -19,3 +23,19 @@ def limit(line, length):
return " ".join(line.split(" ")[:length]) + '...' return " ".join(line.split(" ")[:length]) + '...'
elif isinstance(line, list): elif isinstance(line, list):
return line[:length] return line[:length]
def get_title(instance):
return (
get_attribute(instance, 'title') or (hasattr(instance, 'page') and get_attribute(instance.page, 'name')) or get_attribute(instance, 'name') or ''
)
def get_html_title(instance):
return (
get_attribute(instance, 'html_title') or get_title(instance)
)
def get_image(instance):
return get_attribute(instance, 'image') or (hasattr(instance, 'page') and get_attribute(instance.page, 'name')) or ''

2
plugins/links.py
View file

@ -1,5 +1,4 @@
from collections import namedtuple from collections import namedtuple
from random import shuffle
from config import social from config import social
@ -32,5 +31,4 @@ def index_projects():
ProjectLink("Yoga-Pal", "/projects/yoga-pal/", "http://brain-images.cdn.dixons.com/8/1/10135218/l_10135218_002.jpg"), ProjectLink("Yoga-Pal", "/projects/yoga-pal/", "http://brain-images.cdn.dixons.com/8/1/10135218/l_10135218_002.jpg"),
ProjectLink("Wall of Sheep", "/wall-of-sheep/", "http://www.hackerstickers.com/uploaded/thumbnails/db_file_img_3582_475xauto.jpg") ProjectLink("Wall of Sheep", "/wall-of-sheep/", "http://www.hackerstickers.com/uploaded/thumbnails/db_file_img_3582_475xauto.jpg")
] ]
shuffle(projects)
return projects return projects

2
tests/__init__.py
View file

@ -35,7 +35,7 @@ class TestCase(unittest.TestCase):
self.assertIn(title, content.title.string) self.assertIn(title, content.title.string)
def assertHeaderTitle(self, content, title): def assertHeaderTitle(self, content, title):
header_title = content.find('h1', class_="section-heading") header_title = content.find('div', class_="header-content").find('h1')
self.assertIn(title, self.get_children(header_title)) self.assertIn(title, self.get_children(header_title))
def assertSamePath(self, p1, p2): def assertSamePath(self, p1, p2):

2
tests/tests_common.py
View file

@ -51,7 +51,7 @@ class CommonPagesTestCase(TestCase):
def test_footer_links(self): def test_footer_links(self):
content = self.client.get('index.html') content = self.client.get('index.html')
footer = content.footer footer = content.footer
for link in footer.find('p', class_="social").find_all('a'): for link in footer.find('h2', class_="social").find_all('a'):
self.assertIn(link.attrs['alt'], social_settings['footer_accounts']) self.assertIn(link.attrs['alt'], social_settings['footer_accounts'])
self.assertIn("fa fa-", str(list(link.children)[0])) self.assertIn("fa fa-", str(list(link.children)[0]))

9
theme/static/src/scss/footer.scss
View file

@ -1,6 +1,6 @@
footer { footer {
background-color: $brand-grey-dark; background-color: $brand-grey-dark;
padding-top: 20px; padding-top: 50px;
width: 100%; width: 100%;
height: $footer-height; height: $footer-height;
text-align: center; text-align: center;
@ -28,12 +28,11 @@ footer {
} }
.social { .social {
margin: 0; margin-top: 0;
padding: 7px; margin-bottom: 25px;
font-size: 23px;
a { a {
margin: 0 4px; margin: 0 5px;
color: $white; color: $white;
&:hover { &:hover {

6
theme/static/src/scss/functional.scss
View file

@ -10,3 +10,9 @@
.text-shadow { .text-shadow {
text-shadow: 0 5px 3px $brand-grey-dark; text-shadow: 0 5px 3px $brand-grey-dark;
} }
.outer-gutter {
@extend .no-gutter;
padding: 0 $grid-gutter-width / 2;
}

12
theme/static/src/scss/index.scss
View file

@ -71,16 +71,18 @@ p a {
padding: 1px 0; padding: 1px 0;
} }
#header { header#header {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 50vh;
&.image .section-heading { &.image .section-heading {
@extend .text-shadow; @extend .text-shadow;
} }
@media screen and (min-height: $screen-xs-max) { @media screen and (max-height: $screen-xs-max) {
height: 40vh; height: 100vh;
} }
} }
@ -99,3 +101,7 @@ p a {
} }
} }
} }
.github-card-container > iframe {
max-width: 100%;
}

8
theme/static/src/scss/library-overrides.scss
View file

@ -15,14 +15,6 @@
@include button-variant(#333, #F5F5F5, #D8D8D8); @include button-variant(#333, #F5F5F5, #D8D8D8);
} }
$btn-srobo-bg: #253571;
$btn-srobo-border: darken($btn-srobo-bg, 5%);
.btn-srobo {
@include button-variant(#DADADA, $btn-srobo-bg, $btn-srobo-border);
}
.highlight > pre { .highlight > pre {
font-size: $font-size-base; font-size: $font-size-base;
} }

4
theme/static/src/scss/variables.scss
View file

@ -9,9 +9,11 @@ $white: #FFF;
/* @end General Colours */ /* @end General Colours */
$footer-height: 175px; $footer-height: 300px;
$font-family-heading: "Open Sans", "Helvetica Neue", Arial, sans-serif; $font-family-heading: "Open Sans", "Helvetica Neue", Arial, sans-serif;
$srobo-blue: #243373;
/* @group Bootstrap Overrides */ /* @group Bootstrap Overrides */
$font-family-base: "Roboto", "Helvetica Neue", Arial, sans-serif; $font-family-base: "Roboto", "Helvetica Neue", Arial, sans-serif;

2
theme/templates/article.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block htmltitle %} {% block htmltitle %}
{{ article.html_title or article.title }} {{ article|get_html_title }}
{% endblock %} {% endblock %}
{% block metadata %} {% block metadata %}

2
theme/templates/blog.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block htmltitle %} {% block htmltitle %}
{{ article.title }} {{ article|get_html_title }}
{% endblock %} {% endblock %}
{% block metadata %} {% block metadata %}

47
theme/templates/categories/robotics.md
View file

@ -1,5 +1,6 @@
--- ---
hide_list: true hide_list: true
name: Student Robotics
--- ---
Student Robotics is the the place where my development knowledge really started to grow. Thanks to the other people in my team teaching me. I had never done anything robotics related, and so when my computing teacher initially told us about it, I wasn't really interested. After I found out that my friend was also doing it, I signed up, and went along to the kickstart. From then on I was hooked, getting involved with all aspects of the development and design, as well as helping out other teams on the IRC room. Student Robotics is the the place where my development knowledge really started to grow. Thanks to the other people in my team teaching me. I had never done anything robotics related, and so when my computing teacher initially told us about it, I wasn't really interested. After I found out that my friend was also doing it, I signed up, and went along to the kickstart. From then on I was hooked, getting involved with all aspects of the development and design, as well as helping out other teams on the IRC room.
@ -10,32 +11,38 @@ Student Robotics is the the place where my development knowledge really started
More information can be found on [their website](https://studentrobotics.org). More information can be found on [their website](https://studentrobotics.org).
## My Entries ## My Entries
Being at college for 2 years, meant I was able to enter 2 years of competitions, SR14, and SR15. We were encouraged to gain an online presence for our team, so I created a website for both years. Unfortunately due to account inactivity, and me changing my website 3 times since, The original pages have been lost, however a large amount of the content the content still remains. Being at college for 2 years, meant I was able to enter 2 years of competitions, [SR14](2014), and [SR15](2015). We were encouraged to gain an online presence for our team, so I created a website for both years. Unfortunately due to account inactivity, and me changing my website 3 times since, The original pages have been lost, however a large amount of the content the content still remains.
<div class="row">
<div class="col-sm-6">
<div class="thumbnail">
<img src="https://c2.staticflickr.com/8/7670/17115168179_1ef30ac6e9_b.jpg" alt="Lucy">
<div class="caption">
<h3>Student Robotics 2014</h3>
<p><strong>Robot Name:</strong> Lucy
<br /><small>(No, it doesn't stand for anything)</small>
<p><a href="/robotics/2014/" class="btn btn-srobo btn-block">More Info</a></p>
</div>
</div>
</div>
<div class="row outer-gutter">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="thumbnail"> <a href="/robotics/2014/" class="portfolio-box image" data-image="https://c2.staticflickr.com/8/7670/17115168179_1ef30ac6e9_b.jpg">
<img src="https://c2.staticflickr.com/8/7726/17309695331_584e7de16c_b.jpg" alt="A.L.I.C.E"> <div class="portfolio-box-caption">
<div class="caption"> <div class="portfolio-box-caption-content">
<h3>Student Robotics 2015</h3> <div class="project-name">
<p><strong>Robot Name : </strong> A.L.I.C.E <h2>2014</h2>
<br /><small>(<strong>A</strong>utonomous <strong>L</strong>ogistics and <strong>I</strong>nevitable <strong>C</strong>ollision <strong>E</strong>ngine)</small></p> </div>
<p><a href="/robotics/2015/" class="btn btn-srobo btn-block" >More Info</a></p> <div class="project-category">
<i>Lucy</i>
</div> </div>
</div> </div>
</div> </div>
</a>
</div>
<div class="col-sm-6">
<a href="/robotics/2015/" class="portfolio-box image" data-image="https://c2.staticflickr.com/8/7726/17309695331_584e7de16c_b.jpg">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-name">
<h2>2015</h2>
</div>
<div class="project-category">
<i>A.L.I.C.E</i>
</div>
</div>
</div>
</a>
</div>
</div> </div>
## Adult volunteer ## Adult volunteer

15
theme/templates/category.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block htmltitle %} {% block htmltitle %}
{{ category|title }} {{ category|get_html_title|title }}
{% endblock %} {% endblock %}
{% block metadata %} {% block metadata %}
@ -9,16 +9,7 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<section class="bg-primary"> {% include 'extras/header.html' with instance=category %}
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h1 class="section-heading">{{ category.name|title }}</h1>
<hr class="light">
</div>
</div>
</div>
</section>
{% if category.page.content %} {% if category.page.content %}
<section> <section>
<div class="container"> <div class="container">
@ -39,7 +30,7 @@
</div> </div>
<div class="media-body"> <div class="media-body">
<a href="/{{ article.url }}"> <a href="/{{ article.url }}">
<h4 class="media-heading">{{ article.title }}</h4> <h4 class="media-heading">{{ article|get_title }}</h4>
</a> </a>
<p>{{ article.summary|striptags|e }}</p> <p>{{ article.summary|striptags|e }}</p>
</div> </div>

6
theme/templates/extras/footer.html
View file

@ -2,18 +2,18 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-12">
<p class="social"> <h2 class="social">
{% for link in FOOTER_LINKS %} {% for link in FOOTER_LINKS %}
<a href="{{ link.url }}" alt="{{ link.key }}" class="footer-link"><i class="fa {{ link.icon }}"></i></a> <a href="{{ link.url }}" alt="{{ link.key }}" class="footer-link"><i class="fa {{ link.icon }}"></i></a>
{% endfor %} {% endfor %}
</p> </h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 powered-by"> <div class="col-xs-12 powered-by">
<p> <p>
Powered by <a href="http://blog.getpelican.com/">Pelican</a>, Powered by <a href="http://blog.getpelican.com/">Pelican</a>,
<a href="https://clients.inceptionhosting.com/aff.php?aff=256">Inception Hosting</a>, <a href="https://www.soyoustart.com/en/">SoYouStart</a>,
and a whole heap of <a href="https://github.com/RealOrangeOne/theorangeone.net">Magic</a>! and a whole heap of <a href="https://github.com/RealOrangeOne/theorangeone.net">Magic</a>!
</p> </p>
</div> </div>

12
theme/templates/extras/header.html
View file

@ -1,6 +1,8 @@
<section id="header" class="bg-primary image" data-image="{{ instance.image }}"> <header id="header" class="bg-primary image" data-image="{{ instance|get_image }}">
<div class="container text-center text-uppercase"> <div class="header-content">
<h1 class="section-heading">{{ instance.title }}</h1> <div class="header-content-inner">
<hr class="light"> <h1>{{ instance|get_title }}</h1>
<hr>
</div> </div>
</section> </div>
</header>

2
theme/templates/page-home.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block htmltitle %} {% block htmltitle %}
{{ page.title }} {{ page|get_html_title }}
{% endblock %} {% endblock %}
{% block metadata %} {% block metadata %}

4
theme/templates/page.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block htmltitle %} {% block htmltitle %}
{{ page.html_title or page.title }} {{ page|get_html_title }}
{% endblock %} {% endblock %}
{% block metadata %} {% block metadata %}
@ -9,8 +9,8 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
{% if not page.no_container %}
{% include 'extras/header.html' with instance=page %} {% include 'extras/header.html' with instance=page %}
{% if not page.no_container %}
<section> <section>
<div class="container"> <div class="container">
{{ page.content }} {{ page.content }}

4
theme/templates/projects.html
View file

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block htmltitle %} {% block htmltitle %}
{{ article.title }} {{ article|get_html_title }}
{% endblock %} {% endblock %}
{% block metadata %} {% block metadata %}
@ -23,7 +23,7 @@
<div class="container"> <div class="container">
<div class="btn-group"> <div class="btn-group">
{% if article.download_link %} {% if article.download_link %}
<a class="btn btn-primary btn-xl" href="{{ article.download_link }}">Download {{ article.title }}</a> <a class="btn btn-primary btn-xl" href="{{ article.download_link }}">Download {{ article|get_title }}</a>
{% endif %} {% endif %}
{% if article.repo %} {% if article.repo %}