From 6711fb0c58e969284e3fcf94bb163c77445e2e13 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 28 Feb 2019 15:56:04 +0100 Subject: footnote back and forth navigation --- client/util/index.js | 4 ++ megapixels/app/site/parser.py | 17 +++++++- site/assets/css/css.css | 66 +++++++++++++++++++++++--------- site/content/pages/datasets/lfw/index.md | 2 +- site/public/datasets/lfw/index.html | 18 ++++----- 5 files changed, 77 insertions(+), 30 deletions(-) diff --git a/client/util/index.js b/client/util/index.js index d0db0d98..0792e24e 100644 --- a/client/util/index.js +++ b/client/util/index.js @@ -5,12 +5,16 @@ export const isiPad = !!(navigator.userAgent.match(/iPad/i)) export const isAndroid = !!(navigator.userAgent.match(/Android/i)) export const isMobile = isiPhone || isiPad || isAndroid export const isDesktop = !isMobile +export const isFirefox = typeof InstallTrigger !== 'undefined' export const toArray = a => Array.prototype.slice.apply(a) export const choice = a => a[Math.floor(Math.random() * a.length)] const htmlClassList = document.body.parentNode.classList htmlClassList.add(isDesktop ? 'desktop' : 'mobile') +if (isFirefox) { + htmlClassList.add('firefox') +} /* Default image dimensions */ diff --git a/megapixels/app/site/parser.py b/megapixels/app/site/parser.py index ef83b655..9e904e00 100644 --- a/megapixels/app/site/parser.py +++ b/megapixels/app/site/parser.py @@ -10,6 +10,8 @@ import app.site.s3 as s3 renderer = mistune.Renderer(escape=False) markdown = mistune.Markdown(renderer=renderer) +footnote_count = 0 + def parse_markdown(metadata, sections, s3_path, skip_h1=False): """ parse page into sections, preprocess the markdown to handle our modifications @@ -94,7 +96,18 @@ def parse_markdown(metadata, sections, s3_path, skip_h1=False): if footnote_lookup: for key, index in footnote_lookup.items(): - content = content.replace(key, '{}'.format(key, index, index)) + global footnote_count + footnote_count = 0 + letters = "abcdefghijklmnopqrstuvwxyz" + footnote_backlinks = [] + def footnote_tag(match): + global footnote_count + footnote_count += 1 + footnote_backlinks.append('{}'.format(key, footnote_count, letters[footnote_count-1])) + return ' {}'.format(key, footnote_count, key, index, index) + key_regex = re.compile(key.replace('[', '\\[').replace('^', '\\^').replace(']', '\\]')) + content = key_regex.sub(footnote_tag, content) + footnote_txt = footnote_txt.replace("{}_BACKLINKS".format(index), "".join(footnote_backlinks)) content += footnote_txt return content @@ -197,7 +210,7 @@ def format_footnotes(footnotes, s3_path): continue key, note = footnote.split(': ', 1) footnote_index_lookup[key] = index - footnote_list.append('^'.format(key) + markdown(note)) + footnote_list.append('{}_BACKLINKS'.format(key, index) + markdown(note)) index += 1 footnote_txt = '
' diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 0afa3725..4b42657b 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -16,7 +16,8 @@ html { opacity: 0; transition: opacity 0.2s cubic-bezier(0,1,1,1); } -html.desktop .content, html.mobile .content { +html.desktop .content, +html.mobile .content { opacity: 1; } @@ -28,7 +29,7 @@ header { left: 0; width: 100%; height: 70px; - z-index: 2; + z-index: 9999; background: #1e1e1e; display: flex; flex-direction: row; @@ -53,8 +54,10 @@ header .logo { height: 30px; } header .site_name { + font-family: 'Roboto', sans-serif; font-weight: bold; color: #fff; + font-size: 14px; } header .sub { margin-left: 4px; @@ -148,7 +151,7 @@ h3 { margin: 0 0 20px 0; padding: 0; font-size: 14pt; - font-weight: 600; + font-weight: 500; transition: color 0.2s cubic-bezier(0,0,1,1); } h4 { @@ -170,6 +173,8 @@ h4 { margin: 0; padding: 0 0 10px 0; font-family: 'Roboto Mono'; + font-weight: 400; + font-size: 11px; text-transform: uppercase; letter-spacing: 2px; } @@ -210,13 +215,17 @@ section { p { margin: 0 0 20px 0; line-height: 2; + font-size: 15px; + font-weight: 400; } .content a { - color: #ff0; + color: #fff; + text-decoration: none; + border-bottom: 1px dashed; transition: color 0.2s cubic-bezier(0,0,1,1); } -.content a:hover { - color: #fff; +.desktop .content a:hover { + color: #ff8; } /* top of post metadata */ @@ -368,7 +377,7 @@ section.fullwidth .image { .caption { text-align: left; font-size: 9pt; - color: #bbb; + color: #999; max-width: 960px; margin: 10px auto 0 auto; font-family: 'Roboto'; @@ -538,17 +547,22 @@ section.intro_section { font-size: 38px; line-height: 60px; margin-bottom: 30px; - color: #fff; + color: #ddd; + font-weight: 300; } .intro_section .hero_subdesc { font-size: 18px; line-height: 36px; max-width: 640px; + font-weight: 300; color: #ddd; } -.intro_section span { - box-shadow: -10px -10px #000, 10px -10px #000, 10px 10px #000, -10px 10px #000; - background: #000; +.intro_section div > span { + box-shadow: -10px -10px #1e1e1e, 10px -10px #1e1e1e, 10px 10px #1e1e1e, -10px 10px #1e1e1e; + background: #1e1e1e; +} +.firefox .intro_section div > span { + box-decoration-break: clone; } /* footnotes */ @@ -559,22 +573,38 @@ a.footnote { display: inline-block; bottom: 10px; text-decoration: none; - color: #ff0; + color: #ff8; + border: 0; left: 2px; + transition-duration: 0s; +} +a.footnote_shim { + display: inline-block; + width: 1px; height: 1px; + overflow: hidden; + position: relative; + top: -90px; + visibility: hidden; } .right-sidebar a.footnote { bottom: 8px; } .desktop a.footnote:hover { - background-color: #ff0; + background-color: #ff8; color: #000; } -a.footnote_anchor { - font-weight: bold; - color: #ff0; +.backlinks { margin-right: 10px; - text-decoration: underline; - cursor: pointer; +} +.content .backlinks a { + color: #ff8; + font-size: 10px; + text-decoration: none; + border: 0; + font-weight: bold; + position: relative; + bottom: 5px; + margin-right: 2px; } ul.footnotes { list-style-type: decimal; diff --git a/site/content/pages/datasets/lfw/index.md b/site/content/pages/datasets/lfw/index.md index 1995e1f9..972fafe2 100644 --- a/site/content/pages/datasets/lfw/index.md +++ b/site/content/pages/datasets/lfw/index.md @@ -5,7 +5,7 @@ title: Labeled Faces in The Wild desc: Labeled Faces in The Wild (LFW) is a database of face photographs designed for studying the problem of unconstrained face recognition. subdesc: It includes 13,456 images of 4,432 people’s images copied from the Internet during 2002-2004. image: assets/lfw_feature.jpg -caption: Eighteen of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms. +caption: A few of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms. slug: lfw published: 2019-2-23 updated: 2019-2-23 diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html index 54b6aa22..08ec8ee3 100644 --- a/site/public/datasets/lfw/index.html +++ b/site/public/datasets/lfw/index.html @@ -28,10 +28,10 @@
Labeled Faces in The Wild (LFW) is a database of face photographs designed for studying the problem of unconstrained face recognition.
It includes 13,456 images of 4,432 people’s images copied from the Internet during 2002-2004. -
Eighteen of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms.

Statistics

+
A few of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms.

Statistics

Years
2002-2004
Images
13,233
Identities
5,749
Origin
Yahoo News Images
Funding
(Possibly, partially CIA)

INSIGHTS

    -
  • There are about 3 men for every 1 woman (4,277 men and 1,472 women) in the LFW dataset1
    • +
  • There are about 3 men for every 1 woman (4,277 men and 1,472 women) in the LFW dataset 1
  • The person with the most images is George W. Bush with 530
  • There are about 3 George W. Bush's for every 1 Tony Blair
  • The LFW dataset includes over 500 actors, 30 models, 10 presidents, 124 basketball players, 24 football players, 11 kings, 7 queens, and 1 Moby
    • @@ -39,7 +39,7 @@
  • The word "future" appears 71 times

Labeled Faces in the Wild

-

Labeled Faces in The Wild (LFW) is "a database of face photographs designed for studying the problem of unconstrained face recognition1. It is used to evaluate and improve the performance of facial recognition algorithms in academic, commercial, and government research. According to BiometricUpdate.com3, LFW is "the most widely used evaluation set in the field of facial recognition, LFW attracts a few dozen teams from around the globe including Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong."

+

Labeled Faces in The Wild (LFW) is "a database of face photographs designed for studying the problem of unconstrained face recognition 1. It is used to evaluate and improve the performance of facial recognition algorithms in academic, commercial, and government research. According to BiometricUpdate.com 3, LFW is "the most widely used evaluation set in the field of facial recognition, LFW attracts a few dozen teams from around the globe including Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong."

The LFW dataset includes 13,233 images of 5,749 people that were collected between 2002-2004. LFW is a subset of Names of Faces and is part of the first facial recognition training dataset created entirely from images appearing on the Internet. The people appearing in LFW are...

The Names and Faces dataset was the first face recognition dataset created entire from online photos. However, Names and Faces and LFW are not the first face recognition dataset created entirely "in the wild". That title belongs to the UCD dataset. Images obtained "in the wild" means using an image without explicit consent or awareness from the subject or photographer.

Biometric Trade Routes

@@ -51,11 +51,11 @@

Additional Information

(tweet-sized snippets go here)

Supplementary Material

Text and graphics ©Adam Harvey / megapixels.cc

-
-- cgit v1.2.3-70-g09d2