Author: Lydia Ding
Hello! The end of fall term is near and the time seems ripe for another blog post. For the past few weeks, most of my digital humanities time has been devoted to developing and revising CSS quote styles for Global Religions in Minnesota, a locally hosted Omeka project that documents the lived experiences of members of various religious communities in Minnesota.
Because the research and content creation is primarily done by students enrolled in a Carleton religion class, it’s important that we make the backend user interface as intuitive as possible so that they can focus on research and writing. Eventually, the quote styles I created will be integrated into the WYSIWYG (what-you-see-is-what-you-get) interface in Omeka so that applying the CSS only takes one click. So far, I’ve made some styles for varying lengths of block quotes, which are portions of texts quoted from other sources and contrast visually with the main text. Below are screenshots of sample styles I made for short, medium-length, and long block quotes. I tried to apply the most visually striking styles for the shorter quotes and used smaller font and minimal graphics for longer ones.
A short block quote:
A medium-length block quote:
A long block quote:
To get feedback on these styles, I used CodePen, which is a neat website that allows users to edit source HTML/CSS/Javascript code and see changes in real-time. Pens are shareable with other team members and with the general public, which makes collaborative web design and idea sharing really convenient. Even if you’re not currently working on a web development project, there is a lot of interesting animation and styling work to look at for design inspiration!
