MachineVisionUiB / machinevision

We are developing a database to map and interpret the representations and uses of machine vision technologies in digital art, computer games and narratives such as science fiction novels, movies and creepypasta.
http://uib.no/en/machinevision
4 stars 0 forks source link

Improve the way pull quotes are displayed #127

Closed jilltxt closed 3 years ago

jilltxt commented 3 years ago

Try displaying pull quotes differently, perhaps using built-in option with italics etc. Make sure that there is space between separate pull quotes. See markup in purple.

Screen Shot 2020-11-02 at 11 33 26
steinmb commented 3 years ago

Our base theme have styles for "Block Quotation Element" - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote - The text from this test field are not rendered within a <blockquote> element.

If I fake it by manually editing the rendered output we expose the built in style set in the theme

example 1

Screenshot 2020-11-16 at 20 22 52

example 2

Screenshot 2020-11-16 at 20 26 33

Suggested fix. Introduce custom twig theme that override quote fields with the correct markup.

steinmb commented 3 years ago

Changes from these two take over field render control.

commit fde2e3544ab0628e53bc8970db4acccb24013b04 (HEAD -> 8.x-dev, origin/HEAD, origin/8.x-dev) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Tue Nov 17 14:26:48 2020 +0100

Issue 127 Wrap field value in a blockquote element

Use base theme bundle quoted visual style.

commit b03f69b53674a1c3e039eb3d7db0271013fed3b8 Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Tue Nov 17 14:11:12 2020 +0100

Pullquote, take over field template from base theme

Allow us to customize field rendered HTML.

The out of the box visual style is clearly made to match content flowing the full node with and and when we split the

Large screen example

Screenshot 2020-11-17 at 14 29 13

small screen example

Screenshot_2020-11-17 Død og oppstandelse (facial recognition in grocery store) Machine Vision

ragsol commented 3 years ago

Is it possible to reduce the font size for the quotes? Some of them are not very interface friendly and demand a lot of scrolling atm.

jilltxt commented 3 years ago

I agree with @ragsol. It's nice having the quotation mark in front but the font size is much too big. I know this is how quotes are often displayed in blog posts and on Medium and so on but it's kind of overpowered for our purpose! This style does make it clearer that these are two different quotes though.

steinmb commented 3 years ago

commit c1a7ce652245f318ff69b117ddc8ae72fdc06b3f (HEAD -> 8.x-dev, origin/HEAD, origin/8.x-dev) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Mon Nov 23 15:23:21 2020 +0100

Issue 127 Reducate line heigt and brake points

- Brakpoint use same width as smaller screen node
layout. Avoid switching font size before layout changes.
- Reduced quote line heigt. Make block quotes elements more
compact.

commit a8920272361e082fe3635ed139913efa33b7ec81 (HEAD -> master, origin/master, origin/HEAD) Author: Stein Magne Bjorklund steinmb@smbjorklund.com Date: Mon Nov 23 15:29:15 2020 +0100

Issue 127 Update theme