Commit b3b743f2 authored by Daniel Juarez's avatar Daniel Juarez 💬
Browse files

Update style and config to match latest s2i-mkdocs-container

Adapt CSS, templates, mkdocs.yaml, and README with instructions
about how to do this in the future, as it will still be required
even if we move to the webeos + GitLab Pages setup
parent 87786c76
Pipeline #2956831 passed with stage
in 2 minutes and 32 seconds
......@@ -62,7 +62,7 @@
background-color: var(--md-primary-fg-color) !important;
}
.md-header .md-header-nav{
.md-header .md-header__inner{
color: white !important;
}
.md-content {
......@@ -93,7 +93,7 @@
height: 3.4rem !important;
}
.md-header .md-header-nav {
.md-header .md-header__inner {
color: black;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
......@@ -182,3 +182,9 @@
.md-footer-nav__source a .md-source__repository{
max-width: 100%;
}
/* Avoid main news content overflowing its div */
.news_block pre {
white-space: pre-wrap;
}
......@@ -12,6 +12,8 @@ edit_uri: 'edit/master/docs'
theme:
name: material
include_search_page: false
search_index_only: true
# Keep old favicon
favicon: 'assets/images/favicon.ico'
# From https://design-guidelines.web.cern.ch/guidelines/logo
......@@ -19,6 +21,14 @@ theme:
language: 'en'
# This dir overrides partials or static pages, i.e. footer and 403 page
custom_dir: theme
# Static files
static_templates:
- 404.html
- 403.html
features:
- search.highlight
- search.share
- search.suggest
extra_css:
# We define our own CERN palette following https://design-guidelines.web.cern.ch/guidelines/colours
......
......@@ -4,11 +4,11 @@ location /linux/scientific4/ {
}
location /scientific4/ {
rewrite ^/(.*)$ http://linux-old.web.cern.ch/linux/$1 permanent;
rewrite ^/(.*)$ http://linux-old.web.cern.ch/linux-old/$1 permanent;
}
location /scientific4 {
return 301 http://linux-old.web.cern.ch/linux/scientific4;
return 301 http://linux-old.web.cern.ch/linux-old/scientific4;
}
location /linux/scientific5/ {
......@@ -16,11 +16,24 @@ location /linux/scientific5/ {
}
location /scientific5/ {
rewrite ^/(.*)$ http://linux-old.web.cern.ch/linux/$1 permanent;
rewrite ^/(.*)$ http://linux-old.web.cern.ch/linux-old/$1 permanent;
}
location /scientific5 {
return 301 http://linux-old.web.cern.ch/linux/scientific5;
return 301 http://linux-old.web.cern.ch/linux-old/scientific5;
}
# Redirect slc6 to archive website
location /linux/scientific6/ {
rewrite ^/(.*)$ http://linux-archive.web.cern.ch/$1 permanent;
}
location /scientific6 {
rewrite ^/(.*)$ http://linux-archive.web.cern.ch/$1 permanent;
}
location /updates/slc6/ {
rewrite ^/(.*)$ http://linux-archive.web.cern.ch/$1 permanent;
}
# Keep linux.web.cern.ch/linux/path urls working, redirecting to ommit the /linux/ part
......@@ -47,5 +60,6 @@ try_files $uri $uri.shtml $uri/ =404;
## Don't show the nginx version number, a security best practice
server_tokens off;
# Use our custom 403 page, a simple copypaste from theme's 404
# Use our custom 40X page, a simple copypaste from theme's 404
error_page 403 /403.html;
error_page 404 /404.html;
{% extends "base.html" %}
{% extends "main.html" %}
{% block content %}
<h1>403 - Forbidden</h1>
<div class="notice_404">You are seeing an archived version of the Linux website. Please check <a href="http://linux.cern.ch">linux.cern.ch</a> for the main version</div>
{% endblock %}
{% endblock %}
\ No newline at end of file
{#-
This file was automatically generated - do not edit
-#}
{% extends "base.html" %}
{% block content %}
<h1>404 - Not found</h1>
<div class="notice_404">You are seeing an archived version of the Linux website. Please check <a href="http://linux.cern.ch">linux.cern.ch</a> for the main version</div>
{% endblock %}
{% extends "main.html" %}
{% block content %}
<h1>404 - Not found</h1>
<div class="notice_404">You are seeing an archived version of the Linux website. Please check <a href="http://linux.cern.ch">linux.cern.ch</a> for the main version</div>
{% endblock %}
{% block disqus %}{% endblock %}
{% import "partials/language.html" as lang with context %}
{#-
Temporarily add a footer for the web replacement
Add Source repo as a link in the footer
Remove the MkDocs Further information section
Based on https://raw.githubusercontent.com/squidfunk/mkdocs-material/7.1.7/src/partials/header.html
-#}
{% import "partials/language.html" as lang with context %}
<div class="notice_footer">You are seeing an archived version of the Linux website. Please check <a href="http://linux.cern.ch">linux.cern.ch</a> for the main version</div>
<!-- Footer -->
<footer class="md-footer">
<!-- Link to previous and/or next page -->
{% if page.previous_page or page.next_page %}
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
{% if page.previous_page %}
<a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-footer-nav__button md-icon">
{% include ".icons/material/arrow-left.svg" %}
</div>
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.previous") }}
</span>
{{ page.previous_page.title }}
</div>
</div>
</a>
{% endif %}
{% if page.next_page %}
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
{{ lang.t("footer.next") }}
</span>
{{ page.next_page.title }}
</div>
<nav
class="md-footer__inner md-grid"
aria-label="{{ lang.t('footer.title') }}"
>
<!-- Link to previous page -->
{% if page.previous_page %}
{% set direction = lang.t("footer.previous") %}
<a
href="{{ page.previous_page.url | url }}"
class="md-footer__link md-footer__link--prev"
aria-label="{{ direction }}: {{ page.previous_page.title }}"
rel="prev"
>
<div class="md-footer__button md-icon">
{% include ".icons/material/arrow-left.svg" %}
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
{{ direction }}
</span>
{{ page.previous_page.title }}
</div>
<div class="md-footer-nav__button md-icon">
{% include ".icons/material/arrow-right.svg" %}
</div>
</a>
{% endif %}
<!-- Link to next page -->
{% if page.next_page %}
{% set direction = lang.t("footer.next") %}
<a
href="{{ page.next_page.url | url }}"
class="md-footer__link md-footer__link--next"
aria-label="{{ direction }}: {{ page.next_page.title }}"
rel="next"
>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
{{ direction }}
</span>
{{ page.next_page.title }}
</div>
</a>
{% endif %}
</nav>
{% if config.repo_url %}
<div class="md-footer-nav__source">
{% include "partials/source.html" %}
</div>
</div>
<div class="md-footer__button md-icon">
{% include ".icons/material/arrow-right.svg" %}
</div>
</a>
{% endif %}
</div>
{% else %}
{% if config.repo_url %}
</nav>
{% endif %}
<!-- Repository information -->
{% if config.repo_url %}
<div class="md-footer-nav__source">
{% include "partials/source.html" %}
</div>
{% endif %}
{% endif %}
</footer>
{#-
Custom, remove source link as we add it on the footer
Based on https://raw.githubusercontent.com/squidfunk/mkdocs-material/7.1.7/src/partials/header.html
-#}
<!-- Header -->
<header class="md-header" data-md-component="header">
<nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
<a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-header-nav__button md-logo" aria-label="{{ config.site_name }}">
<nav
class="md-header__inner md-grid"
aria-label="{{ lang.t('header.title') }}"
>
<!-- Link to home -->
<a
href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
title="{{ config.site_name | e }}"
class="md-header__button md-logo"
aria-label="{{ config.site_name }}"
data-md-component="logo"
>
{% include "partials/logo.html" %}
</a>
<label class="md-header-nav__button md-icon" for="__drawer">
<!-- Button to open drawer -->
<label class="md-header__button md-icon" for="__drawer">
{% include ".icons/material/menu" ~ ".svg" %}
</label>
<div class="md-header-nav__title" data-md-component="header-title">
{% if config.site_name == page.title %}
<div class="md-header-nav__ellipsis md-ellipsis">
{{ config.site_name }}
</div>
{% else %}
<div class="md-header-nav__ellipsis">
<span class="md-header-nav__topic md-ellipsis">
<!-- Header title -->
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
{{ config.site_name }}
</span>
<span class="md-header-nav__topic md-ellipsis">
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
{% if page and page.meta and page.meta.title %}
{{ page.meta.title }}
{% else %}
......@@ -27,13 +43,83 @@
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
<!-- Color palette -->
{% if not config.theme.palette is mapping %}
<form class="md-header__option" data-md-component="palette">
{% for option in config.theme.palette %}
{% set primary = option.primary | replace(" ", "-") | lower %}
{% set accent = option.accent | replace(" ", "-") | lower %}
<input
class="md-option"
data-md-color-media="{{ option.media }}"
data-md-color-scheme="{{ option.scheme }}"
data-md-color-primary="{{ primary }}"
data-md-color-accent="{{ accent }}"
{% if option.toggle %}
aria-label="{{ option.toggle.name }}"
{% else %}
aria-hidden="true"
{% endif %}
type="radio"
name="__palette"
id="__palette_{{ loop.index }}"
/>
{% if option.toggle %}
<label
class="md-header__button md-icon"
title="{{ option.toggle.name }}"
for="__palette_{{ loop.index0 or loop.length }}"
hidden
>
{% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
</label>
{% endif %}
{% endfor %}
</form>
{% endif %}
<!-- Site language selector -->
{% if config.extra.alternate %}
<div class="md-header__option"></form>
<div class="md-select">
{% set icon = config.theme.icon.alternate or "material/translate" %}
<button
class="md-header__button md-icon"
aria-label="{{ lang.t('select.language.title') }}"
>
{% include ".icons/" ~ icon ~ ".svg" %}
</button>
<div class="md-select__inner">
<ul class="md-select__list">
{% for alt in config.extra.alternate %}
<li class="md-select__item">
<a
href="{{ alt.link | url }}"
hreflang="{{ alt.lang }}"
class="md-select__link"
>
{{ alt.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
<!-- Button to open search modal -->
{% if "search" in config["plugins"] %}
<label class="md-header-nav__button md-icon" for="__search">
<label class="md-header__button md-icon" for="__search">
{% include ".icons/material/magnify.svg" %}
</label>
<!-- Search interface -->
{% include "partials/search.html" %}
{% endif %}
</nav>
</header>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment