gildy

Potion Cards

Jun 12th, 2021 (edited)
1,026
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <link rel="preconnect" href="https://fonts.gstatic.com">
  2. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Spartan:wght@400;600&display=swap" rel="stylesheet">
  3.  
  4. <style>
  5.     @keyframes slideInFromLeft {
  6.       0% {
  7.         transform: translateX(-100%);
  8.         opacity: 0;
  9.       }
  10.       100% {
  11.         transform: translateX(0);
  12.         opacity: 1;
  13.       }
  14.     }
  15.     :root {
  16.         --bg-color: #ffffff;
  17.         --fg-color: #373530;
  18.     }
  19.    
  20.     html {
  21.       scroll-behavior: smooth;
  22.     }
  23.    
  24.     body {
  25.         counter-reset: section;
  26.     }
  27.    
  28.     .notion-frame{
  29.         background: #eaeaea;
  30.     }
  31.    
  32.     .notion-page {
  33.         width: 840px;
  34.         padding: 48px;
  35.         border-radius: 0px;
  36.         background: #fff;
  37.     }
  38.    
  39.     .notion-title{
  40.         display: none;
  41.     }
  42.    
  43.     .notion-h1{
  44.         margin-top: 54px !important;
  45.         font-family: 'Playfair Display', serif;
  46.         font-size: 39px;
  47.         width: auto;
  48.         margin-left: 0px;
  49.         font-weight: bold;
  50.         margin-bottom: 0px;
  51.         animation: 0.5s ease-out 0s 1 slideInFromLeft;
  52.         line-height: 54px;
  53.     }
  54.    
  55.     .notion-h2 {
  56.         font-size: 28px;
  57.         margin-top: 1em;
  58.         margin-bottom: 14px;
  59.         width: auto;
  60.         padding-right: 36px;
  61.         margin-left: -64px;
  62.         padding-left: 64px;
  63.         padding-top: 16px;
  64.         padding-bottom: 16px;
  65.         background: #fff201;
  66.     }
  67.    
  68.     .notion-h1 .notion-h-title {
  69.         padding-bottom: 8px;
  70.         display: inline;
  71.     }
  72.    
  73.     .notion-h3 .notion-h-title {
  74.         background: linear-gradient(180deg, transparent 64%, #fff201 64%);
  75.         display: inline;
  76.     }
  77.    
  78.     .notion-header{
  79.         height: 64px;
  80.         background: transparent;
  81.     }
  82.    
  83.     .notion-header .breadcrumb {
  84.         font-size: 16px;
  85.         background: #fff201 !important;
  86.         padding: 18px;
  87.         color: #000 !important;
  88.         font-family: 'Playfair Display', serif;
  89.         transition: 250ms;
  90.         border-radius: 0px;
  91.         font-weight: bold;
  92.     }
  93.    
  94.     .notion-header .breadcrumb:hover {
  95.         background: #000 !important;
  96.         color: #fff201 !important;
  97.     }
  98.    
  99.     .notion-callout{
  100.         transform: scale(0.95);
  101.         transition: transform 250ms;
  102.         border-radius: 0px;
  103.         border: 0px;
  104.         background: #ffffff94;
  105.         box-shadow: 5px 5px 10px #e0e0e0,
  106.              -5px -5px 10px #ffffff;
  107.         width: 94%;
  108.     }
  109.    
  110.     .notion-callout:hover{
  111.         transform: scale(1);
  112.     }
  113.    
  114.     .notion-callout-text {
  115.         font-size: 14px;
  116.         font-family: 'Spartan', sans-serif;
  117.         letter-spacing: -0.02em;
  118.     }
  119.    
  120.     .notion-callout-text a{
  121.         font-size: 14px;
  122.         font-weight: bold;
  123.         line-height: 48px;
  124.         color: #050505;
  125.     }
  126.    
  127.     .notion-callout .notion-page-icon {
  128.         margin-top: 12px;
  129.     }
  130.    
  131.     .notion-bookmark{
  132.         border: none;
  133.         border-radius: 0px;
  134.         transform: scale(0.95);
  135.         transition: transform 250ms;
  136.         background: #ffffff94;
  137.         box-shadow: 5px 5px 10px #e0e0e0,
  138.              -5px -5px 10px #ffffff;
  139.         width: 94%;
  140.         margin-bottom: 16px;
  141.     }
  142.    
  143.     .notion-bookmark:hover{
  144.         transform: scale(1);
  145.     }
  146.    
  147.     .notion-bookmark-title{
  148.         font-size: 16px;
  149.         font-weight: bold;
  150.         margin-top: 8px;
  151.         margin-bottom: 12px;
  152.         font-family: 'Spartan', sans-serif;
  153.         letter-spacing: -0.02em;
  154.     }
  155.    
  156.     .notion-bookmark-image {
  157.         flex: 1 1 64px;
  158.     }
  159.    
  160.     .notion-bookmark-description {
  161.         font-family: 'Spartan', sans-serif;
  162.         letter-spacing: -0.02em;
  163.         margin-bottom: 12px;
  164.     }
  165.    
  166.     .notion-bookmark-link>img {
  167.         width: 32px;
  168.         height: 32px;
  169.         min-width: 32px;
  170.         margin-right: 6px;
  171.     }
  172.    
  173.     .notion-bookmark-link>div {
  174.         margin-top: 8px;
  175.         margin-left: 4px;
  176.         font-family: 'Spartan', sans-serif;
  177.         letter-spacing: -0.02em;
  178.     }
  179.    
  180.     .notion-hr {
  181.         width: 113%;
  182.         border: none;
  183.         margin-bottom: 24px;
  184.         margin-top: 48px;
  185.         height: 100px;
  186.         background: #eaeaea;
  187.         margin-left: -48px;
  188.         border-top: 8px solid #fff201;
  189.        
  190.  
  191.     }
  192.    
  193.     .notion-hr::before{
  194.         content: counter(section);
  195.         counter-increment: section;
  196.         height: auto;
  197.         width: 64px;
  198.         background: #fff201;
  199.         color: #000;
  200.         padding:16px 20px;
  201.         text-align: center;
  202.         position: absolute;
  203.         right: -48px;
  204.         margin-top: -32px;
  205.         font-family: 'Spartan', sans-serif;
  206.         letter-spacing: -0.02em;
  207.         font-size: 14px;
  208.         font-weight: bold;
  209.     }
  210.    
  211.     .notion {
  212.         font-size: 16px;
  213.        
  214.     }
  215.    
  216.     .notion-text{
  217.         font-size: 16px;
  218.         font-family: 'Spartan', sans-serif;
  219.         letter-spacing: -0.02em;
  220.         line-height: 30px;
  221.         margin-bottom: 18px;
  222.     }
  223.    
  224.     .notion-list li{
  225.         font-size: 16px;
  226.         font-family: 'Spartan', sans-serif;
  227.         letter-spacing: -0.02em;
  228.         line-height: 30px;
  229.         margin-bottom: 18px;
  230.     }
  231.    
  232.     .notion-text a{
  233.         font-weight: bold;
  234.         border-bottom: 3px solid #1DA1F2;
  235.         color: #1DA1F2;
  236.         text-decoration: none !important;
  237.     }
  238.    
  239.     .notion-text a:hover{
  240.         border-bottom: 3px solid #1DA1F2 !important;
  241.         text-decoration: none !important;
  242.     }
  243.    
  244.     .notion-list li a{
  245.         font-weight: bold;
  246.         border-bottom: 3px solid #1DA1F2;
  247.         color: #1DA1F2;
  248.         text-decoration: none !important;
  249.     }
  250.    
  251.     .notion-list li a:hover{
  252.         border-bottom: 3px solid #1DA1F2 !important;
  253.         text-decoration: none !important;
  254.     }
  255.    
  256.     .notion-quote {
  257.         font-size: 1.2em;
  258.         font-family: 'Playfair Display', serif;
  259.         font-weight: 400;
  260.         line-height: 1.6em;
  261.         margin-top: 16px;
  262.         margin-bottom: 16px;
  263.     }
  264.    
  265.     .notion-toggle>summary {
  266.         font-family: 'Playfair Display', sans-serif;
  267.         font-size: 22px;
  268.         font-weight: bold;
  269.         margin-bottom: 16px;
  270.     }
  271.    
  272.     .notion-page-link{
  273.         display: none;
  274.     }
  275.    
  276.  
  277.     .notion-title,
  278.     .notion-h-title {
  279.         font-family: 'Playfair Display', serif;
  280.     }
  281.    
  282.     .notion-collection-card-body {
  283.         background: #fafafa;
  284.     }
  285.  
  286.     .notion-table-of-contents {
  287.         width: 160px;
  288.         display: block;
  289.         position: fixed;
  290.         left: 24px;
  291.         bottom: 16px;
  292.         font-family: 'Spartan', sans-serif;
  293.         font-weight: bold;
  294.         z-index: 99;
  295.         -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
  296.         mask-image: linear-gradient(to right, black 50%, transparent 100%);
  297.         overflow-y: scroll;
  298.     }
  299.    
  300.     .notion-table-of-contents-item {
  301.         font-size: 12px;
  302.     }
  303.    
  304.     @media only screen and (max-width: 1216px) {
  305.         .notion-table-of-contents {
  306.             display: none;
  307.         }
  308.     }
  309.    
  310.     @media only screen and (max-width: 840px) {
  311.     .notion-page {
  312.         padding: 24px !important;
  313.         border: none !important;
  314.     }
  315.     .notion-h1 {
  316.         margin-left: -12px;
  317.     }
  318.     .notion-page-icon-wrapper{
  319.         z-index: 99;
  320.         margin-bottom: 16px;
  321.     }
  322.     .notion-hr {
  323.         width: 128%;
  324.     }
  325.    
  326.    
  327.     }
  328. </style>
RAW Paste Data