go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/kana-server/pkg/static/_static/css/skeleton.css (about)

     1  /*
     2   * Copyright (c) 2023 - Present. Will Charczuk. All rights reserved.
     3   * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository.
     4   */
     5  /* Grid
     6  –––––––––––––––––––––––––––––––––––––––––––––––––– */
     7  .container {
     8      position: relative;
     9      width: 100%;
    10      max-width: 1080px;
    11      margin: 0 auto;
    12      padding: 0 20px;
    13      box-sizing: border-box; }
    14    .column,
    15    .columns {
    16      width: 100%;
    17      float: left;
    18      box-sizing: border-box; }
    19    
    20  /* Clearing
    21  –––––––––––––––––––––––––––––––––––––––––––––––––– */
    22  
    23  /* Self Clearing Goodness */
    24  .container:after,
    25  .row:after,
    26  .u-cf {
    27    content: "";
    28    display: table;
    29    clear: both; }
    30  
    31  /* For devices larger than 400px */
    32  @media (min-width: 400px) {
    33  .container {
    34      width: 85%;
    35      padding: 0; }
    36  }
    37  
    38  /* For devices larger than 550px */
    39  @media (min-width: 550px) {
    40  .container {
    41  width: 80%; }
    42  .column,
    43  .columns {
    44  margin-left: 4%; }
    45  .column:first-child,
    46  .columns:first-child {
    47  margin-left: 0; }
    48  
    49  .one.column,
    50  .one.columns                    { width: 4.66666666667%; }
    51  .two.columns                    { width: 13.3333333333%; }
    52  .three.columns                  { width: 22%;            }
    53  .four.columns                   { width: 30.6666666667%; }
    54  .five.columns                   { width: 39.3333333333%; }
    55  .six.columns                    { width: 48%;            }
    56  .seven.columns                  { width: 56.6666666667%; }
    57  .eight.columns                  { width: 65.3333333333%; }
    58  .nine.columns                   { width: 74.0%;          }
    59  .ten.columns                    { width: 82.6666666667%; }
    60  .eleven.columns                 { width: 91.3333333333%; }
    61  .twelve.columns                 { width: 100%; margin-left: 0; }
    62  
    63  .one-third.column               { width: 30.6666666667%; }
    64  .two-thirds.column              { width: 65.3333333333%; }
    65  
    66  .one-half.column                { width: 48%; }
    67  
    68  /* Offsets */
    69  .offset-by-one.column,
    70  .offset-by-one.columns          { margin-left: 8.66666666667%; }
    71  .offset-by-two.column,
    72  .offset-by-two.columns          { margin-left: 17.3333333333%; }
    73  .offset-by-three.column,
    74  .offset-by-three.columns        { margin-left: 26%;            }
    75  .offset-by-four.column,
    76  .offset-by-four.columns         { margin-left: 34.6666666667%; }
    77  .offset-by-five.column,
    78  .offset-by-five.columns         { margin-left: 43.3333333333%; }
    79  .offset-by-six.column,
    80  .offset-by-six.columns          { margin-left: 52%;            }
    81  .offset-by-seven.column,
    82  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
    83  .offset-by-eight.column,
    84  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
    85  .offset-by-nine.column,
    86  .offset-by-nine.columns         { margin-left: 78.0%;          }
    87  .offset-by-ten.column,
    88  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
    89  .offset-by-eleven.column,
    90  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
    91  
    92  .offset-by-one-third.column,
    93  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
    94  .offset-by-two-thirds.column,
    95  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
    96  
    97  .offset-by-one-half.column,
    98  .offset-by-one-half.columns     { margin-left: 52%; }
    99  
   100  }
   101  
   102  
   103  /* Base Styles
   104  –––––––––––––––––––––––––––––––––––––––––––––––––– */
   105  /* NOTE
   106  html is set to 62.5% so that all the REM measurements throughout Skeleton
   107  are based on 10px sizing. So basically 1.5rem = 15px :) */
   108  html {
   109      font-size: 62.5%; 
   110  }
   111  body {
   112      font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
   113      font-weight: 400;
   114      font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   115      color: #222; 
   116  }
   117  
   118  /* Typography
   119  –––––––––––––––––––––––––––––––––––––––––––––––––– */
   120  h1, h2, h3, h4, h5, h6 {
   121  margin-top: 0;
   122  margin-bottom: 2rem;
   123  font-weight: 300; }
   124  h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
   125  h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
   126  h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
   127  h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
   128  h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
   129  h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
   130  
   131  /* Larger than phablet */
   132  @media (min-width: 550px) {
   133  h1 { font-size: 5.0rem; }
   134  h2 { font-size: 4.2rem; }
   135  h3 { font-size: 3.6rem; }
   136  h4 { font-size: 3.0rem; }
   137  h5 { font-size: 2.4rem; }
   138  h6 { font-size: 1.5rem; }
   139  }
   140  
   141  p {
   142  margin-top: 0; }
   143  
   144  
   145  /* Code
   146  –––––––––––––––––––––––––––––––––––––––––––––––––– */
   147  code {
   148  padding: .2rem .5rem;
   149  margin: 0 .2rem;
   150  font-size: 90%;
   151  white-space: nowrap;
   152  background: #F1F1F1;
   153  border: 1px solid #E1E1E1;
   154  border-radius: 4px; }
   155  pre > code {
   156  display: block;
   157  padding: 1rem 1.5rem;
   158  white-space: pre; }
   159  
   160  
   161  /* Utilities
   162  –––––––––––––––––––––––––––––––––––––––––––––––––– */
   163  .u-full-width {
   164  width: 100%;
   165  box-sizing: border-box; }
   166  .u-max-full-width {
   167  max-width: 100%;
   168  box-sizing: border-box; }
   169  .u-pull-right {
   170  float: right; }
   171  .u-pull-left {
   172  float: left; }
   173  
   174  
   175  /* Misc
   176  –––––––––––––––––––––––––––––––––––––––––––––––––– */
   177  hr {
   178  margin-top: 3rem;
   179  margin-bottom: 3.5rem;
   180  border-width: 0;
   181  border-top: 1px solid #E1E1E1; }
   182  
   183  /* Media Queries
   184  –––––––––––––––––––––––––––––––––––––––––––––––––– */
   185  /*
   186  Note: The best way to structure the use of media queries is to create the queries
   187  near the relevant code. For example, if you wanted to change the styles for buttons
   188  on small devices, paste the mobile query code up in the buttons section and style it
   189  there.
   190  */
   191  
   192  
   193  /* Larger than mobile */
   194  @media (min-width: 400px) {}
   195  
   196  /* Larger than phablet (also point when grid becomes active) */
   197  @media (min-width: 550px) {}
   198  
   199  /* Larger than tablet */
   200  @media (min-width: 750px) {}
   201  
   202  /* Larger than desktop */
   203  @media (min-width: 1000px) {}
   204  
   205  /* Larger than Desktop HD */
   206  @media (min-width: 1200px) {}