wysiwyg.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /* LISIBILITY */
  2. $vert : #20c498;
  3. $bleu : #1f04a1;
  4. *{font-size:16px;}
  5. div{border: 1px dashed #D4D4D4;}
  6. p:after, ul:after{content:"¬"; color:red;}
  7. h1:before, h2:before, h3:before, h4:before, h5:before, h6:before{
  8. color:blue; font-weight: normal; font-size:10px; vertical-align: super;
  9. }
  10. h1:before{content:"h1 ";}
  11. h2:before{content:"h2 ";}
  12. h3:before{content:"h3 ";}
  13. h4:before{content:"h4 ";}
  14. h5:before{content:"h5 ";}
  15. h6:before{content:"h6 ";}
  16. h2{font-size:24px;}
  17. h3{font-size:18px;}
  18. h4{font-size:16px;}
  19. h5{font-size:14px;}
  20. h6{font-size:12px;}
  21. .side-note-4{}
  22. .side-note-5{}
  23. br:after{content:"·"; color:red; border: 1px solid #999;}
  24. /* LAYOUT AND GRAPHICS */
  25. @mixin full{ width:99%; }
  26. @mixin demi{ width:47%; }
  27. @mixin tiers{ width:29%; }
  28. @mixin quart{ width:23%; }
  29. @mixin right{ float:right; margin-left:2%; }
  30. @mixin left{ float:left; margin-right:2%; }
  31. @mixin center{ display:block; margin:0 auto; }
  32. img{height:auto; margin:0.5em 0;}
  33. p{ border: 1px dashed #848484; }
  34. div{border: 1px solid #1A1A1A;}
  35. img,p,div{ position:relative;
  36. &:before{font-size:10px; color:red; background-color: #1A1A1A; position:absolute; top:0; z-index:3000;}
  37. &.full{@include full; &:before{content:" full ";}}
  38. &.demi{ @include demi; margin-right:2%; &:before{content:" demi "; right:0;}}
  39. &.tiers{ @include tiers; margin-right:2%; &:before{content:" tiers "; right:0;}}
  40. &.quart{ @include quart; margin-right:2%; &:before{content:" quart "; right:0;}}
  41. &.demi-left{ @include demi; @include left; &:before{content:" demi-left "; left:0;}}
  42. &.demi-right{ @include demi; @include right; &:before{content:" demi-right "; right:0;}}
  43. &.demi-center{ @include demi; @include center; &:before{content:" demi-denter "; right:0;}}
  44. &.tiers-left{ @include tiers; @include left; &:before{content:" tiers-left "; left:0;}}
  45. &.tiers-right{ @include tiers; @include right; &:before{content:" tiers-right "; right:0;}}
  46. &.tiers-center{ @include tiers; @include center; &:before{content:" tiers-center "; right:0;}}
  47. &.quart-left{ @include quart; @include left; &:before{content:" quart-left "; left:0;}}
  48. &.quart-right{ @include quart; @include right; &:before{content:" quart-right "; right:0;}}
  49. &.quart-center{ @include quart; @include center; &:before{content:" quart-center "; right:0;}}
  50. }
  51. h2{
  52. font-size: 1.5em;
  53. font-size: 400;
  54. }
  55. h3{
  56. font-size: 2em;
  57. font-weight: 300;
  58. // margin:1em 0 0;
  59. }
  60. p{
  61. line-height: 1.3;
  62. }
  63. a{
  64. color: $vert;
  65. }