@pixelated-tech/components 3.1.4

package/dist/components/socialcard/socialcard.css

@@ -0,0 +1,118 @@
+
+/* ========================================
+=============    MASONRY     ==============
+======================================== */
+
+/* http://w3bits.com/css-masonry/ */
+
+.masonry { /* Masonry container */
+	-webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+	-webkit-column-gap: 0px; /* 0.5em */
+	-moz-column-gap: 0px;
+	column-gap: 0px;
+}
+@media screen and (max-width: 1024px) {
+	/* small desktop */
+	.masonry {
+		-webkit-column-count: 3;
+		-moz-column-count: 3;
+		column-count: 3;
+	}
+}
+@media screen and (max-width: 768px) {
+	/* tablet */
+	.masonry {
+		-webkit-column-count: 2;
+		-moz-column-count: 2;
+		column-count: 2;
+	}
+}
+@media screen and (max-width: 480px) {
+	/* mobile device */
+	.masonry {
+		-webkit-column-count: 1;
+		-moz-column-count: 1;
+		column-count: 1;
+	}
+}
+
+
+.masonryItem { /* Masonry bricks or child elements */
+    display: inline-block;
+    padding: 5px;
+    width: 100%;
+	-webkit-column-break-inside: avoid;
+    -moz-column-break-inside: avoid;
+    /* column-break-inside: avoid; */
+    break-inside: avoid;
+	page-break-inside: avoid;
+}
+
+
+
+/* ========================================
+================  CARDS   =================
+======================================== */
+
+.card {
+	border: 1px solid #999;
+	margin: 5px 0px 0px 0px;
+
+	/* .shadow ; */
+	/* -webkit-box-shadow: 5px 5px 5px #AAA;
+	-moz-box-shadow: 5px 5px 5px #AAA;
+	box-shadow: 5px 5px 5px #AAA; */
+
+	/* .wrapword ; */
+	white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
+	white-space: -pre-wrap;      /* Opera 4-6 */
+	white-space: -o-pre-wrap;    /* Opera 7 */
+	white-space: pre-wrap;       /* css-3 */
+	word-wrap: break-word;       /* Internet Explorer 5.5+ */
+	white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
+	word-break: break-all;
+	white-space: normal;
+}
+
+.cardTitle {
+	background-color: #EEE;
+	/* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+	border-bottom: 1px solid #999;
+	font-size: 1.3em;
+	padding: 5px;
+	word-wrap: break-word;
+}
+
+/* .cardTitle a {
+} */
+
+.cardIcon {
+	background: #FFF;
+	border: 0;
+	height: 20px;
+	width: 20px;
+	vertical-align: bottom;
+	margin: 0px 5px 0px 0px;
+}
+
+.cardDate {
+	background-color: #DDD;
+	border-top: 1px solid #999;
+	font-size: 0.8em;
+	padding: 5px;
+	text-align: right;
+}
+
+.cardBody {
+	background-color: #fff;
+	display: inline-block;
+	padding: 5px;
+	width: 100%;
+}
+
+.cardsLoading {
+    column-span: all;
+	text-align: center;
+}

package/dist/components/socialcard/socialcard.js

@@ -0,0 +1,317 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from "prop-types";
+import { mergeDeep } from '../utilities/functions';
+import './socialcard.css';
+import { SmartImage } from '../cms/cloudinary.image';
+import { usePixelatedConfig } from '../config/config.client';
+/* ========== NOTES ==========
+TODO #24 SocialCard Component - Add Blurb FaceBook Github iStock LinkedIn SnapChat ShutterStock TickTock Google News Saved Articles
+ERRORS: 500px, shutterfly
+
+/* function removeAnchors(element) {
+    const anchors = element.querySelectorAll('a');
+    anchors.forEach(anchor => {
+        const parent = anchor.parentNode;
+        const text = anchor.innerHTML;
+        parent.insertBefore(document.createTextNode(text), anchor);
+        parent.removeChild(anchor);
+    });
+} */
+function removeDeadHrefs(element) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(element, 'text/html');
+    const anchors = doc.querySelectorAll('a');
+    anchors.forEach(anchor => {
+        const href = anchor.getAttribute('href');
+        if (href && !href.startsWith('http://') && !href.startsWith('https://')) {
+            anchor.removeAttribute('href');
+        }
+    });
+    return doc.body.innerHTML;
+}
+SocialCards.propTypes = {
+    sources: PropTypes.object.isRequired
+};
+/* ========== SOCIALCARDS ========== */
+export function SocialCards(props) {
+    const debug = false;
+    const [state, setState] = useState({
+        loading: true,
+        targetID: '#social',
+        myCardData: [],
+        mySocialCards: [],
+        proxy: {
+            proxyURL: 'https://proxy.pixelated.tech/prod/proxy',
+            proxyURLParam: 'url'
+        },
+        rss2json: {
+            apiURL: 'https://api.rss2json.com/v1/api.json',
+            apiURLParam: 'rss_url',
+            apiKey: 'c3wsmqh4h1iydxxip3sgkr1jtk3brllbp61jc6yd'
+        },
+        toptal: {
+            apiURL: 'https://www.toptal.com/developers/feed2json/convert',
+            apiURLParam: 'url',
+            apiKey: ''
+        },
+        sources: mergeDeep({
+            /* DEFAULT VALUES FOR KNOWN SOURCES */
+            blank: { url: null, entryCount: 5, iconSrc: '', iconSrcAlt: '' },
+            SOOpx: { url: null, entryCount: 5, iconSrc: '/images/logos/500px-logo.png', iconSrcAlt: '500px Post' },
+            blog: { url: null, entryCount: 5, iconSrc: '/images/logos/blog-logo.png', iconSrcAlt: 'Blog Post' },
+            ebay: { url: null, entryCount: 5, iconSrc: '/images/logos/ebay-logo.png', iconSrcAlt: 'eBay Items For Sale' },
+            etsy: { url: null, entryCount: 5, iconSrc: '/images/logos/etsy-logo.png', iconSrcAlt: 'Etsy Favorite' },
+            /* facebook: { iconSrc: '/images/logos/facebook-logo.png', iconSrcAlt: 'Facebook Wall Post' }, */
+            flickr: { userID: '', apiKey: '', tags: '', entryCount: 5, iconSrc: '/images/logos/flickr-logo.png', iconSrcAlt: 'Flickr Photo' },
+            /* ==========
+            NOTE - FourSquare RSS stopped working March 2019
+            ========== */
+            /* foursquare: { url: null , entryCount: 5, iconSrc: '/images/logos/foursquare-logo.png', iconSrcAlt: 'FourSquare Checkin' }, */
+            github: { url: null, entryCount: 5, iconSrc: '/images/logos/github-logo.png', iconSrcAlt: 'Github Activity' },
+            goodreads: { url: null, entryCount: 5, iconSrc: '/images/logos/goodreads-logo.png', iconSrcAlt: 'GoodReads Currently Reading' },
+            instagram: { userID: '', entryCount: 5, iconSrc: '/images/logos/instagram-logo.jpg', iconSrcAlt: 'Instagram Photo' },
+            pinterest: { url: null, entryCount: 5, iconSrc: '/images/logos/pinterest-logo.png', iconSrcAlt: 'Pinterest Pin' },
+            reddit: { url: null, entryCount: 5, iconSrc: '/images/logos/reddit-logo.png', iconSrcAlt: 'Reddit Saves' },
+            shutterfly: { url: null, entryCount: 5, iconSrc: '/images/logos/shutterfly-logo.jpg', iconSrcAlt: 'Shutterfly Items' },
+            tumblr: { url: null, entryCount: 5, iconSrc: '/images/logos/tumblr-logo.png', iconSrcAlt: 'Tumblr Post' },
+            twitter: { url: null, entryCount: 5, iconSrc: '/images/logos/twitter-logo.png', iconSrcAlt: 'Twitter Tweet' },
+            x: { url: null, entryCount: 5, iconSrc: '/images/logos/x-logo.png', iconSrcAlt: 'X Post' },
+            youtube: { url: null, entryCount: 5, iconSrc: '/images/logos/youtube-logo.png', iconSrcAlt: 'Youtube Favorite Video' },
+            other: { url: null, entryCount: 5, iconSrc: '/images/logos/blog-logo.png', iconSrcAlt: 'Post' }
+        }, props.sources)
+    });
+    async function RSSFeedToJson(url) {
+        if (debug) {
+            console.log('Fetching RSS...', url);
+        }
+        async function fetchRSS() {
+            try {
+                const response = await fetch(url, {
+                    method: 'GET',
+                    credentials: 'same-origin',
+                    // crossDomain: true,
+                    mode: 'cors',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                const text = await response.text();
+                const parser = new DOMParser();
+                const xml = parser.parseFromString(text, 'application/xml');
+                let items;
+                if (xml.querySelectorAll('item').length > 0) {
+                    items = Array.from(xml.querySelectorAll('item')).map(item => {
+                        return {
+                            author: item.querySelector('author')?.textContent,
+                            category: item.querySelector('category')?.textContent,
+                            description: item.querySelector('description')?.textContent,
+                            // description: removeDeadAnchors(item.querySelector('description')?.textContent),
+                            guid: item.querySelector('guid')?.textContent,
+                            link: item.querySelector('link')?.textContent,
+                            pubDate: item.querySelector('pubDate')?.textContent,
+                            source: item.querySelector('source')?.textContent,
+                            title: item.querySelector('title')?.textContent
+                        };
+                    });
+                }
+                else {
+                    /* ===== FIX FOR REDDIT ===== */
+                    items = Array.from(xml.querySelectorAll('entry')).map(item => {
+                        return {
+                            author: item.querySelector('author')?.textContent,
+                            category: item.querySelector('category')?.attributes.getNamedItem('term')?.nodeValue,
+                            description: item.querySelector('content')?.textContent,
+                            // description: removeDeadAnchors(item.querySelector('content')?.textContent),
+                            guid: item.querySelector('id')?.textContent,
+                            link: item.querySelector('link')?.attributes.getNamedItem('href')?.nodeValue,
+                            pubDate: item.querySelector('published')?.textContent,
+                            source: item.querySelector('source')?.textContent,
+                            title: item.querySelector('title')?.textContent
+                        };
+                    });
+                }
+                return (items);
+            }
+            catch (err) {
+                return (err);
+            }
+        }
+        return fetchRSS();
+    }
+    function sortCardsByPubDate(a, b) {
+        const property = 'pubDate';
+        const dateA = new Date(a[property]);
+        const dateB = new Date(b[property]);
+        if (dateA < dateB) {
+            return 1;
+        }
+        else if (dateA > dateB) {
+            return -1;
+        }
+        else {
+            return 0;
+        }
+    }
+    async function getFeedEntries(myURL, entryCount) {
+        if (debug) {
+            console.log('Getting Feed Entries... ', myURL);
+        }
+        const proxiedURL = state.proxy.proxyURL + '?' + state.proxy.proxyURLParam + '=' + encodeURIComponent(myURL);
+        let sourceCardData = [];
+        // const result = await RSSFeedToJson(proxiedURL)
+        await RSSFeedToJson(proxiedURL)
+            .then((items) => {
+            let i = 0;
+            for (const prop in items) {
+                let myNewCard = {};
+                const item = items[prop];
+                myNewCard = item;
+                /* ===== FIX FOR DESCRIPTION ===== */
+                /* if (item.description) {
+                    if (item.description.length > 500) {
+                        const doc = html2dom(item.description)
+                        const itemDescription = doc.innerHTML
+                        myNewCard.description = itemDescription
+                    }
+                } else {
+                    const myImgBase = item.thumbnail
+                    const myImgTag = '<img src="' + myImgBase + '" alt="' + item.title + '" title="' + item.title + '">'
+                    myNewCard.description = '<p>' + myImgTag + item.title + '</p>'
+                } */
+                /* ===== FIX FOR SOURCE ===== */
+                if (!(item.source)) {
+                    myNewCard.source = new URL(myURL).hostname;
+                }
+                sourceCardData.push(myNewCard);
+                // ===== BREAK ON ENTRY COUNT ===== */
+                if (i >= entryCount - 1) {
+                    break;
+                }
+                i++;
+            }
+        });
+        return sourceCardData;
+    }
+    async function gatherData() {
+        if (debug) {
+            console.log('Gathering Data...');
+        }
+        let allCardData = [];
+        for (const prop in state.sources) {
+            const source = state.sources[prop];
+            let sourceCardData = [];
+            if (Object.prototype.hasOwnProperty.call(source, 'url') && source.url && source.url.length > 0) {
+                sourceCardData = await getFeedEntries(source.url, source.entryCount);
+                allCardData = [...allCardData, ...sourceCardData];
+            }
+        }
+        if (debug) {
+            console.log('All card Data... ', allCardData);
+        }
+        allCardData = allCardData.sort(sortCardsByPubDate);
+        return allCardData;
+    }
+    useEffect(() => {
+        if (debug) {
+            console.log("Did Mount!");
+        }
+        let myNewCardData = [];
+        let myNewSocialCards = [];
+        const generateSocialCards = async () => {
+            try {
+                myNewCardData = await gatherData();
+                for (const prop in myNewCardData) {
+                    let myOptions = {};
+                    const card = myNewCardData[prop];
+                    switch (true) {
+                        case (card.link?.indexOf('500px.com') > -1):
+                            myOptions = state.sources.SOOpx;
+                            break;
+                        case (card.link?.indexOf('blog') > -1):
+                            myOptions = state.sources.blog;
+                            break;
+                        case (card.link?.indexOf('ebay.com') > -1):
+                            myOptions = state.sources.ebay;
+                            break;
+                        case (card.link?.indexOf('etsy.com') > -1):
+                            myOptions = state.sources.etsy;
+                            break;
+                        case (card.link?.indexOf('flickr.com') > -1):
+                            myOptions = state.sources.flickr;
+                            break;
+                        case (card.link?.indexOf('github.com') > -1):
+                            myOptions = state.sources.github;
+                            break;
+                        case (card.link?.indexOf('goodreads.com') > -1):
+                            myOptions = state.sources.goodreads;
+                            break;
+                        case (card.link?.indexOf('instagram') > -1):
+                            myOptions = state.sources.instagram;
+                            break;
+                        case (card.link?.indexOf('pinterest.com') > -1):
+                            myOptions = state.sources.pinterest;
+                            break;
+                        case (card.link?.indexOf('reddit.com') > -1):
+                            myOptions = state.sources.reddit;
+                            break;
+                        case (card.link?.indexOf('shutterfly.com') > -1):
+                            myOptions = state.sources.shutterfly;
+                            break;
+                        case (card.link?.indexOf('tumblr.com') > -1):
+                            myOptions = state.sources.tumblr;
+                            break;
+                        case (card.link?.indexOf('twitter') > -1):
+                            myOptions = state.sources.twitter;
+                            break;
+                        case (card.link?.indexOf('x.com') > -1):
+                            myOptions = state.sources.x;
+                            break;
+                        case (card.link?.indexOf('youtube') > -1):
+                            myOptions = state.sources.youtube;
+                            break;
+                        case (card.link?.indexOf('other') > -1):
+                            myOptions = state.sources.other;
+                            break;
+                        default:
+                            myOptions = state.sources.blank;
+                            break;
+                    }
+                    /* ===== UPDATE STATE ===== */
+                    const newSocialCard = _jsx(SocialCard, { iconSrc: myOptions.iconSrc, iconSrcAlt: myOptions.iconSrcAlt, card: card }, prop + '' + card.guid);
+                    myNewSocialCards.push(newSocialCard);
+                }
+            }
+            catch (e) {
+                console.log("Error : ", e);
+            }
+            finally {
+                setState({
+                    ...state,
+                    myCardData: myNewCardData,
+                    mySocialCards: myNewSocialCards,
+                    loading: false
+                });
+            }
+        };
+        generateSocialCards();
+    }, []);
+    if (state.loading) {
+        return (_jsx(SocialCardsLoading, {}));
+    }
+    else {
+        return (state.mySocialCards);
+    }
+}
+SocialCard.propTypes = {
+    iconSrc: PropTypes.string.isRequired,
+    iconSrcAlt: PropTypes.string.isRequired,
+    card: PropTypes.any.isRequired
+};
+/* ========== SOCIALCARD ========== */
+export function SocialCard(props) {
+    const config = usePixelatedConfig();
+    return (_jsx("div", { className: "masonryItem", children: _jsxs("div", { className: "card", children: [_jsx("div", { className: "cardTitle", children: _jsxs("a", { href: props.card.link, target: "_blank", rel: "noopener noreferrer", children: [_jsx(SmartImage, { className: "cardIcon", src: props.iconSrc, title: props.iconSrcAlt, alt: props.iconSrcAlt, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), props.card.title] }) }), _jsx("div", { className: "cardBody", dangerouslySetInnerHTML: { __html: removeDeadHrefs(props.card.description) } }), _jsx("div", { className: "cardDate", children: props.card.pubDate })] }) }, props.card.guid));
+}
+/* ========== SPINNER ========== */
+export function SocialCardsLoading() {
+    return (_jsx("div", { className: "cardsLoading", children: _jsx("div", { children: "Loading..." }) }));
+}

package/dist/components/tiles/tiles.css

@@ -0,0 +1,77 @@
+.tilesContainer { 
+    --do-nothing: true;
+}
+
+.tileContainer {
+    --do-nothing: true;
+}
+
+.tile {
+    --do-nothing: true;
+}
+
+.tileImage {
+    position: relative;
+    aspect-ratio: 1;
+    border: 2px solid #CCC;
+    /* border-radius: 20px; */
+    overflow: hidden;
+    margin: 10px;
+}
+
+.tileImage img {
+    width: 100%;
+    height: 100% !important;
+    position: relative;
+    display: inline-block;
+    align-self: start;
+    object-fit: cover;
+}
+
+.tileImageOverlay {
+    visibility: hidden;
+    position: absolute;
+    width: 0%;
+    height: 100%;
+    bottom: 0;
+    left: 0;
+    display: inline-block;
+    background: rgba(51, 102, 153, .7);
+    transition: all 0.25s ease-in-out;
+    /* All other styling - see example */
+    img {
+        vertical-align: top; /* Default is baseline, this fixes a common alignment issue */
+    }
+}
+
+.tileImage:hover .tileImageOverlay {
+    visibility: visible;
+    width: 100% !important;
+}
+
+.tileImageOverlayText {
+    position: absolute;
+    padding: 20px;
+    left: 0;
+    bottom: 0;
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+    visibility: hidden;
+    transition: visibility 0s ease-in-out;
+    transition-delay: 0s; 
+}
+
+.tileImage:hover .tileImageOverlayText {
+    visibility: visible;
+    transition-delay: 0.25s; 
+}
+
+.tileImageOverlayTitle{
+    margin-bottom: 10px;
+}
+
+.tileImageOverlayBody{
+    font-size: 16px;
+    font-weight: initial;
+}

package/dist/components/tiles/tiles.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { Loading } from "../general/loading";
+import { SmartImage } from "../cms/cloudinary.image";
+import { usePixelatedConfig } from '../config/config.client';
+import "./tiles.css";
+import "../../css/pixelated.grid.scss";
+Tiles.propTypes = {
+    cards: PropTypes.object.isRequired,
+    rowCount: PropTypes.number,
+};
+export function Tiles(props) {
+    const rowCount = props.rowCount ?? 2;
+    if (props.cards && props.cards.length > 0) {
+        return (_jsx("div", { className: "tilesContainer", children: _jsx("div", { className: `tileContainer row-${rowCount}col`, children: props.cards.map((card, i) => (_jsx("div", { className: "gridItem", children: _jsx(Tile, { index: i, cardLength: props.cards.length, link: card.link, image: card.image, imageAlt: card.imageAlt, bodyText: card.bodyText }) }, i))) }) }));
+    }
+    else {
+        return (_jsx(Loading, {}));
+    }
+}
+/* ========== TILE ========== */
+Tile.propTypes = {
+    index: PropTypes.number.isRequired,
+    cardLength: PropTypes.number.isRequired,
+    link: PropTypes.string,
+    image: PropTypes.string.isRequired,
+    imageAlt: PropTypes.string,
+    bodyText: PropTypes.string,
+};
+function Tile(props) {
+    const config = usePixelatedConfig();
+    const tileBody = _jsxs("div", { className: "tileImage", children: [_jsx(SmartImage, { src: props.image, title: props?.imageAlt ?? undefined, alt: props?.imageAlt ?? "", cloudinaryEnv: config?.cloudinary?.product_env ?? undefined }), _jsx("div", { className: "tileImageOverlay", children: _jsxs("div", { className: "tileImageOverlayText", children: [_jsx("div", { className: "tileImageOverlayTitle", children: props.imageAlt }), _jsx("div", { className: "tileImageOverlayBody", children: props.bodyText })] }) })] });
+    return (_jsx("div", { className: "tile", id: 'tile-' + props.index, children: props.link ?
+            _jsx("a", { href: props.link, className: "tileLink", children: tileBody })
+            :
+                tileBody }));
+}

package/dist/components/timeline/timeline.css

@@ -0,0 +1,139 @@
+/* The actual timeline (the vertical ruler) */
+
+
+.timeline {
+  position: relative;
+  margin: 20px auto;
+  --timeline-color: #EEE;
+}
+
+.timeline, 
+.timeline * {
+  box-sizing: border-box;
+}
+
+/* The actual timeline (the vertical ruler) */
+.timeline::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  background-color: #1d93da;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  margin-left: -3px;
+}
+
+/* Container around content */
+.timelineContainer {
+  padding: 10px 40px;
+  position: relative;
+  background-color: inherit;
+  width: 50%;
+}
+
+/* The circles on the timeline */
+.timelineContainer::after {
+  content: '';
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  right: -17px;
+  background-color: var(--timeline-color);
+  border: 4px solid #FFB74d; /* #FF9F55 */
+  top: 15px;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+@media screen and (max-width: 768px) {
+  .timelineContainer div[class*='grid-'] {
+    grid-column: 1 / -1;
+  }
+}
+
+/* Place the container to the left */
+.timelineleft {
+  left: 0;
+  padding-left: 10px;
+}
+
+/* Place the container to the right */
+.timelineright {
+  left: 50%;
+  padding-right: 10px;
+}
+
+/* Add arrows to the left container (pointing right) */
+.timelineleft::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 22px;
+  width: 0;
+  z-index: 1;
+  right: 30px;
+  border: medium solid white;
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent var(--timeline-color);
+}
+
+/* Add arrows to the right container (pointing left) */
+.timelineright::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 22px;
+  width: 0;
+  z-index: 1;
+  left: 30px;
+  border: medium solid white;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent var(--timeline-color) transparent transparent;
+}
+
+/* Fix the circle for containers on the right side */
+.timelineright::after {
+  left: -16px;
+}
+
+/* The actual content */
+.timelineContent {
+  padding: 10px;
+  background-color: #EEE;
+  position: relative;
+  border-radius: 6px;
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+  /* Place the timelime to the left */
+  .timeline::after {
+  left: 31px;
+  }
+  
+  /* Full-width containers */
+  .timelineContainer {
+  width: 100%;
+  padding-left: 70px;
+  padding-right: 25px;
+  }
+  
+  /* Make sure that all arrows are pointing leftwards */
+  .timelineContainer::before {
+  left: 60px;
+  border: medium solid white;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent white transparent transparent;
+  }
+
+  /* Make sure all circles are at the same spot */
+  .timelineleft::after, .timelineright::after {
+  left: 15px;
+  }
+  
+  /* Make all right containers behave like the left ones */
+  .timelineright {
+  left: 0%;
+  }
+}