theme.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. /*
  2. * palette da 4 colori che pare abbiano un che di maya:
  3. * Crimson sky (#CF6766),Indigo (#30415D), Ultramarine (#031424) e Light Blue (#8EAEBD);
  4. * oppureuna palette forse veramente troppo colorata e accesa:
  5. * Papaya (#E24E42), Mustard(#E9B000), Blush (#EB6E80) e Aqua (#008F95).
  6. * */
  7. // variant 1
  8. $c-crimson-sky: #CF6766;
  9. $c-indigo: #30415D;
  10. $c-ultramarine: #031424;
  11. $c-lightblue: #8EAEBD;
  12. // variant 2
  13. $c-papaya: #E24E42;
  14. $c-mustard: #E9B000;
  15. $c-blush: #EB6E80;
  16. $c-aqua: #008F95;
  17. // variant 1
  18. $c-primary: $c-crimson-sky;
  19. $c-secondary: $c-lightblue;
  20. $c-tertiary: $c-ultramarine;
  21. $c-quaternary: $c-indigo;
  22. $c-text: $c-secondary;
  23. $c-bg: $c-tertiary;
  24. $c-titles: $c-primary;
  25. // variant 2
  26. $c-primary: $c-papaya;
  27. $c-secondary: $c-mustard;
  28. $c-tertiary: $c-blush;
  29. $c-quaternary: $c-aqua;
  30. $c-text: $c-secondary;
  31. $c-bg: $c-tertiary;
  32. $c-titles: $c-primary;
  33. #all-wrapper {
  34. h1,h2,h3,h4,h5,h6,strong,b { color: $c-titles; font-weight: 400; }
  35. }
  36. body { background-color: $c-bg; font-size: 18px; color: $c-text; }
  37. a, a:focus, a:hover, a:visited { color: $c-titles; }
  38. h1 > (a, a:focus, a:active) { color: $c-titles; }
  39. #all-wrapper {
  40. padding-left: 8vw;
  41. }
  42. #menu-row {
  43. display: none;
  44. position: fixed;
  45. top: 0px;
  46. left: 8vw;
  47. background: adjust-color($c-bg, $lightness: -50%); //rgb(34, 34, 34);
  48. width: 89vw;
  49. margin-top: 8vw;
  50. border-radius: 1em;
  51. padding: 1em 0px;
  52. ul { list-style: none; }
  53. > .columns { font-size: 120%; }
  54. }
  55. #logo-div {
  56. position: fixed;
  57. top: 5vw;
  58. left: -8vw;
  59. border-radius: 50%;
  60. box-shadow: 0px 0 3vw black;
  61. line-height: 0;
  62. }
  63. #logo-img {
  64. width: 16vw;
  65. /* alloca una dimensione approssimativa prima del rendering
  66. * non sappiamo la dimensione esatta, ma con min-height possiamo indicargli che è circa-quadrata
  67. * */
  68. min-height: 15vw;
  69. }