scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-29 18:46:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

improved 2019 conference responsiveness, improved calendar icon

Browse source
This commit is contained in:
Ben Wheeler 2019-02-25 13:49:08 -05:00
parent 3e02b59866
commit 42f2486e1c
4 changed files with 38 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/page/conference/page.scss
View file

@ -81,7 +81,7 @@
@media #{$medium-and-smaller} { @media #{$medium-and-smaller} {
h1, h1,
.title-banner-h1.mod-2017, .title-banner-h1.mod-2019 { .title-banner-h1.mod-2017 {
font-size: 2.5rem; font-size: 2.5rem;
} }
} }

18
src/views/conference/2019/index/index.jsx
View file

@ -21,15 +21,15 @@ const ConferenceSplash = () => (
</div> </div>
</TitleBanner> </TitleBanner>
<div className="conf2019-description conf2019-band"> <div className="conf2019-description conf2019-band">
<h3 className="conf2019-description title-banner-h3 mod-2019"> <h3 className="conf2019-description title-banner-h3 mod-2019">
<FormattedMessage id="conference-2019.descA" /> <FormattedMessage id="conference-2019.descA" />
</h3> </h3>
<h3 className="conf2019-description title-banner-h3 mod-2019"> <h3 className="conf2019-description title-banner-h3 mod-2019">
<FormattedMessage id="conference-2019.descB" /> <FormattedMessage id="conference-2019.descB" />
</h3> </h3>
<h3 className="conf2019-description title-banner-h3 mod-2019 conf2019-bold"> <h3 className="conf2019-description title-banner-h3 mod-2019 conf2019-bold">
<FormattedMessage id="conference-2019.nextMITConference" /> <FormattedMessage id="conference-2019.nextMITConference" />
</h3> </h3>
</div> </div>
<div className="conf2019-title-band conf2019-schedule-band"> <div className="conf2019-title-band conf2019-schedule-band">
<img <img

35
src/views/conference/2019/index/index.scss
View file

@ -30,7 +30,7 @@ h1.title-banner-h1.mod-2019 {
} }
.conf2019-panel { .conf2019-panel {
margin: auto 2rem; margin: auto 5rem;
} }
.conf2019-panel, .conf2019-panel,
@ -39,7 +39,7 @@ h1.title-banner-h1.mod-2019 {
.title-banner-h3.mod-2019 { .title-banner-h3.mod-2019 {
text-align: left; text-align: left;
font-size: 1.1rem; font-size: 1rem;
} }
.conf2019-title-band { .conf2019-title-band {
@ -166,7 +166,11 @@ td {
} }
h1.title-banner-h1.mod-2019 { h1.title-banner-h1.mod-2019 {
padding-top: 1.5rem; padding-top: 3.25rem;
font-size: 1.75rem;
}
.title-banner.mod-conference.mod-2019 {
} }
.title-banner-image.mod-2019 { .title-banner-image.mod-2019 {
@ -198,6 +202,7 @@ td {
.conf2019-description.conf2019-band { .conf2019-description.conf2019-band {
width: initial; width: initial;
margin: 0 .5rem;
} }
.conf2019-description { .conf2019-description {
@ -235,6 +240,10 @@ td {
h1.title-banner-h1.mod-2019 { h1.title-banner-h1.mod-2019 {
padding-top: 2.75rem; padding-top: 2.75rem;
font-size: 2.25rem;
}
.title-banner.mod-conference.mod-2019 {
} }
.title-banner-image.mod-2019 { .title-banner-image.mod-2019 {
@ -246,10 +255,6 @@ td {
width: initial; width: initial;
} }
.title-banner-h3.mod-2019 {
font-size: 1.1rem;
}
.conf2019-title-band>h3.conf2019-schedule { .conf2019-title-band>h3.conf2019-schedule {
font-size: 1.6rem; font-size: 1.6rem;
} }
@ -259,8 +264,8 @@ td {
} }
.conf2019-description.conf2019-band { .conf2019-description.conf2019-band {
width: initial; width: 464px;
margin: auto 1.5rem ; margin: auto;
} }
.conf2019-description { .conf2019-description {
@ -273,6 +278,10 @@ td {
flex-direction: row; flex-direction: row;
} }
.conf2019-panel {
margin: auto .5rem;
}
.conf2019-panel-flag { .conf2019-panel-flag {
margin-right: 2rem; margin-right: 2rem;
} }
@ -298,6 +307,10 @@ td {
h1.title-banner-h1.mod-2019 { h1.title-banner-h1.mod-2019 {
padding-top: 4.75rem; padding-top: 4.75rem;
font-size: 2.75rem;
}
.title-banner.mod-conference.mod-2019 {
} }
.title-banner-image.mod-2019 { .title-banner-image.mod-2019 {
@ -308,8 +321,8 @@ td {
width: 38.75rem; width: 38.75rem;
} }
.title-banner-h3.mod-2019 { .conf2019-panel {
font-size: 1.1rem; margin: auto 4.5rem;
} }
.conf2019-title-band>h3.conf2019-schedule { .conf2019-title-band>h3.conf2019-schedule {

14
static/svgs/conference/index/calendar-icon-color.svg
View file

@ -5,23 +5,17 @@
<desc>Created with Sketch.</desc> <desc>Created with Sketch.</desc>
<defs> <defs>
<rect id="path-1" x="0" y="0" width="54" height="48" rx="8"></rect> <rect id="path-1" x="0" y="0" width="54" height="48" rx="8"></rect>
<rect id="path-3" x="0" y="0" width="54" height="48" rx="8"></rect>
</defs> </defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy-7" transform="translate(-688.000000, -721.000000)"> <g id="Artboard-Copy-7" transform="translate(-688.000000, -721.000000)">
<g id="Calendar" transform="translate(692.000000, 725.000000)"> <g id="Calendar" transform="translate(692.000000, 725.000000)">
<path d="M8,0 C3.581722,8.8817842e-16 -4.4408921e-16,3.581722 0,8 L0,40 C8.8817842e-16,44.418278 3.581722,48 8,48 L46,48 C50.418278,48 54,44.418278 54,40 L54,8 C54,3.581722 50.418278,-8.8817842e-16 46,0 L8,0 Z M8,-4 L46,-4 C52.627417,-4 58,1.372583 58,8 L58,40 C58,46.627417 52.627417,52 46,52 L8,52 C1.372583,52 -4,46.627417 -4,40 L-4,8 C-4,1.372583 1.372583,-4 8,-4 Z" id="Background" fill-opacity="0.5" fill="#4280D7" fill-rule="nonzero"></path>
<mask id="mask-2" fill="white"> <mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use> <use xlink:href="#path-1"></use>
</mask> </mask>
<rect stroke-opacity="0.5" stroke="#4280D7" stroke-width="4" x="-2" y="-2" width="58" height="52" rx="8"></rect> <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white"> <path d="M18.3392857,32.62 L35.1785714,32.62 L35.1785714,17.74 L36.1785714,17.74 L36.1785714,32.62 L54.5,32.62 L54.5,33.62 L36.1785714,33.62 L36.1785714,48.5 L35.1785714,48.5 L35.1785714,33.62 L18.3392857,33.62 L18.3392857,48.5 L17.3392857,48.5 L17.3392857,33.62 L-0.5,33.62 L-0.5,32.62 L17.3392857,32.62 L17.3392857,17.74 L18.3392857,17.74 L18.3392857,32.62 Z" id="Combined-Shape" fill="#D9D9D9" fill-rule="nonzero" mask="url(#mask-2)"></path>
<use xlink:href="#path-3"></use> <path d="M8,0 L46,0 C50.418278,-8.11624501e-16 54,3.581722 54,8 L54,18.24 L0,18.24 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="Top-part" fill="#FF8000"></path>
</mask>
<use id="Mask" fill="#FFFFFF" xlink:href="#path-3"></use>
<path d="M17.8392857,18.24 L17.8392857,48" id="Line-4" stroke="#D9D9D9" stroke-linecap="square" mask="url(#mask-4)"></path>
<path d="M35.6785714,18.24 L35.6785714,48" id="Line" stroke="#D9D9D9" stroke-linecap="square" mask="url(#mask-4)"></path>
<path d="M0,33.12 L54,33.12" id="Line-2" stroke="#D9D9D9" stroke-linecap="square" mask="url(#mask-4)"></path>
<rect id="Top-part" fill="#FF8000" mask="url(#mask-4)" x="0" y="0" width="54" height="18.24"></rect>
</g> </g>
</g> </g>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2 KiB