all repos — hastystyles @ b08d7e6e9675a5837e1e2b8d07e1e5648fb41999

The stylesheets for HastyScrybe and HastySite.

src/styles/_blocks.less

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 
.note { .mix-titled-block(@lighter-blue, @dark-blue, @light-blue);}
.tip {.mix-titled-block(@lighter-green, @dark-green, @light-green);}
.warning {.mix-titled-block(@lighter-yellow, @dark-yellow, @light-yellow);}
.blank-sidebar {.mix-titled-block(@lightest-gray, @gray-5, @lightest-gray);}
.sidebar {.mix-titled-block(@light-gray, @gray-5, @light-gray);}
.output {.mix-box(@light-gray, @gray-5, @light-gray);}

.terminal {
  .mix-box(@gray-2, @gray-e, @gray-c);
  .mix-responsive;
  .mix-hyphens(none);
  padding: 0 3px;
  border: 2px solid @gray-9;
  white-space: pre-wrap;
  border-top: 10px solid @gray-9;
  & > p, & > p:first-child {
    margin-top: -40px;
    margin-bottom: 0;
    text-shadow: none;
    font-weight: @normal-weight;
    font-family: @monospace-font;
    font-size: 85%;
    code, pre, samp {
      font-size: 100%;  
    }
    color: @gray-e;
    &:first-child {
      margin-top: 0px;
    }
    &:before {
      font-family: @monospace-font;
      font-style: normal;
      font-weight: @bold-weight;
      color: @dark-green;
      content: "$ ";
    }
  }
}

.terminal-su {
  .terminal;
  & > p, & > p:first-child {
    &:before {
      color: @bright-red;
      content: "# ";
    }
  }
}

div .terminal {
  margin: 2px auto;
  @media screen and (min-width: 880px) {
    margin-left: 80px;
    margin-right: 80px;
  }
}

details {
  font-size: 95%;
  .mix-box(@light-gray, @gray-5, @lightest-gray);
  display: block;
}

details > summary::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23555555' d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z' /%3E %3C/svg%3E");
  display: inline-block;
  margin-right: 2px;
  vertical-align: text-top;
  height: 11px;
  width: 11px;
}

details[open] > summary::before {
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23555555' d='M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z' /%3E %3C/svg%3E");
}

summary {
  cursor: pointer;
  font-weight: bold;
}

summary > * {
  display: inline;
}