Issue 5943 - Implement Updates Page for Adblock Plus extension

skin/updates.css

-@font-face 
-{
-    font-family: "Source Sans Pro";
-    font-style: normal;
-    font-weight: 400;
-    font-stretch: normal;
-    src: local ("Ø"),
-    url(fonts/SourceSansPro-Regular.woff) format("woff");
-}
-
 @font-face

[juliandoucette, 2017/10/30 15:30:10]

NIT: I'm guessing my comment about us using 600 semibold instead of 700 applies
here too?

[martin, 2017/11/03 10:02:12]

Changed to 600.

 {
-    font-family: "Source Sans Pro";
-    font-style: bold;
-    font-weight: 700;
-    font-stretch: normal;
-    src: local ("Ø"),
-    url(fonts/SourceSansPro-bold.woff) format("woff");
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  src: local ("Ø"),
+  url(fonts/SourceSansPro-Regular.woff) format("woff");
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: bold;
+  font-weight: 600;
+  font-stretch: normal;
+  src: local ("Ø"),
+  url(fonts/SourceSansPro-bold.woff) format("woff");
 }
 
 html
 {
-    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
+  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
 }
 
 body
 {
-    margin: 0;
-    padding: 0;
-}
-
-.full-width-container
-{
-    width: 100%;
-}
-
-.graphic-column

[juliandoucette, 2017/10/30 15:30:10]

This class and the one below have enough in common that it warrants a single
selector e.g.

.column
{
  height: 100vh;
  width: 50%;
  display: flex; 
  align-items: center;
  justify-content: center;
}

#graphic-column
{
  background: #8DC446;
}

[martin, 2017/11/03 10:02:13]

Refactored.

-{
-    height: 100vh;
-    width: 50%;
-    background: #8DC446;
-    display: flex; 
-    align-items: center;
-    justify-content: center;
-}
-
-.content-column 
-{
-    height: 100vh;
-    width: 50%;
-    background: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.content-column-entries

[juliandoucette, 2017/10/30 15:30:10]

NIT: We generally use IDs for things that only occur once.

[martin, 2017/11/03 10:02:12]

Changed to id="column-content"

-{
-    padding: 0 3em;
-    max-width: 760px;
-}
-
-.content-column-entries a {

[juliandoucette, 2017/10/30 15:30:10]

NIT: .content a would work fine here

-    color: #C70D2C;
-}
-
-.content-column-entries hgroup
-{
-    margin: 0 0 2em 5em;
-}
-
-.content-column h1
-{
-    margin: 0;
-}
-
-.content-column h2 
-{
-    margin: 0;
-    font-weight: normal;
-    opacity: .5;
+  margin: 0;
+  padding: 0;
+}
+
+#container
+{
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.column
+{
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+ #graphic-column,
+ .graphic-column
+{
+  background-color: #8DC446;
+}
+
+#content
+{
+  padding: 0 3em;
+  max-width: 760px;
+}
+
+#content a
+{
+  color: #C70D2C;
+  text-decoration: none;
+}
+
+#optionsPageLink
+{
+  color: red;
+}
+
+/* Needed in order to achieve standard behavior 
+for links, due to lacking href attribute */
+#content a:hover
+{
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#content header
+{
+  margin: 0 0 2em 5em;
+}
+
+html[dir="rtl"] #content header
+{
+  margin: 0 5em 2em 0;
+}
+
+#content header p {
+  margin: 0;
+  opacity: 0.5;
+  font-weight: 400;
+  font-size: 1.2em;
+}
+
+#content header h1
+{
+  margin: 0;
 }
 
 .custom-feature-entry
 {
-    margin-top: 2em;
-}
-
-.custom-feature-entry h2 {
-    margin: 0 0 0 3.4em;
-}
-
-.update-graphic-container 
-{
-    width: 560px;
-    height: 460px;
-    background: url('/skin/updates-page/base-graphic.svg');
-    position: relative;
-    display: flex;
-    align-items: center;
-    background-repeat: no-repeat;
-    background-size: cover;
+  margin-top: 2em;
+}
+
+.custom-feature-entry h2
+{
+  margin: 0 0 0 3.4em;
+}
+
+html[dir="rtl"] .custom-feature-entry h2
+{
+  margin: 0 3.4em 0 0;
+}
+
+.update-graphic-container
+{
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 560px;
+  height: 460px;
+  background-image: url(./updates/base-graphic.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 .update-graphic-container img
 {
-    display: block;
-    width: 162px;
-    height: 162px;
+  display: block;
+  width: 162px;
+  height: 162px;
 }
 
 .update-graphic-content
 {
-    position: absolute;
-    top: 65px;
-    left: 100px;
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 65px;
+  left: 100px;
 }
 
 .version-details
 {
-    margin: 0 0 0 1em;
+  margin: 0 1em 0 1em;
 }
 
 .version-details h2
 {
-    margin: 0;
-}
-
-.version-details span
-{
-    color: #bebebe;
+  margin: 0;
 }
 
 .feature-entry
 {
-    display: flex;
-    align-items: center;
-    padding: 0 1em;
+  display: flex;
+  align-items: center;
+  padding: 0 1em;
 }
 
 .feature-entry img
 {
-    width: 50px;
-    height: 50px;
-    display: block;
-    margin: 0 1em 0 0;
+  width: 50px;
+  height: 50px;
+  display: block;
+  margin: 0 1em 0 0;
+}
+
+html[dir="rtl"] .feature-entry img
+{
+  margin: 0 0 0 1em;
+}
+
+#block-ads-text > strong
+{
+  text-decoration: line-through;
+  font-weight: normal;
 }
 
 .store-buttons
 {
-    width: 100%;
-    hegiht: 58px;
-    margin-left: 5em;
+  height: 58px;
+  margin: 0 0 0 5em;
+}
+
+html[dir="rtl"] .store-buttons
+{
+  margin: 0 5em 0 0;
 }
 
 .store-button
 {
-    display: block;
-    width: 180px;
-    height: 58px;
-    border-radius: 6px;
-    background: #000;
-    float: left;
-    margin-bottom: 1em;
-}
-
-.store-button > img 
-{
-    height: 54px;
+  display: block;
+  height: 58px;
+  border-radius: 6px;
+  background-color: #000;
+  float: left;
+  margin-bottom: 1em;
+}
+
+html[dir="rtl"] .store-button
+{
+  float: right;
+}
+
+.store-button > img
+{
+  height: 100%;
 }
 
 .applestore-button
 {
-    margin-right: 1em;
-}
-
-[dir="rtl"] .appstore-button
-{
-    margin-right: 0;
-    margin-left: 1em;
-}
+  margin-right: 1em;
+}
+
+html[dir="rtl"] .applestore-button
+{
+  margin-right: 0;
+  margin-left: 1em;
+}
+
+@media(max-width: 960px)
+{
+  #container
+  {
+    flex-direction: column;
+  }
+}
+
+@media(max-width: 480px)
+{
+  #content header
+  {
+    margin: 2em 0 2em 5em;
+  }
+
+  .column
+  {
+    align-items: flex-start;
+  }
+
+  html[dir="rtl"] .applestore-button
+  {
+    margin: 0 0 1em 0;
+  }
+}