diff --git a/docs/blog/index.md b/docs/blog/index.md new file mode 100644 index 0000000..c58f16c --- /dev/null +++ b/docs/blog/index.md @@ -0,0 +1,2 @@ +# Blog + diff --git a/docs/includes/defintions.md b/docs/includes/defintions.md index 2dc2c76..dc2fef1 100644 --- a/docs/includes/defintions.md +++ b/docs/includes/defintions.md @@ -1,2 +1,3 @@ -*[data]: Data defined as raw input, which when processed becomes information. Wisdom and knowledge are higher levels of information alloyed with experience. *[ADB]: The Android Debug Bridge lets you communicate with your Android or wearOS device via the terminal (or console). You can install apps, push orpull files, and change settings using commands. +*[data]: Data defined as raw input, which when processed becomes information. Wisdom and knowledge are higher levels of information alloyed with experience. +*[ADB]: The Android Debug Bridge lets you communicate with your Android or wearOS device via the terminal (or console). You can install apps, push orpull files, and change settings using commands. diff --git a/docs/index.md b/docs/index.md index 3b3827d..8241fbe 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,36 +2,42 @@ title: Gugulethu Hlekwayo description: "i'm a writer..." hide: - - toc - - navigation - - footer + - toc + - navigation + - footer --- - + -
-
-

hi, i'm g* and i write

-

...

-
-
-
-
- +
+

hi, i'm g* and i write

+

...

+
+
+
+ +
+
- -> - -
-
+
+
- + + + diff --git a/docs/overrides/main.html b/docs/overrides/main.html index 939d223..c0aa04c 100644 --- a/docs/overrides/main.html +++ b/docs/overrides/main.html @@ -5,6 +5,9 @@ {{ super() }} + + + diff --git a/docs/src/allan-gray-logo-243x160.png b/docs/src/allan-gray-logo-243x160.png new file mode 100644 index 0000000..c091495 Binary files /dev/null and b/docs/src/allan-gray-logo-243x160.png differ diff --git a/docs/src/fonts/dm-mono/DMMono-Italic.ttf b/docs/src/fonts/dm-mono/DMMono-Italic.ttf new file mode 100644 index 0000000..d7045a1 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-Italic.ttf differ diff --git a/docs/src/fonts/dm-mono/DMMono-Light.ttf b/docs/src/fonts/dm-mono/DMMono-Light.ttf new file mode 100644 index 0000000..19d28f0 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-Light.ttf differ diff --git a/docs/src/fonts/dm-mono/DMMono-LightItalic.ttf b/docs/src/fonts/dm-mono/DMMono-LightItalic.ttf new file mode 100644 index 0000000..00192a9 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-LightItalic.ttf differ diff --git a/docs/src/fonts/dm-mono/DMMono-Medium.ttf b/docs/src/fonts/dm-mono/DMMono-Medium.ttf new file mode 100644 index 0000000..3e7a763 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-Medium.ttf differ diff --git a/docs/src/fonts/dm-mono/DMMono-MediumItalic.ttf b/docs/src/fonts/dm-mono/DMMono-MediumItalic.ttf new file mode 100644 index 0000000..369a4c3 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-MediumItalic.ttf differ diff --git a/docs/src/fonts/dm-mono/DMMono-Regular.ttf b/docs/src/fonts/dm-mono/DMMono-Regular.ttf new file mode 100644 index 0000000..1cdda91 Binary files /dev/null and b/docs/src/fonts/dm-mono/DMMono-Regular.ttf differ diff --git a/docs/src/fonts/lato/Lato-Black.ttf b/docs/src/fonts/lato/Lato-Black.ttf new file mode 100644 index 0000000..4340502 Binary files /dev/null and b/docs/src/fonts/lato/Lato-Black.ttf differ diff --git a/docs/src/fonts/lato/Lato-BlackItalic.ttf b/docs/src/fonts/lato/Lato-BlackItalic.ttf new file mode 100644 index 0000000..4df1555 Binary files /dev/null and b/docs/src/fonts/lato/Lato-BlackItalic.ttf differ diff --git a/docs/src/fonts/lato/Lato-Bold.ttf b/docs/src/fonts/lato/Lato-Bold.ttf new file mode 100644 index 0000000..016068b Binary files /dev/null and b/docs/src/fonts/lato/Lato-Bold.ttf differ diff --git a/docs/src/fonts/lato/Lato-BoldItalic.ttf b/docs/src/fonts/lato/Lato-BoldItalic.ttf new file mode 100644 index 0000000..a05d503 Binary files /dev/null and b/docs/src/fonts/lato/Lato-BoldItalic.ttf differ diff --git a/docs/src/fonts/lato/Lato-Italic.ttf b/docs/src/fonts/lato/Lato-Italic.ttf new file mode 100644 index 0000000..0d0f69e Binary files /dev/null and b/docs/src/fonts/lato/Lato-Italic.ttf differ diff --git a/docs/src/fonts/lato/Lato-Light.ttf b/docs/src/fonts/lato/Lato-Light.ttf new file mode 100644 index 0000000..dfa72ce Binary files /dev/null and b/docs/src/fonts/lato/Lato-Light.ttf differ diff --git a/docs/src/fonts/lato/Lato-LightItalic.ttf b/docs/src/fonts/lato/Lato-LightItalic.ttf new file mode 100644 index 0000000..12f2b6c Binary files /dev/null and b/docs/src/fonts/lato/Lato-LightItalic.ttf differ diff --git a/docs/src/fonts/lato/Lato-Regular.ttf b/docs/src/fonts/lato/Lato-Regular.ttf new file mode 100644 index 0000000..bb2e887 Binary files /dev/null and b/docs/src/fonts/lato/Lato-Regular.ttf differ diff --git a/docs/src/fonts/lato/Lato-Thin.ttf b/docs/src/fonts/lato/Lato-Thin.ttf new file mode 100644 index 0000000..ba58da1 Binary files /dev/null and b/docs/src/fonts/lato/Lato-Thin.ttf differ diff --git a/docs/src/fonts/lato/Lato-ThinItalic.ttf b/docs/src/fonts/lato/Lato-ThinItalic.ttf new file mode 100644 index 0000000..4d82766 Binary files /dev/null and b/docs/src/fonts/lato/Lato-ThinItalic.ttf differ diff --git a/docs/src/fonts/libre-baskerville/LibreBaskerville-Bold.woff b/docs/src/fonts/libre-baskerville/LibreBaskerville-Bold.woff new file mode 100644 index 0000000..9cac603 Binary files /dev/null and b/docs/src/fonts/libre-baskerville/LibreBaskerville-Bold.woff differ diff --git a/docs/src/fonts/libre-baskerville/LibreBaskerville-Italic.woff b/docs/src/fonts/libre-baskerville/LibreBaskerville-Italic.woff new file mode 100644 index 0000000..e989ee4 Binary files /dev/null and b/docs/src/fonts/libre-baskerville/LibreBaskerville-Italic.woff differ diff --git a/docs/src/fonts/libre-baskerville/LibreBaskerville-Regular.woff b/docs/src/fonts/libre-baskerville/LibreBaskerville-Regular.woff new file mode 100644 index 0000000..3443ac6 Binary files /dev/null and b/docs/src/fonts/libre-baskerville/LibreBaskerville-Regular.woff differ diff --git a/docs/src/fonts/libre-baskerville/style.css b/docs/src/fonts/libre-baskerville/style.css new file mode 100644 index 0000000..0ced990 --- /dev/null +++ b/docs/src/fonts/libre-baskerville/style.css @@ -0,0 +1,24 @@ +/* #### Generated By: http://font.download #### */ + + @font-face { + font-family: 'Libre Baskerville'; + font-style: normal; + font-weight: normal; + src: local('Libre Baskerville'), url('LibreBaskerville-Regular.woff') format('woff'); + } + + + @font-face { + font-family: 'Libre Baskerville Italic'; + font-style: normal; + font-weight: normal; + src: local('Libre Baskerville Italic'), url('LibreBaskerville-Italic.woff') format('woff'); + } + + + @font-face { + font-family: 'Libre Baskerville Bold'; + font-style: normal; + font-weight: normal; + src: local('Libre Baskerville Bold'), url('LibreBaskerville-Bold.woff') format('woff'); + } \ No newline at end of file diff --git a/docs/src/js/faces-intro.js b/docs/src/js/faces-intro.js new file mode 100644 index 0000000..0146500 --- /dev/null +++ b/docs/src/js/faces-intro.js @@ -0,0 +1,16 @@ +// --------------------- +// This script does the animations for the faces +// on the home page. +// --------------------- + +document.addEventListener('DOMContentLoaded', function () { + const imageContainers = document.querySelectorAll('.face'); + + setTimeout(() => { + imageContainers.forEach((container, index) => { + setTimeout(() => { + container.classList.add('active'); + }, (index + 1) * 1000); // Adjust delay between images + }); + }, 4800); +}); diff --git a/docs/src/js/hover-text.js b/docs/src/js/hover-text.js new file mode 100644 index 0000000..f858cd3 --- /dev/null +++ b/docs/src/js/hover-text.js @@ -0,0 +1,22 @@ +// --------------------- +// This script changes the text when hovering over faces on the home page. +// --------------------- + +function setHoverText(elementId, text) { + const hoverTextElement = document.getElementById('hover-text'); + + document.getElementById(elementId).onmouseover = function () { + hoverTextElement.innerHTML = text; + hoverTextElement.classList.remove('leave'); + hoverTextElement.classList.add('fade-in'); + }; + + document.getElementById(elementId).onmouseout = function () { + hoverTextElement.classList.remove('fade-in'); + hoverTextElement.classList.add('leave'); + }; +} + +setHoverText('visual-hover', 'a thousand words at a time'); +setHoverText('technical-hover', 'in zeroes, ones, and other numbers'); +setHoverText('writing-hover', 'letter by letter, word by word'); diff --git a/docs/src/js/index-text.js b/docs/src/js/index-text.js deleted file mode 100644 index ce53e22..0000000 --- a/docs/src/js/index-text.js +++ /dev/null @@ -1,11 +0,0 @@ -document.getElementById('visual-hover').onmouseover = function () { - document.getElementById('hover-text').innerHTML = "a thousand words at a time"; -}; - -document.getElementById('technical-hover').onmouseover = function () { - document.getElementById('hover-text').innerHTML = "in zeroes, ones, and other numbers"; -}; - -document.getElementById('writing-hover').onmouseover = function () { - document.getElementById('hover-text').innerHTML = "letter by letter, word by word"; -}; diff --git a/docs/src/js/loader.js b/docs/src/js/page-loader.js similarity index 73% rename from docs/src/js/loader.js rename to docs/src/js/page-loader.js index 34718aa..be701f3 100644 --- a/docs/src/js/loader.js +++ b/docs/src/js/page-loader.js @@ -1,3 +1,7 @@ +// --------------------- +// This script loads the page loading animation. +// --------------------- + document.getElementById('loader').style.display = 'block'; function fadeOutLoader() { diff --git a/docs/src/mambu-logo-110x112.png b/docs/src/mambu-logo-110x112.png new file mode 100644 index 0000000..9a9aab6 Binary files /dev/null and b/docs/src/mambu-logo-110x112.png differ diff --git a/docs/src/spread-ai-logo-125x144.png b/docs/src/spread-ai-logo-125x144.png new file mode 100644 index 0000000..c3dc3c3 Binary files /dev/null and b/docs/src/spread-ai-logo-125x144.png differ diff --git a/docs/src/spread-docs-site-3456x2160.png b/docs/src/spread-docs-site-3456x2160.png new file mode 100644 index 0000000..f4a9729 Binary files /dev/null and b/docs/src/spread-docs-site-3456x2160.png differ diff --git a/docs/src/stylesheets/_colours.css b/docs/src/stylesheets/_colours.css index a804ef9..f779c24 100644 --- a/docs/src/stylesheets/_colours.css +++ b/docs/src/stylesheets/_colours.css @@ -1,22 +1,55 @@ -/* Change the colours of the root colour scheme */ +/***************************** +* COLOURS +*****************************/ + :root { - --background: #FAF9F6; - --md-primary-fg-color: #323036; - --md-primary-fg-color--light: #818589; - --md-primary-fg-color--dark: #323036; - --md-primary-bg-color: #FAF9F6; - --md-footer-bg-color: transparent; - --md-default-bg-color: #EFE5DC; + --background-colour: #FFF; + --primary-colour: #323036; + --secondary-colour: #EFE5DC; + --tertiary-colour: #818589; + --quarternary-colour: #FAF9F6; } -[data-md-color-scheme=default] { - --md-default-bg-color: #FAF9F6; +/* Adjust Mkdocs colours */ + +:root { + --md-primary-fg-color: var(--primary-colour); + --md-primary-fg-color--light: var(--tertiary-colour); + --md-primary-fg-color--dark: var(--primary-colour); + --md-primary-bg-color: var(--background-colour); + --md-footer-bg-color: var(--background-colour); + --md-default-bg-color: var(--background-colour); } -/* Edit the indigo accent colour scheme (no grey colour scheme) */ -[data-md-color-accent=indigo] { - --md-primary-fg-color: #323036; - --md-primary-fg-color--light: var(--md-primary-bg-color); - --md-primary-fg-color--dark: var(--md-primary-fg-color--dark); - --md-accent-fg-color: #323036; +[data-md-color-accent=custom] { + --md-primary-fg-color: var(--primary-colour); + --md-primary-fg-color--light: var(--tertiary-colour); + --md-primary-fg-color--dark: var(--primary-colour); + --md-accent-fg-color: var(--secondary-colour); +} + +/* Font colours */ + +.md-typeset { + + p, + h1, + h2, + h3 { + color: var(--primary-color); + } + + h4, + h5, + h6 { + color: var(--tertiary-colour); + } + + a { + color: var(--tertiary-colour); + } + + a:hover { + color: var(--primary-color); + } } diff --git a/docs/src/stylesheets/_fonts.css b/docs/src/stylesheets/_fonts.css new file mode 100644 index 0000000..972a454 --- /dev/null +++ b/docs/src/stylesheets/_fonts.css @@ -0,0 +1,183 @@ +/***************************** +* FONTS +*****************************/ + +@font-face { + font-family: 'Libre Baskerville'; + font-weight: normal; + font-style: normal; + src: url('../fonts/libre-baskerville/LibreBaskerville-Regular.woff'); +} + +@font-face { + font-family: 'Libre Baskerville'; + font-weight: bold; + font-style: normal; + src: url('../fonts/libre-baskerville/LibreBaskerville-Bold.woff'); + +} + +@font-face { + font-family: 'Libre Baskerville'; + font-weight: normal; + font-style: italic; + src: url('../fonts/libre-baskerville/LibreBaskerville-Italic.woff'); + +} + +@font-face { + font-family: 'Lato'; + font-weight: normal; + font-style: normal; + src: url('../fonts/lato/Lato-Regular.ttf'); + +} + +@font-face { + font-family: 'Lato'; + font-weight: normal; + font-style: italic; + src: url('../fonts/lato/Lato-Italic.ttf'); + +} + +@font-face { + font-family: 'Lato'; + font-weight: bold; + font-style: normal; + src: url('../fonts/lato/Lato-Bold.ttf'); + +} + +@font-face { + font-family: 'Lato'; + font-weight: bold; + font-style: italic; + src: url('../fonts/lato/Lato-BoldItalic.ttf'); +} + +@font-face { + font-family: 'Lato'; + font-weight: light; + font-style: normal; + src: url('../fonts/lato/Lato-Light.ttf'); + +} + +@font-face { + font-family: 'Lato'; + font-weight: light; + font-style: italic; + src: url('../fonts/lato/Lato-LightItalic.ttf'); +} + +@font-face { + font-family: 'Lato'; + font-weight: bolder; + font-style: normal; + src: url('../fonts/lato/Lato-Black.ttf'); +} + +@font-face { + font-family: 'Lato'; + font-weight: bolder; + font-style: italic; + src: url('../fonts/lato/Lato-BlackItalic.ttf'); +} + +@font-face { + font-family: 'Lato'; + font-weight: thin; + font-style: normal; + src: url('../fonts/lato/Lato-Light.ttf'); +} + +@font-face { + font-family: 'Lato'; + font-weight: thin; + font-style: italic; + src: url('../fonts/lato/Lato-ThinItalic.ttf'); +} + +@font-face { + font-family: 'DM Mono'; + font-weight: normal; + font-style: normal; + src: url('../fonts/dm-mono/DMMono-Regular.ttf'); +} + +@font-face { + font-family: 'DM Mono'; + font-weight: normal; + font-style: italic; + src: url('../fonts/dm-mono/DMMono-Italic.ttf'); +} + +@font-face { + font-family: 'DM Mono'; + font-weight: medium; + font-style: italic; + src: url('../fonts/dm-mono/DMMono-MediumItalic.ttf'); +} + +@font-face { + font-family: 'DM Mono'; + font-weight: medium; + font-style: normal; + src: url('../fonts/dm-mono/DMMono-Medium.ttf'); +} + +@font-face { + font-family: 'DM Mono'; + font-weight: light; + font-style: normal; + src: url('../fonts/dm-mono/DMMono-Light.ttf'); +} + +@font-face { + font-family: 'DM Mono'; + font-weight: light; + font-style: italic; + src: url('../fonts/dm-mono/DMMono-LightItalic.ttf'); +} + +/* Variables */ + +:root { + --primary-font: 'Libre Baskerville', serif; + --secondary-font: 'Lato', sans-serif; + --tertiary-font: 'DM Mono', monospace; +} + +/* Typeset */ + +.md-typeset p { + font-size: max(var(--text-variable-size), var(--text-min-size)); +} + +.md-typeset { + + h1, + h2, + h3, + h4, + h5, + h6 { + font-weight: bold; + } +} + +.md-typeset { + + h1, + h2, + h3 { + font-family: var(--primary-font); + } + + h4, + h5, + h6 { + font-family: var(--secondary-font); + } +} diff --git a/docs/src/stylesheets/_index.css b/docs/src/stylesheets/_index.css new file mode 100644 index 0000000..56ac5ff --- /dev/null +++ b/docs/src/stylesheets/_index.css @@ -0,0 +1,30 @@ +/***************************** +* INDEX +* Styling for index pages. +*****************************/ + +.md-content__inner, +.md-main__inner, +.md-grid, +html, +body, +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +article, +.md-container { + min-height: 100%; + width: 100%; + margin: 0; + padding: 0; +} + +header, +nav, +footer, +.md-content .md-typeset h1 { + display: none !important; +} diff --git a/docs/src/stylesheets/_size.css b/docs/src/stylesheets/_size.css new file mode 100644 index 0000000..e0315b8 --- /dev/null +++ b/docs/src/stylesheets/_size.css @@ -0,0 +1,84 @@ +/***************************** +* SIZE +*****************************/ + +/* Standard screen size is based on 1728x1117 screen. */ +:root { + --text-min-size: 8px; + --text-variable-size: 0.7vw; + --zero: 0; + --full-width: 100vw; + --half-width: 50vw; + --third-width: 33.3vw; + --quarter-width: 25vw; + --fifth-width: 20vw; + --full-height: 100vh; + --half-height: 50vh; + --third-height: 33.3vh; + --quarter-height: 25vh; + --fifth-height: 20vh; + --three-column: repeat(3, 1fr); + --two-column: repeat(2, 1fr); + --horizontal-spacing: 0.3vw; + --vertical-spacing: 0.45vh; +} + +/* Font sizes */ + +.md-typeset { + p { + font-size: max(var(--text-variable-size), var(--text-min-size)); + } + + h1, + h2, + h3, + h4, + h5, + h6 { + letter-spacing: normal; + margin: var(--zero); + } +} + +.md-typeset { + h1 { + font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 6px)); + } + + h2 { + font-size: max(calc(var(--text-variable-size) * 6), calc(var(--text-min-size) + 5px)); + } + + h3 { + font-size: max(calc(var(--text-variable-size) * 4), calc(var(--text-min-size) + 4px)); + } + + h4 { + font-size: max(calc(var(--text-variable-size) * 3), calc(var(--text-min-size) + 3px)); + } + + h5 { + font-size: max(calc(var(--text-variable-size) * 2), calc(var(--text-min-size) + 2px)); + } + + h6 { + font-size: max(calc(var(--text-variable-size) + 5px), calc(var(--text-min-size) + 1px)); + } +} + +/* Default padding and margins */ + +div { + margin: calc(var(--vertical-spacing) * 2) 0; + padding: calc(var(--vertical-spacing) * 2) 0; + + &.no-spacing { + margin: var(--zero); + padding: var(--zero); + } +} + +span { + margin-left: var(--horizontal-spacing); +} diff --git a/docs/src/stylesheets/g.css b/docs/src/stylesheets/g.css index 3bc0e96..169d302 100644 --- a/docs/src/stylesheets/g.css +++ b/docs/src/stylesheets/g.css @@ -1,118 +1,491 @@ -@import "_colours.css"; -@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap"); +@import url(_colours.css); +@import url(_fonts.css); +@import url(_size.css); -/* Body background colour */ +/***************************** +* GENERAL RULES +*****************************/ body { - background: transparent; + background: var(--background); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + width: 100%; } -/* Link colours */ -a { - color: var(--md-primary-fg-color--light); +.md-typeset a:hover { + text-decoration: none; } -a:hover { - color: var(--md-primary-fg-color--dark); - text-decoration: none !important; -} - -/* Bold headings */ - -h1, -h2, -h3, -h4, -h5 { - font-weight: bold !important; -} - -h1 { - color: var(--md-primary-fg-color--dark) !important -} - -/* Paragraph font-size */ -.md-typeset { - font-size: .7rem; -} - -/* Remove the shadow under the header */ .md-header--shadow { box-shadow: none; } -/* Make the logo in the header larger */ -.md-header__button.md-logo img, -.md-header__button.md-logo svg { - height: 2.5rem; -} - -/* Do not display the site title in the header */ .md-header__topic:first-child { display: none; } -/* Use dark colour for the navigation links */ -.md-typeset a, -.md-nav__item .md-nav__link--active { - color: var(--md-primary-fg-color--dark); -} - -/* Underline links in text on hover an focus */ -.md-typeset a:focus, -.md-typeset a:hover { - text-decoration: underline; -} - -/* Change the colour of links on hover and focus */ -.md-nav__link:focus, -.md-nav__link:hover, -.md-typeset .headerlink:focus, -.md-typeset .headerlink:hover, -.md-typeset :target>.headerlink { - color: var(--md-primary-bg-color); -} - -html .md-footer-meta.md-typeset a, -.md-copyright__highlight { - color: var(--md-primary-bg-color); -} - -html .md-footer-meta.md-typeset a:hover, -html .md-footer-meta.md-typeset a:focus { - color: var(--md-primary-fg-color--dark); -} - -/* Make the footer background white and the content dark */ -.md-footer, -.md-footer-meta { - background-color: var(--md-primary-fg-color); - color: var(--md-primary-bg-color); -} - -/* Change colour of search highlighting */ - +/* Change colour of search highlighting. */ .md-search-result__link:focus, .md-search-result__link:hover { - background-color: #E6E6E6; + background-color: var(--secondary-colour); } .md-typeset mark { - background-color: var(--md-accent-fg-color); + background-color: var(--secondary-colour); } -/* Hide stars and forks in git section */ -li.md-source__fact.md-source__fact--stars, -li.md-source__fact.md-source__fact--forks { - display: none !important; +/* This was creating an annoying space at the top. */ +article.md-content__inner.md-typeset:before, +article.md-content__inner.md-typeset:after { + content: none; } -/* Fixing admonitions */ +/***************************** +* HERO TEXT +*****************************/ -.admonition { - border: none !important; +.hero-text { + flex: 1; + min-width: fit-content; + height: 50vh; + display: inline-block; + flex-direction: row; + justify-content: center; + padding: 5em; + font-family: var(--primary-font); + text-align: left; + margin: var(--zero); + + h2 { + margin-bottom: 0.1em; + overflow: hidden; + border-right: .15em solid var(--tertiary-colour); + white-space: nowrap; + letter-spacing: .05em; + animation: + typing 5s steps(40, end) forwards 2s, + blink-caret 0.75s step-end infinite; + } + + h4#hover-text { + font-weight: normal; + opacity: 0; + transition: opacity 0.5s ease-out; + + &.fade-in { + opacity: 1; + } + + &.leave { + opacity: 0; + } + } + + .accent-divider { + background-color: var(--secondary-colour); + width: 100%; + height: 10px; + margin: 1em 0; + } } -.admonition>p:nth-child(2) { - background-color: white !important; +@keyframes typing { + from { + width: 0 + } + + to { + width: 100% + } +} + +@keyframes blink-caret { + + from, + to { + border-color: transparent; + } + + 50% { + border-color: var(--tertiary-colour); + } +} + +/***************************** +* INDEX FACES +*****************************/ + +.faces { + display: flex; + justify-content: space-between; + width: 80vw; + height: 30vh; +} + +.face { + width: 100%; + height: 33.33vh; + position: relative; + overflow: hidden; + transition: all 0.5s ease; +} + +.face:hover { + filter: invert(50%); +} + +.face img { + width: 100%; + height: 100%; + object-fit: contain; + opacity: 0; + transform: scale(0.9); + transition: all 2s ease-out forwards; +} + +.face.active img { + animation: fadeIn 2s ease-out forwards; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + transform: scale(0.9); + } + + 100% { + opacity: 1; + transform: scale(1); + } +} + +@media (max-width: 768px) { + .faces { + flex-direction: column; + } +} + +/***************************** +* PAGE LOADER +*****************************/ + +#loader { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: var(--secondary-colour); + display: flex !important; + justify-content: center; + align-items: center; + z-index: 9999; + transition: opacity 1s ease-out, transform 0.5s ease-out; + margin: 0; + padding: 0; +} + +#loader.fade-out { + opacity: 0; + transform: scale(1.1); +} + +#loader img { + width: 50px; + height: 50px; + +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +#loading-text { + font-family: var(--secondary-font); + font-size: 24px; + color: black; + animation: pulse 1s ease-in-out infinite; +} + +@keyframes pulse { + 0% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + transform: scale(1); + } + + to { + opacity: 0; + transform: scale(1.1); + } +} + +.fade-out { + animation: fadeOut 1s ease-out forwards; +} + + +/* */ + +.resume-icon-meta { + font-size: max(1vw, 8px); + color: var(--tertiary-colour); + text-align: left; + display: flex; + justify-content: left; + gap: 0.5rem; +} + +.resume-icon-meta>div, +.resume-icon-meta>a { + margin-right: 2em; + display: flex; + align-items: center; + font-family: var(--secondary-font); +} + +svg { + width: 30px; + height: auto; + margin-right: 0.3rem; +} + +span { + font-size: 1rem; +} + +.annotate { + color: transparent; + font-size: small; +} + + +.md-annotation:not([hidden]) { + line-height: inherit; +} + + +.md-tooltip__inner { + font-family: var(--secondary-font); +} + +.logo-and-title { + display: inline-block; +} + +.logo-and-title img { + height: max(12px, 0.5vh); + margin-right: 10px; +} + +.logo-and-title h4 { + display: inline-block; + font-family: var(--secondary-font); + margin-right: 5px; + font-size: max(16px, inherit); +} + +.tabbed-labels { + font-family: var(--secondary-font); +} + +.md-typeset .tabbed-labels>label { + font-size: max(1.7vw, 8px); +} + + +.tabbed-content { + background-color: #FAF9F6; +} + +div.tabbed-block { + padding: 3em; +} + +div.status-green { + background-color: #007a5a; + color: var(--background-colour); + border-radius: 5px; + padding: 5px 15px; + text-transform: uppercase; + font-family: var(--secondary-font); + font-weight: 900; + font-size: 0.8em; + width: fit-content; + margin: 0; + letter-spacing: 0.3em; +} + +.tabbed-labels>label:nth-child(1) { + margin-left: 3vw; +} + +.tabbed-labels>label:nth-child(2) { + margin-left: 18vw; +} + +.tabbed-labels>label:nth-child(3) { + margin-left: 12vw; +} + +.tabbed-labels>label:nth-child(4) { + margin-left: 21vw; +} + +.tabbed-labels>label:nth-child(5) { + margin-left: 3vw; +} + +span.md-annotation__index { + font-size: inherit; +} + + +div.tags { + font-size: max(9px, 0.8em); + font-style: italic; + color: var(--tertiary-colour); +} + +.grid-3col-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + max-width: 1500px; + padding: 20px 20px 20px 0; + width: 100vw; +} + +/* Center content within columns */ +.grid-3col-item { + justify-self: center; + min-height: 150px; + padding: 20px; + text-align: left; +} + +.grid-3col-item:nth-child(1) { + padding-left: 0; +} + +.grid-3col-item:nth-child(2) { + border-left: 1px solid var(--secondary-colour); + border-right: 1px solid var(--secondary-colour); +} + +/* Responsive design */ +@media (max-width: 768px) { + .grid-3col-container { + grid-template-columns: 1fr; + } + + .grid-3col-item:nth-child(1) { + padding-left: 20px; + } + + .grid-3col-item:nth-child(2) { + border: none; + } +} + +/* Optional: Add some styling to the content */ +.grid-3col-content { + font-size: 1.2em; + margin-top: 10px; +} + +p.blurb { + margin: 20px 0; + font-size: 1.5em; +} + +div.resume-footer { + margin: 30px 0 10px 0; + display: flex; + justify-content: space-between; + align-items: center; +} + +.version { + transform: rotate(180deg); + font-size: 8px; + margin-left: 20px; + writing-mode: vertical-rl; + font-family: var(--secondary-font); +} + +.resume-footer-menu { + display: flex; + justify-content: center; + gap: 3em; + color: var(--primary-colour); + margin-left: 2em; +} + + +.resume-footer-menu .technical {} + +span.visual { + text-decoration: none; + transition: all 0.3s ease; +} + + + +span.visual:hover { + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-thickness: 3px; + text-decoration-color: var(--secondary-colour); + transition: text-decoration 0.3s ease; +} + +.portfolio>.grid-3col-container { + margin: 30px auto; + border-bottom: 1px solid var(--secondary-colour); + grid-template-columns: repeat(2, 1fr); + max-width: 1500px; + padding: 20px 20px 20px 0; + width: 100vw; +} + +.portfolio>.grid-3col-item>.grid-3col-content { + display: flex; + justify-content: center; + align-items: center; + min-height: fit-content; + gap: 1rem; +} + +.portfolio .grid-3col-item:nth-child(2) { + border: none; +} + +.portfolio h4 { + font-size: 3em; + color: var(--secondary-colour); + /* text-transform: uppercase; */ + font-family: var(--secondary-font); + text-align: center; } diff --git a/docs/src/stylesheets/index.css b/docs/src/stylesheets/index.css deleted file mode 100644 index 99fc32f..0000000 --- a/docs/src/stylesheets/index.css +++ /dev/null @@ -1,213 +0,0 @@ -@import url(_colours.css); -@import url("https: //api.fonts.coollabs.io/css2?family=Lato:wght@300;400;700;900&family=Libre+Baskerville&family=DM+Mono:wght@400;500&display=swap"); - -header, -nav, -footer, -.md-content .md-typeset h1 { - display: none !important; -} - -article, -.md-container { - min-height: 100vh; - width: 100%; - margin: 0; - padding: 0; -} - -.md-content__inner, -.md-main__inner, -.md-grid, -html, -body, -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -.md-grid { - max-width: none; -} - -/* This was creating an annoying space at the top */ -article.md-content__inner.md-typeset:before, -article.md-content__inner.md-typeset:after { - content: none; -} - -body { - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background-color: white; - width: 100%; -} - -.container { - width: 100%; - height: 100%; -} - -.columns { - display: flex; - justify-content: space-between; - width: 100%; - height: 50vh; -} - -.top-row { - flex: 1; - min-width: 100vw; - height: 50vh; - display: flex; - flex-direction: row; - justify-content: center; - padding: 5em; - font-family: 'Libre Baskerville', serif; -} - -.top-row h2 { - margin-bottom: 0.1em; - font-size: 5vw; - font-weight: 900; - overflow: hidden; - border-right: .15em solid #818589; - white-space: nowrap; - letter-spacing: .05em; - animation: - typing 5s steps(40, end) forwards 2s, - blink-caret 0.75s step-end infinite; -} - -@keyframes typing { - from { - width: 0 - } - - to { - width: 100% - } -} - -@keyframes blink-caret { - - from, - to { - border-color: transparent; - } - - 50% { - border-color: #818589; - } -} - -.top-row p { - font-size: 3vw; - color: #818589; -} - -.top-row * { - text-align: left; -} - -/* Image Container Styling */ -.image-container { - width: 100%; - height: 33.33vh; - position: relative; - overflow: hidden; -} - -.image-container:hover { - filter: invert(50%); -} - -.image-container img { - width: 100%; - height: 100%; - object-fit: contain; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .columns { - flex-direction: column; - } -} - -#loader { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: #EFE5DC; - display: flex !important; - justify-content: center; - align-items: center; - z-index: 9998; - transition: opacity 1s ease-out, transform 0.5s ease-out; -} - -#loader.fade-out { - opacity: 0; - transform: scale(1.1); -} - -#loader img { - width: 50px; - height: 50px; - -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -#loading-text { - font-family: Arial, sans-serif; - font-size: 24px; - color: black; - /* Change text color if needed */ - animation: pulse 1s ease-in-out infinite; -} - -@keyframes pulse { - 0% { - opacity: 1; - } - - 50% { - opacity: 0.5; - } - - 100% { - opacity: 1; - } -} - -/* Add fade-out animation */ -@keyframes fadeOut { - from { - opacity: 1; - transform: scale(1); - } - - to { - opacity: 0; - transform: scale(1.1); - } -} - -.fade-out { - animation: fadeOut 1s ease-out forwards; -} diff --git a/docs/src/the-jupiter-drawing-room-logo-119x118.png b/docs/src/the-jupiter-drawing-room-logo-119x118.png new file mode 100644 index 0000000..804ac3b Binary files /dev/null and b/docs/src/the-jupiter-drawing-room-logo-119x118.png differ diff --git a/docs/src/yoco-logo-206x206.png b/docs/src/yoco-logo-206x206.png new file mode 100644 index 0000000..a73f05d Binary files /dev/null and b/docs/src/yoco-logo-206x206.png differ diff --git a/docs/technical.md b/docs/technical.md index e69de29..2b98dbb 100644 --- a/docs/technical.md +++ b/docs/technical.md @@ -0,0 +1,3 @@ +--- +title: Gugulethu Hlekwayo | Technical +--- diff --git a/mkdocs.yml b/mkdocs.yml index 739bc14..bf3bcf4 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -45,11 +45,17 @@ markdown_extensions: - attr_list # Allows creating footonotes. [https://squidfunk.github.io/mkdocs-material/reference/footnotes/?h=footnotes#footnotes] - footnotes + # Write Markdown in HTML. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown/#markdown-in-html] + - md_in_html # Improves handling of emphasis in MarkDown. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/?h=bet#betterem] - pymdownx.betterem: smart_enable: all + # Add captions to any block of content. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#caption] + - pymdownx.blocks.caption # Enable carets in MarkDown. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/?h=bet#betterem] - pymdownx.caret + # Add editing marks in the text using Markdown. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#critic] + - pymdownx.critic # Makes admonitions collapsible. [https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/#details] - pymdownx.details - pymdownx.emoji: @@ -103,6 +109,8 @@ nav: - Resumé: resume.md plugins: + # Plugin to enable the blog feature. [https://squidfunk.github.io/mkdocs-material/setup/setting-up-a-blog/#built-in-blog-plugin] + - blog # Plugin to display a lightbox for clicked images. [https://github.com/Blueswen/mkdocs-glightbox] - glightbox: background: white @@ -110,8 +118,7 @@ plugins: width: 100% height: auto slide_effect: fade - skip_classes: - - skip-lightbox + manual: true # Plugin to use variables and macros across the docs. [https://github.com/fralau/mkdocs-macros-plugin] - macros: on_undefined: strict @@ -181,6 +188,7 @@ theme: code: DM Mono # Icons to use for different tags and the repo. icon: + annotation: material/plus-circle-outline repo: material/git tag: analyse: material/finance @@ -206,7 +214,7 @@ theme: palette: scheme: default primary: custom - accent: indigo + accent: custom # Properties to validate and return messages for in the build process. validation: