Dave Dawson davedawson
davedawson
/ responsive-image-swap.js
Created
October 18, 2021 02:36
Next.js Image - Swap responsive vs. cover images
This file contains hidden or 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
| <Image | |
| src={imageS2sb5} | |
| layout="responsive" | |
| className="d-block d-md-none" | |
| /> | |
| <Image | |
| src={imageS2sb5} | |
| layout="fill" | |
| objectFit="cover" | |
| className="d-none d-md-block" |
davedawson
/ Breather.tsx
Created
October 12, 2021 18:27
This file contains hidden or 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
| const longQuote = classNames({ | |
| [`${styles.longQuote}`]: isLongQuote === true, | |
| }); |
davedawson
/ index.js
Last active
August 10, 2018 16:44
This file contains hidden or 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
| // index.js | |
| <ListItem key={i}> | |
| <PersonLink to={`/${slug(`${nameHelper(x.node.Name)}`)}`}> | |
| <PartyBlock party={x.node.Party}>{x.node.Party} </PartyBlock> | |
| <div> | |
| <Name>{nameHelper(x.node.Name)}</Name> | |
| <Office> | |
| {legTypeHelper(x.node.Office)} from{' '} | |
| {stateHelper(x.node.Distid)}{' '} |
davedawson
/ styles.js
Created
August 10, 2018 16:43
This file contains hidden or 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
| export const ListItem = styled.li` | |
| border-bottom: 1px solid #d7d7d7; | |
| &:hover { | |
| a { | |
| color: ${props => (props.party ? `${partyColor(props.party)}` : '#000')}; | |
| } | |
| } | |
| ` | |
| export const PartyBlock = styled.div` |
This file contains hidden or 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
| /* Hex colors for this color pallete: https://marvelapp.com/42gj1d5 */ | |
| /* These lists are ordered from dark to light */ | |
| /* Primary Blue */ | |
| level-7: #002C43 | |
| level-6: #003D5E | |
| level-5: #004E78 | |
| level-4: #006298 | |
| level-3: #3572A3 | |
| level-2: #6790B8 |
This file contains hidden or 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
| /* Dot styles */ | |
| .d-circles { | |
| transition: all .3s ease-in-out; | |
| } | |
| .d-circles:hover { | |
| transform: scale(1.5); | |
| } | |
| /* Tooltip styles */ | |
| .d3-tip .county { |
This file contains hidden or 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
| // State styling | |
| ... | |
| .style("fill", "#E6F7FF") | |
| .style("stroke","#DEEAF2") | |
| // Blue dot styling, but can swap out for orange with: #E24E0F | |
| .style("fill", function(d) { | |
| return directLookup[d.id] ? "#1A59C4" : null; | |
| }) | |
| .style("fill-opacity", 0.8) |
davedawson
/ box.scss
Created
April 28, 2017 18:48
This file contains hidden or 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
| .box { | |
| &::before, | |
| &::after { | |
| border: 0px solid transparent; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| &::before { | |
| border-top-color: $cyan; // Make borders visible |
davedawson
/ main.js
Created
April 5, 2017 19:41
This file contains hidden or 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
| /* ======================================================================== | |
| * DOM-based Routing | |
| * Based on http://goo.gl/EUTi53 by Paul Irish | |
| * | |
| * Only fires on body classes that match. If a body class contains a dash, | |
| * replace the dash with an underscore when adding it to the object below. | |
| * | |
| * .noConflict() | |
| * The routing is enclosed within an anonymous function so that you can | |
| * always reference jQuery with $, even when in .noConflict() mode. |
This file contains hidden or 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="hero"> | |
| <div class="image-wrap"> | |
| <img src="cover-image.jpg" alt="" class="h-visible" /> | |
| </div> | |
| <div class="video-bg"> | |
| <video autoplay loop controls poster="cover-image.jpg" class="covervid-video fade-in-video h-hidden" id="bgvid"> | |
| <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button --> | |
| <source data-src="video-name.mp4" type="video/mp4"> | |
| <source data-src="video-name.webm" type="video/webm"> | |
| </video> |
NewerOlder