Casey Burridge crbdev
crbdev
/ diy-to-grid.css
Created
January 12, 2024 04:31
Custom CSS to turn the DIY layout into a grid (as seen on the GravityKit blog)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .gv-diy-multiple-container.gv-container { | |
| display:flex; | |
| flex-wrap: wrap; | |
| justify-content:center; | |
| margin-top:20px; | |
| } | |
| .gv-container img { width:100% !important; } | |
| .gv-diy-multiple-container.gv-container .gv-diy-view { |
crbdev
/ knowledge-base-grid-styles.css
Created
December 8, 2023 10:31
Styles used in "How to build a knowledge base" article on the GravityKit blog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #gv-view-2303-1 .gv-list-multiple-container { | |
| display:flex; | |
| flex-wrap: wrap; | |
| justify-content:center; | |
| margin-top:20px; | |
| } | |
| #gv-view-2303-1 .gv-list-multiple-container img { | |
| max-width:70% !important; | |
| margin: 0 auto; |
crbdev
/ youtube-video-embed.html
Created
June 23, 2023 04:38
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="video-container"> | |
| <iframe class="video" src="https://www.youtube.com/embed/yekXIobF3fk" allowfullscreen></iframe> | |
| </div> | |
| <style> | |
| .video-container { | |
| position: relative; | |
| width: 100%; | |
| padding-bottom: 56.25%; | |
| } |
crbdev
/ list-to-grid.html
Last active
June 23, 2023 04:27
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .gv-list-multiple-container.gv-container{ | |
| display:flex; | |
| flex-wrap: wrap; | |
| justify-content:center; | |
| margin-top:20px; | |
| } | |
| .gv-list-multiple-container.gv-container .gv-list-view { | |
| margin-right: 20px; | |
| width: 340px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .gv-list-multiple-container.gv-container { | |
| display:flex; | |
| flex-wrap: wrap; | |
| justify-content:center; | |
| margin-top:20px; | |
| } | |
| .gv-container img { | |
| width:100% !important; | |
| } |
crbdev
/ job-board.html
Created
May 17, 2023 08:03
Styles used for the job board featured on the GravityKit demo site and blog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
crbdev
/ zillow-clone-styles.html
Last active
May 16, 2023 09:34
As used in the "How to create a Zillow clone on WordPress with no code" blog post
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .gv-list-multiple-container.gv-container { | |
| display:flex; | |
| flex-wrap: wrap; | |
| justify-content:center; | |
| margin-top:20px; | |
| } | |
| .gv-container img { | |
| width:100% !important; | |
| } |
crbdev
/ yellow-pages-clone.html
Last active
May 16, 2023 09:05
Style for the geolocation directory demo and "Yellow Pages clone"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .gv-list-multiple-container.gv-container{ | |
| display:flex; | |
| flex-wrap: wrap; | |
| justify-content:center; | |
| } | |
| .gv-list-multiple-container.gv-container .gv-list-view { | |
| margin-right: 10px; |
crbdev
/ gv-table-styles.css
Last active
January 4, 2023 12:55
Styles applied to the GV Table layout when used to create a report card (GravityKit blog)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .gv-container table td { | |
| border:1px solid #444444 !important; | |
| } | |
| .gv-container table { | |
| border-collapse:collapse; | |
| } | |
| .gv-container table td, #customers th { | |
| border: 1px solid #ddd; |
crbdev
/ esports.css
Last active
October 28, 2022 09:20
Styles used in https://www.gravitykit.com/esports-team-page/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .e-wrapper {text-align:center; color:#ffffff;} | |
| .e-socials {display: flex; justify-content:space-between; max-width:100px; margin:0 auto;} | |
| .e-alias {font-size:22px; color: #FBCC01;} | |
| .e-name {font-size:18px;} | |
| .e-position {font-size:16px;} | |
| .e-socials img {width:20px; filter: invert(70%) sepia(0%) saturate(2%) hue-rotate(5deg) brightness(100%) contrast(100%); margin-bottom:15px !important; margin-top:10px !important;} | |
NewerOlder