mfbs

commit

6966fa41cd4b76d3e7abb7ed7fbfdc67f1c6dd7a

parent

c2708cd9a5d189a5ecd995009606ce04d1ea283e

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-05-05 22:16

update example

Diffstat

1 files changed, 167 insertions, 109 deletions

diff --git a/examples/example.css b/examples/example.css

@@ -1,17 +1,22 @@
    1    -1 @viewport {
    2    -1   width: device-width; }
    3    -1 
    4     1 *,
    5     2 *::before,
    6     3 *::after {
    7    -1   box-sizing: border-box; }
   -1     4   box-sizing: border-box;
   -1     5 }
   -1     6 
   -1     7 [hidden] {
   -1     8   display: none !important;
   -1     9 }
    8    10 
    9    -1 img {
   10    -1   max-width: 100%; }
   -1    11 img,
   -1    12 video {
   -1    13   max-width: 100%;
   -1    14 }
   11    15 
   12    16 p, address, blockquote, pre, table, dl, ul, ol, figure, fieldset {
   13    17   margin-top: 0;
   14    -1   margin-bottom: 1em; }
   -1    18   margin-bottom: 1em;
   -1    19 }
   15    20 
   16    21 html {
   17    22   overflow-y: scroll;
@@ -19,145 +24,183 @@ html {
   19    24   color: #333;
   20    25   font-size: 1.2em;
   21    26   font-family: sans-serif;
   22    -1   line-height: 1.5; }
   -1    27   line-height: 1.5;
   -1    28 }
   23    29 
   24    30 h1, h2, h3, h4, h5, h6 {
   25    31   line-height: 1.2;
   26    32   margin-bottom: 0.8rem;
   27    -1   margin-top: 0; }
   28    -1   * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
   29    -1     margin-top: 1.5em; }
   -1    33   margin-top: 0;
   -1    34 }
   -1    35 * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
   -1    36   margin-top: 1.5em;
   -1    37 }
   30    38 
   31    -1 a {
   -1    39 :link {
   32    40   color: #26c;
   33    -1   text-decoration: underline; }
   34    -1   a:hover, a:focus, a:active {
   35    -1     color: #2b4d80; }
   36    -1 
   37    -1 a:not([href]) {
   38    -1   color: inherit;
   39    -1   text-decoration: inherit; }
   40    -1   a:not([href]):hover, a:not([href]):focus, a:not([href]):active {
   41    -1     color: inherit; }
   -1    41   text-decoration: underline;
   -1    42 }
   -1    43 :link:hover, :link:focus, :link:active {
   -1    44   color: #2b4d80;
   -1    45 }
   -1    46 :link:focus:not(:focus-visible) {
   -1    47   color: #26c;
   -1    48 }
   42    49 
   43    -1 *::selection {
   44    -1   background: #26c;
   45    -1   color: #fff; }
   -1    50 :visited {
   -1    51   color: #26c;
   -1    52 }
   -1    53 :visited:hover, :visited:focus, :visited:active {
   -1    54   color: #2b4d80;
   -1    55 }
   -1    56 :visited:focus:not(:focus-visible) {
   -1    57   color: #26c;
   -1    58 }
   46    59 
   47    60 hr {
   48    61   border: 0;
   49    -1   border-bottom: 1px solid #adadad;
   50    -1   margin: 1em 0; }
   -1    62   border-bottom: 1px solid #8f8f8f;
   -1    63   margin: 1em 0;
   -1    64 }
   51    65 
   52    66 pre, code {
   53    67   font-size: 90%;
   54    68   font-family: monospace;
   55    -1   background-color: whitesmoke; }
   -1    69   background-color: whitesmoke;
   -1    70 }
   56    71 
   57    72 code {
   58    -1   padding: 0 0.25em; }
   -1    73   padding: 0 0.25em;
   -1    74 }
   59    75 
   60    76 pre {
   61    77   padding: 0.5em;
   62    78   overflow: auto;
   63    -1   border: 1px solid #adadad; }
   64    -1   pre code {
   65    -1     background: none;
   66    -1     font-size: 100%;
   67    -1     padding: 0; }
   -1    79   border: 1px solid #8f8f8f;
   -1    80 }
   -1    81 pre code {
   -1    82   background: none;
   -1    83   font-size: 100%;
   -1    84   padding: 0;
   -1    85 }
   68    86 
   69    87 ol, ul {
   70    -1   padding-left: 1.5rem; }
   -1    88   padding-left: 1.5rem;
   -1    89 }
   71    90 
   72    91 dt {
   73    -1   font-weight: bold; }
   -1    92   font-weight: bold;
   -1    93 }
   74    94 
   75    95 dd {
   76    -1   margin-left: 1.5rem; }
   -1    96   margin-left: 1.5rem;
   -1    97 }
   77    98 
   78    99 blockquote {
   79   100   font-style: italic;
   80   101   margin-left: 1.5rem;
   81    -1   margin-right: 0; }
   -1   102   margin-right: 0;
   -1   103 }
   82   104 
   83   105 table {
   84   106   border-collapse: collapse;
   85    -1   border-spacing: 0; }
   -1   107   border-spacing: 0;
   -1   108 }
   86   109 
   87   110 tr {
   88    -1   border-bottom: 1px solid #adadad; }
   -1   111   border-bottom: 1px solid #8f8f8f;
   -1   112 }
   89   113 
   90   114 td, th {
   91   115   text-align: start;
   92   116   padding: 0.25em;
   93    -1   vertical-align: top; }
   -1   117   vertical-align: top;
   -1   118 }
   94   119 
   95   120 textarea,
   96   121 select[multiple] {
   97    -1   resize: vertical; }
   98    -1 
   99    -1 fieldset {
  100    -1   border: 1px solid #adadad; }
   -1   122   resize: vertical;
   -1   123 }
  101   124 
  102   125 sub, sup {
  103    -1   line-height: 0; }
   -1   126   line-height: 0;
   -1   127 }
  104   128 
  105   129 @media print {
  106   130   html {
  107   131     background: transparent;
  108    -1     color: #000; }
  109    -1   h2, h3 {
  110    -1     page-break-after: avoid; } }
   -1   132     color: #000;
   -1   133   }
  111   134 
   -1   135   h1, h2, h3, h4, h5, h6 {
   -1   136     page-break-after: avoid;
   -1   137   }
   -1   138 }
  112   139 body {
  113   140   margin: 2em auto;
  114   141   max-width: 37em;
  115    -1   padding: 0 0.5em; }
   -1   142   padding: 0 0.5em;
   -1   143 }
  116   144 
  117   145 html {
  118    -1   font-size: 2.5vw; }
  119    -1   @media (min-width: 48em) {
  120    -1     html {
  121    -1       font-size: 1.2em; } }
  122    -1   @media (max-width: 36em) {
  123    -1     html {
  124    -1       font-size: 0.9em; } }
   -1   146   font-size: 2.5vw;
   -1   147 }
   -1   148 @media (min-width: 48em) {
   -1   149   html {
   -1   150     font-size: 1.2em;
   -1   151   }
   -1   152 }
   -1   153 @media (max-width: 36em) {
   -1   154   html {
   -1   155     font-size: 0.9em;
   -1   156   }
   -1   157 }
  125   158 
  126   159 label {
  127    -1   display: block; }
   -1   160   display: block;
   -1   161 }
  128   162 
  129    -1 input,
  130    -1 textarea,
  131    -1 select, .button,
   -1   163 .button,
  132   164 button,
  133   165 [type=button],
  134    -1 [type=submit] {
  135    -1   border: 1px solid #adadad;
   -1   166 [type=submit], input,
   -1   167 textarea,
   -1   168 select {
   -1   169   border: 1px solid #8f8f8f;
  136   170   padding: 0.3em 0.75em;
  137   171   font-family: inherit;
  138    -1   font-size: inherit; }
   -1   172   font-size: inherit;
   -1   173   line-height: 1.8;
   -1   174 }
  139   175 
  140   176 input,
  141   177 textarea,
  142   178 select {
  143   179   background: #fff;
  144    -1   color: #333; }
  145    -1   input:focus,
  146    -1   textarea:focus,
  147    -1   select:focus {
  148    -1     border-color: #2b4d80; }
  149    -1   input:-moz-ui-invalid,
  150    -1   textarea:-moz-ui-invalid,
  151    -1   select:-moz-ui-invalid {
  152    -1     border-color: red;
  153    -1     color: red; }
  154    -1   input:disabled,
  155    -1   textarea:disabled,
  156    -1   select:disabled {
  157    -1     border-color: #adadad;
  158    -1     background: whitesmoke;
  159    -1     color: #adadad;
  160    -1     cursor: not-allowed; }
   -1   180   color: #333;
   -1   181 }
   -1   182 input:focus,
   -1   183 textarea:focus,
   -1   184 select:focus {
   -1   185   border-color: #2b4d80;
   -1   186 }
   -1   187 input:focus:not(:focus-visible),
   -1   188 textarea:focus:not(:focus-visible),
   -1   189 select:focus:not(:focus-visible) {
   -1   190   border-color: #8f8f8f;
   -1   191 }
   -1   192 input:disabled,
   -1   193 textarea:disabled,
   -1   194 select:disabled {
   -1   195   border-color: #8f8f8f;
   -1   196   background: whitesmoke;
   -1   197   color: #8f8f8f;
   -1   198   cursor: not-allowed;
   -1   199 }
   -1   200 
   -1   201 textarea {
   -1   202   line-height: inherit;
   -1   203 }
  161   204 
  162   205 .button,
  163   206 button,
@@ -166,40 +209,55 @@ button,
  166   209   text-decoration: none;
  167   210   display: inline-block;
  168   211   cursor: pointer;
  169    -1   line-height: 1.8;
  170   212   text-align: center;
  171   213   border-radius: 0.3em;
  172   214   border-color: #26c;
  173   215   background: #26c;
  174    -1   color: #fff; }
  175    -1   .button:hover, .button:focus,
  176    -1   button:hover,
  177    -1   button:focus,
  178    -1   [type=button]:hover,
  179    -1   [type=button]:focus,
  180    -1   [type=submit]:hover,
  181    -1   [type=submit]:focus {
  182    -1     border-color: #275aa6;
  183    -1     background: #275aa6;
  184    -1     color: #fff; }
  185    -1   .button:active,
  186    -1   button:active,
  187    -1   [type=button]:active,
  188    -1   [type=submit]:active {
  189    -1     border-color: #2b4d80;
  190    -1     background: #2b4d80;
  191    -1     color: #fff; }
  192    -1   .button:disabled,
  193    -1   button:disabled,
  194    -1   [type=button]:disabled,
  195    -1   [type=submit]:disabled {
  196    -1     border-color: #91b3e6;
  197    -1     background: #91b3e6;
  198    -1     color: #e9f0fa;
  199    -1     cursor: not-allowed; }
   -1   216   color: #fff;
   -1   217 }
   -1   218 .button:hover, .button:focus,
   -1   219 button:hover,
   -1   220 button:focus,
   -1   221 [type=button]:hover,
   -1   222 [type=button]:focus,
   -1   223 [type=submit]:hover,
   -1   224 [type=submit]:focus {
   -1   225   border-color: #275aa6;
   -1   226   background: #275aa6;
   -1   227   color: #fff;
   -1   228 }
   -1   229 .button:focus:not(:focus-visible),
   -1   230 button:focus:not(:focus-visible),
   -1   231 [type=button]:focus:not(:focus-visible),
   -1   232 [type=submit]:focus:not(:focus-visible) {
   -1   233   border-color: #26c;
   -1   234   background: #26c;
   -1   235   color: #fff;
   -1   236 }
   -1   237 .button:active,
   -1   238 button:active,
   -1   239 [type=button]:active,
   -1   240 [type=submit]:active {
   -1   241   border-color: #2b4d80;
   -1   242   background: #2b4d80;
   -1   243   color: #fff;
   -1   244 }
   -1   245 .button:disabled,
   -1   246 button:disabled,
   -1   247 [type=button]:disabled,
   -1   248 [type=submit]:disabled {
   -1   249   border-color: #91b3e6;
   -1   250   background: #91b3e6;
   -1   251   color: #e9f0fa;
   -1   252   cursor: not-allowed;
   -1   253 }
  200   254 
  201   255 html {
  202    -1   font-family: serif; }
   -1   256   font-family: serif;
   -1   257 }
  203   258 
  204   259 h1, h2, h3, h4, h5, h6 {
  205    -1   font-family: sans-serif; }
   -1   260   font-family: sans-serif;
   -1   261 }
   -1   262 
   -1   263 /*# sourceMappingURL=example.css.map */