Skip to content

Commit

Permalink
Add socials to footer
Browse files Browse the repository at this point in the history
  • Loading branch information
ysthakur committed Oct 12, 2024
1 parent bebaa8c commit 21445bd
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 16 deletions.
54 changes: 49 additions & 5 deletions src/components/Footer.astro
Original file line number Diff line number Diff line change
@@ -1,21 +1,47 @@
---
import { CONTACT_EMAIL, CONTACT_NAME } from "../consts";
import { CONTACT_EMAIL, CONTACT_NAME, SOCIAL_MEDIA_LINKS } from "../consts";
---

<footer>
<p class="contact-header">Contact</p>
<p class="contact-name">{CONTACT_NAME}</p>
<p>Email: <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a></p>
<div>
<p class="contact-header">Contact</p>
<p class="contact-name">{CONTACT_NAME}</p>
<p>Email: <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a></p>
</div>
<div class="social-links">
<p class="contact-header">Follow us</p>
{
SOCIAL_MEDIA_LINKS.map(({ faClass, link, hoverText: footerText }) => (
<div>
<a href={link}>
{footerText}: {" "}<i class={`social-media-icon ${faClass}`} />
</a>
</div>
))
}
</div>
</footer>

<style>
<style lang="scss">
@import "../styles/common.scss";

footer {
margin-top: 2rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
color: rgba(var(--fg-color), 0.7); /* Mute the text */
border-top: solid;
border-color: var(--divider-color); /* Don't mute the border */

display: flex;

// For phones, put Contact section above Follow us section
flex-direction: column;

// For laptops, put Contact and Follow us side-by-side
@media (min-width: $tabletMinWidth) {
flex-direction: row;
}
}

.contact-header {
Expand All @@ -25,4 +51,22 @@ import { CONTACT_EMAIL, CONTACT_NAME } from "../consts";
.contact-name {
margin: 0;
}

.social-links {
// For phones, Follow us is below Contact. But for laptops, they're side-by-side,
// so the Follow us section needs to be right-aligned
@media (min-width: $tabletMinWidth) {
margin-left: auto;
}

font-size: 1.1rem;

a {
text-decoration: none !important;
}
}

.social-media-icon {
font-size: 1.25rem;
}
</style>
6 changes: 3 additions & 3 deletions src/components/header/tablet/Menu.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import { PAGES, SOCIAL_MEDIA_ICONS } from "../../../consts";
import { PAGES, SOCIAL_MEDIA_LINKS } from "../../../consts";
import HeaderLink from "../HeaderLink.astro";
import MenuItem from "./MenuItem.astro";
import ThemeDropdown from "./ThemeDropdown.astro";
Expand All @@ -11,8 +11,8 @@ import ThemeDropdown from "./ThemeDropdown.astro";
</nav>
<div class="text-start social-media-icons">
{
SOCIAL_MEDIA_ICONS.map(({ faClass, link, title }) => (
<HeaderLink link={link} title={title}>
SOCIAL_MEDIA_LINKS.map(({ faClass, link, hoverText }) => (
<HeaderLink link={link} title={hoverText}>
<i class={`social-media-icon ${faClass}`} />
</HeaderLink>
))
Expand Down
25 changes: 21 additions & 4 deletions src/consts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,37 @@ export const PAGES = [
{ link: "/blog", name: "Blog", leetName: "B10G" },
] as const;

export const SOCIAL_MEDIA_ICONS = [
interface SocialMediaLink {
/**
* FontAwesome classes to use for the icon
*/
faClass: string;
link: string;
hoverText: string;
/**
* Text to use when displaying in the footer. This is different from the
* hovertext because the hovertext can be more descriptive.
*/
footerText: string;
}

export const SOCIAL_MEDIA_LINKS: SocialMediaLink[] = [
{
faClass: "fab fa-github",
link: "https://github.com/gems-cyberlang",
title: "CYB3RL4NG's GitHub organization",
hoverText: "GitHub organization",
footerText: "GitHub",
},
{
faClass: "fab fa-instagram",
link: "https://instagram.com/cyb3rl4ng",
title: "CYB3RL4NG's Instagram",
hoverText: "Instagram",
footerText: "Instagram",
},
{
faClass: "fa-solid fa-rss",
link: "/feed.xml",
title: "RSS feed",
hoverText: "RSS feed for our blog",
footerText: "RSS feed",
},
];
13 changes: 9 additions & 4 deletions src/layouts/BaseLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,20 @@ if (!title && frontmatter && "title" in frontmatter) {
padding-left: 5vw;
padding-right: 5vw;

@media (min-width: $laptopMinWidth) {
padding-left: 10vw;
padding-right: 10vw;
@media (min-width: $tabletMinWidth) {
padding-left: 12vw;
padding-right: 12vw;
}

@media (min-width: $bigLaptopWidth) {
@media (min-width: $laptopMinWidth) {
padding-left: 15vw;
padding-right: 15vw;
}

@media (min-width: $bigLaptopWidth) {
padding-left: 24vw;
padding-right: 24vw;
}
}

:global(body > div) {
Expand Down

0 comments on commit 21445bd

Please sign in to comment.