New AMP page fix css

Using Ghost
1

with the new layout of the AMP page I noticed that the css breaks if a caption is added to the code:

Cattura
Cattura1367×880 43.5 KB

with the new layout of the AMP page I noticed that the css breaks if a caption is added to the code:

I modified this:

.post-content :not(pre) code {
    vertical-align: middle;
    padding: 0.15em 0.4em 0.15em;
    border: #e1eaef 1px solid;
    font-weight: 400;
    font-size: 0.9em;
    line-height: 1em;
    color: #dc0050;
    background: #f0f6f9;
    border-radius: 0.25em;
}

in this:

p code {
    vertical-align: middle;
    padding: 0.15em 0.4em 0.15em;
    border: #e1eaef 1px solid;
    font-weight: 400;
    font-size: 0.9em;
    line-height: 1em;
    color: #dc0050;
    background: #f0f6f9;
    border-radius: 0.25em;
}

and I added this:

figure.kg-card.kg-code-card{
    overflow: scroll;
    padding: 16px 20px;
    color: #fff;
    background: #1f2428;
    border-radius: 5px;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
}

This is the result:

Cattura2
Cattura21323×923 46.9 KB

Any suggestions are welcome

4

Is it a custom created AMP page?

5

I guess he is talking about new default AMP design.

1 Like
6

I created a new AMP file with integration of Google Analytics and Related posts.