Taeluf.com

page.css

:root {

/* colors */
    --cWhite: #FDFDFD;
    --cOffWhite: #DDD;
    --cBlack: #222;
    --cGreen: green; 
    --cRed: red;
    --cYellow: yellow;
    --cDarkBlue: darkblue;
    --cGrey: #bfbfbf;
    --cLightGrey: #f2f4f6;
    --cDarkGrey: #7a7a7a;

    --cPrim: #430081;
    --rgbPrim: 67, 0, 129;
    --cPrimDark: #38006d;
    --cSnd: #006300;
    --rgbSnd: 0, 99, 0;
    --cSndBright: #27a700;

    --cTxtPrim: var(--cBlack);
    --cTxtSnd: var(--cWhite);
    --cLinkPrim: var(--cPrim);
    --cLinkSnd: var(--cSndBright);


    --cHtml: var(--cOffWhite);
    --cHead: var(--cPrim);
    --cContent: var(--cWhite);
    --cFooterBG: var(--cDarkGrey);

    --cCodeInline: var(--cPrim);
    --cLine: var(--cSndBright);



/* complex styles, or uncategorized */
    --sHeadBorder: var(--pdHeadBtm) solid var(--cSndBright);
    --sBorder: 1px solid var(--cLine);
    --sBorderFade: 1px solid rgba(var(--rgbSnd), 0.3);


    /* --hFont: 'Dancing Script', cursive; */
    /* --hFont: 'Dancing Script', 'Kaushan', cursive; */
    --hFont: 'Dancing Script', 'Kaushan', "Times New Roman", fantasy, cursive, serif;
    /* Aria, Helvetica, Fantasy */
    /* --hFont: inherit; */
    --bFont: 'EB Garamond', serif;
    

/* Sizing, Spacing */
    --pdSmall: 0.5rem;
    --pdBase: 0.5rem 1rem;
    --pdChild: 1.0rem;
    --pdLogo: 0.2rem;
    --pdHeadBtm: 3px;
    --pdContainer: 2.5rem;
    --pdCodeBlock: 8px 8px 8px 24px;
    --mgCodeBlock: 8px 8px 8px 16px;


    /* font sizes */
    /* --fsRoot: 118%; */
    --fsRoot: 112%;
    --fsh1: 3.052em;
    --fsh2: 2.441em;
    --fsh3:1.953em; 
    --fsh4:1.563em;
    --fsh5:1.25em; 
    --fsh6:1.0em;
    --fssmall:0.8em; 
    --fsSmall:0.8em; 
    --fsMed: 1.0em;
    --fsLarge:1.2em;

    /* width/height sizes */
    --wPara: 40em;
    --wQuote: calc(var(--wPara) + 10em);


    /* box shadow / elevation */
    --bs1: -1px 2px 3px rgba(var(--rgbPrim), 0.3), -1px 2px 6px rgba(var(--rgbPrim), 0.1);
    --bs2: -1px 2px 4px rgba(var(--rgbPrim), 0.5), -1px 2px 8px rgba(var(--rgbPrim), 0.2);

}

@media only screen and (max-width: 600px) {
    :root {
        --pdChild: 12px;
        --pdBase: 0.5rem 0.5rem;
        --pdCodeBlock: 0 12px 0 2px;
        --mgCodeBlock: 6px 6px 6px 1px;
    }
}
.PageWrap {
    width:100%;
    min-height:100%;

    display:flex;
    flex-direction:column;  
    justify-content:center;
    align-items:center;
}

.MainWrapper {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    align-items:center;
    flex:1;
}

.MainContent {
    min-width:58%;
    max-width:1280px;
    width:100%;
    flex:1;
    
    background:var(--cContent);
    box-shadow: var(--bs1);
    padding-bottom:  var(--pdContainer);
    /* display:grid; */
    /* grid-template-columns: repeat(16, 6.25%); */
    /* grid-template-rows:auto; */
}

.HeaderWrapper {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    align-items:center;
}

.HeaderContent {
    min-width:58%;
    max-width:1280px;
    width:100%;
}
 .FooterWrapper {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    align-items:center;
}

.FooterContent {
    min-width:58%;
    max-width:1280px;
    width:100%;

    background:var(--cFoot);
}



html {font-size: 112.5%;} /*18px*/

body {
    font-family: var(--bFont);
    font-weight: 400;
    line-height: 1.65;
}
html, body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;

    background:var(--cHtml);
    color:var(--cTxtPrim);

    font-size: var(--fsRoot);
}
body #main {
    font-size: var(--fsLarge);
}   

main, header {
    padding:0;
    margin:0;
    width:100%;
    display:flex;
    flex-direction:column;
}


main {
    flex: 1;
}


/* header styles */
header {

    --cTxtPrim: var(--cSndBright);
    --cTxtSnd: var(--cPrim);

    background:var(--cHead);
    border-bottom: var(--sHeadBorder);
    padding: var(--pdSmall);
}

header nav {
    --cLinkPrim: var(--cTxtPrim);
    display:inline-block;
}
header nav a {
    padding-left: var(--pdSmall);
    padding-right: var(--pdSmall);
}

footer {
    margin:0;
    width:100%;
    padding: var(--pdContainer);
    margin:0;
    text-align:center;
    background:var(--cFooterBG);
    font-size: var(--fsSmall);
    color: var(--cGrey);
}
footer a {
    color: var(--cGrey);
    border-bottom:none;
}
footer a:hover, footer a:focus, footer a:active{
    color: var(--cBlack);
}
footer p, footer .logo {
    max-width:none;
    padding:0;
    margin: 0;
    margin-bottom: var(--pdSmall);
}