diff options
author | Olivier Fredon <the2ne@gmail.com> | 2016-10-20 18:29:22 +0300 |
---|---|---|
committer | Olivier Fredon <the2ne@gmail.com> | 2016-10-20 18:29:22 +0300 |
commit | 6a6a0aa92eb83e4f8c3cfc5fc729ecaffad2c63a (patch) | |
tree | 96652d50e54a5c2bf8f0a9b8611b4b850c2dbfd8 | |
parent | 5c20eb5a6adac1d4566fa11f167960213218069c (diff) | |
parent | b91bb4e67e3242cfb196ce7923a4622db5f4d931 (diff) |
Merge branch 'nav-mobile'
-rw-r--r-- | layouts/partials/navigation.html | 10 | ||||
-rw-r--r-- | static/css/style.css | 174 | ||||
-rw-r--r-- | static/sass/core.scss | 5 | ||||
-rw-r--r-- | static/sass/custom/breakpoints.scss | 13 | ||||
-rw-r--r-- | static/sass/custom/global.scss | 32 | ||||
-rw-r--r-- | static/sass/custom/layout.scss | 68 | ||||
-rw-r--r-- | static/sass/custom/navigation.scss | 85 | ||||
-rw-r--r-- | static/sass/custom/typography.scss | 22 |
8 files changed, 310 insertions, 99 deletions
diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html index 43ed174..a94fc91 100644 --- a/layouts/partials/navigation.html +++ b/layouts/partials/navigation.html @@ -1,22 +1,24 @@ <nav class="menu" role="navigation" id="main-menu"> + <input type="checkbox" id="menu"> + <label for="menu" onclick>Menu</label> <ul class="menu__items"> {{ if .Site.Menus.main }} {{ range .Site.Menus.main }} - <li class="item"><a href="{{.URL}}">{{ .Name }}</a></li> + <li><a href="{{.URL}}">{{ .Name }}</a></li> {{ end }} {{ end }} {{ if .Site.Params.twitter }} - <li class="item twitter"> + <li class="twitter"> <a href="https://twitter.com/{{ .Site.Params.twitter }}" title="Follow me">Twitter</a> </li> {{ end }} {{ if .Site.Params.github }} - <li class="item github"> + <li class="github"> <a href="https://github.com/{{ .Site.Params.github }}" title="Fork me">GitHub</a> </li> {{ end }} {{ if .Site.Params.linkedin }} - <li class="item linkedin"> + <li class="linkedin"> <a href="https://fr.linkedin.com/in/{{ .Site.Params.linkedin }}" title="About me">LinkedIn</a> </li> {{ end }} diff --git a/static/css/style.css b/static/css/style.css index 924f140..e91623f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -425,6 +425,32 @@ img { -ms-interpolation-mode: bicubic; } +body { + -webkit-animation: bugfix infinite 1s; +} + +@-webkit-keyframes bugfix { + from { + padding: 0; + } + to { + padding: 0; + } +} + +.visua11y-hidden { + border: 0; + clip: rect(1px 1px 1px 1px); + /* for Internet Explorer */ + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + width: 1px; + margin: -1px; + padding: 0; + position: absolute; + overflow: hidden; +} + a { color: #C44741; } @@ -463,67 +489,35 @@ code { padding: .5em 1.5em; } -.visua11y-hidden { - border: 0; - clip: rect(1px 1px 1px 1px); - /* for Internet Explorer */ - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - width: 1px; - margin: -1px; - padding: 0; - position: absolute; - overflow: hidden; -} - html { background-color: #FFFFFF; } -.header-wrapper { +.header-wrapper .headline { background-color: #E5E1D1; - display: table; padding: .5em 1.5em; - width: 100%; } .header-wrapper a { text-decoration: none; } -.header-wrapper .headline, -.header-wrapper .menu { - display: table-cell; - vertical-align: middle; -} - -.header-wrapper .headline { - text-align: left; -} - -.header-wrapper .menu { - text-align: right; -} - .menu__items { list-style-type: none; margin: 0; padding: 0; } -.menu__items .item { - display: inline-block; -} - -.menu__items .item + .item { - margin-left: .5em; +.menu__items a { + background-color: #C44741; + color: #E5E1D1; + display: block; + padding: .5em 1.5em; + text-decoration: none; } -.menu__items .item + .item::before { - color: #FFFFFF; - content: "|"; - display: inline-block; - margin-right: 0.5em; +.menu__items a:hover { + background-color: #77201C; } .content { @@ -633,6 +627,102 @@ html { margin-right: 0.5em; } +@media screen and (min-width: 60em) { + .header-wrapper { + background-color: #E5E1D1; + display: table; + padding: .5em 1.5em; + width: 100%; + } + .header-wrapper .headline { + padding: 0; + } + .header-wrapper .headline, + .header-wrapper .menu { + display: table-cell; + vertical-align: middle; + } + .header-wrapper .headline { + text-align: left; + } + .header-wrapper .menu { + text-align: right; + } +} + +.menu input[type=checkbox] { + position: absolute; + top: -9999px; + left: -9999px; +} + +.menu label { + cursor: pointer; + user-select: none; + color: #C44741; + line-height: 1; + text-transform: uppercase; + position: absolute; + top: 1.5em; + right: 1.5em; +} + +.menu label:hover { + color: #77201C; +} + +.menu label:before { + color: #FFFFFF; + content: "\2261"; + display: inline-block; + font-size: 1.5em; + font-weight: bold; + margin-right: .25em; +} + +.menu .menu__items { + display: none; +} + +.menu input:checked ~ .menu__items { + display: block; +} + +@media screen and (min-width: 60em) { + .menu label { + display: none; + } + .menu .menu__items { + display: block; + list-style-type: none; + margin: 0; + padding: 0; + } + .menu .menu__items li { + display: inline-block; + } + .menu .menu__items li + li { + margin-left: .5em; + } + .menu .menu__items li + li::before { + color: #FFFFFF; + content: "|"; + display: inline-block; + margin-right: 0.5em; + } + .menu .menu__items a { + background-color: transparent; + color: #C44741; + display: inline; + padding: 0; + text-decoration: none; + } + .menu .menu__items a:hover { + background-color: transparent; + color: #77201C; + } +} + html { color: #2C343B; font-size: 1em; @@ -646,7 +736,7 @@ html { .headline__title { color: #C44741; - display: block; + display: inline-block; font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; font-size: 1.5em; font-weight: bold; diff --git a/static/sass/core.scss b/static/sass/core.scss index 6030ee9..2c88091 100644 --- a/static/sass/core.scss +++ b/static/sass/core.scss @@ -6,6 +6,7 @@ "vendor/normalize", "custom/global", "custom/layout", - "custom/typography", - "custom/breakpoints" + "custom/navigation", + "custom/typography" + // "custom/breakpoints" ;
\ No newline at end of file diff --git a/static/sass/custom/breakpoints.scss b/static/sass/custom/breakpoints.scss index a3b109c..0a6bfa3 100644 --- a/static/sass/custom/breakpoints.scss +++ b/static/sass/custom/breakpoints.scss @@ -4,21 +4,10 @@ // Medium breakpoint @media screen and (min-width: 40em) { - h1 { font-size: $fontSize * 3; } - h2 { font-size: $fontSize * 2.5; } - h3 { font-size: $fontSize * 2; } - h4 { font-size: $fontSize * 1.75; } - h5 { font-size: $fontSize * 1.25; } - h6 { font-size: $fontSize * 1; } } // Desktop breakpoint @media screen and (min-width: 60em) { - h1 { font-size: $fontSize * 4.5; } - h2 { font-size: $fontSize * 3; } - h3 { font-size: $fontSize * 2.5; } - h4 { font-size: $fontSize * 2; } - h5 { font-size: $fontSize * 1.5; } - h6 { font-size: $fontSize * 1; } + } diff --git a/static/sass/custom/global.scss b/static/sass/custom/global.scss index c7deaac..1067e07 100644 --- a/static/sass/custom/global.scss +++ b/static/sass/custom/global.scss @@ -13,7 +13,27 @@ img { -ms-interpolation-mode: bicubic; } +// Fix for Android +body { + -webkit-animation: bugfix infinite 1s; +} + +@-webkit-keyframes bugfix { + from { padding: 0; } + to { padding: 0; } +} +// Helpers + +.visua11y-hidden { + border: 0; + clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ + clip: rect(1px, 1px, 1px, 1px); + height: 1px; width: 1px; + margin: -1px; padding: 0; + position: absolute; + overflow: hidden; +} // Links @@ -42,15 +62,3 @@ code { padding: .5em 1.5em; } - -// Helpers - -.visua11y-hidden { - border: 0; - clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ - clip: rect(1px, 1px, 1px, 1px); - height: 1px; width: 1px; - margin: -1px; padding: 0; - position: absolute; - overflow: hidden; -} diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss index 6a99b84..23859ab 100644 --- a/static/sass/custom/layout.scss +++ b/static/sass/custom/layout.scss @@ -9,27 +9,13 @@ html { // header .header-wrapper { - background-color: $neutral; - display: table; - padding: .5em 1.5em; - width: 100%; - - a { - text-decoration: none; - } - - .headline, - .menu { - display: table-cell; - vertical-align: middle; - } - .headline { - text-align: left; + background-color: $neutral; + padding: .5em 1.5em; } - .menu { - text-align: right; + a { + text-decoration: none; } } @@ -39,19 +25,20 @@ html { margin: 0; padding: 0; - .item { - display: inline-block; - } - - .item + .item { - margin-left: .5em; + a { + background-color: $contrast; + color: $neutral; + display: block; + padding: .5em 1.5em; + text-decoration: none; } - .item + .item::before { - @include _separator-before($white, "|"); + a:hover { + background-color: $shadow; } } + // Content .content { margin: 0 auto; @@ -145,4 +132,33 @@ html { .pagination__prev + .pagination__next::before { @include _separator-before($neutral, "|"); } +} + +// Desktop breakpoint +@media screen and (min-width: 60em) { + // header + .header-wrapper { + background-color: $neutral; + display: table; + padding: .5em 1.5em; + width: 100%; + + .headline { + padding: 0; + } + + .headline, + .menu { + display: table-cell; + vertical-align: middle; + } + + .headline { + text-align: left; + } + + .menu { + text-align: right; + } + } }
\ No newline at end of file diff --git a/static/sass/custom/navigation.scss b/static/sass/custom/navigation.scss new file mode 100644 index 0000000..b37bf5d --- /dev/null +++ b/static/sass/custom/navigation.scss @@ -0,0 +1,85 @@ +//// +/// Navigation +//// + +.menu { + input[type=checkbox] { + position: absolute; + top: -9999px; + left: -9999px; + } + + label { + // a like + cursor: pointer; + user-select: none; + // Custom + color: $contrast; + line-height: 1; + text-transform: uppercase; + position: absolute; + top: 1.5em; right: 1.5em; + } + + label:hover { + color: $shadow; + } + + label:before { + color: $white; + content: "\2261"; + display: inline-block; + font-size: $fontSize * 1.5; + font-weight: bold; + margin-right: .25em; + } + + .menu__items { + display: none; + } + + input:checked ~ .menu__items { + display: block; + } +} + +// Desktop breakpoint +@media screen and (min-width: 60em) { + .menu { + label { + display: none; + } + + .menu__items { + display: block; + list-style-type: none; + margin: 0; + padding: 0; + + li { + display: inline-block; + } + + li + li { + margin-left: .5em; + } + + li + li::before { + @include _separator-before($white, "|"); + } + + a { + background-color: transparent; + color: $contrast; + display: inline; + padding: 0; + text-decoration: none; + } + + a:hover { + background-color: transparent; + color: $shadow; + } + } + } +}
\ No newline at end of file diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss index dda018a..9d7df41 100644 --- a/static/sass/custom/typography.scss +++ b/static/sass/custom/typography.scss @@ -15,7 +15,7 @@ html { .headline__title { color: $contrast; - display: block; + display: inline-block; font-family: $fontFamily; font-size: $fontSize * 1.5; font-weight: bold; @@ -34,3 +34,23 @@ h2, h4, h6 { line-height: $baseline - .3; color: $light; } + +// Medium breakpoint +@media screen and (min-width: 40em) { + h1 { font-size: $fontSize * 3; } + h2 { font-size: $fontSize * 2.5; } + h3 { font-size: $fontSize * 2; } + h4 { font-size: $fontSize * 1.75; } + h5 { font-size: $fontSize * 1.25; } + h6 { font-size: $fontSize * 1; } +} + +// Desktop breakpoint +@media screen and (min-width: 60em) { + h1 { font-size: $fontSize * 4.5; } + h2 { font-size: $fontSize * 3; } + h3 { font-size: $fontSize * 2.5; } + h4 { font-size: $fontSize * 2; } + h5 { font-size: $fontSize * 1.5; } + h6 { font-size: $fontSize * 1; } +} |