Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/poland/css/index.css

Issue 29800606: Fixes #91 - Homepage duplicate in Polish for SEM (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Updated content Created June 14, 2018, 2:28 a.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « static/poland/css/fonts.css ('k') | static/poland/css/main.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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;
+}
« no previous file with comments | « static/poland/css/fonts.css ('k') | static/poland/css/main.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld