Setting up the page¶

Info

mkdocs.yml
custom css
custom js (/docs/js/custom.js)
override, see Customization settings

Email¶

replace with your email in 2 places

Replace the placeholder with your own email in 2 places. Click on the signs in the code below

1. in the mkdocs.yml file

extra:
social:
    - icon: fontawesome/solid/paper-plane
      link: mailto:firstname.lastname@hamk.fi #(1)!

Replace with your email

2. in the /js/custom.js file, line 24
document.addEventListener('DOMContentLoaded', function() {
    const ellipsisContainer = document.querySelector('.md-search');
    if (ellipsisContainer) {
        const mailtoLink = document.createElement('a');
        mailtoLink.href = '#';
        mailtoLink.classList.add('custom-email-link');

        // Create a text node saying 'Feedback''
        const textNode = document.createTextNode('Feedback');

        // Create an icon element
        const icon = document.createElement('i');
        icon.classList.add('far', 'fa-envelope'); // 'far' for Regular (outlined) envelope, 'fas' for solid (S)
        icon.setAttribute('aria-hidden', 'true');

        // Append the icon and text node to the link element
        mailtoLink.appendChild(icon);
        mailtoLink.appendChild(textNode);

        mailtoLink.addEventListener('click', function(event) {
            event.preventDefault();
            const subject = 'HAMK New BYOD feedback';
            const body = `I have some feedback about the page titled: ${document.title} at the URL: ${window.location.href}`;
            const mailtoURL = /*(1)!*/ `mailto:firstname.lastname@hamk.fi?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
            window.location.href = mailtoURL;
        });
        ellipsisContainer.appendChild(mailtoLink);
    }
});

Replace with your email

Basic MkDocs commands¶

mkdocs -h - Print help message.
mkdocs build - Build the documentation site.
mkdocs serve - Start the live-reloading docs server.
mkdocs gh-deploy - Deploy the documents from github page.

for automatic deployment using githubaction

View the documentation on Publishing your site with GitHub Actions

Search function¶

documentation: Setting up site search

MkDocs-material Setting up site search

mkdocs.yml

theme:
  features:
    - search
    - search.sidebar
    - search.suggest
    - search.highlight
    - search.share
# the below is not used in this project
plugins: # if plugins off, search still works with the feature settings above
  - search # must be on if plugins on

Theme, color, font, and mode¶

Custom CSS¶

mkdocs.yml

extra_css:
  - css/custom.css # for further customization.

Overriding¶

and more Customization settings.

Changing the color¶

Changing the color

HAMK branding and themes¶

HAMK documentation

1 hamkin-brandi
2 mediapankki
3 hamk-renewed-its-brand
4 hamk.mediaflowportal

HAMK colors¶

documentation

MkDocs-material Changing the colors and MkDocs root css color variables

HAMK colors

HAMK dark blue  = HEX #003755 = rgb(0, 55, 85)
HAMK pink = HEX #7300F0 = rgb(115, 0, 240)
HAMK light pink = HEX #D7AFFF = rgb(215, 175, 255)

HAMK logo & favicon¶

documentation

MkDocs-material Changing the logo and icons

HAMK logo (white on transparent) used as logo and favicon.
Other HAMK logo, black on transparent

Logo and Favicon:

mkdocs.yml

theme:
  name: material
  logo: assets/logo_light_pink.png # or logo_white.png
  favicon: assets/favicon/favicon.png

HAMK fonts¶

documentation

MkDocs-material Changing the fonts

Customizing: h elements (TT Rounds Neue DemiBold) vs body (Inter).

CSS settings for font families (from the HAMKin brandi page)

TT Rounds Neue DemiBold, actual settings of this site

:root { /* from the hamkin-brandi page, together with guidance in the .pptx file */
    --font-family-sans: 'Inter', Helvetica, Arial, sans-serif; 
    --font-family-serif: 'TT Rounds Neue DemiBold', 'Arial Rounded MT', serif; 
}
@font-face {/* adapted from the HAMK font .zip file */
    font-family: 'TT Rounds Neue DemiBold';
    src: url('../assets/fonts/tt_rounds_neue_demibold-webfont.woff2') format('woff2'),
         url('../assets/fonts/tt_rounds_neue_demibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {/* from the HAMK font .zip file. The Condensed (Narrowed) is not used */
    font-family: 'TT Rounds Neue Condensed DemiBold';
    src: url('../assets/fonts/tt_rounds_neue_condensed_demibold-webfont.woff2') format('woff2'),
         url('../assets/fonts/tt_rounds_neue_condensed_demibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Inter (from Google Font), actual settings of this site

extra_css:
  - https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap

Dark mode as default¶

documentation

MkDocs-material Color palette toggle

To set dark mode as default:
put - scheme: slate as the 1st scheme in palette (when the user first visits our site, the media queries are evaluated in the order of their definition.)

Permalink¶

Permalink (permalink) inserts an anchor link with the symbol ¶ at the end of each headline, directly link to a subpart of the document, for easy sharing.
mkdocs.yml to use permalink
```
markdown_extensions:
  - toc:
      permalink: true
```