Archived
1
0
This repository has been archived on 2020-12-10. You can view files and clone it, but cannot push or open issues or pull requests.
old/assets/css/project_entry.css

107 lines
2.1 KiB
CSS
Raw Normal View History

2018-10-16 16:28:42 +00:00
/* Styling vote container */
.vote-container {
position: fixed;
transform: translateX(calc(-100% - 20px));
font-size: 24px;
background-color: #fafafa;
border-radius: 10px;
padding: 4px 12px;
}
.vote-container > * {
display: block;
text-align: center;
margin: 5px 0;
color: #666;
}
.vote-container .fa.fa-thumbs-up {
color: #2272ff;
}
.vote-container .fa.fa-thumbs-down {
color: #F72754;
}
/* Styling project content */
.project-content-container img {
max-width: 100%;
}
/* Styling prev and next project card */
.project-card {
height: 100px;
position: relative;
}
.project-card::after {
position: absolute;
width: calc(100% - 90px);
height: 100%;
top: 0;
left: 90px;
content: "";
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
transform-origin: left;
-webkit-transition: transform .2s ease-out;
-moz-transition: transform .2s ease-out;
-ms-transition: transform .2s ease-out;
-o-transition: transform .2s ease-out;
transition: transform .2s ease-out;
background: rgba(0,0,0,.08);
z-index: -1;
border-radius: 10px;
}
.project-card:hover::after {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
.project-card a {
display: block;
width: 100%;
height: 100%;
}
.project-image {
width: 100px;
height: 100px;
background: #2272ff center;
background-size: cover;
}
.project-card.next-project-card::after {
left: calc(100% - 90px);
}
.project-card.next-project-card:hover::after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.prev-project, .next-project {
max-width: calc(100% - 110px);
}
.prev-project {
float: left;
padding-left: 10px;
}
.next-project {
text-align: right;
float: right;
padding-right: 10px;
}