www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/base.css

   1 /**
   2  * @file
   3  * This is the base CSS file, for styling elements.
   4  */
   5
   6 html {
   7   box-sizing: border-box;
   8 }
   9 *,
  10 *:before,
  11 *:after {
  12   box-sizing: inherit;
  13   margin-top: 0; /* This allows us to ensure that items side-by-side line up nicely. */
  14 }
  15
  16 a {
  17   color: #00836d;
  18   text-decoration: underline;
  19 }
  20 a:hover,
  21 a:focus {
  22   background-color: #e6eee0;
  23   color: #444;
  24   text-decoration: none;
  25 }
  26
  27 body {
  28   background: #fbf5ee;
  29   color: #464646;
  30   font-family: 'Open Sans', Verdana, sans-serif;
  31   font-size: 1rem;
  32   line-height: 1.5rem;
  33   margin: 0;
  34 }
  35
  36 blockquote {
  37   background: #f4f2e9;
  38   margin-bottom: 1.28rem;
  39   padding: 3rem;
  40 }
  41 blockquote > * {
  42   color: #000;
  43   font-family: 'Scope One', Georgia, serif;
  44   font-size: 1.266rem;
  45   font-weight: 400;
  46   line-height: 1.5;
  47 }
  48 blockquote a {
  49   /* Tweak default link colour to improve contrast for accessibility */
  50   color: #057d6d;
  51 }
  52 blockquote a:hover,
  53 blockquote a:focus {
  54   background-color: #fdfcf9;
  55 }
  56
  57 button,
  58 .button,
  59 [type='button'],
  60 [type='reset'],
  61 [type='submit'] {
  62   background-color: #00836d;
  63   border: 3px solid #00836d;
  64   border-radius: 4px;
  65   color: #fff;
  66   cursor: pointer;
  67   display: inline-block;
  68   padding: 0.4em 1.5em;
  69   text-align: center;
  70   text-decoration: none;
  71   font-family: 'Scope One', Georgia, serif;
  72   font-size: 1.2rem;
  73   font-weight: 400;
  74   font-weight: normal;
  75   transition: background-color 0.5s ease;
  76 }
  77 button:hover,
  78 button:active,
  79 button:focus,
  80 .button:hover,
  81 .button:active,
  82 .button:focus {
  83   background-color: #e6eee0;
  84   border: 3px solid #00836d;
  85   color: #000;
  86   text-decoration: none;
  87   transition: background-color 0.5s ease;
  88 }
  89 button[disabled]:hover,
  90 button[disabled]:active,
  91 button[disabled]:focus,
  92 button[disabled],
  93 .button[disabled]:hover,
  94 .button[disabled]:active,
  95 .button[disabled]:focus,
  96 .button[disabled] {
  97   background: #767775;
  98   color: #464646;
  99   cursor: default;
 100 }
 101
 102 h1 {
 103   font-family: 'Scope One', Georgia, serif;
 104   font-size: 1.424rem; /* +3 based on 1.125 modular scale (major second) */
 105   font-weight: 400;
 106   line-height: 1.2;
 107   margin: 0 0 1.07rem 0;
 108 }
 109 /* Large */
 110 @media screen and (min-width: 60rem) { /* 960px */
 111   h1 {
 112     font-size: 2.369rem;
 113   }
 114 }
 115
 116 h2 {
 117   font-family: 'Scope One', Georgia, serif;
 118   font-size: 1.266rem;  /* +2 based on 1.125 modular scale (major second) */
 119   font-weight: 400;
 120   line-height: 1.2;
 121   margin: 0 0 0.7rem 0;
 122 }
 123 /* Large */
 124 @media screen and (min-width: 60rem) { /* 960px */
 125   h2 {
 126     font-size: 1.77rem;
 127   }
 128 }
 129
 130 h3 {
 131   font-family: 'Scope One', Georgia, serif;
 132   font-size: 1.125rem;/* +1 based on 1.125 modular scale (major second) */
 133   font-weight: 400;
 134   line-height: 1.2;
 135   margin: 0 0 0.96rem 0;
 136 }
 137 /* Large */
 138 @media screen and (min-width: 60rem) { /* 960px */
 139   h3 {
 140     font-size: 1.5rem;
 141   }
 142 }
 143
 144 h4 {
 145   font-family: 'Scope One', Georgia, serif;
 146   font-size: 1rem;
 147   font-weight: 400;
 148   line-height: 1.2;
 149   margin: 0 0 1.28rem 0;
 150 }
 151 /* Large */
 152 @media screen and (min-width: 60rem) { /* 960px */
 153   h4 {
 154     font-size: 1.33rem;
 155   }
 156 }
 157
 158 h5 {
 159   font-family: 'Scope One', Georgia, serif;
 160   font-size: 0.889rem; /* -1 based on 1.125 modular scale (major second) */
 161   font-weight: 700;
 162   line-height: 1.2;
 163   margin: 0 0 1.28rem 0;
 164 }
 165 /* Large */
 166 @media screen and (min-width: 60rem) { /* 960px */
 167   h5 {
 168     font-size: 1.25rem;
 169     font-weight: 400;
 170   }
 171 }
 172
 173 h6 {
 174   font-family: 'Scope One', Georgia, serif;
 175   font-size: 0.79rem; /* -1 based on 1.125 modular scale (major second) */
 176   font-weight: 700;
 177   line-height: 1.2;
 178   margin: 0 0 1.28rem 0;
 179 }
 180 /* Large */
 181 @media screen and (min-width: 60rem) { /* 960px */
 182   h6 {
 183     font-size: 1rem;
 184     font-weight: 400;
 185   }
 186 }
 187
 188 img {
 189   height: auto;
 190   max-width: 100%;
 191 }
 192
 193 input {
 194   border: 2px solid #767775;
 195   color: #000;
 196   margin: 0.25rem 0;
 197   min-width: 100%;
 198   max-width: 100%;
 199   font-size: 1rem;
 200   padding: 0.8rem 0.4rem;
 201 }
 202 input:focus {
 203   border: 3px solid #00836d;
 204   margin-bottom: 2px;
 205 }
 206
 207 textarea {
 208   border: 2px solid #767775;
 209   color: #000;
 210   padding: 0.8rem 0.4rem;
 211 }
 212 textarea:focus {
 213   border: 3px solid #00836d;
 214   margin-bottom: 2px;
 215 }
 216
 217 label {
 218   color: #464646;
 219   display: block;
 220   font-size: 1rem;
 221   font-weight: bold;
 222   margin: 0.25rem 0;
 223 }
 224
 225 ul,
 226 ol {
 227   margin-bottom: 1.28rem;
 228 }
 229 ol ol,
 230 ol ul,
 231 ul ul,
 232 ul ol {
 233   margin-bottom: 0;
 234   margin-top: 0;
 235 }
 236
 237 p {
 238   margin-bottom: 1.28rem;
 239 }