Job listing page (#1256)

src/pages/_data/jobs.yml

@@ -0,0 +1,106 @@
+- company: CMS Max
+  location: Remote / USA
+  title: Lead Tailwind Developer
+  type: Full-time
+  posted: 4w
+  image: job-1.jpg
+  tags:
+    - PHP
+    - Laravel
+    - CSS
+    - Vue
+
+- company: Center Pixel, Inc
+  location: Remote / Palo Alto, CA
+  title: Frontend Web Engineer
+  type: Full-time or Contract
+  salary: $140,000 - $180,000
+  posted: 4d
+  image: job-2.png
+  tags:
+    - HTML
+    - CSS
+    - React
+    - "+3"
+
+- company: Chicago Botanic Garden
+  location: Hybrid / Chicago Botanic Garden
+  title: Principal Web Application Developer
+  type: Full-time
+  posted: 5d
+  image: job-3.png
+  tags:
+    - HTML
+    - PHP
+    - Laravel
+
+- company: Simple Focus
+  location: Remote / USA
+  title: Front-End Developer
+  type: Full-time
+  posted: 1w
+  image: job-4.png
+  tags:
+    - HTML
+    - PHP
+    - CSS
+    - "+2"
+
+- company: Infinia ML
+  location: Durham, NC
+  title: Senior Front-End Engineer
+  type: Full-time
+  posted: 1w
+  image: job-5.png
+  tags:
+    - HTML
+    - PHP
+    - CSS
+    - "+4"
+
+- company: Crowd Favorite
+  location: Remote / USA
+  title: Senior Web Developer, Open Source
+  type: Full-time
+  posted: 1w
+  image: job-6.png
+  tags:
+    - HTML
+    - JavaScript
+    - CSS
+    - "+8"
+
+- company: Spear AI
+  location: Washington D.C.
+  title: Frontend Engineer
+  type: Full-time
+  salary: $95,000 – $145,000 USD
+  posted: 2w
+  image: job-7.png
+  tags:
+    - HTML
+    - JavaScript
+    - CSS
+    - "+3"
+
+- company: Third Time Games
+  location: Remote / North America
+  title: Web Developer
+  type: Full-time
+  posted: 3w
+  image: job-8.png
+  tags:
+    - PHP
+    - Laravel
+    - React
+    - "+8"
+
+- company: Mindsize
+  location: Remote / USA
+  title: Laravel Developer
+  type: Full-time
+  posted: 3w
+  image: job-9.jpg
+  tags:
+    - PHP
+    - Laravel

src/pages/_data/menu.yml

@@ -215,6 +215,10 @@ extra:
       title: Settings
       url: settings.html
       badge: New
+    job-listing:
+      title: Job listing
+      url: job-listing.html
+      badge: New
 
 layout:
   icon: layout-2

src/pages/_includes/cards/form/layout.html

@@ -52,7 +52,7 @@
 				<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% endif %}">Checkboxes</label>
 				<div {% if horizontal %}class="col"{% endif %}>
 					<label class="form-check">
-						<input class="form-check-input" type="checkbox" checked="">
+						<input class="form-check-input" type="checkbox" checked>
 						<span class="form-check-label">Option 1</span>
 					</label>
 					<label class="form-check">
@@ -60,7 +60,7 @@
 						<span class="form-check-label">Option 2</span>
 					</label>
 					<label class="form-check">
-						<input class="form-check-input" type="checkbox" disabled="">
+						<input class="form-check-input" type="checkbox" disabled>
 						<span class="form-check-label">Option 3</span>
 					</label>
 				</div>

src/pages/_includes/cards/profile-edit-big.html

@@ -6,7 +6,7 @@
 			<div class="col-md-5">
 				<div class="mb-2">
 					<label class="form-label">Company</label>
-					<input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc.">
+					<input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
 				</div>
 			</div>
 			<div class="col-sm-6 col-md-3">

src/pages/_includes/layout/header-actions/add-job.html

@@ -0,0 +1 @@
+{% include ui/button.html color="primary" icon="plus" text="Post a job" %}

src/pages/job-listing.html

@@ -0,0 +1,99 @@
+---
+title: Search for Jobs
+page-header: Search for Jobs
+page-header-actions: add-job
+menu: extra.job-listing
+---
+
+{% assign types = 'Programming,Design,Management / Finance,Customer Support,Sales / Marketing' | split: ',' %}
+{% assign salaries = '$20K - $50K,$50K - $100K,> $100K,Drawing / Painting' | split: ',' %}
+
+<div class="row g-4">
+	<div class="col-3">
+		<form action="./" method="get" autocomplete="off" novalidate class="sticky-top">
+
+			<div class="subheader mb-2">Job Types</div>
+			<div class="mb-4">
+				{% for type in types %}
+				<label class="form-check mb-1">
+					<input type="checkbox" class="form-check-input" name="form-type[]" value="{{ forloop.index  }}"{% if forloop.index <= 2 %} checked{% endif %}>
+					<span class="form-check-label">{{ type }}</span>
+				</label>
+				{% endfor %}
+			</div>
+
+			<div class="subheader mb-2">Remote</div>
+			<div class="mb-4">
+				{% include ui/form/check.html switch=true title-on="On" title-off="Off" %}
+			</div>
+
+			<div class="subheader mb-2">Salary Range</div>
+			<div class="mb-4">
+				{% for salary in salaries %}
+				<label class="form-check mb-1">
+					<input type="radio" class="form-check-input" name="form-salary" value="{{ forloop.index  }}"{% if forloop.index <= 2 %} checked{% endif %}>
+					<span class="form-check-label">{{ salary }}</span>
+				</label>
+				{% endfor %}
+			</div>
+
+			<div class="subheader mb-2">Immigration</div>
+			<div class="mb-4">
+				{% include ui/form/check.html switch=true title-on="On" title-off="Off" %}
+
+				<div class="small text-muted">Only show companies that can sponsor a visa</div>
+			</div>
+
+			<div class="mt-5">
+				<button class="btn btn-primary w-100">
+					Confirm changes
+				</button>
+				<a href="#" class="btn btn-link w-100">
+					Reset to defaults
+				</a>
+			</div>
+		</form>
+
+	</div>
+	<div class="col-9">
+		<div class="row row-cards">
+			<div class="space-y">
+				{% for job in site.data.jobs %}
+				<div class="card">
+					<div class="row g-0">
+						<div class="col-auto">
+							<div class="card-body">
+								<div class="avatar avatar-md" style="background-image: url({{ site.base }}/static/jobs/{{ job.image }})"></div>
+							</div>
+						</div>
+						<div class="col">
+							<div class="card-body ps-0">
+								<div class="row">
+									<div class="col"><h3 class="mb-0"><a href="#">{{ job.title }}</a></h3></div>
+									{% if job.salary %}<div class="col-auto fs-h3 text-green">{{ job.salary }}</div>{% endif %}
+								</div>
+								<div class="row">
+									<div class="col">
+										<div class="mt-3 list-inline list-inline-dots mb-0 text-muted">
+											<div class="list-inline-item">{% include ui/icon.html icon="building-community" class="icon-inline" %} {{ job.company }}</div>
+											<div class="list-inline-item">{% include ui/icon.html icon="license" class="icon-inline" %} {{ job.type }}</div>
+											<div class="list-inline-item">{% include ui/icon.html icon="map-pin" class="icon-inline" %} {{ job.location }}</div>
+										</div>
+									</div>
+									<div class="col-auto">
+										<div class="mt-3 badges">
+											{% for tag in job.tags %}
+											<a href="#" class="badge badge-outline text-muted border fw-normal badge-pill">{{ tag }}</a>
+											{% endfor %}
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				{% endfor %}
+			</div>
+		</div>
+	</div>
+</div>

src/scss/ui/_buttons.scss

@@ -41,6 +41,7 @@
   color: $link-color;
   background-color: transparent;
   border-color: transparent;
+  box-shadow: none;
 
   .icon {
     color: inherit;

src/scss/ui/_icons.scss

@@ -14,10 +14,10 @@
 }
 
 .icon-inline {
-  width: 1em;
-  height: 1em;
-  font-size: divide(16, 14) * 1em;
-  vertical-align: -0.2em;
+  width: 1rem;
+  height: 1rem;
+  font-size: 1rem;
+  vertical-align: -.2rem;
 }
 
 .icon-filled {