patek/patek-logo-custom-element
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed layuot slightly, added more examples.

Browse Source
This commit is contained in:
Greenscreener 2019-07-08 17:32:09 +02:00
parent 82721eacc8
commit d97ad0551b
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples.html
View File

@ -6,6 +6,7 @@
</head> </head>
<body> <body>
<p><patek-logo></patek-logo></p> <p><patek-logo></patek-logo></p>
<p><patek-logo title="Custom" subtitle="Text" style="font-size: 50px;"></patek-logo></p>
<p><patek-logo style="font-size: 100px;"></patek-logo></p> <p><patek-logo style="font-size: 100px;"></patek-logo></p>
<p><patek-logo style="font-size: 75px;"></patek-logo></p> <p><patek-logo style="font-size: 75px;"></patek-logo></p>
<p><patek-logo style="font-size: 60px;"></patek-logo></p> <p><patek-logo style="font-size: 60px;"></patek-logo></p>
@ -29,7 +30,11 @@
<p><patek-logo style="font-size: 50px; color: white; background-color: blueviolet;"></patek-logo><patek-logo style="font-size: 50px; color: blueviolet;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: blueviolet;"></patek-logo><patek-logo style="font-size: 50px; color: blueviolet;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: purple;"></patek-logo><patek-logo style="font-size: 50px; color: purple;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: purple;"></patek-logo><patek-logo style="font-size: 50px; color: purple;"></patek-logo></p>
<br> <br>
<p><patek-logo title="Print" subtitle="Pátek" style="font-size: 50px; color: black; background-color: #ff7300;"></patek-logo></p>
<p><patek-logo title="Talks" subtitle="Pátek" style="font-size: 50px; color: red; background-color: white;"></patek-logo></p>
<p><patek-logo title="Space" subtitle="Pátek" style="font-size: 50px; color: white; background-color: #24007f;"></patek-logo></p>
<br>
<div style="font-size: 20px;"> Vae, germanus ausus! Fermiums observare, tanquam domesticus luna. Heu. Animalis regius advena est. Pol, a bene axona. Pes, itineris tramitem, et lixa. Hydras sunt orexiss de flavum demolitione. Cur homo <patek-logo title="cadunt?"></patek-logo> Absolutios mori, tanquam regius gallus. Zirbus, imber, et orexis. Ventuss sunt apolloniatess de emeritis lapsus. Apolloniates neuter onus est. Aususs tolerare! Cur visus trabem? Vae. <a href="https://example.com"> <patek-logo title="Example!"></patek-logo></a> Exemplar, cacula, et scutum. Byssus trabems, tanquam velox danista. Calceuss assimilant!</div> <div style="font-size: 20px;"> Vae, germanus ausus! Fermiums observare, tanquam domesticus luna. Heu. Animalis regius advena est. Pol, a bene axona. Pes, itineris tramitem, et lixa. Hydras sunt orexiss de flavum demolitione. Cur homo <patek-logo title="cadunt?"></patek-logo> Absolutios mori, tanquam regius gallus. Zirbus, imber, et orexis. Ventuss sunt apolloniatess de emeritis lapsus. Apolloniates neuter onus est. Aususs tolerare! Cur visus trabem? Vae. <a href="https://example.com"> <patek-logo title="Example!"></patek-logo></a> Exemplar, cacula, et scutum. Byssus trabems, tanquam velox danista. Calceuss assimilant!</div>
<script src="patekLogo.js"></script> <script src="patekLogo.js"></script>
</body> </body>
</html> </html>

4
patekLogo.js
View File

@ -66,7 +66,7 @@ class PatekLogo extends HTMLElement {
#subtitleText { #subtitleText {
font-size: 0.6em; font-size: 0.6em;
top: 1.583333333em; top: 1.583333333em;
right: 3.31666666em; right: 3.4em;
} }
#wrapper { #wrapper {
position: relative; position: relative;
@ -105,4 +105,4 @@ class PatekLogo extends HTMLElement {
} }
} }
} }
customElements.define("patek-logo", PatekLogo); customElements.define("patek-logo", PatekLogo);