From e5d69b51d3f804463d179689670099f2ec94f983 Mon Sep 17 00:00:00 2001 From: Hanna Date: Tue, 24 Sep 2019 18:32:27 +0200 Subject: [PATCH] mobile menu --- _includes/block-header-1.html | 6 ++ _includes/block-irma-header-1.html | 27 ++++++++ _includes/head.html | 27 ++++---- css/irma.css | 97 +++++++++++++++++++++------ index.md | 6 +- uploads/non-free/navigation-menu.png | Bin 0 -> 3509 bytes 6 files changed, 130 insertions(+), 33 deletions(-) create mode 100644 _includes/block-irma-header-1.html create mode 100755 uploads/non-free/navigation-menu.png diff --git a/_includes/block-header-1.html b/_includes/block-header-1.html index 6c5b688..d630cd1 100644 --- a/_includes/block-header-1.html +++ b/_includes/block-header-1.html @@ -12,6 +12,12 @@ href="{{ nav_item.link }}">{{ nav_item.link_text }} {% endfor %} + \ No newline at end of file diff --git a/_includes/block-irma-header-1.html b/_includes/block-irma-header-1.html new file mode 100644 index 0000000..bafd66e --- /dev/null +++ b/_includes/block-irma-header-1.html @@ -0,0 +1,27 @@ +
+ + +
+ + + \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index 02ac798..089f116 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,14 +1,17 @@ - - - - - - {% if page.title %}{{ page.title }} - {% endif %}{{ site.title }} - - - - - - + + + + + + + {% if page.title %}{{ page.title }} - {% endif %}{{ site.title }} + + + + + + + + \ No newline at end of file diff --git a/css/irma.css b/css/irma.css index afff5a6..c41c506 100644 --- a/css/irma.css +++ b/css/irma.css @@ -18,30 +18,96 @@ html { max-height: 4.0rem; } -.block-header-1 { - padding: 0.5rem 2rem -} - -header { +/* Responsive navigation from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav */ +.topnav { + overflow: hidden; + background-color: #fff; border-bottom: 1px solid #000; -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.6); background-color: #fff; position: sticky; top: 0; - height: 90px + z-index: 999999; } -.block-header-1--logo { - padding-right: 30px; +.topnav a { + float: left; + color: black; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + display: block; } -.block-header-1 .nav-item { - font-size: 16px; - padding: 0.5rem 0; - font-size: 1.0rem +.topnav .icon { + display: none; + } +#menu { + margin-top: 4px; + /* todo */ +} + + +#hamburger { + max-height: 22px; + /* todo */ +} + + +@media screen and (min-width: 600px) { + #menu { + float: right; + display: flex; + min-height: 90px; + align-items: center; + } +} + + +@media screen and (max-width: 600px) { + .topnav { + position: static; + } + + .topnav .refs { + display: none; + } + + .topnav a.icon { + float: right; + display: block; + margin-top: 22px; + /* todo */ + } +} + +@media screen and (max-width: 600px) { + .topnav.responsive { + position: relative; + } + + .topnav.responsive .icon { + position: absolute; + right: 0; + top: 0; + } + + .topnav.responsive a { + float: none; + display: block; + text-align: left; + } + + #menu a:not(#toggle):hover { + background-color: #ddd; + } +} + + /* Scroll adjustment to make up for sticky header */ .destination { position: absolute; @@ -129,17 +195,10 @@ ul, color: #000000; } -#myTopnav { - display: none; -} /* Adjusting the size of elements */ @media screen and (min-width:700px) { - #myTopnav { - display: block; - } - .block-hero-2 .column.text { -ms-flex: 0 0 50%; flex: 0 0 50% diff --git a/index.md b/index.md index 640e218..4c1b377 100644 --- a/index.md +++ b/index.md @@ -1,13 +1,15 @@ --- layout: blocks -title: Homepage +title: IRMA app lang: en lang-ref: index date: 2017-11-22T23:00:00.000+00:00 page_sections: - template: navigation-header - block: header-1 + block: irma-header-1 logo: "/uploads/non-free/irma_logo@1x.png" + menu: "/uploads/non-free/navigation-menu.png" + url: "/" navigation: - link: "/" link_text: IRMA diff --git a/uploads/non-free/navigation-menu.png b/uploads/non-free/navigation-menu.png new file mode 100755 index 0000000000000000000000000000000000000000..307acfb517fa548875e199ec579046e3a1168577 GIT binary patch literal 3509 zcmdUyeNaL{0oqO)Q z_uO;tyyyKr&pEv_Zi|QOd{+Q~$F{Ape*yppyEx!7eao4@={mg4PT!iC3BW7b^o3*u z-G?2I)NQdFKjmH2DIV=o_bOZW@d8ap2@mr|qRDxlNw`sL`GN5C*&h?G;m^6o{&CKp zys7gg+sH>33(vm`ieBBT9I>;f9n_yjc}xPB5P)Y=#>a?Sq{KuC$RV% z0KWVHpgVD3&UOG|e$PQcxW2@0G#bq}H5$#Z9-(#Yue)WDPfSdN-N{jh8Tm>no7vYK zMa25MvlUXd(v<3_2=Itjni>=jUgL7FDvp@O+;dj~t9?*}w*_16O{Dhn092y&Hv?N% zHj~TT?LHds7TuT4VDxj*6Jx!kwZ5CPe-iTq5p>`Z3&Q3 zE=++U2BU}K-fWnP4|J+Xn{V~3`76C^uFM+M;elQeq70h9XS0h?Q3Yr=B%#Pc*jOj< z8@S0)3T)b@fHdY-QsCXwP?fTZffSK_Q(tL0!kn5xgc$V|bWN;FuNNt`hId=SbB3w+?c{Ts7Yeib= z%<9+HSK`xia`wQ$fx3@Ow5xjS@J0~)nbPDfx6{A+Xcz)dPi0a z@OMIj`)#uFd6mvAQhvQ85&^~6B-(wX!diQA7p?*UZbs3l;}U43Vu^FG7%F`nK0W}A zhD#JIp8L3=Db)>YyM3AL3xE}pQ+STbTL>xtuI>_W+s){)1$bRpfHpLQL-OQux!hl1 zW8`zXkY2beQ_kK=`7;=>;A@ty)w@8VP~0aMvY0O#y(#wNz+^Ht&j&@Jsab9S3pvm` zLYB;)>QIz}pFUwQRzHZ(C1Um{5VY=i$ishnoh4>DCH(DYWP=yl+S&?B+2?}4${XPc z1ms?jkT)FwK*0DPi%EAZ2rZ-6&ca-Gcp6TFfq{X!hd>qf43xWI6BF4p0iq#eJA=`D z5+vLZi&x}ZX>mzNQc@C3*?$2JH-m2A$S5>tT*5iAIDg;D7R%_C=(3KM%>XML7#w_1 zfBMeWdqHoTLKYFQmYppcNBc*l97vp{f1_%%oP z^zfl{gA@35PjtG&(agS{Y_ka_i3K)BIm3UpeyI?kr7T5g#89b4w%=VMk~iD@es*iSQLZ|F+@?hr{VKhcPwo z00gbE%cBwV@^>H!zjs6Nn`rpIdL#R!U-G0(CW{i{3|?~GWO-EQ;fV81dbyNc+VT-T z7iyNt%2%2+rSeo4Y>Y=WAx%5FsIBT+QcLmz=w7}OpyfZLl}faQcWuj&Cwf!pLY3yJ z-qg&SY6tEz)v2gyRa@)6X|)&%ri{{^%~m4CS0q|4RdoYE|I%g@&AR9d0;51t50$=J zsyrG48ntdU>4CQcBi2t#EEj!VCgh9^%s7}+(+*}DN4jwAvvyn9P$FV@6TsTMf3MRH zLWMpDQiz->NF6Y0kO8G~-XReDwCWLa*)YP(%$I3>2Zc z;(6G1`gCyv!%w9yXb?cZJ?acF?K?=(Ixn=WtnAwEY4yG2 z_3I%aLg|0eBE?nEC_&15<5Y`XSU+MQE=z*+F)!L_-K&63#1NpyIxF76&Wy;w@G}OH^SyL!bk@k|Ek2QR+ zAegr|C|)ZG$6npLUt5lmWas6$SIx0(!Ul_oeVAO=uk?k zt2@oQ2zXveC`!EJF&9lf^ZuM7{$od-h3Om?9wcvlwqU~^9z2JEZJXm_B{8fM{{p#0 B+(7^U literal 0 HcmV?d00001