BlockPress mentions, Amber Theme and Icing Palette

in #utopian-io7 years ago

AmberIcing.png

<p dir="auto"><span><a href="https://github.com/blockpress/blockpress.me" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/blockpress/blockpress.me <h1>New Features <h2>Tags and Mentions <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmdMu63aPfqsPJRBsCC8XsFuMQGLnjht6QZnf3yZGJLPRk/Firefox_Screenshot_2018-05-13T11-40-54.190Z.png" alt="Firefox_Screenshot_2018-05-13T11-40-54.190Z.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmdMu63aPfqsPJRBsCC8XsFuMQGLnjht6QZnf3yZGJLPRk/Firefox_Screenshot_2018-05-13T11-40-54.190Z.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmdMu63aPfqsPJRBsCC8XsFuMQGLnjht6QZnf3yZGJLPRk/Firefox_Screenshot_2018-05-13T11-40-54.190Z.png 2x" /> <p dir="auto">The BlockPress Steem module allowed links on tags in the profile description and now I enabled this feature in posts and comments. I decided to also add links to mentions in profile, posts and comments. Since BlockPress now has <a href="https://steemit.com/utopian-io/@antonchanning/blockpress-now-has-permlinks-and-posts-by-tag" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">permlink support, the user will be able to look up tags and users without losing a path back to the original article they were reading. <p dir="auto">Introducing this feature means that BlockPress sites will not only provide a personal blog but also an interface to browse the steem blockchain. <h2>Generic Classes <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmPhpETEWN29FhQsXo5nDJdVnTuNG3oHDXc3gm9UXT77Kg/Firefox_Screenshot_2018-05-13T11-44-02.006Z.png" alt="Firefox_Screenshot_2018-05-13T11-44-02.006Z.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmPhpETEWN29FhQsXo5nDJdVnTuNG3oHDXc3gm9UXT77Kg/Firefox_Screenshot_2018-05-13T11-44-02.006Z.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmPhpETEWN29FhQsXo5nDJdVnTuNG3oHDXc3gm9UXT77Kg/Firefox_Screenshot_2018-05-13T11-44-02.006Z.png 2x" /> <p dir="auto">In my <a href="https://steemit.com/utopian-io/@dana-varahi/new-improvements-and-steem-posts-preview-feature" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">previous blog I introduced box-shadow classes in palettes to avoid conflicts with themes that do not want to use them. This creates more flexibility and gives more control to theme creators that want to support palettes. I have now added <code>enclosure and <code>gradient classes. In palettes, enclosures define border, background and font colours, whilst the rest of their styling varies with each theme. Each palette supports multiple enclosures. Theme designers can choose which one they want to add to which HTML elements. If they do so instead of hard coding their colour choices, their theme will be compatible with all existing BlockPress palettes. <h2>Amber Theme <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmRxYuBxWLZ3Erw7dTy1WYuuDcfDxQq5yF1XjBBoQpa73D/Firefox_Screenshot_2018-05-13T12-03-15.690Z.png" alt="Firefox_Screenshot_2018-05-13T12-03-15.690Z.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmRxYuBxWLZ3Erw7dTy1WYuuDcfDxQq5yF1XjBBoQpa73D/Firefox_Screenshot_2018-05-13T12-03-15.690Z.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmRxYuBxWLZ3Erw7dTy1WYuuDcfDxQq5yF1XjBBoQpa73D/Firefox_Screenshot_2018-05-13T12-03-15.690Z.png 2x" /> <p dir="auto">This new theme is very simple and minimalist. The menu uses CSS transitions and visually blends with the rest of the content. The header is featured at the bottom of the article, just above the footer (you can see this in the title image). <h3>Responsive Design <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmUwogHtbP2bxXnZVf2C9wMv2y5AhHkWCbj6nbJdYiPJmp/Firefox_Screenshot_2018-05-13T12-01-44.748Z.png" alt="Firefox_Screenshot_2018-05-13T12-01-44.748Z.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmUwogHtbP2bxXnZVf2C9wMv2y5AhHkWCbj6nbJdYiPJmp/Firefox_Screenshot_2018-05-13T12-01-44.748Z.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmUwogHtbP2bxXnZVf2C9wMv2y5AhHkWCbj6nbJdYiPJmp/Firefox_Screenshot_2018-05-13T12-01-44.748Z.png 2x" /> <p dir="auto">I created Amber theme with a responsive design from the start. Currently I only included one option for screens 800 pixels or less. I will be adding styles for smaller screens in the future. <h2>Icing Palette <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmS8S4KMtjYywxVVWsPWGkKrdktC4SrFFJimS9cWtBszaX/Firefox_Screenshot_2018-05-13T12-06-51.350Z.png" alt="Firefox_Screenshot_2018-05-13T12-06-51.350Z.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmS8S4KMtjYywxVVWsPWGkKrdktC4SrFFJimS9cWtBszaX/Firefox_Screenshot_2018-05-13T12-06-51.350Z.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmS8S4KMtjYywxVVWsPWGkKrdktC4SrFFJimS9cWtBszaX/Firefox_Screenshot_2018-05-13T12-06-51.350Z.png 2x" /> <p dir="auto">Icing palette is a cold equivalent of the vanilla palette. Grey white and blue tones generally dominate the web these days and I wanted to make a palette that will appeal to people who like these colours. Most websites use a white background with black fonts to create high contrast. It is something I personally dislike since it gives me headaches. Apparently, this is something very common in people with dyslexia and other learning difficulties. Bearing this in mind, I avoid using white and black and replace them with less contrasting colours. In my opinion, the result is more elegant and still readable. <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://steemitimages.com/DQmPfG9BgUbMayhJNB3e4AHwDrL2kn5xsZds2oiSLMLfaPL/Firefox_Screenshot_2018-05-13T12-08-44.614Z.png" alt="Firefox_Screenshot_2018-05-13T12-08-44.614Z.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/DQmPfG9BgUbMayhJNB3e4AHwDrL2kn5xsZds2oiSLMLfaPL/Firefox_Screenshot_2018-05-13T12-08-44.614Z.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/DQmPfG9BgUbMayhJNB3e4AHwDrL2kn5xsZds2oiSLMLfaPL/Firefox_Screenshot_2018-05-13T12-08-44.614Z.png 2x" /> <h1>Commits <ul> <li><a href="https://github.com/blockpress/blockpress.me/commit/d74a7c85bb69534ac334ea2f405714830d48cbdf" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Tags and Mentions <li><a href="https://github.com/blockpress/blockpress.me/commit/f24be49a9e76c1ecc7a974df4082b3c38d5f6cc7" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Generic Classes in CSS <li><a href="https://github.com/blockpress/blockpress.me/commit/f692353f6d9cae4dc69bd91b97be7c5b2d8e7907" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Generic Classes in HTML <li><a href="https://github.com/blockpress/blockpress.me/commit/e9959c5eb63f9034a7a3f4b1bd88abfb4fe6880e" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Amber Theme <li><a href="https://github.com/blockpress/blockpress.me/commit/65943cf9e35515d79f22b345b7175f908ba93768" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Icing Palette <h1>Follow <p dir="auto"><span>You can now follow the progress of BlockPress.me CMS on various social media, including our new channel on steem chat, and our new <a href="/@blockpress">@blockpress steem account! <ul> <li><a href="https://steemit.chat/channel/blockpress" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Steem Chat BlockPress channel <li><a href="https://www.facebook.com/groups/blockpress/" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">BlockPress on FaceBook <li><a href="https://www.reddit.com/r/blockpressCMS/" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">BlockPress subreddit
Sort:  

Thanks for the contribution!

A really well-structured post, keep up the good work!

Click here to see how your contribution was evaluated.



Chat with us on Discord.
[utopian-moderator]Need help? Write a ticket on https://support.utopian.io/.

Thank you for approving it so quickly @amosbastian. I really appreciate your effort. :)


Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!Hey @dana-varahi

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Great Post and nice development
Thanks for sharing this blog.

Great information and nice Post
I appreciate your blog.

Great development
I love your every Post
I appreciate your blog.