Skip to content

Commit

Permalink
Update Carbon Ad Code (#164)
Browse files Browse the repository at this point in the history 
Replace the legacy ad code with the one whitelisted from Ad Blockers.
  • Loading branch information
@sayzlim @LeaVerou
sayzlim authored and LeaVerou committed Aug 4, 2016
1 parent f2452f6 commit be9bd3f
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 70 deletions.
58 changes: 29 additions & 29 deletions index.html
View file
Expand Up @@ -14,7 +14,7 @@
<header>
<h1>
<img src="img/logo.svg" />
<strong>dpi</strong>love
<strong>dpi</strong>love
</h1>
</header>

Expand All @@ -23,8 +23,8 @@ <h1>
<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>
Expand All @@ -43,7 +43,7 @@ <h1>
<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>
Expand All @@ -64,11 +64,17 @@ <h1>
</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>
Expand All @@ -92,46 +98,46 @@ <h1>Known screens</h1>

<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>
Expand All @@ -147,12 +153,6 @@ <h1>Higher DPI = Crisper graphics?</h1>
<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>
Expand Down
106 changes: 65 additions & 41 deletions style.css
View file
Expand Up @@ -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;
Expand All @@ -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%;
Expand All @@ -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%;
}
Expand All @@ -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.