Change padding with spaces to padding with CSS.

master
Jorg Knobloch 3 years ago
parent 9f4480aeb8
commit a52e56f5b7

@ -8,9 +8,9 @@
<b>Welcome to the <span class="pEpGreen">p≡p</span> Tutorial</b><br><br>
<span class="pEpGreen">p≡p</span> uses a Privacy Status to indicate how secure your communication is.
This Privacy Status is shown as an icon or a horizontal bar.<br><br>
<img class="padImage" src="../resources/images/green-shield.svg" width=20 height=20><span class="padText"> Secure &amp; Trusted</span>
<img class="padImage" src="../resources/images/green-shield.svg" width=20 height=20><span class="padText">Secure &amp; Trusted</span>
<div style="background: #E3D02E;">
<img class="padImage" src="../resources/images/yellow-shield-white.svg" width=20 height=20><span class="padText"> Secure</span>
<img class="padImage" src="../resources/images/yellow-shield-white.svg" width=20 height=20><span class="padText">Secure</span>
</div>
</body>
</html>

@ -5,14 +5,14 @@
<link href="tutorial.css" rel="stylesheet" type="text/css"></head>
</head>
<body>
<img src="../resources/images/green-shield.svg" width=16 height=16><span class="padText2"> <b>Secure &amp; Trusted</b></span><br>
<img class="padImage2" src="../resources/images/green-shield.svg" width=16 height=16><span class="padText2"><b>Secure &amp; Trusted</b></span><br>
When the Trustwords are confirmed to be correct and the Handshake is done,
the communication will be completely secure and trusted.<br><br>
<img src="../resources/images/yellow-shield.svg" width=16 height=16><span class="padText2"> <b>Secure</b></span><br>
<img class="padImage2" src="../resources/images/yellow-shield.svg" width=16 height=16><span class="padText2"><b>Secure</b></span><br>
With this Privacy Status all communication is secure, but to confirm that your
contact is really the person you know, you should compare Trustwords with
this contact.<br><br>
<img src="../resources/images/red-shield.svg" width=16 height=16><span class="padText2"> <b>Mistrusted</b></span><br>
<img class="padImage2" src="../resources/images/red-shield.svg" width=16 height=16><span class="padText2"><b>Mistrusted</b></span><br>
If the Trustwords are not correct, your communication partner is Mistrusted.
</body>
</html>

@ -12,8 +12,7 @@ you will get to the Handshake where you can verify your
communication partner.
</td><td width=100>
<div style="background: #E3D02E;">
<img class="padImage" src="../resources/images/yellow-shield-white.svg" width=20 height=20>
<span class="padText"> Secure</span></div>
<img class="padImage" src="../resources/images/yellow-shield-white.svg" width=20 height=20><span class="padText">Secure</span></div>
</td></tr>
</table><br>
<img src="trustwords.png"><br><br>

@ -13,10 +13,8 @@ value of all communication partners of that message, for example:<br><br>
Secure
</td><td width=15>
</td><td>
<img src="../resources/images/yellow-shield.svg" width=16 height=16>
<span class="padText2"> Communication partner 1: Secure</span><br>
<img src="../resources/images/green-shield.svg" width=16 height=16>
<span class="padText2"> Communication partner 2: Secure &amp; Trusted</span><br>
<img class="padImage2" src="../resources/images/yellow-shield.svg" width=16 height=16><span class="padText2">Communication partner 1: Secure</span><br>
<img class="padImage2" src="../resources/images/green-shield.svg" width=16 height=16><span class="padText2">Communication partner 2: Secure &amp; Trusted</span><br>
</td></tr>
</table>
<br>

@ -3,8 +3,12 @@
}
.padImage {
padding-top: 3px;
padding-right: 4px;
padding-left: 3px;
}
.padImage2 {
padding-right: 4px;
}
.padText {
position: relative;
left: 3px;

Loading…
Cancel
Save