Change footer theme on long press to an alternate theme and rotate th…

…e lightbulb image. Add a member feed section to the page, displaying multiple member feed items with titles, descriptions, and links.
tricities-dev · Oct 12, 2023 · 7055cc0 · 7055cc0
1 parent 220cd53
commit 7055cc0
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 21 deletions.
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -4,6 +4,7 @@
 	let startSeconds:number;
 	let endSeconds:number;
 	let dur:number;
+	let altTheme:boolean = false;
 
 	function updateTheme() {
 		let newTheme:string = $themeStore === 'light' ? 'dark' : 'light';
@@ -18,8 +19,10 @@
 			dur = endSeconds - startSeconds;
 			if (dur >= 1.5) {
 				$themeStore = 'exp'
+				altTheme = true
 			} else {
 				updateTheme()
+				altTheme = false
 			}
 		}
 	}
@@ -30,7 +33,12 @@
 		<p class="site-note">
 			Tri-Cities Dev, non-profit CC0 on <a href="https://github.com/tricities-dev">Github</a>
 		</p>
-		<img src="./lightbulb.svg" alt="lightbulb used to toggle theme" on:mousedown={watchForLongPress}/>
+		<img
+			class:altTheme={altTheme}
+			src="./lightbulb.svg"
+			alt="lightbulb used to toggle theme"
+			on:mousedown={watchForLongPress}
+		/>
 	</div>
 </footer>
 
@@ -75,4 +83,9 @@ footer {
 	transform: rotate(15deg);
 	transition: ease-in-out .15s;
 }
+
+.altTheme {
+	transform: rotate(-180deg);
+	transition: ease-in-out .15s;
+	}
 </style>
diff --git a/src/components/memberFeed/MemberFeed.svelte b/src/components/memberFeed/MemberFeed.svelte
@@ -1,5 +1,52 @@
 <script lang="ts">
+	import MemberFeedItem from "./MemberFeedItem.svelte";
+	type memberPost = {
+		title: string,
+		description: string,
+		postLink: string,
+		siteLink: string,
+	}
+
+	type memberPosts = memberPost[]
+
+	let memberFeed:memberPosts = [
+		{
+			title: 'Azure Dev: Problem starting the plugin CredentialProvider.Microsoft [Solved]',
+			description: 'In this break/fix post, I’m going to show you how to fix a specific error that I was getting in an Azure DevOps pipeline during a dotnet publish command that stated “Problem starting the plugin \‘CredentialProvider.Microsoft\'”.',
+			postLink: 'https://ryanhayes.net/azure-devproblem-starting-the-plugin-credentialprovider-microsoft-solved/',
+			siteLink: 'https://ryanhayes.net/',
+		},
+		{
+			title: 'Azure Dev: Problem starting the plugin CredentialProvider.Microsoft [Solved]',
+			description: 'In this break/fix post, I’m going to show you how to fix a specific error that I was getting in an Azure DevOps pipeline during a dotnet publish command that stated “Problem starting the plugin \‘CredentialProvider.Microsoft\'”.',
+			postLink: 'https://ryanhayes.net/azure-devproblem-starting-the-plugin-credentialprovider-microsoft-solved/',
+			siteLink: 'https://ryanhayes.net/',
+		},
+		{
+			title: 'Azure Dev: Problem starting the plugin CredentialProvider.Microsoft [Solved]',
+			description: 'In this break/fix post, I’m going to show you how to fix a specific error that I was getting in an Azure DevOps pipeline during a dotnet publish command that stated “Problem starting the plugin \‘CredentialProvider.Microsoft\'”.',
+			postLink: 'https://ryanhayes.net/azure-devproblem-starting-the-plugin-credentialprovider-microsoft-solved/',
+			siteLink: 'https://ryanhayes.net/',
+		},
+	]
 </script>
 
+<div class="member-feed">
+	{#each memberFeed as post, i}
+		<MemberFeedItem title={ post.title } description={ post.description } postLink={ post.postLink } siteLink={ post.siteLink } />
+	{/each}
+</div>
+
 <style>
+	.member-feed {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 3rem;
+	width: 100%;
+	height: auto;
+	padding: 2rem 0;
+	}
 </style>
diff --git a/src/components/memberFeed/MemberFeedItem.svelte b/src/components/memberFeed/MemberFeedItem.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import CtaLink from "../ui/CtaLink.svelte";
+
+	export let title:string;
+	export let description:string;
+	export let postLink:string;
+	export let siteLink:string;
+</script>
+
+<div class="member-feed-item">
+	<div class="member-feed-item-image"></div>
+	<div class="member-feed-item-content">
+		<h3 class="feed-item-title">{ title }</h3>
+		<p class="feed-item-description">{ description }</p>
+		<CtaLink title="Read More..." link={postLink} />
+	</div>
+</div>
+
+<style>
+	.member-feed-item {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	align-items: center;
+	gap: 2rem;
+	width: calc(100% - 10rem);
+	}
+
+	.member-feed-item-image {
+	width: 13rem;
+	height: 13rem;
+	background-color: var(--gray);
+	border-radius: 10px;
+	z-index: 1;
+	}
+
+	.member-feed-item-content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	align-items: flex-start;
+	gap: .75rem;
+	}
+
+	.feed-item-title {
+	font-family: var(--header-font-family);
+	font-size: 2rem;
+	line-height: 1.2;
+	color: var(--primary-text-color);
+	}
+
+	.feed-item-description {
+	font-family: var(--body-font-family);
+	color: var(--primary-text-color);
+	font-size: 1.25rem;
+	line-height: 1.6;
+	}
+</style>
diff --git a/src/components/ui/CtaLink.svelte b/src/components/ui/CtaLink.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 
-  export let title: string;
-  export let link: string;
+	export let title: string;
+	export let link: string;
 	export let icon: any = null;
 
 	let iconName:string;
@@ -20,15 +20,15 @@
 	}
 </script>
 
-<a href={link} class="cta-button">
+<a href={link} class="cta-button" target="_blank">
 	{#if icon}
 		<Icon icon={ iconName } width={24} height={24}/>
 	{/if}
-  {title}
+	{title}
 </a>
 
 <style>
-.cta-button {
+	.cta-button {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
@@ -43,9 +43,9 @@
 	text-decoration: none;
 	border-radius: 10px;
 	transition: background-color 0.3s ease;
-}
+	}
 
-.cta-button:hover {
-	background-color: #0056b3; /* Set your desired hover background color */
-}
+	.cta-button:hover {
+	background-color: var(--cta-btn-hover-bg);
+	}
 </style>
diff --git a/src/components/ui/FeedContainer.svelte b/src/components/ui/FeedContainer.svelte
@@ -20,7 +20,7 @@
 	justify-content: flex-start;
 	align-items: flex-start;
 	width: 100%;
-	height: 30rem;
+	height: auto;
 	background: var(--gradient-bg-vert);
 	border: 2px solid var(--border-color);
 	border-radius: 10px 0 0 0;

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Hero from "../components/ui/Hero.svelte";
 	import FeedContainer from "../components/ui/FeedContainer.svelte";
+	import MemberFeed from "../components/memberFeed/MemberFeed.svelte";
 	import { onMount } from "svelte";
 
 	// onMount(async () => {
@@ -15,7 +16,9 @@
 	<Hero />
 	<div class="content">
 		<section>
-			<FeedContainer title="Member Feed" zIndex={0}/>
+			<FeedContainer title="Member Feed" zIndex={0}>
+				<MemberFeed />
+			</FeedContainer>
 		</section>
 		<aside>
 			<FeedContainer title="On Discord" zIndex={1}/>
@@ -25,7 +28,7 @@
 </main>
 
 <style>
-main {
+	main {
 	display: flex;
 	flex-direction: column;
 	flex-wrap: nowrap;
@@ -36,9 +39,9 @@ main {
 	height: 100%;
 	padding-top: 7rem;
 	background-color: var(--primary-bg-color);
-}
+	}
 
-.content {
+	.content {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -48,19 +51,19 @@ main {
 	width: calc(100% - 12rem);
 	height: auto;
 	z-index: 0;
-}
+	}
 
-section {
+	section {
 	flex: 1;
-}
+	}
 
-aside {
+	aside {
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
 	align-items: center;
 	gap: 1rem;
 	min-width: 25rem;
 	max-width: 35rem;
-}
+	}
 </style>
diff --git a/src/styles/app.css b/src/styles/app.css
@@ -16,16 +16,20 @@
 
 	--whiteGlass: rgba(255, 255, 255, 0.75);
 	--blackGlass: rgba(0, 0, 0, 0.75);
+	--expGlass: rgba(204,225,249, 0.75);
 
 	--header-font-family: 'Gotham', sans-serif;
 	--body-font-family: 'Inter', sans-serif;
+
+	--calc-width: calc(100% - 12rem);
 }
 
 [data-theme='light'] {
 	--primary-bg-color: var(--white);
 	--primary-text-color: var(--black);
 	--cta-btn-bg: var(--gold);
 	--cta-btn-fg: var(--black);
+	--cta-btn-hover-bg: #D6AB3A;
 	--header-gradient: linear-gradient(to right, var(--white) 0%, var(--gray) 100%);
 	--header-text-color: var(--charcoal);
 	--gradient-bg-vert: linear-gradient(to bottom, var(--gray) 0%, var(--white) 100%);
@@ -40,6 +44,7 @@
 	--primary-text-color: var(--white);
 	--cta-btn-bg: var(--gold);
 	--cta-btn-fg: var(--black);
+	--cta-btn-hover-bg: #D6AB3A;
 	--header-gradient: linear-gradient(to right, var(--grayDark) 0%, var(--charcoal) 100%);
 	--header-text-color: var(--gray);
 	--gradient-bg-vert: linear-gradient(to bottom, var(--charcoal) 0%, var(--black) 100%);
@@ -54,10 +59,11 @@
 	--primary-text-color: #394e6a;
 	--cta-btn-bg: #057Aff;
 	--cta-btn-fg: #dbe1ff;
+	--cta-btn-hover-bg: #046DE5;
 	--header-gradient: linear-gradient(to right, #fff 0%, #f0f6ff 100%);
 	--header-text-color: #394e6a;
 	--gradient-bg-vert: linear-gradient(to bottom, #f0f6ff 0%, #fff 100%);
-	--glass-bg: var(--whiteGlass);
+	--glass-bg: var(--expGlass);
 	--filter-invert: invert(0);
 	--triforce-opacity: 0.75;
 	--border-color: #f0f6ff;