Skip to content

Instantly share code, notes, and snippets.

@crbdev
Created May 17, 2023 08:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save crbdev/9b71e267c593bf365119dcd349f5d3ce to your computer and use it in GitHub Desktop.
Save crbdev/9b71e267c593bf365119dcd349f5d3ce to your computer and use it in GitHub Desktop.
Styles used for the job board featured on the GravityKit demo site and blog
<div class="job-type">
<div>
<p>
<span>{Type:3}</span><span>{Category:2}</span>
</p>
</div>
<div class="job-info">
<p class="job-featured">
{Listing properties:7:value}
</p>
<p class="job-new">
{Job tags:8:value}
</p>
</div>
</div>
<style>
.entry-content {
max-width: 960px;
margin: auto;
}
.gv-list-view-content-description {
width: 100% !important;
}
.gv-widget-search .gv-search-box.gv-search-box-submit {
margin-top: 15px;
margin-bottom: 15px;
}
.gv-list-view {
border: none;
}
.gv-list-view-content {
background: #ffeb9b;
}
.gv-list-view-title {
background: #feffcc;
border: none;
}
.entry-content-wrap {
max-width: 960px;
margin: 0 auto;
}
.gv-grid-col-2-3 {
width: 100%;
}
.gv-list-view-subtitle h4 {
font-size: 18px;
font-weight: 400;
}
.gv-list-view-title h3 {
margin: 0 0 0.1em 0;
}
.job-type {
display:flex;
justify-content: space-between;
}
.job-info {
display:flex;
}
.job-type span {
padding: 3px 8px;
border: 2px solid #000000;
border-radius: 5px;
margin-right: 10px;
font-size: 14px;
}
.job-featured {
margin-right:20px;
}
.job-new, .job-featured {
padding: 5px 8px !important;
border-radius: 5px;
color: #ffffff;
background-color: #ff8d00;
font-size: 14px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
@media only screen and (max-width: 600px) {
.job-type {
display:block !important;
}
}
.gv-search-box .gv-search-button {
background-color: #F84642 !important;
}
.gv-search-box .gv-search-clear {
background-color: #F84642 !important;
margin-left: 5px;
}
.gv-list-view {
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.apply-button {
background-color: #F84642;
margin-top: 20px;
}
.apply-button:hover {
background-color: #F84642;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment