fix: email styling (#918)

This commit is contained in:
Livio Amstutz 2020-10-28 15:26:20 +01:00 committed by GitHub
parent b9fdcb53a2
commit 6a91cfe5a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 504 additions and 718 deletions

View File

@ -1,46 +1,47 @@
<mjml>
<mj-head>
<mj-attributes>
<mj-text align="center" color="#ffffff" font-family="Lato" />
<mj-font name="Lato" href="http://fonts.googleapis.com/css?family=Lato:200,300,400,600" />
<mj-text align="center" color="{{.SecondaryColor}}" font-family="Lato, Arial, Helvetica, sans-serif" />
<mj-section padding="0" full-width="full-width" />
<mj-body background-color="#222324" />
<mj-body background-color="{{.PrimaryColor}}" width="800px" />
<mj-image padding="0" />
<mj-column padding="0" />
<mj-wrapper padding-left="0" />
<mj-wrapper full-width="full-width" />
<mj-class name="left" position="" />
</mj-attributes>
<mj-style>
@media (max-width:480px) { .mobile_hidden { display:none !important; } }
</mj-style>
</mj-head>
<mj-body>
<mj-wrapper background-url="https://static.zitadel.ch/zitadel-logo-outline-light.png" border="0" background-repeat="no-repeat">
<mj-section>
<mj-group>
<mj-column>
<mj-image src="https://static.zitadel.ch/zitadel-logo-light.png" align="left" width="100px" padding="0" />
<mj-image src="https://static.zitadel.ch/zitadel-logo-light.png" align="left" width="150px" padding="20px 0 50px 20px" />
</mj-column>
</mj-group>
</mj-section>
<mj-section>
<mj-group>
<mj-column width="20%">
<mj-image src="https://static.zitadel.ch/flavor-spikes-small-opacity40.png" align="left" heigh="80%" width="80%" />
</mj-column>
<mj-column width="60%">
<mj-text font-size="2rem" font-weight="light">{{.Greeting}}</mj-text>
<mj-text font-size="1.25rem" font-weight="light">{{.Text}}</mj-text>
<mj-button href="{{.URL}}" background-color="#5282C1" font-size="16px">{{.ButtonText}}</mj-button>
<mj-text>
<a href="http://www.caos.ch" style="color:#e91e63; text-decoration: none;" target="_blank"> CAOS AG </a> | Teufener Strasse 19 | CH-9000 St. Gallen </mj-text>
</mj-column>
<mj-column width="20%">
<mj-image src="https://static.zitadel.ch/flavor-spikes-big-opacity40.png" align="right" />
</mj-column>
</mj-group>
<mj-column width="20%" css-class="mobile_hidden">
<mj-image src="https://static.zitadel.ch/flavor-spikes-small-opacity40.png" align="left" height="100%" width="80%" />
</mj-column>
<mj-column width="60%">
<mj-text font-size="2rem" font-weight="200">{{.Greeting}}</mj-text>
<mj-text font-size="1rem" line-height="1.5" font-weight="light">{{.Text}}</mj-text>
<mj-button href="{{.URL}}" background-color="#5282C1" font-size="16px">{{.ButtonText}}</mj-button>
<mj-text padding="30px 0">
<a href="http://www.caos.ch" style="color:#e91e63; text-decoration: none;" target="_blank"> CAOS AG </a> | Teufener Strasse 19 | CH-9000 St. Gallen </mj-text>
</mj-column>
<mj-column width="20%" css-class="mobile_hidden">
<mj-image src="https://static.zitadel.ch/flavor-spikes-big-opacity40.png" align="right" />
</mj-column>
</mj-section>
<mj-section>
<mj-group>
<mj-column>
<mj-image src="https://static.zitadel.ch/logo_whitefont_transparentbg.png" align="right" heigh="65%" width="65%" padding-right="20px" />
<mj-column padding="20px">
<mj-image src="https://static.zitadel.ch/logo_whitefont_transparentbg.png" align="right" heigh="65%" width="65%" />
</mj-column>
</mj-group>
</mj-section>

File diff suppressed because it is too large Load Diff