fix: added user-select: none to most selectable non-text elements

SquiggleTools · Sep 3, 2024 · 0113f2c · 0113f2c
1 parent 53f36f8
commit 0113f2c
Show file tree

Hide file tree

Showing 15 changed files with 43 additions and 19 deletions.
diff --git a/src/components/AnchorButton.astro b/src/components/AnchorButton.astro
@@ -27,6 +27,7 @@ const { class: className, ...rest } = Astro.props;
 		transition:
 			var(--transitionFast) transform,
 			var(--transitionFast) box-shadow;
+		user-select: none;
 	}
 
 	.anchor-button:focus,

diff --git a/src/components/Bio.astro b/src/components/Bio.astro
@@ -59,8 +59,9 @@ const {
 	.bio-image {
 		border-radius: 100%;
 		height: var(--imageSize);
-		width: var(--imageSize);
 		margin-bottom: 0.5rem;
+		user-select: none;
+		width: var(--imageSize);
 	}
 
 	.name {

diff --git a/src/components/BioLinks.astro b/src/components/BioLinks.astro
@@ -92,7 +92,7 @@ const aliases = [
 	}
 
 	.bio-links-normal {
-		--bioLinkImageSize: 1rem;
+		--bioLinkImageSize: 1.15rem;
 	}
 
 	.bio-links-large {
@@ -109,6 +109,7 @@ const aliases = [
 		height: var(--bioLinkImageSize);
 		filter: brightness(1.5);
 		width: var(--bioLinkImageSize);
+		user-select: none;
 	}
 
 	.link-text {

diff --git a/src/components/FAQs.astro b/src/components/FAQs.astro
@@ -190,6 +190,7 @@ Note that talk tickets _do not_ include:
 
 	details summary img {
 		transition: var(--transitionMedium) transform;
+		user-select: none;
 	}
 
 	details[open] summary img {

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -67,10 +67,11 @@ import AnchorButton from "./AnchorButton.astro";
 
 		.logos {
 			display: flex;
-			gap: 1rem;
 			flex-wrap: wrap;
-			width: 12rem;
+			gap: 1rem;
 			justify-content: center;
+			user-select: none;
+			width: 12rem;
 		}
 
 		.texts-line {

diff --git a/src/components/FunInfo.astro b/src/components/FunInfo.astro
@@ -82,6 +82,7 @@ const sections = [
 	.emoji {
 		font-size: 3rem;
 		margin-right: 1rem;
+		user-select: none;
 	}
 
 	.title {

diff --git a/src/components/HeroName.astro b/src/components/HeroName.astro
@@ -102,9 +102,10 @@ const { class: className, ...rest } = Astro.props;
 	}
 
 	.squiggle {
-		position: absolute;
 		bottom: -0.5rem;
 		left: 0;
+		position: absolute;
+		user-select: none;
 		width: 100%;
 	}
 

diff --git a/src/components/Newsletter.astro b/src/components/Newsletter.astro
@@ -121,6 +121,7 @@ const { class: className, ...rest } = Astro.props;
 		transition:
 			var(--transitionFast) transform,
 			var(--transitionFast) box-shadow;
+		user-select: none;
 	}
 
 	.button:focus:not(:disabled),

diff --git a/src/components/Partners.astro b/src/components/Partners.astro
@@ -56,6 +56,7 @@ import HeadingFlanked from "./HeadingFlanked.astro";
 
 	.partner-logo {
 		transform: scale(0.9);
+		user-select: none;
 	}
 
 	html.dark .partner-logo-light,

diff --git a/src/components/SessionDiscord.astro b/src/components/SessionDiscord.astro
@@ -35,5 +35,6 @@ const { discord } = Astro.props;
 	.image {
 		margin-right: 0.5rem;
 		opacity: 0.5;
+		user-select: none;
 	}
 </style>
diff --git a/src/components/SpeakerImage.astro b/src/components/SpeakerImage.astro
@@ -22,5 +22,6 @@ const { size = 128 } = Astro.props;
 <style>
 	.speaker-image {
 		border-radius: 100%;
+		user-select: none;
 	}
 </style>
diff --git a/src/components/SquiggleFlanked.astro b/src/components/SquiggleFlanked.astro
@@ -51,6 +51,7 @@ const src = width === "full" ? squiggleFlankingFull : squiggleFlankingLean;
 		max-width: 11vw;
 		object-fit: cover;
 		object-position: right;
+		user-select: none;
 	}
 
 	.squiggle-right {

diff --git a/src/components/TicketsButton.astro b/src/components/TicketsButton.astro
@@ -4,6 +4,17 @@ import { links } from "~/data/index";
 import AnchorButton from "./AnchorButton.astro";
 ---
 
-<AnchorButton href={links.tickets} target="_blank" rel="noreferrer">
+<AnchorButton
+	href={links.tickets}
+	class="tickets"
+	target="_blank"
+	rel="noreferrer"
+>
 	Tickets Available Now
 </AnchorButton>
+
+<style>
+	.tickets {
+		user-select: none;
+	}
+</style>
diff --git a/src/components/VenuePhotos.astro b/src/components/VenuePhotos.astro
@@ -27,18 +27,18 @@ const { class: className, ...rest } = Astro.props;
 
 <style>
 	.title {
+		align-items: center;
+		display: flex;
 		font-family: var(--fontFamilyHeading);
-
-		line-height: var(--lineHeightBody);
 		font-size: var(--fontSizeH3);
-		display: flex;
-		align-items: center;
 		justify-content: center;
+		line-height: var(--lineHeightBody);
 	}
 
 	.emoji {
 		font-size: 3rem;
 		margin-right: 1rem;
+		user-select: none;
 	}
 
 	.venue-photos {
@@ -57,6 +57,7 @@ const { class: className, ...rest } = Astro.props;
 		border-radius: 0.5rem;
 		border: 1px solid var(--colorBackdropOff);
 		box-shadow: 0 0 0.125rem var(--colorTextShadow);
+		user-select: none;
 	}
 
 	.description {

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -69,9 +69,9 @@ const bios: Omit<BioProps, "size">[] = [
 
 		<br />
 
-		<HeadingFlanked class="about-heading" id="dei-scholarship"
-			>DEI Scholarship</HeadingFlanked
-		>
+		<HeadingFlanked class="about-heading" id="dei-scholarship">
+			DEI Scholarship
+		</HeadingFlanked>
 
 		<BodyText as="p" size="large" width="full">
 			We believe that a thriving tech industry needs to be diverse, equitable,
@@ -90,9 +90,9 @@ const bios: Omit<BioProps, "size">[] = [
 			Apply for the DEI Scholarship
 		</AnchorButton>
 
-		<HeadingFlanked class="about-heading" id="volunteering"
-			>Volunteering</HeadingFlanked
-		>
+		<HeadingFlanked class="about-heading" id="volunteering">
+			Volunteering
+		</HeadingFlanked>
 
 		<BodyText as="p" size="large" width="full">
 			Volunteering gives you an opportunity to get right in the thick of the
@@ -112,9 +112,9 @@ const bios: Omit<BioProps, "size">[] = [
 			Volunteer at SquiggleConf
 		</AnchorButton>
 
-		<HeadingFlanked class="about-heading" id="squiggle-tools"
-			>Squiggle.Tools</HeadingFlanked
-		>
+		<HeadingFlanked class="about-heading" id="squiggle-tools">
+			Squiggle.Tools
+		</HeadingFlanked>
 
 		<BodyText as="p" size="large" width="full">
 			SquiggleConf is a production of Squiggle.Tools, a nonprofit organization