| Index: static/poland/css/index.css |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/static/poland/css/index.css |
| @@ -0,0 +1,361 @@ |
| +/****************************************************************************** |
| + * Temparary styles |
| + *****************************************************************************/ |
| + |
| +.avoid-wrap {display: inline-block;} |
| +.small {font-size: smaller;} |
| + |
| +/****************************************************************************** |
| + * Browser-based styles |
| + *****************************************************************************/ |
| + |
| +.show-on-msie { display: none; } |
| +.msie .show-on-msie { display: inherit; } |
| +.msie .hide-on-msie { display: none; } |
| + |
| +.show-on-maxthon { display: none; } |
| +.maxthon .show-on-maxthon { display: inherit; } |
| +.maxthon .hide-on-maxthon { display: none; } |
| + |
| +/****************************************************************************** |
| + * #hero-download |
| + *****************************************************************************/ |
| + |
| +#hero-download |
| +{ |
| + padding: 3em 1em; |
| +} |
| + |
| +@media (min-width: 576px) and (max-width: 1023px) |
| +{ |
| + /* add spacing left/right on tablets */ |
| + #hero-download |
| + { |
| + padding-left: 3em; |
| + padding-right: 3em; |
| + } |
| +} |
| + |
| +@media (max-width: 575px) |
| +{ |
| + /* disable avoid-wrap inside h1 on mobile */ |
| + #hero-download h1 .avoid-wrap |
| + { |
| + display: inline; |
| + } |
| +} |
| + |
| +@media (max-width: 1023px) |
| +{ |
| + /* force hero unit columns to break on large tablets */ |
| + #hero-download .column |
| + { |
| + width: 100%; |
| + } |
| +} |
| + |
| +@media (min-width: 1024px) |
| +{ |
| + #hero-download |
| + { |
| + padding-top: 6em; |
| + padding-bottom: 6em; |
| + } |
| +} |
| + |
| +#hero-download h1 |
| +{ |
| + /* Spacing is provided by the hero-download section */ |
| + margin-top: 0; |
| +} |
| + |
| +@media (min-width: 576px) |
| +{ |
| + /* force break without <br> on large screens */ |
| + #hero-download h1 .avoid-wrap:first-of-type |
| + { |
| + display: block; |
| + } |
| +} |
| + |
| +#hero-download-tos |
| +{ |
| + margin-bottom: 0.5em; |
| +} |
| + |
| +#hero-download-alternate |
| +{ |
| + font-size: smaller; |
| +} |
| + |
| +#hero-download-button |
| +{ |
| + display: inline-block; |
| + min-width: 250px; |
| + /* stretch full-width <= small tablets */ |
| + width: 100%; |
| + /* 0.2em taller than normal buttons */ |
| + padding-top: 0.8em; |
| + padding-bottom: 0.8em; |
| + color: #fff; |
| + background-color: #3D9C4F; |
| +} |
| + |
| +#hero-download-button:hover, |
| +#hero-download-button:focus |
| +{ |
| + background-color: #258333; |
| +} |
| + |
| +@media (min-width: 576px) |
| +{ |
| + #hero-download-button |
| + { |
| + /* force auto-width >= small tablets */ |
| + width: auto; |
| + } |
| +} |
| + |
| +#hero-download-video |
| +{ |
| + /* add space above on phones & tablets */ |
| + margin-top: 2em; |
| + /* prevent default full-width on small tablets */ |
| + max-width: 550px; |
| +} |
| + |
| +#hero-download-video |
| +{ |
| + /* provide a little space between thumbnail and border + shadow */ |
| + padding: 1em 1em 0 1em; |
| +} |
| + |
| +@media (min-width: 1024px) |
| +{ |
| + #hero-download-video |
| + { |
| + /* keep aligned-top despite padding below */ |
| + margin-top: -1em; |
| + } |
| +} |
| + |
| +#hero-download-video.has-iframe |
| +{ |
| + /* remove space around thumbnail when thumbnail is replaced by video */ |
| + padding: 0; |
| +} |
| + |
| +/** Hide the video border + shadow only when the thumbnail alone is showing */ |
| +#hero-download-video.hide-disclaimer:not(.has-iframe) |
| +{ |
| + border-color: transparent; |
| + /* there is no box-shadow-color property :( */ |
| + box-shadow: 1px 1px 0 0 transparent; |
| +} |
| + |
| +/* The thumbnail is taller than the video. But it's hard to see because of the |
| + * reflection and whitespace at the bottom. As a result, I am cutting out the |
| + * whitespace and reflection when I show the disclaimer so that the section |
| + * doesn't visibly resize when the thumbnail is replaced by the a iframe. |
| + */ |
| + |
| + |
| +/****************************************************************************** |
| + * #media |
| + *****************************************************************************/ |
| + |
| +#media-section |
| +{ |
| + clear: both; |
| + text-align: center; |
| +} |
| + |
| +#media-header |
| +{ |
| + margin-bottom: 1em; |
| +} |
| + |
| +#media-header h2 |
| +{ |
| + font-size: 1em; |
| + font-weight: normal; |
| + text-transform: uppercase; |
| +} |
| + |
| +#media-header h2, |
| +#media-list |
| +{ |
| + margin: 0; |
| +} |
| + |
| +#media-list li |
| +{ |
| + display: inline-block; |
| +} |
| + |
| +#media-list img |
| +{ |
| + max-width: 10em; |
| + max-height: 3em; |
| + margin: 0 1em 1em; |
| +} |
| + |
| +#media-list a |
| +{ |
| + position: relative; |
| + display: block; |
| +} |
| + |
| +#media-list a:hover img |
| +{ |
| + opacity: 0.3; |
| +} |
| + |
| +#media-list a:hover:after |
| +{ |
| + content: ""; |
| + position: absolute; |
| + top: 50%; |
| + left: 50%; |
| + height: 1em; |
| + width: 1em; |
| + padding: 1em; |
| + margin-left: -1em; |
| + margin-top: -1em; |
| + border-radius: 50%; |
| + background-color: #000; |
| + background-image: url(../img/external-icon.png); |
| + background-image: linear-gradient(transparent, transparent), |
| + url(../img/external-icon.svg); |
| + background-repeat: no-repeat; |
| + background-position: center; |
| + background-size: 1em; |
| +} |
| + |
| +@media (min-width: 1024px) |
| +{ |
| + #media |
| + { |
| + display: table; |
| + width: 100%; |
| + } |
| + |
| + #media-header, |
| + #media-list |
| + { |
| + display: table-cell; |
| + vertical-align: middle; |
| + width: auto; |
| + } |
| + |
| + #media-header |
| + { |
| + margin-bottom: 0; |
| + } |
| + |
| + #media-header small |
| + { |
| + display: none; |
| + } |
| + |
| + #media-list { direction: rtl; } |
| + [dir="rtl"] #media-list { direction: ltr; } |
| + |
| + @supports (display: flex) |
| + { |
| + #media-list |
| + { |
| + display: flex; |
| + justify-content: space-between; |
| + align-items: center; |
| + } |
| + } |
| + |
| + #media-list |
| + { |
| + display: table; |
| + width: 100%; |
| + } |
| + |
| + #media-list li |
| + { |
| + display: table-cell; |
| + vertical-align: middle; |
| + } |
| + |
| + #media-list img |
| + { |
| + margin: 0 2em; |
| + } |
| +} |
| + |
| +/****************************************************************************** |
| + * #abb-cross-promotion |
| + *****************************************************************************/ |
| + |
| +#abb-cross-promotion |
| +{ |
| + padding: 3em 0; |
| +} |
| + |
| +#abb-cross-promotion h2 |
| +{ |
| + margin-top: 0; |
| + margin-bottom: 1.5em; |
| +} |
| + |
| +#abb-cross-promotion h2, |
| +#abb-cross-promotion h3 |
| +{ |
| + text-transform: uppercase; |
| +} |
| + |
| +#abb-logo |
| +{ |
| + max-width: 10em; |
| +} |
| + |
| +#abb-app-store-badges |
| +{ |
| + margin-top: 2em; |
| +} |
| + |
| +#abb-app-store-badges img |
| +{ |
| + height: 60px; |
| +} |
| + |
| +@media (max-width: 575px) |
| +{ |
| + #abb-app-store-badges a:first-of-type |
| + { |
| + margin-bottom: 0.5em; |
| + } |
| +} |
| + |
| +@media (min-width: 576px) |
| +{ |
| + #abb-app-store-badges .one-half |
| + { |
| + width: 50%; |
| + } |
| + |
| + #abb-cross-promotion figure, |
| + #abb-app-store-badges |
| + { |
| + padding-left: 2em; |
| + padding-right: 2em; |
| + } |
| +} |
| + |
| +/****************************************************************************** |
| + * #footnote |
| + *****************************************************************************/ |
| + |
| +#footnote |
| +{ |
| + padding-top: 3em; |
| + padding-bottom: 2em; |
| + font-size: 13px; |
| + color: #7d7d7d; |
| +} |