Cozy Night and Day

This entry shares the current theme for the Cozy-Cloud website, which works with Bludit CMS. It is made to be very light weight so that those with limited connection and unstable internet networks can still access the site. The theme also utilizes tags/code to activate Screen Readers and which make the information of the website much more accessible to those who use assistive tools to view online media.

This website and theme make room to bring together the work of the Cozy-Cloud by offering up lightweight and accessible introductions to each work and infrastructure. It is also a move towards building up the capacities of the Cozy-Cloud so that it can be accessible to more collaborations and exchanges through this more accessible CMS.

Entries


Download the theme!

This entry shares the git for the theme for the website so that it can be used by others and potentially be edited from into other iterations. It is a minimal and fairly accessible theme to set up and edit.


Instructions on how to install the theme

This entry links through to the Cozy-Cloud page where I share how to install the Cozy Night+Day theme on your own blog hosted with Bludit.


An image sharing the day layout of the Cozy night+day theme. This theme is in light mode and has a gradient background, going from warm yellow at the bottom to off white at the top. On the top left is the title of the site saying "Cozy-Cloud" in a bold black font, and a list of categories and their pages below. On the bottom right is the Cozy-Cloud icon appearing cozy and welcoming.
An image sharing the day layout of the Cozy night+day theme. This theme is in light mode and has a gradient background, going from warm yellow at the bottom to off white at the top. On the top left is the title of the site saying "Cozy-Cloud" in a bold black font, and a list of categories and their pages below. On the bottom right is the Cozy-Cloud icon appearing cozy and welcoming.


An image sharing the night layout of the Cozy night+day theme. This theme is in dark mode and has a gradient background, going from dark red/purple at the bottom to warm red/orange at the top. In the top left is the title of the site saying "Cozy-Cloud" in a bold white font, and a list of categories and their pages below. On the bottom right is the Cozy-Cloud icon appearing cozy and welcoming.
An image sharing the night layout of the Cozy night+day theme. This theme is in dark mode and has a gradient background, going from dark red/purple at the bottom to warm red/orange at the top. In the top left is the title of the site saying "Cozy-Cloud" in a bold white font, and a list of categories and their pages below. On the bottom right is the Cozy-Cloud icon appearing cozy and welcoming.


Screen Reader Code

This entry shares the HTML syntax and tags that make the content of the page accessible to screen readers. There is more to making this theme and the websites content more accessible, but this is the main improvement/learning from this iteration.

<article>

	<h2 class="mb2"> page title </h2>
	
 	<p>
 		by <span class="author">author</span
 		on <time class="dateline">date</time
 	</p>
 	
 	
 	<div class="cover">
 	<img src="./cover.img" alt="a cute cover image"/>
 	</div>
 	
 	<div>
 		<p>
 		Content
 		</p>
 	</div>
 
 </article>

An image sharing how the website activates and can be accessed with a screen reader. This is the default Firefox screen reader and shares the page en-crip-ing time page with the access menu on the left, letting people adapt how they can view the websites information.
An image sharing how the website activates and can be accessed with a screen reader. This is the default Firefox screen reader and shares the blog page about En-crip-ing time with the access menu on the left, letting people adapt how they can view the websites information.