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