☰

Small Apple.com

Shrinks apple home page to be readable for normal people

  1. /* ==UserStyle==
  2. @name           Small Apple.com
  3. @namespace      https://greatest.deepsurf.us/en/users/759797-lego-savant
  4. @version        1.0
  5. @description    Shrinks apple home page to be readable for normal people
  6. @author         legosavant
  7. @license        GPLv3
  8. ==/UserStyle== */
  9. /******************************HOME*************************/
  10. /*super huge*/
  11. .main [data-module-template="heroes"] {
  12.     --columns:3;
  13.     --content-height:400px;
  14.     --gutter-width: 8px;
  15.     --gutter-half-width: 4px;
  16.     --gutter-and-half-width: 12px;
  17. }
  18. .main [data-module-template="heroes"] .unit-image-wrapper .unit-image[class] {
  19.     background-size:54%;
  20.     background-position:center bottom
  21. }
  22. .main [data-module-template="heroes"] [data-unit-id] .unit-copy-wrapper {
  23.     padding-top:4px
  24. }
  25. @media (max-width:1681px) {
  26.     .main [data-module-template="heroes"] {
  27.         --content-height:300px
  28.     }
  29.     .main [data-module-template="heroes"] .unit-image-wrapper .unit-image[class] {
  30.         background-size:40%;
  31.         background-position:center bottom
  32.     }
  33.     .main [data-module-template="heroes"] [data-unit-id] .unit-copy-wrapper>*.headline {
  34.         font-size:36px
  35.     }
  36.     .main [data-module-template="heroes"] [data-unit-id] .unit-copy-wrapper>*.subhead {
  37.         font-size:24px
  38.     }
  39.     .main [data-module-template="heroes"] .unit-copy-wrapper>*.callout, .main [data-module-template="heroes"] [data-unit-id] .unit-copy-wrapper>*.cta, .main [data-module-template="heroes"] [data-unit-id] .unit-copy-wrapper>*.cta-links {
  40.         font-size:16px
  41.     }
  42. }
  43. /*huge*/
  44. .main [data-module-template="promos"] {
  45.     --columns:6;
  46.     --content-height:300px
  47. }
  48. .main [data-module-template="promos"] .unit-image-wrapper .unit-image[class] {
  49.     background-size:52%;
  50.     background-position:center bottom
  51. }
  52. .main [data-module-template="promos"] [data-unit-id] .unit-copy-wrapper .headline {
  53.     margin-top:6px;
  54.     font-size:24px
  55. }
  56. .main [data-module-template="promos"] [data-unit-id] .unit-copy-wrapper .subhead {
  57.     font-size:16px
  58. }
  59. @media (max-width:1681px) {
  60.     .main [data-module-template="promos"] .unit-image-wrapper .unit-image[class] {
  61.         background-size:43%;
  62.         background-position:center bottom
  63.     }
  64.     .main [data-module-template="promos"] {
  65.         --columns:6;
  66.         --content-height:250px
  67.     }
  68.     .main [data-module-template="promos"] [data-unit-id] .unit-copy-wrapper .headline {
  69.         margin-top:4px;
  70.         font-size:20px
  71.     }
  72.     .main [data-module-template="promos"] [data-unit-id] .unit-copy-wrapper .subhead, .main [data-module-template="promos"] [data-unit-id] .unit-copy-wrapper .cta-links, .main [data-module-template="promos"] [data-unit-id] .unit-copy-wrapper .cta {
  73.         font-size:14px
  74.     }
  75. }