Make summary block look like blog page

Site URL: https://www.thetechnologyletter.com

Hello all. I'm trying to duplicate the main landing page, which is a blog page, by using a summary block. The summary block style doesn't match the blog page, so I'd like to use code to force the summary block to look like a blog page in terms of font type and font size and the "read more" link, if possible. Does anyone have any thoughts as to how to force summary blocks to take on the same appearance as blog pages? Thank you in advance for any suggestions!

Can you share link blog page & link to page where you use summary? We can help easier

Thank you, Tuanphan. Here is the existing blog home page: https://www.thetechnologyletter.com

And here is a version of that blog page as a summary block: 

https://www.thetechnologyletter.com/posts-members

As you can see, the title text is not the same font, it is not automatically capitalized, the read more button is not the same, the time stamp is not the same, etc. The question is how to tweak the summary block to make it look like the main blog page, and ideally, to make it look identical.

Add to Design > Custom CSS

body#collection-61af98dda744975c0d01eb7b {
a.summary-title-link {
    text-transform: uppercase;
    font-family: minerva-modern;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.3em;
}
a.summary-read-more-link {
    color: #1470af !important;
    font-family: anziano;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.6em;
    font-size: calc((1.6 - 1) * 1.2vw + 1rem) !important;
    border-bottom: 1px solid;
    display: inline-block !important;
    padding-bottom: 5px !important;
}}

On 3/3/2022 at 8:20 AM, tuanphan said:

Add to Design > Custom CSS

body#collection-61af98dda744975c0d01eb7b {
a.summary-title-link {
    text-transform: uppercase;
    font-family: minerva-modern;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.3em;
}
a.summary-read-more-link {
    color: #1470af !important;
    font-family: anziano;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.6em;
    font-size: calc((1.6 - 1) * 1.2vw + 1rem) !important;
    border-bottom: 1px solid;
    display: inline-block !important;
    padding-bottom: 5px !important;
}}

 

Tuanphan, thank you very much! This is a big help. I notice that the "read more" link still doesn't look like it does on the main page version. It's smaller, and I'd like to get rid of the arrow that's attached to it. Also, I wonder if there's a way to get the date above the title, and more space between Read More and the next post. Side-by-side comparison, the desired look on the left-hand side, the work-in-progress on the right-hand side: