diff --git a/common/boards.html b/common/boards.html index 181e98a..83c8560 100644 --- a/common/boards.html +++ b/common/boards.html @@ -22,8 +22,6 @@
-
\ No newline at end of file diff --git a/common/layout.html b/common/layout.html index 821a63b..2e77d92 100644 --- a/common/layout.html +++ b/common/layout.html @@ -4,7 +4,6 @@ {{title}} - @@ -22,7 +21,7 @@
-

Raspberry Pinout

+

Raspberry Pi Pinout

{{main_content}} @@ -33,7 +32,6 @@ - diff --git a/common/page.html b/common/page.html index dd6d213..1e3206a 100644 --- a/common/page.html +++ b/common/page.html @@ -18,8 +18,6 @@
{{content}}
- + {{lang_links}}
\ No newline at end of file diff --git a/generate-html.py b/generate-html.py index 0b34b5a..5cca136 100755 --- a/generate-html.py +++ b/generate-html.py @@ -460,7 +460,7 @@ def get_lang_urls(src): img_css = ' class="grayscale"' url = alternate_urls[url_lang][src] urls.append( - '
  • '.format( + ''.format( lang=url_lang, url=url, resource_url=resource_url, @@ -684,7 +684,7 @@ for url in pages: template = template_boards if url == 'boards' else template_main if url == 'index' or url == 'boards': - src = 'index' + src = url hreflang = get_hreflang_urls(src) langlinks = get_lang_urls(src) diff --git a/resources/pinout.scss b/resources/pinout.scss index 57cc7e1..a5be0e6 100644 --- a/resources/pinout.scss +++ b/resources/pinout.scss @@ -1,21 +1,24 @@ $color-purple: #6c71c4; -$color-pink: #C32672; +$color-pink: #D33682; $color-green: #859900; $color-red: #DC322F; +$color-yellow: #B58900; +$color-blue: #268BD2; $color-dark: #073642; +$color-content-bg: #EBE6D3; + ul, li, a, body, h1, h2, h3, h4, h5, h6, p {margin:0;padding:0;text-decoration:none;} body {font-family:'Avenir', sans-serif;font-weight:500;} - table { margin:20px 0;border-collapse:collapse; text-align:left;font-size:13px; - td, th {border:1px solid #073642;padding:5px;} - th {background:#073642;color:#EBE6D3;} + td, th {border:1px solid $color-dark;padding:5px;} + th {background:$color-dark;color:$color-content-bg;} &.details { width:100%; @@ -51,7 +54,7 @@ table { a {color:#FFFFFF;} - img {float:left;margin:0 13px;top:8px;} + img {float:left;margin:0 10px;top:8px;} a:hover span, a:hover, a:hover span.out { color:#FFFFFF; @@ -72,50 +75,24 @@ img.grayscale { position:relative; padding-top:4px; } - - /* Footer language nav */ + #lang { display:block; - overflow:hidden; background:#C7C2AE; position:absolute; bottom:0px; width:100%; -} + font-size:0; + text-align:right; -.lang-nav { - line-height:30px; - display:block; - overflow:hidden; - float:right; - margin:0; - padding:0; - margin-right:10px; - list-style:none; - - li { - margin:0; - padding:0; - float:left; - - &:last-child { - border-right:none; - padding-right:0px; - } - - a { - padding-left:10px; - color:#6D6D6D; - font-size:16px; - - &:hover { - color:#D6264E; - } - } + a { + display:inline-block; + margin:10px; + margin-left:0px; } } @@ -125,7 +102,7 @@ Content Area #content { float:left; - background:#EBE6D3; + background:$color-content-bg; width:500px; min-height:640px; position: relative; @@ -134,44 +111,41 @@ Content Area hr { border:none; background:none; - border-top:2px solid #d4c99e; + border-top:2px solid darken($color-content-bg,10%); } h1 {font-size:30px;} h2 {font-size:20px;margin-top:20px;} - h1,h2,h3,h4,h5 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;} + h1,h2,h3,h4,h5,h6 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;} + + p, pre { + margin-top:10px; + font-size: 16px; + line-height: 150%; + } + h3 { + color:$color-pink; + font-size:22px; + font-weight:bold; + } article { padding:15px; + .pin-hover {cursor:help;} + .pin-hover:hover {color:#880000;} + img {max-width:100%;} + a { + color:$color-green; + text-decoration:underline; + + &:hover {text-decoration:none;} + } + ul {margin-left:20px;margin-top:10px;margin-bottom:10px;} } } -.boards-page #content { - width:698px; -} - -#content - -p.intro { - color:#268BD2; -} -p,pre { - margin-top:10px; - font-size: 16px; - line-height: 150%; -} -h3 { - color:#D33682; - font-size:22px; - font-weight:bold; -} - -article a {color:#859900;text-decoration:underline;} -article ul {margin-left:20px;margin-top:10px;margin-bottom:10px;} - - /* Boards Page */ @@ -218,19 +192,20 @@ Boards Page } } -#boards .board a:hover { - background: #fdfaf0; -} - -#boards .board strong { - color:#333333; +#boards .board { + a:hover { + background: lighten($color-content-bg,5%); + } + strong { + color:#333333; + } } .facets { position: relative; top: 90px; padding: 4px 15px 15px 15px; - background: #073642; + background: $color-dark; border-top-right-radius: 10px; border-bottom-right-radius: 10px; margin-right: 18px; @@ -339,10 +314,6 @@ Left Column width:500px; } -.boards-page #leftcolumn { - width:302px; -} - #crumbtrail { background:$color-dark; p { @@ -364,7 +335,7 @@ Left Column #interfaces { background: $color-purple; - padding: 0px 2px 2px 2px; + padding: 0px 0px 2px 2px; display: block; clear: both; line-height: 2px; @@ -414,56 +385,31 @@ nav { margin-right:208px; border-top-right-radius:46px; border-bottom-right-radius:46px; -} -.boards-page nav { - margin-right:0; -} -nav:before, nav:after { - content:''; - display:block; - width:28px; - height:28px; - background:#FFFFFF; - border-radius:50%; - border:14px solid #F7DF84; - right:19px; - top:19px; - position: absolute; -} -nav:after { - top:auto; - bottom:19px; -} -.phys { - color:#002B36; - font-size:12px; - opacity:0.8; - position:absolute; - left:30px; - text-indent:0; -} -.bottom .phys { - text-align:right; - left:auto; - right:30px; + + &:before, &:after { + content:''; + display:block; + width:28px; + height:28px; + background:#FFFFFF; + border-radius:50%; + border:14px solid #F7DF84; + right:19px; + top:19px; + position: absolute; + } + &:after { + top:auto; + bottom:19px; + } } -#gpio ul { - position:absolute; - top:87px; - list-style:none; -} #gpio { - .top { - left:246px; - - li {text-indent:56px;} - a {color:#063541;} - } - .bottom { - left:0px; - a {color:#E9E5D2;} + ul { + position:absolute; + top:87px; + list-style:none; } a { display:block; @@ -473,101 +419,14 @@ nav:after { height:22px; margin-bottom:2px; } - .top a { - width:250px; - border-top-left-radius:13px; - border-bottom-left-radius:13px; - } - .bottom a { - width:244px; - border-top-right-radius:13px; - border-bottom-right-radius:13px; - } - a:hover, - .active a { - background:rgb(245, 243, 237); - color:#063541; - } - - .pin1 a:hover, .pin1.active a {border-radius:0;} - - li a small {font-size:11px;} - - .overlay-pin a { - background:rgb(235, 230, 211); - color:#063541; - - &:hover { - background:rgb(245, 243, 237); - color:#063541; - } - } - - .overlay-power { - .phys { - color:#FFFFFF; - opacity:1; - } - a { - background:#073642; - color:#FFFFFF; - } - } - - .overlay-ground { - .phys { - background:#073642; - color:#FFFFFF; - opacity:1; - position:absolute; - top:0px; - width:20px; - height:22px; - border-radius:11px; - text-indent: 0px; - line-height: 22px; - } - a:hover .phys { - background:#268bd2; - } - } -} - -#gpio .bottom .overlay-ground .phys { - padding-right:32px; - right:0; -} - -#gpio .top .overlay-ground .phys { - padding-left:31px; - left:0; -} - -#gpio .overlay-power a:hover { - background:#268bd2; -} - - -#gpio li.overlay-ground span.pin {background:#073642;} - -article { - .pin-hover {cursor:help;} - .pin-hover:hover {color:#880000;} - img {max-width:100%;} -} - - -#gpio { - - ul li.hover-pin a, - ul.bottom li.hover-pin a { - color:#FFF; - background:rgba(200,0,0,0.6); - } - - ul.bottom a { - text-indent:10px; + .phys { + color:#002B36; + font-size:12px; + opacity:0.8; + position:absolute; + left:30px; + text-indent:0; } .pin { @@ -595,23 +454,119 @@ article { } } - .top .pin { - left:2px; - top:2px; + .top { + left:246px; + + li {text-indent:56px;} + + a { + color:#063541; + width:250px; + border-top-left-radius:13px; + border-bottom-left-radius:13px; + } + .overlay-ground .phys { + padding-left:31px; + left:0; + } + .pin { + left:2px; + top:2px; + } + .gnd a {color:rgba(6, 53, 65, 0.5);} } - .bottom .gnd a {color:rgba(233, 229, 210, 0.5);} - .bottom .gnd a:hover {color:rgba(6, 53, 65, 0.5);} - .top .gnd a {color:rgba(6, 53, 65, 0.5);} + .bottom { + left:0px; + a { + text-indent:10px; + color:#E9E5D2; + width:244px; + border-top-right-radius:13px; + border-bottom-right-radius:13px; + } + .overlay-ground .phys { + padding-right:32px; + right:0; + } + .phys { + text-align:right; + left:auto; + right:30px; + } + .gnd a { + color:rgba(233, 229, 210, 0.5); + &:hover {color:rgba(6, 53, 65, 0.5);} + } + } - .pin1 .pin {border-radius:0;} - .pow3v3 .pin {background:#B58900;} - .pow5v .pin {background:#DC322F;} - .gpio .pin {background:#859900;} - .i2c .pin {background:#268BD2;} - .spi .pin {background:#D33682;} - .uart .pin {background:#6c71c4;} + a:hover, + .active a { + background:rgb(245, 243, 237); + color:#063541; + } + li a small {font-size:11px;} + + .overlay-pin a { + background:rgb(235, 230, 211); + color:#063541; + + &:hover { + background:rgb(245, 243, 237); + color:#063541; + } + } + + .overlay-power { + .phys { + color:#FFFFFF; + opacity:1; + } + a { + background:$color-dark; + color:#FFFFFF; + + &::hover { + background:#268bd2; + } + } + } + + .overlay-ground { + .phys { + background:$color-dark; + color:#FFFFFF; + opacity:1; + position:absolute; + top:0px; + width:20px; + height:22px; + border-radius:11px; + text-indent: 0px; + line-height: 22px; + } + a:hover .phys { + background:#268bd2; + } + span.pin {background:$color-dark;} + } + + + ul li.hover-pin a, + .bottom li.hover-pin a { + color:#FFF; + background:rgba(200,0,0,0.6); + } + + .pin1 a:hover, .pin1.active a, .pin1 .pin {border-radius:0;} + + .pow3v3 .pin {background:$color-yellow;} + .pow5v .pin {background:$color-red;} + .gpio .pin {background:$color-green;} + .i2c .pin {background:$color-blue;} + .spi .pin {background:$color-pink;} + .uart .pin {background:$color-purple;} } #pinbase { @@ -619,11 +574,21 @@ article { position:absolute; left:216px; height:493px; - background:#073642; + background:$color-dark; top:80px; } -span.alternate {display:none;} +.boards-page { + nav { + margin-right:0; + } + #leftcolumn { + width:302px; + } + #content { + width:698px; + } +} @media (min-width:1200px){ #container { diff --git a/resources/pinout.scss.css b/resources/pinout.scss.css index 6b76bf0..35855dd 100644 --- a/resources/pinout.scss.css +++ b/resources/pinout.scss.css @@ -48,7 +48,7 @@ table { color: #FFFFFF; } .logo img { float: left; - margin: 0 13px; + margin: 0 10px; top: 8px; } .logo a:hover span, .logo a:hover, .logo a:hover span.out { color: #FFFFFF; } @@ -72,34 +72,16 @@ Footer language nav */ #lang { display: block; - overflow: hidden; background: #C7C2AE; position: absolute; bottom: 0px; - width: 100%; } - -.lang-nav { - line-height: 30px; - display: block; - overflow: hidden; - float: right; - margin: 0; - padding: 0; - margin-right: 10px; - list-style: none; } - .lang-nav li { - margin: 0; - padding: 0; - float: left; } - .lang-nav li:last-child { - border-right: none; - padding-right: 0px; } - .lang-nav li a { - padding-left: 10px; - color: #6D6D6D; - font-size: 16px; } - .lang-nav li a:hover { - color: #D6264E; } + width: 100%; + font-size: 0; + text-align: right; } + #lang a { + display: inline-block; + margin: 10px; + margin-left: 0px; } /* Content Area @@ -114,42 +96,39 @@ Content Area #content hr { border: none; background: none; - border-top: 2px solid #d4c99e; } + border-top: 2px solid #dbd2b0; } #content h1 { font-size: 30px; } #content h2 { font-size: 20px; margin-top: 20px; } - #content h1, #content h2, #content h3, #content h4, #content h5 { + #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; } + #content p, #content pre { + margin-top: 10px; + font-size: 16px; + line-height: 150%; } + #content h3 { + color: #D33682; + font-size: 22px; + font-weight: bold; } #content article { padding: 15px; } - -.boards-page #content { - width: 698px; } - -#content -p.intro { - color: #268BD2; } - -p, pre { - margin-top: 10px; - font-size: 16px; - line-height: 150%; } - -h3 { - color: #D33682; - font-size: 22px; - font-weight: bold; } - -article a { - color: #859900; - text-decoration: underline; } - -article ul { - margin-left: 20px; - margin-top: 10px; - margin-bottom: 10px; } + #content article .pin-hover { + cursor: help; } + #content article .pin-hover:hover { + color: #880000; } + #content article img { + max-width: 100%; } + #content article a { + color: #859900; + text-decoration: underline; } + #content article a:hover { + text-decoration: none; } + #content article ul { + margin-left: 20px; + margin-top: 10px; + margin-bottom: 10px; } /* Boards Page @@ -188,8 +167,7 @@ Boards Page display: block; } #boards .board a:hover { - background: #fdfaf0; } - + background: #f3f0e5; } #boards .board strong { color: #333333; } @@ -272,9 +250,6 @@ Left Column float: left; width: 500px; } -.boards-page #leftcolumn { - width: 302px; } - #crumbtrail { background: #073642; } #crumbtrail p { @@ -291,7 +266,7 @@ Left Column #interfaces { background: #6c71c4; - padding: 0px 2px 2px 2px; + padding: 0px 0px 2px 2px; display: block; clear: both; line-height: 2px; @@ -331,54 +306,25 @@ nav { margin-right: 208px; border-top-right-radius: 46px; border-bottom-right-radius: 46px; } - -.boards-page nav { - margin-right: 0; } - -nav:before, nav:after { - content: ''; - display: block; - width: 28px; - height: 28px; - background: #FFFFFF; - border-radius: 50%; - border: 14px solid #F7DF84; - right: 19px; - top: 19px; - position: absolute; } - -nav:after { - top: auto; - bottom: 19px; } - -.phys { - color: #002B36; - font-size: 12px; - opacity: 0.8; - position: absolute; - left: 30px; - text-indent: 0; } - -.bottom .phys { - text-align: right; - left: auto; - right: 30px; } + nav:before, nav:after { + content: ''; + display: block; + width: 28px; + height: 28px; + background: #FFFFFF; + border-radius: 50%; + border: 14px solid #F7DF84; + right: 19px; + top: 19px; + position: absolute; } + nav:after { + top: auto; + bottom: 19px; } #gpio ul { position: absolute; top: 87px; list-style: none; } - -#gpio .top { - left: 246px; } - #gpio .top li { - text-indent: 56px; } - #gpio .top a { - color: #063541; } -#gpio .bottom { - left: 0px; } - #gpio .bottom a { - color: #E9E5D2; } #gpio a { display: block; position: relative; @@ -386,75 +332,13 @@ nav:after { line-height: 23px; height: 22px; margin-bottom: 2px; } -#gpio .top a { - width: 250px; - border-top-left-radius: 13px; - border-bottom-left-radius: 13px; } -#gpio .bottom a { - width: 244px; - border-top-right-radius: 13px; - border-bottom-right-radius: 13px; } -#gpio a:hover, -#gpio .active a { - background: #f5f3ed; - color: #063541; } -#gpio .pin1 a:hover, #gpio .pin1.active a { - border-radius: 0; } -#gpio li a small { - font-size: 11px; } -#gpio .overlay-pin a { - background: #ebe6d3; - color: #063541; } - #gpio .overlay-pin a:hover { - background: #f5f3ed; - color: #063541; } -#gpio .overlay-power .phys { - color: #FFFFFF; - opacity: 1; } -#gpio .overlay-power a { - background: #073642; - color: #FFFFFF; } -#gpio .overlay-ground .phys { - background: #073642; - color: #FFFFFF; - opacity: 1; +#gpio .phys { + color: #002B36; + font-size: 12px; + opacity: 0.8; position: absolute; - top: 0px; - width: 20px; - height: 22px; - border-radius: 11px; - text-indent: 0px; - line-height: 22px; } -#gpio .overlay-ground a:hover .phys { - background: #268bd2; } - -#gpio .bottom .overlay-ground .phys { - padding-right: 32px; - right: 0; } - -#gpio .top .overlay-ground .phys { - padding-left: 31px; - left: 0; } - -#gpio .overlay-power a:hover { - background: #268bd2; } - -#gpio li.overlay-ground span.pin { - background: #073642; } - -article .pin-hover { - cursor: help; } -article .pin-hover:hover { - color: #880000; } -article img { - max-width: 100%; } - -#gpio ul li.hover-pin a, -#gpio ul.bottom li.hover-pin a { - color: #FFF; - background: rgba(200, 0, 0, 0.6); } -#gpio ul.bottom a { - text-indent: 10px; } + left: 30px; + text-indent: 0; } #gpio .pin { display: block; border: 1px solid transparent; @@ -476,16 +360,82 @@ article img { width: 6px; height: 6px; font-size: 7px; } -#gpio .top .pin { - left: 2px; - top: 2px; } -#gpio .bottom .gnd a { - color: rgba(233, 229, 210, 0.5); } -#gpio .bottom .gnd a:hover { - color: rgba(6, 53, 65, 0.5); } -#gpio .top .gnd a { - color: rgba(6, 53, 65, 0.5); } -#gpio .pin1 .pin { +#gpio .top { + left: 246px; } + #gpio .top li { + text-indent: 56px; } + #gpio .top a { + color: #063541; + width: 250px; + border-top-left-radius: 13px; + border-bottom-left-radius: 13px; } + #gpio .top .overlay-ground .phys { + padding-left: 31px; + left: 0; } + #gpio .top .pin { + left: 2px; + top: 2px; } + #gpio .top .gnd a { + color: rgba(6, 53, 65, 0.5); } +#gpio .bottom { + left: 0px; } + #gpio .bottom a { + text-indent: 10px; + color: #E9E5D2; + width: 244px; + border-top-right-radius: 13px; + border-bottom-right-radius: 13px; } + #gpio .bottom .overlay-ground .phys { + padding-right: 32px; + right: 0; } + #gpio .bottom .phys { + text-align: right; + left: auto; + right: 30px; } + #gpio .bottom .gnd a { + color: rgba(233, 229, 210, 0.5); } + #gpio .bottom .gnd a:hover { + color: rgba(6, 53, 65, 0.5); } +#gpio a:hover, +#gpio .active a { + background: #f5f3ed; + color: #063541; } +#gpio li a small { + font-size: 11px; } +#gpio .overlay-pin a { + background: #ebe6d3; + color: #063541; } + #gpio .overlay-pin a:hover { + background: #f5f3ed; + color: #063541; } +#gpio .overlay-power .phys { + color: #FFFFFF; + opacity: 1; } +#gpio .overlay-power a { + background: #073642; + color: #FFFFFF; } + #gpio .overlay-power a::hover { + background: #268bd2; } +#gpio .overlay-ground .phys { + background: #073642; + color: #FFFFFF; + opacity: 1; + position: absolute; + top: 0px; + width: 20px; + height: 22px; + border-radius: 11px; + text-indent: 0px; + line-height: 22px; } +#gpio .overlay-ground a:hover .phys { + background: #268bd2; } +#gpio .overlay-ground span.pin { + background: #073642; } +#gpio ul li.hover-pin a, +#gpio .bottom li.hover-pin a { + color: #FFF; + background: rgba(200, 0, 0, 0.6); } +#gpio .pin1 a:hover, #gpio .pin1.active a, #gpio .pin1 .pin { border-radius: 0; } #gpio .pow3v3 .pin { background: #B58900; } @@ -508,8 +458,12 @@ article img { background: #073642; top: 80px; } -span.alternate { - display: none; } +.boards-page nav { + margin-right: 0; } +.boards-page #leftcolumn { + width: 302px; } +.boards-page #content { + width: 698px; } @media (min-width: 1200px) { #container { diff --git a/src/fr/pin/pin-17.md b/src/fr/pin/pin-17.md index bb11bce..c0e202a 120000 --- a/src/fr/pin/pin-17.md +++ b/src/fr/pin/pin-17.md @@ -1 +1 @@ -/Users/rogue/Desktop/Pinout2/src/fr-FR/pin/pin-1.md \ No newline at end of file +pin-1.md diff --git a/urlmapper.py b/urlmapper.py index fd362d7..829adeb 100755 --- a/urlmapper.py +++ b/urlmapper.py @@ -31,7 +31,12 @@ def load_overlay_url(overlay, lang): loaded = data['data'] except IOError: - return None + try: + data = markjaml.load('src/{}/translate/{}.md'.format(lang, overlay)) + + loaded = data['data'] + except IOError: + return None if not 'page_url' in loaded: loaded['page_url'] = url_slugify(loaded['name']) @@ -85,6 +90,8 @@ def generate_for_lang(lang="en"): url_lookup['index'] = '//{}'.format(domain) + url_lookup['boards'] = '//{}/boards'.format(domain) + return url_lookup