From 6d1171cb4914de5fa1967a1b335f7f7ef6c55118 Mon Sep 17 00:00:00 2001 From: Phil Howard Date: Thu, 20 Aug 2020 00:25:28 +0100 Subject: [PATCH] Add Pi orientation graphic to legend --- common/page.html | 95 ++++++++++++++++++----------------- resources/pi-orientation.png | Bin 0 -> 8119 bytes resources/pinout.scss | 8 +++ resources/pinout.scss.css | 10 ++++ 4 files changed, 67 insertions(+), 46 deletions(-) create mode 100644 resources/pi-orientation.png diff --git a/common/page.html b/common/page.html index d64fe56..2c8710f 100644 --- a/common/page.html +++ b/common/page.html @@ -4,52 +4,55 @@ {{nav}}
-

Legend

-

Orientate your Pi with the GPIO on the right and the HDMI port on the left.

- +
+

Legend

+

Orientate your Pi with the GPIO on the right and the HDMI port on the left.

+ +
+
diff --git a/resources/pi-orientation.png b/resources/pi-orientation.png new file mode 100644 index 0000000000000000000000000000000000000000..b14f7bf68b7c4c1ea01ac0c6c6fc5e434475bb92 GIT binary patch literal 8119 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 literal 0 HcmV?d00001 diff --git a/resources/pinout.scss b/resources/pinout.scss index 41fe9ed..2b04846 100644 --- a/resources/pinout.scss +++ b/resources/pinout.scss @@ -602,6 +602,14 @@ nav { margin-top:5px; margin-bottom:5px; } + div { + width: 300px; + float: left; + display: block; + } + img {width:196px;height:auto;margin-top:4px; + float: left; + display: block;} p { font-size:$base-font-size * 0.7; padding: 0 10px 10px 0; diff --git a/resources/pinout.scss.css b/resources/pinout.scss.css index db1ad79..3d42646 100644 --- a/resources/pinout.scss.css +++ b/resources/pinout.scss.css @@ -459,6 +459,16 @@ nav { #legend h2 { margin-top: 5px; margin-bottom: 5px; } +#legend div { + width: 300px; + float: left; + display: block; } +#legend img { + width: 196px; + height: auto; + margin-top: 4px; + float: left; + display: block; } #legend p { font-size: 0.84em; padding: 0 10px 10px 0; }