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