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')
|
||||
context['markdown_content'] = parsed_content
|
||||
context['page_title'] = get_title_from_markdown(parsed_content)
|
||||
context['html_title'] = context['page_title']
|
||||
parsed_content = template.render(context, request)
|
||||
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 {
|
||||
text-align: center;
|
||||
.container {
|
||||
|
@ -123,12 +90,17 @@ body.index {
|
|||
padding: 15px;
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
&.see-more {
|
||||
h1 {
|
||||
&.larger {
|
||||
.inner {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin: 0;
|
||||
h1, h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&.project h2 {
|
||||
font-size: 27px;
|
||||
}
|
||||
}
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
@ -136,12 +108,7 @@ body.index {
|
|||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
@media (min-width: @screen-sm-min) {
|
||||
max-height: 200px;
|
||||
}
|
||||
@media (max-width: @screen-xs-max) {
|
||||
max-height: 275px;
|
||||
}
|
||||
max-height: 50%;
|
||||
}
|
||||
h3 {
|
||||
margin: 10px 0;
|
||||
|
|
|
@ -16,8 +16,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid" id="project-images-types"></div>
|
||||
|
||||
<div class="container-fluid" id="twitter-feed">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
@ -37,25 +35,38 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<h1>All Projects</h1>
|
||||
{% for key, project in projects.items %}
|
||||
{% for project in projects %}
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<img src="{{ project.image }}" alt="{{ key }} image">
|
||||
<div class="caption">
|
||||
<h3>{{ project.title }}</h3>
|
||||
<p></p>
|
||||
<a href="/project/">
|
||||
Read More
|
||||
</a>
|
||||
{% if project.header_image %}
|
||||
<div class="thumbnail">
|
||||
<img src="{{ project.header_image }}" alt="image">
|
||||
<div class="caption">
|
||||
<h3>{{ project.name }}</h3>
|
||||
<p></p>
|
||||
<a href="{{ project.url }}">
|
||||
Read More
|
||||
</a>
|
||||
</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>
|
||||
{% endfor %}
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail see-more">
|
||||
<a href="/projects">
|
||||
<h1>See All</h1>
|
||||
</a>
|
||||
<div class="thumbnail larger">
|
||||
<div class="inner">
|
||||
<a href="/projects/">
|
||||
<h1>See All</h1>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Reference in a new issue