Permalink
Browse files

Update Carbon Ad Code (#164)

Replace the legacy ad code with the one whitelisted from Ad Blockers.
  • Loading branch information...
1 parent f2452f6 commit be9bd3fe8951f9b6fceddce435f0054ce9ec3f3f @sayzlim sayzlim committed with Aug 4, 2016
Showing with 94 additions and 70 deletions.
  1. +29 −29 index.html
  2. +65 −41 style.css
View
@@ -14,7 +14,7 @@
<header>
<h1>
<img src="img/logo.svg" />
- <strong>dpi</strong>love
+ <strong>dpi</strong>love
</h1>
</header>
@@ -23,8 +23,8 @@
<input id="width" inputmode="numeric" pattern="\d+" />
×
<input id="height" inputmode="numeric" pattern="\d+" />
-
- <p id="resolutions">Common:
+
+ <p id="resolutions">Common:
<a href="#" tabindex="-1">3840×2160</a>
<a href="#" tabindex="-1">2560×1440</a>
<a href="#" tabindex="-1">1920×1080</a>
@@ -43,7 +43,7 @@
<option value="h">Height</option>
</select>:
<input id="physical" value="13.3" inputmode="numeric" pattern="\d*\.?\d+" />″
-
+
<p id="diagonals">Common diagonals:
<a href="#" tabindex="-1">7″</a>
<a href="#" tabindex="-1">11.6″</a>
@@ -64,11 +64,17 @@
</div>
</output>
+<aside>
+ <!-- Carbon Zone Code -->
+ <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=dpilv" id="_carbonads_js"></script>
+ <!-- Carbon Zone Code -->
+</aside>
+
<section id="devices">
<h1>Known screens</h1>
-
+
<input type="search" placeholder="Search…" id="search" />
-
+
<div id="screens">
<table>
<thead>
@@ -92,46 +98,46 @@
<section id="faq">
<h1>FAQ</h1>
-
+
<article>
<h1>“It’s actually PPI, not DPI!”</h1>
-
- <p>There are arguments for both terms. In general PPI is a bit more correct but DPI is more commonplace, hence its usage on this site (also ppi.lv wasn’t available :P).
+
+ <p>There are arguments for both terms. In general PPI is a bit more correct but DPI is more commonplace, hence its usage on this site (also ppi.lv wasn’t available :P).
If you are interested, you can read more on this in the <a href="http://en.wikipedia.org/wiki/Pixel_density">Wikipedia article about Pixel Density</a>.</p>
-
+
<p>In more recent terminology, DPI is often used for the actual device pixels and Dots Per Pixel (dppx) for the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).</p>
</article>
-
+
<article>
<h1>What does DPI/PPI mean?</h1>
-
+
<p>In the context of screens, DPI (Dots Per Inch) or PPI (Pixels Per Inch) refer to the number of device pixels per inch, also called “pixel density”. The higher the number, the smaller the size of the pixels, so graphics
- are perceived as more crisp and less pixelated. The concept of DPI is also used in printing, although the dots and their formation is
- <a href="https://en.wikipedia.org/wiki/Halftone">different</a> there. In general, good quality printing uses around 300dpi which is higher than most displays.
+ are perceived as more crisp and less pixelated. The concept of DPI is also used in printing, although the dots and their formation is
+ <a href="https://en.wikipedia.org/wiki/Halftone">different</a> there. In general, good quality printing uses around 300dpi which is higher than most displays.
That’s why vector-based or high-res bitmap graphics usually look more crisp when printed.
</article>
-
+
<article>
<h1>What’s the point of this site?</h1>
-
+
<p>I got fed up with marketing speak and buzzwords often used to create the impression that a display is much better than it actually is,
so I wanted to help people decide what to get with the actual numbers at hand, through an easy to use web app. Also, it was kinda fun to make. :-)</p>
-
+
</article>
-
+
<article>
<h1>Higher DPI = Crisper graphics?</h1>
-
+
<p>DPI/PPI is a crucial metric for getting an idea of how crisp a display really is, but it’s only one factor among many.
Besides the technical ones (which would need an entire book), there are also those that depend on human nature. </p>
-
- <p>Firstly, viewing distance can affect the perceived pixel size. Therefore, if a cell phone and a large screen have the same pixel density,
+
+ <p>Firstly, viewing distance can affect the perceived pixel size. Therefore, if a cell phone and a large screen have the same pixel density,
the large screen will appear more crisp, as it’s typically viewed from a longer distance. This is why large screens can get away with considerably lower pixel densities.
In the print world, that’s why posters are printed at a much lower dpi than magazines.</p>
-
+
<p>Secondly, our eyes cannot discern the difference between pixel densities above a certain threshold.
This threshold seems to vary depending on the source, but here are a few good articles if you’re interested:</p>
-
+
<ul>
<li><a href="http://sebastien-gabriel.com/designers-guide-to-dpi/">Designer's Guide to DPI</a></li>
<li><a href="http://wolfcrow.com/blog/notes-by-dr-optoglass-the-resolution-of-the-human-eye/">Notes by Dr. Optoglass: The Resolution of the Human Eye</a></li>
@@ -147,12 +153,6 @@
<script src="utopia.js"></script>
<script src="dpi.js"></script>
-<section class="ad">
- <!-- AdPacks.com Zone Code -->
- <script src="http://cdn.adpacks.com/adpacks.js?legacyid=1261373&zoneid=1386&key=67e1f7efa5300630944c625f7975b9b3&serve=C6SI42Y&placement=leaveroume&circle=dev" id="_adpacks_js"></script>
- <!-- End AdPacks.com Zone Code -->
-</section>
-
<a href="http://github.com/LeaVerou/dpi"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
<a href="https://twitter.com/share" data-url="http://dpi.lv" class="twitter-share-button" data-via="LeaVerou" data-count="vertical">Tweet</a>
View
@@ -141,14 +141,14 @@ output {
font-size: 400%;
letter-spacing: -1px;
}
-
+
output div {
display: inline-block;
vertical-align: middle;
line-height: 1.1;
margin-top: -1em;
}
-
+
fieldset {
display: inline-block;
vertical-align: top;
@@ -170,37 +170,37 @@ fieldset + fieldset {
padding-left: 3%;
margin-left: -.25em;
}
-
+
fieldset p {
font-size: 50%;
opacity: .5;
transition: .3s opacity;
font-weight: normal;
}
-
+
fieldset:hover p,
fieldset input:focus ~ p {
opacity: 1;
}
-
+
#screens {
max-height: 19.8em;
margin-top: 1em;
overflow: auto;
-
+
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
-
+
/* Shadows */
radial-gradient(50% 0, farthest-side, rgba(0,0,0,.1), rgba(0,0,0,0)),
radial-gradient(50% 100%, farthest-side, rgba(0,0,0,.1), rgba(0,0,0,0)) 0 100%;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
-
+
/* Shadows */
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.1), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.1), rgba(0,0,0,0)) 0 100%;
@@ -215,41 +215,41 @@ fieldset + fieldset {
font-size: 80%;
border-spacing: 0;
}
-
+
table th:first-child {
text-align: right;
}
-
+
table tbody th {
font-weight: normal;
font-size: 80%;
}
-
+
td,
th {
padding: .3em;
}
-
+
thead th:nth-child(4) {
border-radius: .3em .3em 0 0;
}
-
+
tbody tr:last-child td:nth-child(4) {
border-radius: 0 0 .3em .3em;
}
-
+
th:nth-child(4),
td:nth-child(4) {
background: #fdd;
text-shadow: 0 1px 1px white;
}
-
+
td:only-child {
font-weight: 300;
color: gray;
text-align: center;
}
-
+
#faq article {
font-size: 80%;
}
@@ -276,34 +276,58 @@ footer {
right: 20px;
}
-.ad {
- position: fixed;
- right: 20px;
- bottom: 20px;
- max-width: 300px;
- text-align: left;
+#carbonads {
+ position: fixed;
+ right: 1em;
+ bottom: 1em;
+ display: block;
+ overflow: hidden;
+ padding: 1em;
+ max-width: 280px;
+ border: solid 1px #e1e1e1;
+ background-color: #f9f9f9;
+ font-size: 12px;
+ line-height: 1.5;
}
- .ad #bsap_aplink {
- display: block;
- font-size: 50%;
- text-align: center;
- }
-
-@media (max-width: 1400px) {
- .ad {
- max-width: 170px;
- }
-
- .ad .one .bsa_it_ad .bsa_it_i {
- float: none;
- display: block;
- text-align: center;
- }
+#carbonads a {
+ color: inherit;
+ text-decoration: none;
+}
+
+#carbonads a:hover {
+ color: inherit;
}
-@media (max-width: 1132px) {
- .ad {
- display: none;
+#carbonads span {
+ display: block;
+ overflow: hidden;
+}
+
+.carbon-img {
+ float: left;
+ margin-right: 1em;
+}
+
+.carbon-text {
+ display: block;
+ float: left;
+ max-width: calc(100% - 130px - 1em);
+ text-align: left;
+}
+
+.carbon-poweredby {
+ display: block;
+ float: right;
+ margin-top: -1.9em;
+ font-size: 10px;
+}
+
+@media (max-width: 1400px) {
+ #carbonads {
+ right: 0;
+ bottom: 0;
+ margin: 3em auto 0;
+ position: relative;
}
}

0 comments on commit be9bd3f

Please sign in to comment.