Skip to content
BLUEPHOENIIIX
GitHub

DESIGN

by bluephoeniiix, 4/13/2024

Logo Design

Logo

[A contrast favicon]

Logo

[A long banner]

Logo

[Inspired From Roscosmos Logo]

Logo

[A Contrast Version]

Logo

[A Dark Version]

Logo

[A Light Version]

Theme Inspired By IBM Carbon Design

Two months before prototyping this site, I was searching through almost all available CMS frameworks, and I found Carbon Theme Gatsby. I suddenly became attracted to its unique colors and typography. However, this project is no longer maintained by IBM and has been transferred to the community.

Then I had a decent try on this framework, I found that:

  1. Disadvantages:

    1. No dark theme support
    2. No support for math formulas
    3. Each run takes forever and burns out CPU
    4. Fewer customizations
    5. Outdated npm packages

  2. Advantages:

    1. IBM-style design
    2. Full functionality support for documentation

  3. Widely used by IBM but not on every important site

The last one is an important point. Many “not that important” IBM software documents are purely constructed by this framework. Even though the Carbon team has given up on maintaining it, they still use it. When you look at those websites, you may find the “Edit Link” pointed to a GitHub repo. All of those projects are written in the mdx language for the most part, and they all look exactly the same.

Reasons Switch To Astro & Future Plan

I don’t want my website to be a copied and pasted product from Carbon Theme Gatsby, though I really like those IBM typographies. To be honest, IBM masters typography much better than Apple.

Except for those pages quickly generated by Carbon Theme Gatsby, IBM uses purely React webpages (on Carbon’s stylesheet) on their very important pages. Unfortunately, none of them are open-sourced for me to copy.

That’s the reason I switched to Astro. I tried to imitate IBM styles as much as I can, but that is quite beyond my level. So, if you are interested in what I said, feel free to take over this project, and I’ll appreciate it.

gatsby

[My Old Blogs Written On Carbon Theme Gatsby]

Colors

Initially, Astro Starlight provides both light/dark theme. I removed the light theme cause I prefer dark theme. I copied the color specifications from IBM Color specifications, also I downloaded the IBM Theme made by Marvin Engelmann from the Visual Studio Marketplace and made a few modifications to fit Astro code highlighting.

IBM Color Specifications (Colored)

[Color pattel from IBM Carbon]

Example:

/* adlist.h - A generic doubly linked list implementation
 *
 * Copyright (c) 2006-Present, Redis Ltd.
 * All rights reserved.
 *
 * Licensed under your choice of the Redis Source Available License 2.0
 * (RSALv2) or the Server Side Public License v1 (SSPLv1).
 */


#ifndef __ADLIST_H__
#define __ADLIST_H__


/* Node, List, and Iterator are the only data structures used currently. */


typedef struct listNode {
    struct listNode *prev;
    struct listNode *next;
    void *value;
} listNode;


typedef struct listIter {
    listNode *next;
    int direction;
} listIter;


typedef struct list {
    listNode *head;
    listNode *tail;
    void *(*dup)(void *ptr);
    void (*free)(void *ptr);
    int (*match)(void *ptr, void *key);
    unsigned long len;
} list;


/* Functions implemented as macros */
#define listLength(l) ((l)->len)
#define listFirst(l) ((l)->head)
#define listLast(l) ((l)->tail)
#define listPrevNode(n) ((n)->prev)
#define listNextNode(n) ((n)->next)
#define listNodeValue(n) ((n)->value)


#define listSetDupMethod(l,m) ((l)->dup = (m))
#define listSetFreeMethod(l,m) ((l)->free = (m))
#define listSetMatchMethod(l,m) ((l)->match = (m))


#define listGetDupMethod(l) ((l)->dup)
#define listGetFreeMethod(l) ((l)->free)
#define listGetMatchMethod(l) ((l)->match)


/* Prototypes */
list *listCreate(void);
void listRelease(list *list);
void listEmpty(list *list);
list *listAddNodeHead(list *list, void *value);
list *listAddNodeTail(list *list, void *value);
list *listInsertNode(list *list, listNode *old_node, void *value, int after);
void listDelNode(list *list, listNode *node);
listIter *listGetIterator(list *list, int direction);
listNode *listNext(listIter *iter);
void listReleaseIterator(listIter *iter);
list *listDup(list *orig);
listNode *listSearchKey(list *list, void *key);
listNode *listIndex(list *list, long index);
void listRewind(list *list, listIter *li);
void listRewindTail(list *list, listIter *li);
void listRotateTailToHead(list *list);
void listRotateHeadToTail(list *list);
void listJoin(list *l, list *o);
void listInitNode(listNode *node, void *value);
void listLinkNodeHead(list *list, listNode *node);
void listLinkNodeTail(list *list, listNode *node);
void listUnlinkNode(list *list, listNode *node);


/* Directions for iterators */
#define AL_START_HEAD 0
#define AL_START_TAIL 1


#endif /* __ADLIST_H__ */