Commit 2786928c authored by Faruk D's avatar Faruk D
Browse files

improve the project index page and fix search bar text

parent d3313b73
......@@ -10,6 +10,21 @@
}
}
.project-index-title {
margin-top: 5.0rem;
margin-bottom: 2.0rem;
font-size: 6.4rem;
line-height: 1.3;
@include bp(max, $tablet){
font-size: 5.4rem;
}
@include bp(max, $phablet){
font-size: 3.8rem;
line-height: 1.4;
}
}
// Introduction
// -----------------------------------
#introduction {
......@@ -550,20 +565,28 @@
// Related projects
// -----------------------------------
#related-projects, #projects-container {
#related-projects {
.container {
padding-top: 65px;
padding-bottom: 65px;
}
}
#projects-container {
.container {
padding-top: 20px;
padding-bottom: 35px;
}
}
.project-items {
display: flex;
justify-content: space-between;
.project-item {
margin-bottom: 0;
background-color: $light;
border: 1px solid white;
width: 50%;
@include bp(max, 767px) {
......@@ -571,23 +594,27 @@
}
&:hover {
color: $primaryColor !important;
// color: $light !important;
color: $white !important;
background-color: $dark;
.thumb {
transform: scale(1.03);
}
}
}
.content {
display: flex;
padding-right: 2em;
padding: 20px 20px 10px 20px;
.thumb {
transition: 0.25s ease-in;
flex-shrink: 0;
padding: 0 1em 1em 0;
width: 100px;
height: 100px;
width: 140px;
}
.text-section {
width: 100%;
}
h2 {
font-size: 2rem;
......@@ -610,22 +637,25 @@
font-size: 1.6rem;
line-height: 1.4em;
}
.gutter {
display: flex;
justify-content: space-between;
margin-top: auto;
margin-top: 1.0em;
font-size: 1.2rem;
}
.status {
text-align: right;
}
}
.project-card {
border: 1px solid white;
}
// ​ .project-card {
// border: 1px solid white;
// }
// .project-card:hover {
// color: $white;
// background-color: $dark;
// }
}
......
......@@ -12,7 +12,7 @@
<div class="col-1-4">
</div>
<div class="col-3-4">
<h1 class="title">Projects</h1>
<h1 class="project-index-title">Projects</h1>
</div>
</div>
......@@ -35,7 +35,7 @@
</div>
<div class="col-3-4 search-bar bg-light">
<input type='text' v-model="filter.search" id="input" placeholder="Start typing here to search for project">
<input type='text' v-model="filter.search" id="input" placeholder="Start typing here to search for projects">
<div class="search-bar_button">
<svg class="icon">
<use xlink:href="{{url_for('static', filename='icons/icons.svg')}}#icon-search"></use>
......@@ -171,10 +171,12 @@
<article v-for="project in pagedProjects" v-bind:key="project" class="project-item project-card bg-light">
<a :href="'/projects/' + (project.id)">
<div class="content">
<div class="thumb">
<img :src="'data:' + (project.image.mimeType) + ';base64,' + (project.image.data)" alt="" >
</div>
<div>
<div class="text-section">
<div class="card-text">
<h2 class="title">[[project.title]]</h2>
<p class="description">[[project.subtitle]]</p>
......@@ -184,6 +186,7 @@
<div class="status">[[project.status]]</div>
</div>
</div>
</div>
</a>
</article>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment