Restyle projects on homepage
This commit is contained in:
parent
45ffcd853d
commit
564da7da1d
3 changed files with 37 additions and 58 deletions
|
|
@ -30,6 +30,7 @@ def page_view(request, path):
|
||||||
template = get_template('markdown_content.html')
|
template = get_template('markdown_content.html')
|
||||||
context['markdown_content'] = parsed_content
|
context['markdown_content'] = parsed_content
|
||||||
context['page_title'] = get_title_from_markdown(parsed_content)
|
context['page_title'] = get_title_from_markdown(parsed_content)
|
||||||
|
context['html_title'] = context['page_title']
|
||||||
parsed_content = template.render(context, request)
|
parsed_content = template.render(context, request)
|
||||||
return HttpResponse(parsed_content)
|
return HttpResponse(parsed_content)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -45,39 +45,6 @@ body.index {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#project-images-types {
|
|
||||||
background: @blueprint-logo;
|
|
||||||
background-size: cover;
|
|
||||||
background-attachment: fixed;
|
|
||||||
@media screen and (max-width: @screen-xs-max) {
|
|
||||||
background-attachment: initial;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: @container-inset;
|
|
||||||
margin-bottom: @container-inset;
|
|
||||||
h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: @container-inset / 2;
|
|
||||||
color: white;
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
.row {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.college {
|
|
||||||
background-image: url(../img/projects/collyers-logo.gif);
|
|
||||||
}
|
|
||||||
.personal {
|
|
||||||
background-image: url(../img/projects/kermit-typing.gif);
|
|
||||||
}
|
|
||||||
.work {
|
|
||||||
background-image: url(http://www.recommendedagencies.com/pub/logos/dabapps-logo-1432733278.jpg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#twitter-feed {
|
#twitter-feed {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.container {
|
.container {
|
||||||
|
|
@ -123,12 +90,17 @@ body.index {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
&.see-more {
|
&.larger {
|
||||||
h1 {
|
.inner {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
margin: 0;
|
h1, h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.project h2 {
|
||||||
|
font-size: 27px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
|
|
@ -136,12 +108,7 @@ body.index {
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@media (min-width: @screen-sm-min) {
|
max-height: 50%;
|
||||||
max-height: 200px;
|
|
||||||
}
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
max-height: 275px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container-fluid" id="project-images-types"></div>
|
|
||||||
|
|
||||||
<div class="container-fluid" id="twitter-feed">
|
<div class="container-fluid" id="twitter-feed">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -37,25 +35,38 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<h1>All Projects</h1>
|
<h1>All Projects</h1>
|
||||||
{% for key, project in projects.items %}
|
{% for project in projects %}
|
||||||
<div class="col-sm-6 col-md-4">
|
<div class="col-sm-6 col-md-4">
|
||||||
<div class="thumbnail">
|
{% if project.header_image %}
|
||||||
<img src="{{ project.image }}" alt="{{ key }} image">
|
<div class="thumbnail">
|
||||||
<div class="caption">
|
<img src="{{ project.header_image }}" alt="image">
|
||||||
<h3>{{ project.title }}</h3>
|
<div class="caption">
|
||||||
<p></p>
|
<h3>{{ project.name }}</h3>
|
||||||
<a href="/project/">
|
<p></p>
|
||||||
Read More
|
<a href="{{ project.url }}">
|
||||||
</a>
|
Read More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% else %}
|
||||||
|
<div class="thumbnail larger project">
|
||||||
|
<div class="inner">
|
||||||
|
<h2>{{ project.name }}</h2>
|
||||||
|
<a href="{{ project.url }}">
|
||||||
|
Read More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<div class="col-sm-6 col-md-4">
|
<div class="col-sm-6 col-md-4">
|
||||||
<div class="thumbnail see-more">
|
<div class="thumbnail larger">
|
||||||
<a href="/projects">
|
<div class="inner">
|
||||||
<h1>See All</h1>
|
<a href="/projects/">
|
||||||
</a>
|
<h1>See All</h1>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Reference in a new issue