website

source code for the ttmaths.uk website
Log | Files | Refs | README

main.css (4042B)

      1 :root {
      2 
      3   /* https://ethanschoonover.com/solarized/ */
      4   --base03:    #002b4f; /* #002b36 */
      5   --base02:    #001020; /* #072632 */
      6   --base01:    #586e75;
      7   --base00:    #657b83;
      8   --base0:     #839496;
      9   --base1:     #93a1a1;
     10   --base2:     #d0d0d3; /* #eee8d5 */
     11   --base3:     #e7ddf0; /* #fdf6e3 */
     12   --yellow:    #b58900;
     13   --orange:    #cb4b16;
     14   --red:       #dc322f;
     15   --magenta:   #d33682;
     16   --violet:    #3c3174; /* #6c71c4 */
     17   --blue:      #268bd2;
     18   --cyan:      #2aa198;
     19   --green:     #859900;
     20 
     21   --light-accent:     var(--violet);
     22   --dark-accent:      var(--base03);
     23   --light-bg:         var(--base3);
     24   --dark-bg:          var(--base2);
     25   --dark-border:      var(--base01);
     26   --light-border:     var(--base0);
     27   --text:             var(--base02);
     28 
     29   --body-bg:          var(--light-bg);
     30   --main-bg:          var(--dark-bg);
     31   --main-border:      var(--dark-border);
     32   --inner-border:     var(--light-border);
     33 
     34   --textarea-bg:      var(--body-bg);
     35   --print-border:     var(--dark-accent);
     36   --link:             var(--text);
     37   --button-bg:        var(--dark-accent);
     38 
     39   --graph-1: #008080;
     40   --graph-2: #43509E;
     41   --graph-3: #DC267F;
     42   --graph-4: #FE6100;
     43   --graph-5: #FFB000;
     44 }
     45 
     46 @media (min-width: 960px) {
     47   div#sidebar-and-main {
     48     display: flex;
     49   }
     50   main {
     51     width: 670px;
     52   }
     53   #app {
     54     width: 940px;
     55   }
     56 }
     57 
     58 @media (max-width: 959px) {
     59   nav#sidebar > ul {
     60     display: flex;
     61     gap: 1.5em;
     62   }
     63   nav#sidebar > ul > li > ul {
     64     display: none;
     65   }
     66 }
     67 
     68 @media print {
     69   body:has(.print) {
     70     visibility: hidden;
     71   }
     72   .print {
     73     visibility: visible;
     74     position: absolute;
     75     left: 0;
     76     top: 0;
     77     border: none !important;
     78   }
     79 }
     80 
     81 html {
     82   background-color: var(--body-bg);
     83   color: var(--text);
     84   font-family: Adelle,Roboto Slab,DejaVu Serif,Georgia,Times New Roman,sans-serif;
     85   accent-color: var(--dark-accent);
     86 }
     87 
     88 body {
     89   background-image:
     90     radial-gradient(at top left,  var(--light-accent) 0, rgb(0 0 0 / 0) 50%),
     91     radial-gradient(at top right, var(--dark-accent)  0, rgb(0 0 0 / 0) 50%);
     92   margin: 0;
     93   height: 50em;
     94   max-height: 100vh;
     95 }
     96 
     97 #app {
     98   margin: 0 auto;
     99   padding: 0 1em 1em 1em;
    100 }
    101 
    102 main {
    103   background-color: var(--main-bg);
    104   padding: 22px;
    105   padding-top: 5px;
    106   border: solid 1px var(--main-border);
    107   min-width: min-content;
    108   max-width: 670px;
    109 }
    110 
    111 nav#sidebar {
    112   font-size: 16px;
    113   font-weight: 700;
    114   line-height: 25px;
    115   margin-right: 20px;
    116   min-width: 250px;
    117 }
    118 
    119 ul {
    120   list-style: none;
    121   padding-left: 25px;
    122   margin-bottom: 1.4em;
    123 }
    124 
    125 a {
    126   color: inherit;
    127   text-decoration: none;
    128 }
    129 
    130 a:hover {
    131   text-decoration: dotted underline;
    132 }
    133 
    134 a.active {
    135   text-decoration: underline;
    136 }
    137 
    138 a[href^="http"]::after {
    139   content: " ⎘";
    140 }
    141 
    142 nav#sidebar > ul {
    143   padding-left: 0;
    144 }
    145 
    146 nav#sidebar details {
    147   font-size: 13px;
    148   font-weight: 400;
    149 }
    150 
    151 
    152 header {
    153   display: grid;
    154   grid-template-areas: "logo tagline";
    155   grid-template-columns: auto 1fr;
    156   align-items: center;
    157 }
    158 
    159 header #logo {
    160   grid-area: logo;
    161   color: inherit;
    162 }
    163 
    164 header #tagline {
    165   grid-area: tagline;
    166   margin-left: .8em;
    167   font-size: 1.3rem;
    168 }
    169 
    170 fieldset {
    171   margin-bottom: 0.5em;
    172   border: solid 1px var(--inner-border);
    173 }
    174 
    175 .variables {
    176   display: flex;
    177 }
    178 
    179 .variables > fieldset {
    180   width: 100%;
    181 }
    182 
    183 button {
    184   background-color: var(--button-bg);
    185   margin-right: 9px;
    186   font-weight: 700;
    187   color: white;
    188   border-color: var(--button-bg);
    189 }
    190 
    191 button:hover {
    192   filter: brightness(95%);
    193 }
    194 
    195 button,input {
    196   border-radius: 3px;
    197 }
    198 
    199 button,input,input + label {
    200   cursor: pointer;
    201 }
    202 
    203 textarea {
    204   background-color: var(--textarea-bg);
    205   border: solid 1px var(--main-border);
    206   color: inherit;
    207   width: 100%;
    208 }
    209 
    210 .print {
    211   font-size: large;
    212   padding: 20px;
    213   margin-top: 20px;
    214   background-color: white;
    215   color: black;
    216   border: 3px double var(--print-border);
    217   line-height: 1.8em;
    218 }
    219 
    220 ol.master-question-list {
    221   font-family: KaTeX_Main;
    222   margin: 0;
    223   padding-left: 20px;
    224   display: flex;
    225   flex-wrap: wrap;
    226   gap: 40px;
    227 }
    228 
    229 ol.question-list {
    230   list-style-type: lower-latin;
    231 }
    232 
    233 img.http-error {
    234   max-width: 400px;
    235 }