"Fossies" - the Fresh Open Source Software Archive

Member "discourse-2.8.3/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/01-font-scale.hbs" (14 Apr 2022, 3998 Bytes) of package /linux/www/discourse-2.8.3.tar.gz:


As a special service "Fossies" has tried to format the requested text file into HTML format (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

A hint: This file contains one or more very long lines, so maybe it is better readable using the pure text view mode that shows the contents as wrapped lines within the browser window.


    1 
    2 <div class="section-description">
    3   <p>
    4     Discourse users can select from 4 different text sizes in their user settings, by default these are:
    5     <pre>
    6       Smaller: 14px
    7       Normal: 15px <span>(default)</span>
    8       Larger: 17px
    9       Largest: 19px
   10     </pre>
   11   </p>
   12 
   13   <p>
   14     If you'd like to increase the font size of your entire Discourse community, you can override the font-size of the HTML element. You can also provide different font sizes for the user text size settings defined above. The example below increases all text size options by 1px.
   15     <pre>
   16       html {
   17         <span class="hljs-attribute">font-size</span>: 16px; <span>// default font-size  </span>
   18         &.text-size-smaller {
   19           <span class="hljs-attribute">font-size</span>: 15px;
   20         }
   21         &.text-size-larger {
   22           <span class="hljs-attribute">font-size</span>: 18px;
   23         }
   24         &.text-size-largest {
   25           <span class="hljs-attribute">font-size</span>: 20px;
   26         }
   27       }
   28     </pre>
   29   </p>
   30   <p>
   31     If you want to scale the fonts of a specific element, you can use Discourse's font scaling variables. Using the variable system ensures you're using a consistent set of font-sizes throughout your community.
   32     <p>
   33       Changing the font-size of a parent element will proportionately scale the font sizes of all its children.
   34     </p>
   35     <pre>
   36       .parent {
   37         <span class="hljs-attribute">font-size</span>: var(--font-up-3);
   38         <span>// Increases the relative font-size of this element and its children by 3 steps in the scale</span>
   39         .child {
   40           <span>// If this is set to var(--font-down-3) in Discourse's default CSS,
   41              the parent font-size increase above would make this equivalent to var(--font-0)
   42              (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
   43         }
   44       }
   45     </pre>
   46   </p>
   47 </div>
   48 
   49 {{#styleguide-example title="var(--font-up-6), 2.296em"}}
   50   <p class="font-up-6">{{i18n "styleguide.sections.typography.example"}}</p>
   51 {{/styleguide-example}}
   52 
   53 {{#styleguide-example title="var(--font-up-5), 2em"}}
   54   <p class="font-up-5">{{i18n "styleguide.sections.typography.example"}}</p>
   55 {{/styleguide-example}}
   56 
   57 {{#styleguide-example title="var(--font-up-4), 1.7511em"}}
   58   <p class="font-up-4">{{i18n "styleguide.sections.typography.example"}}</p>
   59 {{/styleguide-example}}
   60 
   61 {{#styleguide-example title="var(--font-up-3), 1.5157em"}}
   62   <p class="font-up-3">{{i18n "styleguide.sections.typography.example"}}</p>
   63 {{/styleguide-example}}
   64 
   65 {{#styleguide-example title="var(--font-up-2), 1.3195em"}}
   66   <p class="font-up-2">{{i18n "styleguide.sections.typography.example"}}</p>
   67 {{/styleguide-example}}
   68 
   69 {{#styleguide-example title="var(--font-up-1), 1.1487em"}}
   70   <p class="font-up-1">{{i18n "styleguide.sections.typography.example"}}</p>
   71 {{/styleguide-example}}
   72 
   73 {{#styleguide-example title="var(--font-0), 1em — base font"}}
   74   <p class="font-0">{{i18n "styleguide.sections.typography.example"}}</p>
   75 {{/styleguide-example}}
   76 
   77 {{#styleguide-example title="var(--font-down-1), 0.8706em"}}
   78   <p class="font-down-1">{{i18n "styleguide.sections.typography.example"}}</p>
   79 {{/styleguide-example}}
   80 
   81 {{#styleguide-example title="var(--font-down-2), 0.7579em"}}
   82   <p class="font-down-2">{{i18n "styleguide.sections.typography.example"}}</p>
   83 {{/styleguide-example}}
   84 
   85 {{#styleguide-example title="var(--font-down-3), 0.6599em"}}
   86   <p class="font-down-3">{{i18n "styleguide.sections.typography.example"}}</p>
   87 {{/styleguide-example}}
   88 
   89 {{#styleguide-example title="var(--font-down-4), 0.5745em"}}
   90   <p class="font-down-4">{{i18n "styleguide.sections.typography.example"}}</p>
   91 {{/styleguide-example}}
   92 
   93 {{#styleguide-example title="var(--font-down-5), 0.5em"}}
   94   <p class="font-down-5">{{i18n "styleguide.sections.typography.example"}}</p>
   95 {{/styleguide-example}}
   96 
   97 {{#styleguide-example title="var(--font-down-6), 0.4355em"}}
   98   <p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
   99 {{/styleguide-example}}