{{ page.heading }}
++ 2 lines (on desktop) that stress how important the conference is. Or just a fun headline. +
+
+ + Mention the conference location and dates in one or two lines. Speak to the audience type, e.g. "Django Fans". +
+ +Supportive copy speaking to the line up or topics discussed, generally setting the mood for a successful event. Basically the primary takeaway.
+ +Fond memory from 2019? Share it with us:
+ + +This is a text+icon section, of sorts. It's a way to break up lengthy copy with either an image or icon to the right.
+ +At this point on the page you should be outlining major points or features about the conference and really getting into the meat of the storytelling. Live, laugh, love, all that. Since this page shouldn't feature a ton of copy, this is really your chance to set things up.
+ +This area can be quite long. No more than 3 paragraphs though, all about 3-5 sentences. Everything else after this is catered to a specific audience type. That could be:
+ +-
+
- People who want pictures. +
- Folks getting a feel for conference topics. +
- Sponsors looking for themselves, competitors, or to get a feel for the caliber of sponsor. +
But generally you don't want to end on a list.
+Awesome Talks and Tutorials
+We featured over 60 talks & tutorials this year. Here's some crowd favorites!
+ See the full schedule +{{ post.title }}
+ {% endif %} + + {% if post.presenters %} + {% for presenter in post.presenters %} + + {% endfor %} + {% endif %} + + {% if post.permalink %} + + {% endif %} + {% endunless %} +All Sessions Performed by Amazing People
+Stat Block
+It is very likely that we will want to feature some sort of table or data element. Perhaps this is survey results, or a pie chart of swag selection, etc.
+On mobile this will stack. You will want two paragraphs here, even if the second one is sort of short. The lead class is optional, too.
And remember...
+Under the hood it's all just a grid system. So you can just add a new row if you want to associate more text with this block. Easy peasy, lemon squeezy.
+Lots of Photos
+We took a total over 300 photos this year. Here are some of our favorites. What were some of your favorite moments this year?
+ View all photos +Stat Block
+It is very likely that we will want to feature some sort of table or data element. Perhaps this is survey results, or a pie chart of swag selection, etc.
+On mobile this will stack. You will want two paragraphs here, even if the second one is sort of short. The lead class is optional, too.
And remember...
+Under the hood it's all just a grid system. So you can just add a new row if you want to associate more text with this block. Easy peasy, lemon squeezy.
+DjangoCon 2019 is possible through lots of :heart:
+Sed convallis laoreet elit quis rutrum. Sed fringilla posuere posuere. Curabitur placerat et enim nec commodo. In vehicula nulla vitae odio mattis aliquet.
++ {{ organizer.name }} + {% if organizer.pronouns != blank %} + ({{ organizer.pronouns }}) + {% endif %} +
+ {{ organizer.role }} +A sampling of popular sessions from past years
Using Django, Docker, and Scikit-learn to Bootstrap Your Machine Learning Project
Talk Intermediate -By Lorena Mesa
@@ -175,7 +175,7 @@Using Django, Docker, and Scikit-learn to Bootstrap Your
From 0 to 100 in Django
Tutorial
Beginner
-
By Jeremy Spencer
@@ -196,7 +196,7 @@Build a GraphQL API Using Django
Tutorial Intermediate -By Murange James
@@ -208,7 +208,7 @@Build a GraphQL API Using
Write an API for Almost Anything (or The Amazing Power and Flexibility of Django Rest Framework
Talk
All Levels
-
By Charlotte Mays
@@ -220,7 +220,7 @@Write an API for Almost Anything (or The Amazing Power a
Files in Django
Talk
Beginner
-
By Josh Schneier
diff --git a/_scss/_settings.scss b/_scss/_settings.scss index d66ce858..d7b471c8 100644 --- a/_scss/_settings.scss +++ b/_scss/_settings.scss @@ -606,8 +606,8 @@ $switch-paddle-transition: all 0.25s ease-out; // 32. Table // --------- -$table-background: darken($light-gray, 5%); -$table-color-scale: 5%; +$table-background: #FFF; +$table-color-scale: 8%; $table-border: 1px solid smart-scale($table-background, $table-color-scale); $table-padding: rem-calc(8 10 10); $table-hover-scale: 2%; @@ -616,11 +616,11 @@ $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-h $table-is-striped: true; $table-striped-background: smart-scale($table-background, $table-color-scale); $table-stripe: even; -$table-head-background: smart-scale($table-background, $table-color-scale / 2); +$table-head-background: $brand-color1; $table-head-row-hover: darken($table-head-background, $table-hover-scale); $table-foot-background: smart-scale($table-background, $table-color-scale); $table-foot-row-hover: darken($table-foot-background, $table-hover-scale); -$table-head-font-color: $body-font-color; +$table-head-font-color: $white; $table-foot-font-color: $body-font-color; $show-header-for-stacked: false; diff --git a/_scss/layout/_recap.scss b/_scss/layout/_recap.scss new file mode 100644 index 00000000..4a484353 --- /dev/null +++ b/_scss/layout/_recap.scss @@ -0,0 +1,176 @@ +.recap-header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + min-height: 10rem; + + background-image: url('/static/img/sunrise-post-event.svg'); + background-position: top center; + background-repeat: no-repeat; + background-size: cover; + + h1 { + margin-bottom: 0; + } + + h1:after { + display: none; + } + + @include breakpoint(medium) { + min-height: 14rem; + } +} + + +.recap-heading { + margin: 0 auto $global-margin; + padding: .75rem; + max-width: 46rem; + background: $brand-color2; + text-align: center; + color: #FFF; + + .emoji { + width: 38px; + height: 38px; + } + + @include breakpoint(medium) { + margin-bottom: 3rem; + font-size: 2rem; + } +} + +.recap-intro .social-icons { + margin-top: .5rem; +} + +.recap-intro img { + margin-bottom: $global-margin; +} + +.organizer-block .profile .social-icons a { + color: $brand-color7; +} + + +.highlight-events .events { + flex-flow: row wrap; + justify-content: center; + margin: 0 auto; + max-width: $global-width; +} + +.highlight-events .event { + margin: 0 .5rem 1rem; +} + +.highlight-events-header { + margin-bottom: $global-margin; + width: 100%; + text-align: center; +} + +.highlight-events { + // Override from elsewhere + @include breakpoint(medium) { + .events { + .event, + .event:first-child, + .event:last-child { + width: calc(100% * 1/3 - 1rem); + flex-grow: 0; + } + } + } +} + +.mini-profile { + display: flex; + flex-flow: row wrap; + // A little more padding than usual + padding-right: 30px; + padding-left: 30px; + + @include breakpoint(medium) { + justify-content: center; + } +} + +.mini-profile-block { + // TODO: Hacked padding + padding-right: 0.4807692308rem; + padding-left: 0.4807692308rem; + + .mini-profile-list { + .mini-profile-byline { + display: inline-flex; + margin: 0 1rem 2rem; + } + + .avatar { + max-width: 60px; + } + } + + @include breakpoint(medium) { + .mini-profile-byline { + margin: 0 1.5rem 2rem; + } + + .avatar { + max-width: 80px; + } + } +} + +.photos-block { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + align-items: stretch; + background: $brand-color4; + + &-header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 2rem; + width: 100%; + } + + .photo { + flex: 1 0 auto; + max-width: 100%; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + font-size: 0; + } + + .photo img { + visibility: hidden; + } + + @include breakpoint(medium) { + .photo { + flex: 1 0 33.33%; + } + } + + @include breakpoint(large) { + &-header, + &-header + .photo, + &-header + .photo + .photo { + width: 33.33%; + } + + .photo { + flex: 1 0 25%; + } + } +} diff --git a/_scss/module/_icons.scss b/_scss/module/_icons.scss new file mode 100644 index 00000000..20a24d18 --- /dev/null +++ b/_scss/module/_icons.scss @@ -0,0 +1,39 @@ +.icon { + display: inline-block; + vertical-align: middle; +} + +.icon.float-left { + margin-right: 20px; + margin-bottom: 20px; +} + +.icon.float-right { + margin-bottom: 20px; + margin-left: 20px; +} + +.icon-small { + width: 24px; + height: 24; +} + +.icon-medium { + width: 48px; + height: 48px; +} + +.icon-large { + width: 64px; + height: 64px; +} + +.icon-xlarge { + width: 128px; + height: 128px; +} + +.icon-jumbo { + width: 256px; + height: 256px; +} diff --git a/_scss/module/_schedule.scss b/_scss/module/_schedule.scss index b6e164be..e8683a22 100644 --- a/_scss/module/_schedule.scss +++ b/_scss/module/_schedule.scss @@ -52,7 +52,7 @@ color: $secondary-color; } - a:hover .event-byline { + a:hover .mini-profile-byline { color: $body-font-color; } @@ -68,13 +68,6 @@ font-size: .75rem; } - .avatar { - margin: 0 .5em 0 0; - max-width: 60px; - border-radius: 50%; - vertical-align: middle; - } - .location { position: absolute; top:6px; @@ -97,7 +90,7 @@ display: block; } - .event-byline { + .mini-profile-byline { margin-top: $global-margin; padding-top: 0; } @@ -140,7 +133,7 @@ padding: ($global-margin * 1.75) $global-margin $global-margin; } -.event-byline { +.mini-profile-byline { display: flex; align-items: center; @@ -148,10 +141,18 @@ margin-bottom: 0; line-height: 1.2; + text-decoration: none; & + & { margin-top: $global-margin / 2; } + + .avatar { + margin: 0 .5em 0 0; + max-width: 60px; + border-radius: 50%; + vertical-align: middle; + } } @include breakpoint(medium) { diff --git a/_scss/module/_social-icons.scss b/_scss/module/_social-icons.scss index 00beeadb..10b91cbe 100644 --- a/_scss/module/_social-icons.scss +++ b/_scss/module/_social-icons.scss @@ -49,3 +49,7 @@ fill: $color-github; } } + +.social-icons.highlight svg { + fill: $brand-color5; +} diff --git a/_scss/styles.scss b/_scss/styles.scss index c3533b16..8189dd9c 100644 --- a/_scss/styles.scss +++ b/_scss/styles.scss @@ -70,10 +70,10 @@ @import 'layout/subpage-masthead'; @import 'layout/footer'; @import 'layout/layouts'; +@import 'layout/recap'; @import 'layout/styleguide'; - @import 'module/attraction'; @import 'module/event-info'; @import 'module/event-links'; @@ -85,6 +85,7 @@ @import 'module/hamburger'; @import 'module/date-cards'; @import 'module/card-rows'; +@import 'module/icons'; @import 'module/presenters'; @import 'module/profile'; @import 'module/post-list'; diff --git a/static/img/sail-circle.svg b/static/img/sail-circle.svg new file mode 100644 index 00000000..c77a2796 --- /dev/null +++ b/static/img/sail-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/sunrise-post-event.svg b/static/img/sunrise-post-event.svg new file mode 100644 index 00000000..d95e6b53 --- /dev/null +++ b/static/img/sunrise-post-event.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/sunrise-sky.svg b/static/img/sunrise-sky.svg new file mode 100644 index 00000000..1f0c9ed7 --- /dev/null +++ b/static/img/sunrise-sky.svg @@ -0,0 +1,24 @@ + + + diff --git a/static/main.css b/static/main.css index 46ad30cd..8e95d7de 100644 --- a/static/main.css +++ b/static/main.css @@ -6128,8 +6128,8 @@ table { thead, tbody, tfoot { - border: 1px solid #dbdfe4; - background-color: #e8ebee; + border: 1px solid #ebebeb; + background-color: #FFF; } caption { @@ -6138,12 +6138,12 @@ caption { } thead { - background: #e2e5e9; - color: #1E1E1E; + background: #0A51A4; + color: #FFFFFF; } tfoot { - background: #dbdfe4; + background: #ebebeb; color: #1E1E1E; } @@ -6167,16 +6167,16 @@ tbody td { tbody tr:nth-child(even) { border-bottom: 0; - background-color: #dbdfe4; + background-color: #ebebeb; } table.unstriped tbody { - background-color: #e8ebee; + background-color: #FFF; } table.unstriped tbody tr { border-bottom: 0; - border-bottom: 1px solid #dbdfe4; - background-color: #e8ebee; + border-bottom: 1px solid #ebebeb; + background-color: #FFF; } @media screen and (max-width: 63.99875em) { @@ -6203,16 +6203,16 @@ table.scroll { } table.hover thead tr:hover { - background-color: #dce0e5; + background-color: #094c9a; } table.hover tfoot tr:hover { - background-color: #d5dae0; + background-color: #e6e6e6; } table.hover tbody tr:hover { - background-color: #e3e6ea; + background-color: #fafafa; } table.hover:not(.unstriped) tr:nth-of-type(even):hover { - background-color: #d4d9df; + background-color: #e6e6e6; } .table-scroll { @@ -8594,6 +8594,158 @@ blockquote cite { margin-top: 2rem; } +.recap-header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 10rem; + background-image: url("sunrise-post-event.57537c5a.svg"); + background-position: top center; + background-repeat: no-repeat; + background-size: cover; +} +.recap-header h1 { + margin-bottom: 0; +} +.recap-header h1:after { + display: none; +} +@media print, screen and (min-width: 55.625em) { + .recap-header { + min-height: 14rem; + } +} + +.recap-heading { + margin: 0 auto 1rem; + padding: 0.75rem; + max-width: 46rem; + background: #703D76; + text-align: center; + color: #FFF; +} +.recap-heading .emoji { + width: 38px; + height: 38px; +} +@media print, screen and (min-width: 55.625em) { + .recap-heading { + margin-bottom: 3rem; + font-size: 2rem; + } +} + +.recap-intro .social-icons { + margin-top: 0.5rem; +} + +.recap-intro img { + margin-bottom: 1rem; +} + +.organizer-block .profile .social-icons a { + color: #FBAECD; +} + +.highlight-events .events { + flex-flow: row wrap; + justify-content: center; + margin: 0 auto; + max-width: 57.6923076923rem; +} + +.highlight-events .event { + margin: 0 0.5rem 1rem; +} + +.highlight-events-header { + margin-bottom: 1rem; + width: 100%; + text-align: center; +} + +@media print, screen and (min-width: 55.625em) { + .highlight-events .events .event, +.highlight-events .events .event:first-child, +.highlight-events .events .event:last-child { + width: calc(100% * 1/3 - 1rem); + flex-grow: 0; + } +} + +.mini-profile { + display: flex; + flex-flow: row wrap; + padding-right: 30px; + padding-left: 30px; +} +@media print, screen and (min-width: 55.625em) { + .mini-profile { + justify-content: center; + } +} + +.mini-profile-block { + padding-right: 0.4807692308rem; + padding-left: 0.4807692308rem; +} +.mini-profile-block .mini-profile-list .mini-profile-byline { + display: inline-flex; + margin: 0 1rem 2rem; +} +.mini-profile-block .mini-profile-list .avatar { + max-width: 60px; +} +@media print, screen and (min-width: 55.625em) { + .mini-profile-block .mini-profile-byline { + margin: 0 1.5rem 2rem; + } + .mini-profile-block .avatar { + max-width: 80px; + } +} + +.photos-block { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + align-items: stretch; + background: #171D2F; +} +.photos-block-header { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 2rem; + width: 100%; +} +.photos-block .photo { + flex: 1 0 auto; + max-width: 100%; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + font-size: 0; +} +.photos-block .photo img { + visibility: hidden; +} +@media print, screen and (min-width: 55.625em) { + .photos-block .photo { + flex: 1 0 33.33%; + } +} +@media print, screen and (min-width: 64em) { + .photos-block-header, .photos-block-header + .photo, .photos-block-header + .photo + .photo { + width: 33.33%; + } + .photos-block .photo { + flex: 1 0 25%; + } +} + /* This styles code blocks used for examples. */ .highlight { background: #F7F8F9; @@ -9126,6 +9278,46 @@ body.sunset .footer { text-align: center; } +.icon { + display: inline-block; + vertical-align: middle; +} + +.icon.float-left { + margin-right: 20px; + margin-bottom: 20px; +} + +.icon.float-right { + margin-bottom: 20px; + margin-left: 20px; +} + +.icon-small { + width: 24px; + height: 24; +} + +.icon-medium { + width: 48px; + height: 48px; +} + +.icon-large { + width: 64px; + height: 64px; +} + +.icon-xlarge { + width: 128px; + height: 128px; +} + +.icon-jumbo { + width: 256px; + height: 256px; +} + .presenters { margin-top: 2rem; } @@ -9244,7 +9436,7 @@ body.sunset .footer { .event a:hover .event-title { color: #703D76; } -.event a:hover .event-byline { +.event a:hover .mini-profile-byline { color: #1E1E1E; } .event .event-content { @@ -9259,12 +9451,6 @@ body.sunset .footer { align-self: flex-start; font-size: 0.75rem; } -.event .avatar { - margin: 0 0.5em 0 0; - max-width: 60px; - border-radius: 50%; - vertical-align: middle; -} .event .location { position: absolute; top: 6px; @@ -9283,7 +9469,7 @@ body.sunset .footer { .event.boxed .event-content { display: block; } -.event.boxed .event-byline { +.event.boxed .mini-profile-byline { margin-top: 1rem; padding-top: 0; } @@ -9320,16 +9506,23 @@ body.sunset .footer { padding: 1.75rem 1rem 1rem; } -.event-byline { +.mini-profile-byline { display: flex; align-items: center; margin-top: 30px; margin-bottom: 0; line-height: 1.2; + text-decoration: none; } -.event-byline + .event-byline { +.mini-profile-byline + .mini-profile-byline { margin-top: 0.5rem; } +.mini-profile-byline .avatar { + margin: 0 0.5em 0 0; + max-width: 60px; + border-radius: 50%; + vertical-align: middle; +} @media print, screen and (min-width: 55.625em) { .hour-row { @@ -9643,4 +9836,8 @@ body.sunset .footer { } .social-icons a.github:hover svg { fill: #4078c0; +} + +.social-icons.highlight svg { + fill: #A257AA; } \ No newline at end of file diff --git a/static/main.js b/static/main.js index 0e046f78..20b9d80f 100644 --- a/static/main.js +++ b/static/main.js @@ -176,7 +176,7 @@ var reloadCSS = require('_css_loader'); module.hot.dispose(reloadCSS); module.hot.accept(reloadCSS); -},{"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/full-crowd-top.svg":[["full-crowd-top.ea70905e.svg","static/img/full-crowd-top.svg"],"static/img/full-crowd-top.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/full-crowd-bottom.svg":[["full-crowd-bottom.fc721d0e.svg","static/img/full-crowd-bottom.svg"],"static/img/full-crowd-bottom.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/sunrise.svg":[["sunrise.67d25221.svg","static/img/sunrise.svg"],"static/img/sunrise.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/sunset.svg":[["sunset.1e862d79.svg","static/img/sunset.svg"],"static/img/sunset.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/birds-sunrise.svg":[["birds-sunrise.85ed01c4.svg","static/img/birds-sunrise.svg"],"static/img/birds-sunrise.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/boat.svg":[["boat.9412c0d4.svg","static/img/boat.svg"],"static/img/boat.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/birds-sunset.svg":[["birds-sunset.5f7d0724.svg","static/img/birds-sunset.svg"],"static/img/birds-sunset.svg"],"_css_loader":"../../../.nvm/versions/node/v10.11.0/lib/node_modules/parcel-bundler/src/builtins/css-loader.js"}],"../../../.nvm/versions/node/v10.11.0/lib/node_modules/parcel-bundler/node_modules/process/browser.js":[function(require,module,exports) { +},{"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/sunrise-post-event.svg":[["sunrise-post-event.57537c5a.svg","static/img/sunrise-post-event.svg"],"static/img/sunrise-post-event.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/full-crowd-top.svg":[["full-crowd-top.ea70905e.svg","static/img/full-crowd-top.svg"],"static/img/full-crowd-top.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/full-crowd-bottom.svg":[["full-crowd-bottom.fc721d0e.svg","static/img/full-crowd-bottom.svg"],"static/img/full-crowd-bottom.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/sunrise.svg":[["sunrise.67d25221.svg","static/img/sunrise.svg"],"static/img/sunrise.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/sunset.svg":[["sunset.1e862d79.svg","static/img/sunset.svg"],"static/img/sunset.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/birds-sunrise.svg":[["birds-sunrise.85ed01c4.svg","static/img/birds-sunrise.svg"],"static/img/birds-sunrise.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/boat.svg":[["boat.9412c0d4.svg","static/img/boat.svg"],"static/img/boat.svg"],"/Users/mtrythall/Projects/YupGup/2019.djangocon.us/static/img/birds-sunset.svg":[["birds-sunset.5f7d0724.svg","static/img/birds-sunset.svg"],"static/img/birds-sunset.svg"],"_css_loader":"../../../.nvm/versions/node/v10.11.0/lib/node_modules/parcel-bundler/src/builtins/css-loader.js"}],"../../../.nvm/versions/node/v10.11.0/lib/node_modules/parcel-bundler/node_modules/process/browser.js":[function(require,module,exports) { // shim for using process in browser var process = module.exports = {}; // cached from whatever global is present so that test runners that stub it @@ -23562,7 +23562,7 @@ var parent = module.bundle.parent; if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { var hostname = "" || location.hostname; var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; - var ws = new WebSocket(protocol + '://' + hostname + ':' + "56923" + '/'); + var ws = new WebSocket(protocol + '://' + hostname + ':' + "58539" + '/'); ws.onmessage = function (event) { var data = JSON.parse(event.data); diff --git a/static/sunrise-post-event.57537c5a.svg b/static/sunrise-post-event.57537c5a.svg new file mode 100644 index 00000000..d95e6b53 --- /dev/null +++ b/static/sunrise-post-event.57537c5a.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/sunrise-sky.477fe0a2.svg b/static/sunrise-sky.477fe0a2.svg new file mode 100644 index 00000000..1f0c9ed7 --- /dev/null +++ b/static/sunrise-sky.477fe0a2.svg @@ -0,0 +1,24 @@ + + +
+
+