custom.scss
1 :root { 2 } 3 4 .header-github-link:hover { 5 opacity: 0.6; 6 } 7 8 .header-github-link:before { 9 content: ""; 10 width: 24px; 11 height: 24px; 12 display: flex; 13 background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") 14 no-repeat; 15 } 16 17 html[data-theme="dark"] .header-github-link:before { 18 background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") 19 no-repeat; 20 } 21 22 .video-container { 23 display: flex; 24 flex-wrap: wrap; 25 justify-content: space-around; 26 align-items: flex-start; 27 } 28 29 .yt-video { 30 flex: 1 1 auto; 31 max-width: 100%; 32 height: 432px; 33 } 34 35 .two-items { 36 width: 100%; 37 } 38 39 /* Media query for tablets and desktops */ 40 @media (min-width: 768px) { 41 .two-items { 42 width: 48%; 43 } 44 } 45 46 .case-study-container a { 47 display: block; 48 width: 100%; 49 margin-bottom: 20px; 50 } 51 52 .case-study-container a img { 53 width: 100%; 54 height: auto; 55 } 56 57 @media (min-width: 768px) { 58 .case-study-container a { 59 display: inline-block; 60 width: 48%; 61 margin-bottom: 20px; 62 margin-right: 2%; 63 } 64 65 .case-study-container a:nth-child(2n) { 66 margin-right: 0; 67 } 68 } 69 70 .external-link { 71 margin-top: 0.25rem; 72 } 73 74 .hidden { 75 display: none; 76 } 77 78 .theme-doc-toc-desktop { 79 display: none; 80 } 81 82 .cta-buttons { 83 display: flex; 84 gap: 0.75rem; 85 margin: 1.5rem 0; 86 flex-wrap: wrap; 87 justify-content: flex-start; 88 89 .button { 90 background-color: rgb(var(--lsd-text-primary)); 91 color: rgb(var(--lsd-surface-primary)); 92 border: 1px solid rgb(var(--lsd-text-primary)); 93 padding: 0.5rem 1.25rem; 94 text-decoration: none; 95 border-radius: 4px; 96 font-weight: 500; 97 transition: all 0.2s ease; 98 display: inline-block; 99 100 &:hover { 101 background-color: rgb(var(--lsd-surface-primary)); 102 color: rgb(var(--lsd-text-primary)); 103 text-decoration: none; 104 } 105 } 106 } 107 108 html[data-theme="dark"] .cta-buttons .button { 109 background-color: rgb(var(--lsd-text-primary)); 110 color: rgb(var(--lsd-surface-primary)); 111 border-color: rgb(var(--lsd-text-primary)); 112 113 &:hover { 114 background-color: rgb(var(--lsd-surface-primary)); 115 color: rgb(var(--lsd-text-primary)); 116 } 117 }