The purple club patch 3

README.md

@@ -4,8 +4,7 @@ In 2022, the setup has a couple extra steps, mostly because of changes with the
 - Google Spreadsheets API v3 has been discontinued and the update to the v4 requires the use of an API key that you need to configure in the Google Cloud Console
 - Sendgrid requires to create a verified sender account
 
-Live demo here: 
-http://misterfresh.github.io/react-drive-cms/
+Live Demo: [https://thepurpleclub.github.io/home]
 
 ### Features:
 - A dynamic site, but no backend to manage, no database, no server, no hosting & no maintenance (almost)

app/app.js

@@ -15,6 +15,10 @@ import { About } from './routes/about.js'
 import { Contact } from './routes/contact.js'
 import { Home } from './routes/home.js'
 import { getActiveItemId, getPageName } from './utils/path.js'
+import { Memoriam } from './routes/memoriam.js'
+import { Music } from './routes/music.js'
+import { Japanese } from './routes/japanese.js'
+import { Chinese } from './routes/chinese.js'
 
 const App = () => {
     const [state, dispatch] = useReducer(reducer, initialState)
@@ -30,6 +34,14 @@ const App = () => {
             Page = Category
         } else if (pageName === 'articles') {
             Page = Article
+        } else if (pageName === 'memoriam') {
+            Page = Memoriam
+        } else if (pageName === 'music'){
+            Page = Music
+        }else if(pageName === 'japanese'){
+            Page = Japanese
+        }else if(pageName === 'chinese'){
+            Page = Chinese
         }
         return Page
     }, [pageName])

app/components/blocks/article.js

@@ -4,6 +4,8 @@ import prefixUriIfNeeded from '../../utils/prefixUriIfNeeded.js'
 
 export const Article = ({ article, category }) => html`
     <style>
+    /******************************************************************adding new font family*********************************************************************/
+    @import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Joan&family=Noto+Sans+JP:wght@100;400&family=Noto+Serif+JP:wght@200;400;500&family=Playfair+Display&display=swap');
         article {
             padding: 30px 0;
             display: block;
@@ -15,7 +17,7 @@ export const Article = ({ article, category }) => html`
             color: #333337;
             font-size: 2.4rem;
             margin-top: 0;
-            font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+            font-family: 'Noto Sans JP', sans-serif; /****************************** changed font style******************************/
             font-weight: 700;
             margin-bottom: 10px;
             line-height: 1.1;
@@ -28,8 +30,8 @@ export const Article = ({ article, category }) => html`
         }
         article p {
             margin: 0 0 10px;
-            font-family: 'Droid Serif', serif;
-            font-size: 1.6rem;
+            font-family: 'Noto Serif JP', serif; /******************************changed font family*****************************************************/
+            font-size: 1.5rem;/********************************changed font size***************************************************/
         }
         article p.description {
             margin-bottom: 30px;

app/components/blocks/category.js

@@ -14,6 +14,13 @@ export const Category = ({ category, setActivePanel }) => html`
             display: flex;
             align-items: flex-end;
             cursor: pointer;
+            transition-timing-function: ease-in-out; /*************filter added************/
+            transition-duration: 2s; /************filter added************/
+        }
+        .category-block:hover{
+            filter: hue-rotate(360deg); /******************filter added***************/
+            transition-timing-function: ease-in-out; /****************filter added*******************/
+            transition-duration: 2s; /****************filter added*******************/
         }
         .category-block .title {
             background: rgba(50, 50, 50, 0.5);

app/components/layout/footer.js

@@ -135,10 +135,10 @@ export const Footer = ({
                 }
             }
             .profile {
-                width: 6rem;
+                width: 8.06rem;
                 padding: 0;
                 border: 0;
-                border-radius: 50%;
+                border-radius: 0%;
                 height: 6rem;
                 margin-bottom: 1rem;
             }
@@ -219,7 +219,7 @@ export const Footer = ({
                     onClick=${avoidReload}
                 >
                     <img
-                        src=${prefixUriIfNeeded('/assets/profile-1.jpg')}
+                        src=${prefixUriIfNeeded('/assets/キョロちゃん.jpg')}
                         class="profile"
                         alt="user-image"
                     />

app/components/layout/menu.js

@@ -12,8 +12,9 @@ export const Menu = ({ categories, articles, menuVisible }) => {
         setActiveCategory(Object.values(categories)?.[0]?.id)
     }, [categories])
     return html` <style>
+    @import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Joan&family=Noto+Sans+JP:wght@100;400&family=Noto+Serif+JP:wght@200;400;500&family=Playfair+Display&display=swap');
             .menu {
-                background-color: #333;
+                background-color: #810541; /**************************orange menu#f06236*************************/
                 overflow: hidden;
                 z-index: 10;
                 display: block;
@@ -22,11 +23,12 @@ export const Menu = ({ categories, articles, menuVisible }) => {
                 height: 100%;
                 box-shadow: #000 2px 2px 10px;
                 padding-top: 5rem;
-                transition: opacity linear 750ms, width linear 750ms;
+                transition: opacity linear 1000ms, width linear 1000ms; /******************changed speed******************/
                 width: 0;
                 opacity: 0;
                 padding-right: 0;
                 position: fixed;
+                overflow: auto;
             }
             .menu-open {
                 opacity: 1;
@@ -50,8 +52,14 @@ export const Menu = ({ categories, articles, menuVisible }) => {
 
             .icon {
                 padding: 0 20px;
-                color: #dadada;
                 font-size: 1.6rem;
+                color: #fff; /**********************changed bg color**************************/
+                transition: all 1s ease-in-out; /*******************changed transition*******************/
+            }
+
+            .icon:hover {
+                color: #6236f0; /**************changed icon color when hovered****************/
+                transition: all 1s ease-in-out; /**************changed transition****************/
             }
             .menu ul.menu-list {
                 padding: 10px 0;
@@ -65,9 +73,18 @@ export const Menu = ({ categories, articles, menuVisible }) => {
                 list-style: none;
                 padding: 10px 0;
                 font-size: 1.6rem;
+                transition: all 1s ease-in-out; /************added transition when hovered**************/
+            }
+            .item:hover {
+                color: #0036fd; /************************changed icon color to navy when hovered*************/
+                outline: 0; /***************added outline******************/
+                transition: all 1s ease-in-out; /************added transition when hovered************/
+            }
+            .item:focus {
+                outline: 0; /***********re-focus************/
             }
             .item-link {
-                color: #dadada;
+                color: #fff; /************changed bg color**********************/
                 font-weight: 500;
                 font-size: large;
                 border-bottom: 0 transparent;
@@ -76,20 +93,22 @@ export const Menu = ({ categories, articles, menuVisible }) => {
                 border: 0;
                 cursor: pointer;
                 font-family: Arial;
+                transition: all 1s ease-in-out;  /*************added Fade in effect***************/
             }
             .item-link:hover {
-                color: #fff;
+                color: #0036fd; /***********************changed bg color to blue*************/
                 outline: 0;
+                transform: scale(1.2); /*************text would be larger when hovered*************/
             }
             .item-link:focus {
                 outline: 0;
             }
             .separator {
                 margin: 20px auto;
                 display: block;
-                border: 1px solid #dededc;
+                border: 1px solid #fff; /*************changed color************/
                 height: 0;
-                width: 40%;
+                width: 50%;  /*******************changed width***************/
             }
             .sub-list {
                 margin-left: 15px;
@@ -119,17 +138,36 @@ export const Menu = ({ categories, articles, menuVisible }) => {
                 font-size: medium;
                 position: relative;
                 color: #dadada;
-                font-weight: 500;
+                font-weight: 100; /***************************changed font weight***************/
                 border-bottom: 0 transparent;
                 text-decoration: none;
                 background-color: transparent;
                 font-style: normal;
                 top: 10px;
-                font-family: Arial;
+                font-family: 'Noto Sans JP', sans-serif;/***************************changed font style***********************/
+            }
+            /***************************changed underline hover effect********************************/
+            .sub-item-link::before {
+                content: '';
+                position: absolute;
+                width: 100%;
+                height: 1px;
+                border-radius: 1px;
+                background-color: #00ccff;
+                bottom: 0;
+                left: 0;
+                transform-origin: right;
+                transform: scaleX(0);
+                transition: transform .3s ease-in-out;
             }
+            .sub-item-link:hover::before {
+                transform-origin: left;
+                transform: scaleX(1);
+              }
+            /************************************************************************************************/
             .sub-item-link:hover {
                 border-bottom: none;
-                color: #fff;
+                color: #00ccff; /************************/
             }
         </style>
         <nav id="menu" class="menu ${menuVisible ? 'menu-open' : ''}">
@@ -146,7 +184,8 @@ export const Menu = ({ categories, articles, menuVisible }) => {
                     </a>
                 </li>
                 <li class="item">
-                    <i class="fas fa-user icon" />
+                    <i class="fas fa-kiwi-bird icon" />
+
                     <a
                         href="${prefixUriIfNeeded('/about')}"
                         title="About"
@@ -157,7 +196,42 @@ export const Menu = ({ categories, articles, menuVisible }) => {
                     </a>
                 </li>
                 <li class="item">
-                    <i class="fas fa-paper-plane icon" />
+                    <i class="fas fa-robot icon" />
+                    <a
+                        href="${prefixUriIfNeeded('/japanese')}"
+                        title="日本語"
+                        class="item-link"
+                        onClick=${avoidReload}
+                    >
+                        日本語
+                    </a>
+                </li>
+                 <li class="item">
+                    <i class="fas fa-ship icon" />
+                    <a
+                        href="${prefixUriIfNeeded('/chinese')}"
+                        title="繁體中文"
+                        class="item-link"
+                        onClick=${avoidReload}
+                    >
+                    繁體中文
+                    </a>
+                </li>
+                <!--
+                <li class="item">
+                    <i class="fas fa-music icon" />
+                    <a
+                        href="${prefixUriIfNeeded('/music')}"
+                        title="Inspire"
+                        class="item-link"
+                        onClick=${avoidReload}
+                    >
+                        Inspiration
+                    </a>
+                </li>
+                -->
+                <li class="item">
+                    <i class="fas fa-feather-alt icon" />
                     <a
                         href="${prefixUriIfNeeded('/contact')}"
                         title="Contact"
@@ -167,6 +241,18 @@ export const Menu = ({ categories, articles, menuVisible }) => {
                         Contact
                     </a>
                 </li>
+                 <li class="item">
+                    <i class="fas fa-monument icon" />
+                    <a
+                        href="${prefixUriIfNeeded('/memoriam')}"
+                        title="Memoriam"
+                        class="item-link"
+                        onClick=${avoidReload}
+                    >
+                        In Memoriam
+                    </a>
+                </li>
+
             </ul>
             <hr class="separator" />
             <ul class="menu-list">

app/components/layout/menuBurger.js

@@ -14,18 +14,21 @@ export const MenuBurger = ({ toggleMenuVisible }) => {
                 padding-top: 8px;
                 cursor: pointer;
                 border-bottom: 0 transparent;
-                box-shadow: #948b8b 2px 2px 10px;
+                box-shadow:  #000 2px 2px 12px; /***********************************/
                 color: #fff;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 outline: 0;
                 border: 0;
+                background:#810541; /**************** #f06236changed background color****************/
+                transition: 1s ease-in-out; /******************************/
             }
             .menu-burger:hover {
                 color: #fff;
                 outline: 0;
-                background: #999;
+                background: #6236f0; /******************************/
+                transition: 1s ease-in-out; /******************************/
             }
             .menu-burger:focus {
                 outline: 0;

app/components/layout/page.js

@@ -22,18 +22,21 @@ export const Page = ({
     usePageMeta(title, subtitle)
 
     return html` <style>
+    /**************************importing new font families******************************/
+    @import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Joan&family=Noto+Sans+JP&family=Noto+Serif+JP:wght@200;400;500&family=Playfair+Display&display=swap');
             ${buttonsStyles} ${blocksStyles} .page {
                 display: flex;
                 width: 100%;
                 justify-content: flex-end;
                 overflow-x: hidden;
                 max-width: 100%;
+                font-family: 'Noto Serif JP', serif;/**************************adding font family attributes************************/
             }
             main.page-main {
                 opacity: 1;
                 width: 100%;
                 display: block;
-                transition: width linear 750ms;
+                transition: width linear 1000ms; /***********************changed speed*************/
                 margin: 0;
                 padding: 0;
                 overflow-x: hidden;
@@ -47,7 +50,7 @@ export const Page = ({
                 padding: 5rem;
                 overflow-x: hidden;
                 max-width: 100%;
-                transition: width linear 750ms;
+                transition: width linear 1000ms; /***************************changed speed*************/
                 width: 100%;
                 margin-left: 0;
             }