html,body {
margin:0;
}
body {
background-color:hsl(180, 52%, 96%);
font-family: 'spartan','sans-serif';
}
.header {
width: 100%;
height: 155px;
background-image: url('./../images/bg-header-desktop.svg');
background-size: cover;
background-position: center;
background-color: #5DA4A4;
}
.joblis-container {
max-width: 1500px;
width:auto;
display:block;
margin: 0 auto;
padding: 0 40px 40px;
}
.joblis-search {
width:100%;
height:auto;
background-color: white;
border-radius: 2px;
box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.25);
padding:20px 40px;
box-sizing: border-box;
margin-top: -30px;
opacity: 1;
}
.joblis-jobs {
margin: 0 auto;
max-width: 100%;
height:auto;
display:grid;
position:relative;
border:none;
}
/* [start] wraps job item as an anchor and animates */
a {
text-transform: none;
text-decoration: none;
}
.joblis-jobs-item-whole {
max-width: 98%;
background-color: transparent;
border:none;
position: relative;
margin: 0 auto;
margin-bottom:25px;
}
.joblis-jobs-item-whole:hover {
animation: bounce 0.75s;
cursor: pointer;
z-index: 7;
border:none;
}
@keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
80% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
/* [end] wraps job item as an anchor and animates */
.joblis-jobs-head {
max-width: 98%;
height:40px;
display:flex;
background: rgb(72, 144, 144);
background: linear-gradient(180deg, rgba(93,164,164,1) 0%, rgba(160,224,224,0.8140354046242775) 0%, rgba(255,255,255,1) 100%);
border:none;
box-sizing: border-box;
margin: 0 auto;
padding:0;
border-radius: 2px;
z-index: 7;
}
.joblis-jobs-item {
max-width: 98%;
padding: 0 25px;
background-color: white;
border-radius: 2px;
box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.25);
box-sizing: border-box;
display:flex;
justify-content: space-between;
padding-bottom:65px;
min-height:230px;
margin: 0 auto;
}
/* [start] location, job type and post/upload time */
.joblis-jobs-info{
margin-left:0;
width:auto;
margin-top:0;
padding-top:0;
}
.joblis-jobs-details {
margin:0;
padding:0;
}
.joblis-jobs-details-item {
display: inline-block;
color: hsl(180, 8%, 52%);
font-size:0.8em;
line-height: 2em;
}
.joblis-jobs-details-item:after {
content: "";
width: 3px;
height: 3px;
border-radius: 3px;
background-color: transparent;
display:inline-block;
margin: 5px 15px;
}
.joblis-jobs-details-item:last-child::after {
display:none;
}
/* [end] location, job type and post/upload time */
/* [start] item header; relevance measure and distance */
.joblis-jobs-head-item {
display: inline-block;
font-size:10px;
}
.joblis-jobs-head-text {
position:absolute;
font-size: 12px;
font-weight: 400;
color:firebrick;
top:10px;
}
.joblis-match-text{
display:none;
position:absolute;
font-size: 12px;
font-weight: 400;
color:lightseagreen;
top:10px;
left:25px;
}
.styled progress {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 40px;
/* Firefox */
border: none;
background: mintcream;
/*border-radius: 3px;*/
/*box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;*/
position:absolute;left:45px;top:10px;width:20%;height:1.25em;float:left;
}
.styled progress::-webkit-progress-bar {
background: mintcream;
/*box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;*/
border-radius: 3px;
/*position:absolute;left:25px;top:10px;width:20%;height:1.25em;;float:left;*/
}
.styled progress::-webkit-progress-value {
background-color: lightseagreen;
border-radius: 3px;
/*position:absolute;left:25px;top:10px;width:20%;height:1.25em;float:left;*/
}
.styled progress::-moz-progress-bar {
background-color: lightseagreen;
border-radius: 3px;
/*position:absolute;left:25px;top:10px;width:20%;height:1.25em;float:left;*/
}
.progress-pos{
position:absolute;
left:15em;
top:10px;
width:30%;
height:1.25em;
border-radius: 3px;
}
/* [end] item header; relevance measure and distance */
/* [start] favourite */
.joblis-jobs-fav{
position:absolute;
bottom:0.75em;
right:0.75em;
width:1.5em;
height:1.5em;
color: lightseagreen;
background-color: mintcream;
opacity: 0.85;
z-index:8;
border-radius: 50px;
border: 1px solid #C6C8C6;
padding:25px;
}
.joblis-jobs-fav-state{
color: firebrick;
margin-left:-0.5em;margin-top:-0.3em;
}
.joblis-jobs-unfav-state{
color: #C6C8C6;
margin-left:-0.5em;margin-top:-0.3em;
}
.joblis-jobs-fav:hover {
cursor: pointer;
border: 2px solid lightseagreen;
}
/* [end] favourite */
.joblis-jobs-gem{
position:absolute;
width:25px;
height:25px;
color: firebrick;
background-color: whitesmoke;
opacity:0.75;
margin-top: -50px;
margin-left: -35px;
padding: 20px;
z-index:8;
border-radius: 15px;
border: 2px solid white;
}
.joblis-jobs-company {
color: lightseagreen;
font-size: 13px;
display: block;
font-weight:600;
margin-bottom: 10px;
}
.joblis-jobs-salary {
color: firebrick;
font-size: 0.8em;
display: block;
font-weight:600;
margin-bottom: 0px;
}
.joblis-jobs-snippet {
color: hsl(180, 8%, 52%);
font-size:0.8em;
line-height: 1.6;
color:black;
width:auto;
max-width:815px;
align-items: center;
}
.joblis-jobs-title {
color : hsl(180, 14%, 20%);
font-size: 1em;
font-weight: 600;
display:block;
margin-bottom:10px;
margin-top:0;
line-height:1.5em;
}
.joblis-jobs-img{
width:110px;
height:auto;
}
.joblis-jobs-column {
display:flex;
align-items: center;
}
/* mobiles portrait */
@media (max-width: 479.99px) {
.joblis-jobs-item-grid {
display: grid;
gap: 10px;
grid-template-columns: [col] 100% ;
grid-template-rows: [row] auto [row] auto [row] auto ;
width:100%;
justify-items: center;
}
.joblis-jobs-item-grid-top-l {
grid-column: col ;
grid-row: row ;
}
.joblis-jobs-item-grid-top-r {
grid-column: col;
grid-row: row ;
}
.joblis-jobs-item-grid-middle {
grid-column: col / span 2 ;
grid-row: row 2 ;
min-width: 100%;
}
.joblis-jobs-item-grid-bottom {
grid-column: col / span 2 ;
grid-row: row 3 ;
}
.joblis-jobs-item-grid-fav {
grid-column: col / span 2 ;
grid-row: row 4;
}
.joblis-jobs-img{
display:none;
}
}
/*@media (max-width: 400 to 575px) {*/
@media (min-width: 480px) and (max-width: 674.98px) {
.joblis-jobs-item-grid {
display: grid;
gap: 10px;
grid-template-columns: [col] 100% ;
grid-template-rows: [row] auto [row] auto [row] auto ;
width:100%;
justify-items: center;
}
.joblis-jobs-item-grid-top-l {
grid-column: col ;
grid-row: row ;
}
.joblis-jobs-item-grid-top-r {
grid-column: col;
grid-row: row ;
}
.joblis-jobs-item-grid-middle {
grid-column: col / span 2 ;
grid-row: row 2 ;
min-width: 100%;
}
.joblis-jobs-item-grid-bottom {
grid-column: col / span 2 ;
grid-row: row 3 ;
}
.joblis-jobs-item-grid-fav {
grid-column: col / span 2 ;
grid-row: row 4;
}
.joblis-jobs-snippet {
font-size:0.9em;
}
.joblis-jobs-title {
font-size: 1.2em;
}
.joblis-jobs-img{
display:none;
}
}
/* medium, large and huge screens */
@media (min-width: 675px) {
.joblis-jobs-item-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: [col] 60% [col] 40% ;
grid-template-rows: [row] auto [row] auto [row] auto [row] auto;
width:100%;
justify-items: center;
margin-top: 0 !important;
padding-top: 0 !important;
}
.joblis-jobs-item-grid-top-l {
grid-column: col ;
grid-row: row ;
}
.joblis-jobs-item-grid-top-r {
grid-column: col 2;
grid-row: row ;
}
.joblis-jobs-item-grid-middle {
grid-column: col / span 2 ;
grid-row: row 2 ;
min-width: 100%;
}
.joblis-jobs-item-grid-bottom {
grid-column: col / span 2 ;
grid-row: row 3 ;
}
.joblis-jobs-item-grid-fav {
grid-column: col / span 2 ;
grid-row: row 4;
}
.joblis-jobs-title {
font-size: 1.2em;
}
.joblis-jobs-company {
font-size: 0.95em;
}
.joblis-jobs-salary {
font-size: 0.95em;
}
.joblis-jobs-details-item {
font-size:1em;
line-height: 2em;
}
.joblis-jobs-snippet {
font-size:1.0em;
}
}