Sidelayout
==========

Skjermstørrelser
----------------

Layouten er tilpasset mobile enheter.
Vi bruker
`bootstrap sine responsive breakpoints <https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints>`_
for å tilpasse sidene til 3 ulike skjermstørrelser:

* På store skjermer vises navigasjonsmenyen i venstre spalte.
* På mindre skjermer er navigasjonsmenyen skjult bak en hamburgermeny.
* På de aller minste skjermene flyter hamburgerknappen oppå innholdet
  slik at den ikke opptar dyrebar skjermplass.

Rent konkret bruker vi disse breakpoints:

+--------------+---------------------------+------------------------------------+
| Breakpoint   | Brukes typisk på          | Kjennetegn                         |
+==============+===========================+====================================+
| xs           | Mobiltelefon høydeformat  | - Halvgjennomsiktig hamburgerknapp |
|              |                           | - Veldig liten venstremarg         |
|              |                           | - Hamburgerknappen flyter oppå     |
|              |                           |   innholdet                        |
|              |                           | - Bakgrunnen er lys grå, men med   |
|              |                           |   hvit bakgrunn i figurer          |
+--------------+---------------------------+------------------------------------+
| sm           | Mobiltelefon breddeformat | - Ugjennomsiktig hamburgerknapp    |
+--------------+---------------------------+ - Bredere venstremarg              |
| md           | Nettbrett høydeformat     | - Hamburgerknappen ligger i        |
|              |                           |   margen                           |
|              |                           | - Bakgrunnen er helt hvit          |
+--------------+---------------------------+------------------------------------+
| lg           | Nettbrett breddeformat    | - Full meny som kan lukkes         |
+--------------+---------------------------+ - Erstattes da av en               +
| xl           | Bærbar PC                 |   hamburgerknapp                   |
+--------------+---------------------------+------------------------------------+

Skillet mellom å vise full navigasjonsmeny eller skjule den bak en hamburgerknapp
er lagt mellom ``md`` og ``lg`` for at nettbrett-brukere enkelt skal kunne velge om
de ønsker å se menyen eller ikke ved å holde nettbrettet vertikalt eller horisontalt.


Sideoppbygning
--------------

Siden består av et ``<nav>``-element (navigasjonsmeny) og et ``<div>``-element (hovedspalten).
Navigasjonsmenyen skjules ved å posisjonere den til venstre for det synlige området på
skjermen. Den vises/skjules altså ikke ved å sette ``display: {block|none};`` men
ved å justere posisjon og marg, henholdsvis:
::

    nav.sidemeny {
        width: 300px;
        position: fixed;
        left: -300px;
    }
    div.hovedspalte {
        margin-left: 0;
        width: 100%;
    }

når den er skjult, med følgende endringer når den er åpen:
::

    nav.sidemeny {
        left: 0px;
    }
    div.hovedspalte {
        margin-left: 300px;
        width: calc(100% - 300px);
    }

Her bruker vi ``calc()`` for å kunne sette bredden på hovedspalten til 300px smalere
enn hva nå skjermen er. Denne funksjonen er forholdsvis ny,
`men trygg å bruke i følge caniuse.com <https://caniuse.com/#feat=calc>`_.

Ved å sette ``transition: margin-left $delay;`` får vi samtidig animert menyen når den
klikkes på, slik at den sklir inn og ut fra venstre skjermkant med passende hastighet.


Hovedspalten
------------

Hovedspalten ``<div class="hovedspalte">`` består av et ``<nav>``-element
(brødsmulestien) og et ``<article>``-element med hovedinnholdet på siden i.

For at innholdet skal være lesbart og siden skal se pen ut må det settes ``max-width``
for å begrense linjelengde, samt passende venstre/høyremarg.

Vanligvis gjøres dette på det ytterste container-elementet
(``div.hovedspalte`` er nødt til å arve fra Bootstrap sin ``.container-fluid``, jf.
Bootstrap-dokumentasjonen, og da får den også med left/right padding).

Vi ønsker imidlertid å ha muligheten til å la enkeltblokker gå helt ut i skjermkanten,
f.eks at bilder, figurer og andre bokstyper under noen omstendigheter vises uten
padding/marg på venstre eller høyre side. Dette er spesielt relevant for små skjermer.

For å få til dette har vi:

* Fjernet left/right-paddingen som ``div.hovedspalte`` arver fra ``.container-fluid``,
  altså overstyrt denne til å være 0. Hovedspalten dekker dermed hele sidebredden
  uten marg.
* Satt left/right-padding på hvert enkelt element inne i hovedspalten i stedet.
  Hovedspalten inneholder avsnittselementer ``<section>``, som igjen inneholder
  blokkene som skal paddes, så paddingen er satt på direkte barn av avsnittene
  ved hjelp av CSS-regelen ``div.hovedspalte article.innhold section > *``.
  Denne regelen vil gjelde alle HTML-elementer som er immediate/direct child av
  ``<section>`` og som ikke overstyrer paddingen selv.
  Alle innholdsblokker får dermed passende marger automatisk,
  uten å måtte sette margene selv. For avsnittsblokkene rendres ``<section>`` av
  section-templaten, mens de andre blokkene (ingress, lenkeboks nederst på siden, etc.)
  må omsluttes med dette elementet i hovedtemplaten for :ref:`Artikkel`-klassen.

Innholdsblokker som ønsker å dekke hele skjermbredden kan da i sin egen CSS
overstyre left/right-padding med en enda mer spesifikk CSS-regel.
Dette hadde ikke vært mulig hvis paddingen lå på foreldreelementet ``<article>``.

Likedan setter vi ``max-width`` på immediate children av ``<article>``,
for at alle innholdsblokkene skal ha en felles maksimal linjelengde for tekst.
Hadde ``max-width`` blitt satt på foreldreelementet ``<article>``,
kunne ikke innholdsblokkene dekket hele skjermbredden på en bred skjerm.
Dette hadde blitt veldig synlig hvis en innholdsblokk bruker en annen bakgrunnsfarge.
``max-width`` må dermed settes i *rem*, ikke *em*, siden den nå settes på elementer
med forskjellig skriftstørrelse (h1/h2/h3, div, aside, etc.).