wasp-lang/wasp
1
1
Fork 0
mirror of https://github.com/wasp-lang/wasp.git synced 2024-12-27 02:52:22 +03:00
Code Issues Projects Releases Wiki Activity

Make blog intro / CTA visually distinguishable (#748)

Browse Source 
* Add class to paragraph containing CTA

Add class to the paragraph containing CTA elements. The class is used to target the container paragraph element to create a box to distinguish CTA section from the content.

* Add css properties for paragraphy containing CTA

Added css properties for paragraph element to create a box around the CTA, centering the text and providing padding.

* Add media query for CTA box

Add media query for CTA box for small screens to prevent individual CTA from breaking. Each CTA appears on an individual line and look clean. CTA dividers are not shown on small screens.
This commit is contained in:
Shah 2022-10-12 14:54:29 +05:00 committed by GitHub
parent 4cdc06dd13
commit 4020295740
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/blog/components/InBlogCta.js
View File

@ -8,7 +8,7 @@ const Divider = () => (
)
const InBlogCta = () => (
<p>
<p className='in-blog-cta-link-container'>
<Link className='in-blog-cta--link'
to='https://e44cy1h4s0q.typeform.com/to/ycUzQa5A'>
We are in Alpha (try it out)!

13
web/src/css/custom.css
View File

@ -51,6 +51,13 @@
/* NOTE(matija): this is used within a blog post (e.g. seed round
* announcement). */
.in-blog-cta-link-container {
border: solid var(--ifm-link-color);
padding: 2px;
text-align: center;
}
.in-blog-cta--link {
color: var(--ifm-color-primary);
font-weight: bold;
@ -128,6 +135,12 @@
font-size: 0.9rem;
}
@media only screen and (max-width: 600px) {
.in-blog-cta--link {display: block;}
.in-blog-cta--divider{display: none;}
}
@media screen and (max-width: 996px) {
.row .col {
padding-top: var(--ifm-col-spacing-vertical);