From 902ef29de95dbd96e5874a94e95d279cd5cb97b5 Mon Sep 17 00:00:00 2001 From: Igor Laborie Date: Mon, 7 Jan 2019 22:59:10 +0100 Subject: [PATCH] fix responsive --- .../assets/style/pages/_home.scss | 30 +++++++++- .../assets/style/pages/_session.scss | 10 +++- .../assets/style/partials/_base.scss | 8 +++ .../assets/style/partials/_header.scss | 57 ++++++++++++++++++- .../assets/style/partials/_tickets.scss | 14 +++-- .../layouts/partials/header.html | 5 ++ 6 files changed, 116 insertions(+), 8 deletions(-) diff --git a/test-hugo/themes/devfest-theme-hugo/assets/style/pages/_home.scss b/test-hugo/themes/devfest-theme-hugo/assets/style/pages/_home.scss index cd40a6d..7ea3279 100644 --- a/test-hugo/themes/devfest-theme-hugo/assets/style/pages/_home.scss +++ b/test-hugo/themes/devfest-theme-hugo/assets/style/pages/_home.scss @@ -23,6 +23,7 @@ display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 2rem; + width: 100%; } .number { @@ -46,7 +47,6 @@ } section.speakers { - ul { list-style: none; display: flex; @@ -54,6 +54,10 @@ align-items: flex-start; flex-wrap: wrap; + li { + margin: var(--space-4); + } + // Keep only 4 first speakers li:nth-child(n+5) { display: none; @@ -100,4 +104,28 @@ } } } +} + +@media (max-width: 60rem) { + + .home { + .jumbo .inner h1 { + img { + max-width: 100%; + } + font-size: 1.5rem; + } + + section.info>div { + flex-direction: column; + } + + section.location .description { + position: relative; + top: unset; + bottom: unset; + right: unset; + width: 100%; + } + } } \ No newline at end of file diff --git a/test-hugo/themes/devfest-theme-hugo/assets/style/pages/_session.scss b/test-hugo/themes/devfest-theme-hugo/assets/style/pages/_session.scss index d844085..12afb23 100644 --- a/test-hugo/themes/devfest-theme-hugo/assets/style/pages/_session.scss +++ b/test-hugo/themes/devfest-theme-hugo/assets/style/pages/_session.scss @@ -54,6 +54,7 @@ display: grid; grid-template-columns: 2fr 1fr; grid-gap: var(--space-3); + //grid header { grid-column: 1 / -1; @@ -65,6 +66,7 @@ h1 { flex-grow: 1; } + .tags { margin-right: 1ch; white-space: nowrap; @@ -118,7 +120,6 @@ } } - .media { grid-column: 1 / -1; @@ -129,5 +130,12 @@ } } +} +@media (max-width: 60rem) { + .page.talks { + .talk { + grid-template-columns: 1fr; + } + } } \ No newline at end of file diff --git a/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_base.scss b/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_base.scss index ca8ffdf..0630e9f 100644 --- a/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_base.scss +++ b/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_base.scss @@ -51,4 +51,12 @@ a, a:visited { .language.english::before { content: '🇬🇧'; +} + +.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ + position: absolute !important; + height: 1px; width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); } \ No newline at end of file diff --git a/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_header.scss b/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_header.scss index 687b62d..66d0b4d 100644 --- a/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_header.scss +++ b/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_header.scss @@ -1,5 +1,4 @@ body > header { - // FIXME responsive position: fixed; top: 0; @@ -8,7 +7,7 @@ body > header { display: flex; justify-content: space-between; align-items: center; - height: var(--toolbar-height); + min-height: var(--toolbar-height); padding: 0 var(--container-margin); box-shadow: 0 var(--space-1) var(--space-2) var(--darken-1); background: var(--primary); @@ -18,6 +17,30 @@ body > header { height: calc(var(--toolbar-height) - (2 * var(--space-2))); } + label { + display: none; + --size: 1.5rem; + height: var(--size); + width: var(--size); + opacity: .5; + padding: .1em; + border: var(--space-2) solid transparent; // Extending the hit area + outline-offset: var(--space-2); + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + background-image: url('data:image/svg+xml;utf8,'); + + &:hover, &:focus { + opacity: 1; + outline: thin dotted currentColor; + } + } + + input[type=checkbox]:checked ~ label { + background-image: url('data:image/svg+xml;utf8,'); + } + nav { display: flex; align-items: center; @@ -43,8 +66,38 @@ body > header { &.active { opacity: 1; border-bottom-color: currentColor; + } + } + } +} +@media (max-width: 60rem) { + body > header { + flex-wrap: wrap; + + label { + display: block; + } + + nav { + display: none; + width: 100%; + background: var(--primary); + flex-direction: column; + justify-content: flex-start; + + a { + width: 100%; + + &.active { + border-bottom-width: thin; + border-bottom-color: var(--lighten-2); + } } } + + input[type=checkbox]:checked ~ nav { + display: block; + } } } diff --git a/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_tickets.scss b/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_tickets.scss index ca8df34..6a06ce7 100644 --- a/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_tickets.scss +++ b/test-hugo/themes/devfest-theme-hugo/assets/style/partials/_tickets.scss @@ -1,12 +1,18 @@ .tickets ul { list-style: none; - display: grid; - grid-auto-columns: 1fr; - grid-gap: var(--space-4); - grid-auto-flow: column; // FIXME responsive + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + width: 100%; + + li { + flex-basis: 15rem; + } li .ticket { + margin: var(--space-4); padding: 2rem var(--space-3); border: thin solid var(--darken-1); box-shadow: var(--space-1) var(--space-1) var(--space-2) var(--darken-2); diff --git a/test-hugo/themes/devfest-theme-hugo/layouts/partials/header.html b/test-hugo/themes/devfest-theme-hugo/layouts/partials/header.html index 1bd8e5d..bf5c0d3 100644 --- a/test-hugo/themes/devfest-theme-hugo/layouts/partials/header.html +++ b/test-hugo/themes/devfest-theme-hugo/layouts/partials/header.html @@ -5,6 +5,10 @@ + + + + + \ No newline at end of file