/* Normalization of the main style of kheng.work
 * Each individual webpage will have their own corresponding CSS stylesheets of the same name
 */

/* FONT DEFINITIONS
 * Serving fonts locally through GitHub Pages instead of via Google Fonts where the fonts are acquired
 *
 * Each Chinese font will have their subsets generated manually elsewhere before including it as <name>-prod.ttf
 * due to the issue of full Chinese fonts being way too large to be included for webpages: https://asianabsolute.co.uk/blog/chinese-web-fonts/
 *
 * I personally would like to avoid having to rely on third-party websites and host everything locally as much as I could, therefore the original
 * font files will be kept in the GitHub Page repository (from which the website is served), but manually generating my own font subset files
 * through the use of https://github.com/antfu/chinese-font-subset-for-crowds, which is not a problem since the actual Chinese content will not
 * be modified frequently as it's a portfolio website
 *
 * I have considered Justfont and Youziku per the suggestion of Asian Absolute linked previously, but there are a few problems with either services:
 * - Justfont is a Taiwanese type foundry and webfont service provider, meaning they only serve traditional Chinese fonts, which is not useful for me
 *   as someone who needs to serve both traditional and simplified Chinese fonts while minimizing reliance of third party services. Additionally, the
 *   license fees for any of the fonts are way beyond what I could afford (at the time of writing at Jan 2026), which is a shame because they have otherwise
 *   absolutely beautiful collection of fonts for me to use here to consider them for future works
 * - Youziku seemingly hosts their servers on mainland China, whose Internet backbone to Malaysia specifically has historically not been the best. Additionally,
*    some fonts require paying for subscription, which again is not something I could afford at the time of writing
 */
@font-face { /* Uses Zalando Sans Expanded mainly for *the* stylized titles, e.g. my full name */
    font-family: 'Zalando Sans Expanded';
    src:
        local('Zalando Sans Expanded'),
        url('./fonts/ZalandoSansExpanded-VariableFont_wght.ttf') format('truetype');
}

/* Apparently you do need to separate each font files out for different font styles: https://stackoverflow.com/a/2436830 */
@font-face { /* Zalando Sans Expanded ITALIC */
    font-family: 'Zalando Sans Expanded';
    src:
        local('Zalando Sans Expanded'),
        url('./fonts/ZalandoSansExpanded-Italic-VariableFont_wght.ttf') format('truetype');
    font-style: italic;
}

@font-face { /* Uses Zhi Mang Xing for SIMPLIFIED Chinese stylized titles, e.g. my full Chinese name */
    font-family: 'Zhi Mang Xing';
    src:
        local('Zhi Mang Xing'),
        url('./fonts/ZhiMangXing-Regular.ttf') format('truetype');
}


@font-face { /* DM Serif Text serves as heading font */
    font-family: 'DM Serif Text';
    src:
        local('DM Serif Text'), 
        url('./fonts/DMSerifText-Regular.ttf') format('truetype');
}

@font-face { /* DM Serif Text ITALIC */
    font-family: 'DM Serif Text';
    src:
        local('DM Serif Text'),
        url('./fonts/DMSerifText-Italic.ttf') format('truetype');
    font-style: italic;
}

/* Uses Google Noto Serif TC with ExtraBold 800 weighting (Bold 700 weighting also works visually alternatively) for TRADITIONAL Chinese heading font, because:
 * - It pairs well visually with DM Serif Text from a very informal survey across three places I know with mixed knowledge of Chinese language
 * - There are significantly more Traditional Han fonts in Google Font likely due to the inclusion of Japanese type foundries through kanji
 *     - The quirks of Japanese kanji being a mix of mostly traditional Chinese and sometimes simplified Chinese scripts (on top of their own 
 *       unique characters) means that certain characters like traditional 黃 might NOT be rendered by the font *at all* whereas simplified 
 *       黄 is rendered correctly. This is not a problem with very rare Chinese type foundries as well as Google Noto
 * - Malaysian Chinese literature and news articles have a habit of using traditional Chinese for title, but simplified Chinese for content
 */
@font-face { /* Noto Serif TC serves as Chinese heading font */
    font-family: 'Noto Serif TC';
    src:
        local('Noto Serif TC'),
        url('./fonts/NotoSerifTC-VariableFont_wght.ttf') format('truetype');
}

@font-face { /* Zalando Sans ITALIC */
    font-family: 'Zalando Sans';
    src:
        local('Zalando Sans'),
        url('./fonts/ZalandoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-style: italic;
}

@font-face {  /* Uses Noto Sans SC for simplified Chinese content */
    font-family: 'Noto Sans SC';
    src:
        local('Noto Sans SC'), 
        url('./fonts/NotoSansSC-VariableFont_wght.ttf') format('truetype');
}
    

/* COLOUR DEFINITIONS
 * Note that both .dark and .light will be EXCLUSIVELY used for the entire website's content.
 * The .dark and .light colours are picked such that they work well with each other whether it's black-on-white or white-on-black.
 * .lime is used to highlight specific content such as the title, it should be used VERY SPARINGLY.
 */
:root {
    /* Using custom properties to define the three colours: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties */
    --dark: #2D2D2D;
    --light: #DEDEDE;
    --lime: #95BA00;
    --yellow: #BAAB00; /* Might consider using it as an alternative to --lime */
    /* for hyperlinks */
    --blue: #008ea7;
    --purple: #be4db5;
}

/* WEBSITE CONTENT DEFINITIONS */
.dark-theme { /* Default theme to be applied onto body */
    background-color: var(--dark);
    color: var(--light);
}

.light-theme { /* Optional light theme */
    background-color: var(--light);
    color: var(--dark);
}

body {
    font-family: 'Zalando Sans', 'Noto Sans SC', sans-serif;
    /* https://stackoverflow.com/questions/17756649/disable-the-horizontal-scroll */
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Serif Text', 'Noto Serif TC', serif;
    font-weight: 500;
}

/* Generic navigation bar declaration; define the font size and ul margin at each individual page CSS level instead */
.nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.nav > li {
    /* https://stackoverflow.com/a/15710719 */
    display: inline-block;
    margin-right: 2dvw;
}

/* Generic hyperlink style */
.dark-theme :link {
    color: var(--light);
}

.light-theme :link {
    color: var(--dark);
}

/* !important is the only one working for me: https://stackoverflow.com/a/49049199 */
a:hover {
    color: var(--blue) !important;
}

.dark-theme a:active {
    color: var(--light) !important;
}

.light-theme a:active {
    color: var(--dark) !important;
}

:visited {
    color: var(--purple);
}