www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/fontyourface/templates/font--full.html.twig

   1 {#
   2 /**
   3  * @file font.html.twig
   4  * Default theme implementation to present Font data.
   5  *
   6  * This template is used when viewing Font pages.
   7  *
   8  *
   9  * Available variables:
  10  * - content: A list of content items. Use 'content' to print all content, or
  11  * - attributes: HTML attributes for the container element.
  12  *
  13  * @see template_preprocess_font()
  14  *
  15  * @ingroup themeable
  16  */
  17 #}
  18 <div{{ attributes.addClass('font') }}>
  19   {% if font_style %}
  20     <div>If you wish to use the font in your theme / css file, use:</div>
  21     <code style="white-space: pre;">
  22       {{- font_style }}
  23     </code>
  24   {% endif %}
  25   <details open>
  26     <summary>Details</summary>
  27     <div class="details-wrapper">
  28       {% if content %}
  29         {{- content -}}
  30       {% endif %}
  31     </div>
  32   </details>
  33   <detail open>
  34     <summary>Preview</summary>
  35     <div class="fontyourface-preview" style="{{- font_style_inline }}">
  36       {% if font_preview %}
  37         {{- font_preview }}
  38       {% else %}
  39         <h1>h1. This is a very large header.</h1>
  40         <h2>h2. This is a large header.</h2>
  41         <h3>h3. This is a medium header.</h3>
  42         <h4>h4. This is a moderate header.</h4>
  43         <h5>h5. This is a small header.</h5>
  44         <h6>h6. This is a tiny header.</h6>
  45
  46         <br>
  47
  48         <h1 class="subheader">h1. subheader</h1>
  49         <h2 class="subheader">h2. subheader</h2>
  50         <h3 class="subheader">h3. subheader</h3>
  51         <h4 class="subheader">h4. subheader</h4>
  52         <h5 class="subheader">h5. subheader</h5>
  53         <h6 class="subheader">h6. subheader</h6>
  54
  55         <hr>
  56
  57         <h3>Definition List</h3>
  58         <h5>Definition lists are great for small block of copy that describe the header</h5>
  59         <dl>
  60         <dt>Lower cost</dt>
  61           <dd>The new version of this product costs significantly less than the previous one!</dd>
  62         <dt>Easier to use</dt>
  63           <dd>We've changed the product so that it's much easier to use!</dd>
  64         <dt>Safe for kids</dt>
  65           <dd>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).</dd>
  66         </dl>
  67         <hr>
  68
  69         <h5>Un-ordered lists are great for making quick outlines bulleted.</h5>
  70         <ul class="disc">
  71           <li>List item with a much longer description or more content.</li>
  72           <li>List item</li>
  73           <li>List item
  74             <ul>
  75               <li>Nested List Item</li>
  76               <li>Nested List Item</li>
  77               <li>Nested List Item</li>
  78             </ul>
  79           </li>
  80           <li>List item</li>
  81           <li>List item</li>
  82           <li>List item</li>
  83         </ul>
  84
  85         <h5>Ordered lists are great for lists that need order, duh.</h5>
  86         <ol>
  87           <li>List Item 1</li>
  88           <li>List Item 2</li>
  89           <li>List Item 3</li>
  90         </ol>
  91
  92
  93
  94         <br>
  95         <h5>Blockquote</h5>
  96         <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
  97
  98         <br>
  99         <h5>Vcard</h5>
 100         <ul class="vcard">
 101           <li class="fn">Gaius Baltar</li>
 102           <li class="street-address">123 Colonial Ave.</li>
 103           <li class="locality">Caprica City</li>
 104           <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
 105           <li class="email"><a href="#">g.baltar@example.com</a></li>
 106         </ul>
 107       {% endif %}
 108     </div>
 109   </detail>
 110 </div>