jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 14:25:32 -04:00
Code Issues Activity

fix header layout shifting

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-16 01:32:02 -05:00
parent e8c2dcab29
commit 2377fbfdf2
5 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/js/src/assets/bulb-off.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#CCCBCB"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 0 0-1.4 0L11 13.58l-3.3-3.3a1 1 0 1 0-1.4 1.42l3.7 3.7V26a1 1 0 1 0 2 0V15.41l3.7-3.7a1 1 0 0 0 0-1.42z" fill="#7D7A72"/><path d="M17 31a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 0 1-.16-1.99l12-2a1 1 0 1 1 .33 1.97l-12 2A.93.93 0 0 1 5 32zm0-4a1 1 0 0 1-.16-1.99l12-2a1 1 0 1 1 .33 1.97l-12 2A.93.93 0 0 1 5 28z" fill="#CCD6DD"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#CCCBCB"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 0 0-1.4 0L11 13.58l-3.3-3.3a1 1 0 1 0-1.4 1.42l3.7 3.7V26a1 1 0 1 0 2 0V15.41l3.7-3.7a1 1 0 0 0 0-1.42z" fill="#7D7A72"/><path d="M17 31a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 0 1-.16-1.99l12-2a1 1 0 1 1 .33 1.97l-12 2A.93.93 0 0 1 5 32zm0-4a1 1 0 0 1-.16-1.99l12-2a1 1 0 1 1 .33 1.97l-12 2A.93.93 0 0 1 5 28z" fill="#CCD6DD"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 793 B

After

Width:  |  Height:  |  Size: 774 B

2
assets/js/src/assets/bulb-on.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#FFD983"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#B9C9D9"/><path d="M15.7 10.3a1 1 0 0 0-1.4 0L11 13.58l-3.3-3.3a1 1 0 1 0-1.4 1.42l3.7 3.7V26a1 1 0 1 0 2 0V15.41l3.7-3.7a1 1 0 0 0 0-1.42z" fill="#FFCC4D"/><path d="M17 31a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 0 1-.16-1.99l12-2a1 1 0 1 1 .33 1.97l-12 2A.93.93 0 0 1 5 32zm0-4a1 1 0 0 1-.16-1.99l12-2a1 1 0 1 1 .33 1.97l-12 2A.93.93 0 0 1 5 28z" fill="#CCD6DD"/></g></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#FFD983"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#B9C9D9"/><path d="M15.7 10.3a1 1 0 0 0-1.4 0L11 13.58l-3.3-3.3a1 1 0 1 0-1.4 1.42l3.7 3.7V26a1 1 0 1 0 2 0V15.41l3.7-3.7a1 1 0 0 0 0-1.42z" fill="#FFCC4D"/><path d="M17 31a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 0 1-.16-1.99l12-2a1 1 0 1 1 .33 1.97l-12 2A.93.93 0 0 1 5 32zm0-4a1 1 0 0 1-.16-1.99l12-2a1 1 0 1 1 .33 1.97l-12 2A.93.93 0 0 1 5 28z" fill="#CCD6DD"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 793 B

After

Width:  |  Height:  |  Size: 774 B

1
assets/js/src/assets/send.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#D99E82" d="M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4v-9c0-2.209.791-3 3-3h30c2.209 0 3 .791 3 3v9z"></path><path fill="#662113" d="M25 20a7 7 0 1 1-14 0h14z"></path><path fill="#C1694F" d="M4 36h28a4 4 0 0 0 4-4H0a4 4 0 0 0 4 4z"></path><path fill="#DD2E44" d="M27.435 8.511 19.572.648a2.23 2.23 0 0 0-3.145 0L8.564 8.511C7.7 9.377 7.993 10 9.216 10H14v6a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-6h4.784c1.223 0 1.516-.623.651-1.489z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

4
assets/js/src/components/ContactForm.js
View File

@@ -6,7 +6,7 @@ import { isDark } from "../utils/theme.js";
// react components: // react components:
import HCaptcha from "@hcaptcha/react-hcaptcha"; import HCaptcha from "@hcaptcha/react-hcaptcha";
import { CheckIcon, XIcon } from "@primer/octicons-react"; import { CheckIcon, XIcon } from "@primer/octicons-react";
import SendEmoji from "twemoji-emojis/vendor/svg/1f4e4.svg"; import SendIcon from "../assets/send.svg";
const ContactForm = () => { const ContactForm = () => {
// status/feedback: // status/feedback:
@@ -134,7 +134,7 @@ const ContactForm = () => {
<span>Sending...</span> <span>Sending...</span>
) : ( ) : (
<> <>
<SendEmoji class="emoji" /> <span>Send</span> <SendIcon class="emoji" /> <span>Send</span>
</> </>
)} )}
</button> </button>

3
assets/sass/components/_header.scss
View File

@@ -96,6 +96,7 @@ header {
span { span {
&.header-menu-icon { &.header-menu-icon {
width: 1.3em;
font-size: 1.3em; font-size: 1.3em;
user-select: none; user-select: none;
} }
@@ -111,6 +112,7 @@ header {
// Dark mode toggle // Dark mode toggle
&.theme-toggle { &.theme-toggle {
width: 1.3em;
margin-left: 1.4em; margin-left: 1.4em;
button { button {
@@ -178,6 +180,7 @@ header {
// Dark mode toggle // Dark mode toggle
&.theme-toggle { &.theme-toggle {
width: 0.9em;
margin-left: 1em; margin-left: 1em;
button { button {