* Use grid instead of flex * Use child margin instead of flex gap * use .grid instead of .flex.flex-column * Missed one conditional flex gap * gap-2 safely deleted since there’s only one element * Add class for crayons-btn-actions This pattern occurs pretty often. Easy class addition and easy swap out once flex gap is supported in target browsers * Use crayons-btn-actions * Adjust styling to use negative margins * apply crayons-btn-actions * use margin-right instead of gap * use .grid instead of .flex.flex-column * use margin instead of gap for indicators/tooltips in headings * remove unused class for clarity * use flex and add margin to small element * remove gap from flex container and add margin to figure * crayons-article__main has neither flex nor grid thus gap has no effect * fix typo * use actual grid columns * use gap instead of flex-column * Apply crayons-btn-actions * Fix modal window display * Safari bein a real pain here Apparently Safari uses a different model to calculate height than other browsers. who knew.
23 lines
1.1 KiB
Text
23 lines
1.1 KiB
Text
<div class="crayons-card crayons-card--content-rows">
|
|
<h2 class="crayons-subtitle-1">
|
|
Generate a personal blog from your <%= community_name %> posts
|
|
</h2>
|
|
<div class="single-app-integration">
|
|
<% if current_user.decorate.stackbit_integration? %>
|
|
<h3>Connected to Stackbit <sup>beta</sup><img width="20px" style="margin-left:2px;" src="<%= asset_path("checkmark-green.svg") %>" /></h3>
|
|
<p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/dashboard">Go To Your Stackbit Dashboard</a></strong></p>
|
|
<p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/create?ref=devto">Create New Stackbit Site</a></strong></p>
|
|
<% else %>
|
|
<h3 class="crayons-subtitle-2 flex items-center">
|
|
Connect to Stackbit
|
|
<span class="ml-2 crayons-indicator crayons-indicator--accent">beta</span>
|
|
</h3>
|
|
<p class="mb-4">
|
|
Automatically generate a self-hosted static blog feed from your <%= community_name %> posts.
|
|
</p>
|
|
<a href="/connecting-with-stackbit" class="crayons-btn">
|
|
Get Started
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|