Latest Post

April 3rd 2019

Module with two columns above the break point and one below it. The first item occupies both columns using the ":first-child" property.
Each item is an HTML5 <article> element with a heading, optional date field, an image, wrapped text and an optional "Show More" link.
The square image is inserted into a round container and floated left to allow the text to wrap.
Curving the text around the image is implemented by setting the "shape-outside" to "circle();" on the round container's selector. In this case, the selector is a <div> which the class name "circle".
The "Show More" link uses the accepted symbol which is an ellipsis inside a pair of brackets. Ellipsis is written as … in HTML

Freedom

March 17th 2019

Freedom is having an ability to act or change without constraint. Anything is "free" if it can change its state easily and is not constrained in its present state. Philosophically , it is associated with having free will and being without undue or unjust constraints. A person has the freedom to do things that will not, in theory or in practice, be prevented …

Lifestyle

March 28th 2019

You don't have to be crazy to be a Smurf but it does help. Everything's not great in life but we can still find beauty in it. You got to think like a Smurf, act like a Smurf and, when you confront an awkward situation, think about what a Smurf would do.
What kind of Smurf do you want to be? You are only limited by your imagination. Anyone can be a Smurf if they follow …

Wrapping Round

This blog entries grid displays the latest post at full width and the rest in two columns when viewed on devices with a browser/screen width above the break point. On narrower screens, they all become full width.
Items
Each item has a heading, optional date, a round image to the left, wrap text and a link with the option to show a title on hover.
Images
The images have a width setting and there is a separate control to make the first image larger.
Once an image size has been decided on, the images should be cropped square to that size before importing into EverWeb. The images used her are about 200px square.
Grid
The grid has controls for setting the grid gap (item spacing) and the padding. It can acommodate up to 49 items which is more than enough for any entries list.
Lazy Loading
When the grid has more than a few items, the download time is not effected since only the first few images are downloaded with the page content. The rest are lazy loaded as the page is scrolled.
Round Wrap
The text does literally wrap around the circular image. This is ahieved by using the CSS shape-outside selector set to "circle()". There is a control to adjusted the spacing between the image and the text.
As with any text wrap widget, the way in which the text wraps the image can be fine tuned using the text's line height control.
Links
To make life easy, the link text is enter only once using a CSS ::after pseudo element. Any text can be entered although the above example uses the internationally recognised symbol for "Read More …" which is three periods enclosed in square brackets.