Start on light mode

This commit is contained in:
JST5000
2023-04-10 16:52:34 -07:00
committed by Caleb Kniffen
parent bddd33c58a
commit 0b80d73698
12 changed files with 64 additions and 65 deletions

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -1,46 +0,0 @@
<svg width="125" height="162" viewBox="0 0 125 162" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.1215 45.2909C30.1215 44.0007 31.0272 43.4778 32.1445 44.1228L36.865 46.8482L36.865 123.846L30.1215 119.953L30.1215 45.2909Z" fill="#1C1C1C"/>
<path d="M31.5232 45.5218C30.4059 44.8767 30.4059 43.8308 31.5232 43.1857L78.0093 16.347C79.1266 15.7019 80.9381 15.7019 82.0555 16.347L85.2369 18.1838C86.7266 19.0439 86.7266 20.4384 85.2369 21.2985L39.4251 47.7479C38.3078 48.393 36.4963 48.393 35.379 47.7479L31.5232 45.5218Z" fill="#343437"/>
<g filter="url(#filter0_d_2424_2576)">
<path d="M41.1556 50.269C39.9779 50.949 39.4634 52.1463 39.4632 55.4751L39.4631 59.8673L39.461 125.553C39.461 126.413 40.0648 126.762 40.8096 126.332L89.1664 98.4112C89.9113 97.9811 90.5151 96.9352 90.5151 96.0751L90.5172 30.389L90.5174 25.9968C90.5175 22.668 90.003 22.0649 88.8253 22.7449L85.2008 24.8376L84.9267 24.9959L44.6698 48.24L41.1556 50.269Z" fill="#343437"/>
</g>
<path opacity="0.2" d="M44.9141 55.8181L85.0616 32.6389" stroke="#9A52FF" stroke-width="3.12133" stroke-linecap="round"/>
<path opacity="0.2" d="M44.9141 62.7719L55.6201 56.5908" stroke="#5BEB9D" stroke-width="3.12133" stroke-linecap="round"/>
<path opacity="0.3" d="M44.9141 69.3393L85.0616 46.1602" stroke="#838386" stroke-width="3.12133" stroke-linecap="round"/>
<path opacity="0.3" d="M44.9141 76.2931L76.363 58.1361" stroke="#838386" stroke-width="3.12133" stroke-linecap="round"/>
<path opacity="0.3" d="M44.9141 82.861L76.363 64.704" stroke="#838386" stroke-width="3.12133" stroke-linecap="round"/>
<path opacity="0.3" d="M44.9141 109.837L76.363 91.6803" stroke="#454549" stroke-width="3.12133" stroke-linecap="round"/>
<path opacity="0.3" d="M44.9141 89.338L76.363 71.181" stroke="#838386" stroke-width="3.12133" stroke-linecap="round"/>
<path opacity="0.3" d="M44.9141 116.314L76.363 98.1571" stroke="#454549" stroke-width="3.12133" stroke-linecap="round"/>
<g filter="url(#filter1_d_2424_2576)">
<path d="M49.1556 56.269C47.9779 56.949 47.4634 58.1463 47.4632 61.4751L47.4631 65.8673L47.461 131.553C47.461 132.413 48.0648 132.762 48.8096 132.332L97.1664 104.411C97.9113 103.981 98.5151 102.935 98.5151 102.075L98.5172 36.389L98.5174 31.9968C98.5175 28.668 98.003 28.0649 96.8253 28.7449L93.2008 30.8376L92.9267 30.9959L52.6698 54.24L49.1556 56.269Z" fill="#343437"/>
</g>
<path d="M52.9141 61.8181L93.0616 38.6389" stroke="#9A52FF" stroke-width="3.12133" stroke-linecap="round"/>
<path d="M52.9141 68.7719L63.6201 62.5908" stroke="#5BEB9D" stroke-width="3.12133" stroke-linecap="round"/>
<path d="M52.9141 75.3393L93.0616 52.1602" stroke="#838386" stroke-width="3.12133" stroke-linecap="round"/>
<path d="M52.9141 82.2931L84.363 64.1361" stroke="#838386" stroke-width="3.12133" stroke-linecap="round"/>
<path d="M52.9141 88.861L84.363 70.704" stroke="#838386" stroke-width="3.12133" stroke-linecap="round"/>
<path d="M52.9141 115.837L84.363 97.6803" stroke="#454549" stroke-width="3.12133" stroke-linecap="round"/>
<path d="M52.9141 95.338L84.363 77.181" stroke="#838386" stroke-width="3.12133" stroke-linecap="round"/>
<path d="M52.9141 122.314L84.363 104.157" stroke="#454549" stroke-width="3.12133" stroke-linecap="round"/>
<defs>
<filter id="filter0_d_2424_2576" x="13.9328" y="0.159618" width="102.113" height="155.076" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3.19102"/>
<feGaussianBlur stdDeviation="12.7641"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2424_2576"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2424_2576" result="shape"/>
</filter>
<filter id="filter1_d_2424_2576" x="21.9328" y="6.15962" width="102.113" height="155.076" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3.19102"/>
<feGaussianBlur stdDeviation="12.7641"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2424_2576"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2424_2576" result="shape"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -1,10 +1,40 @@
// Light mode
.sdk-img {
align-self: center;
}
.light {
content:url(../assets/img/backgrounds/sdk-white.png);
.light {
.sdk-img {
content:url(/assets/img/backgrounds/sdk-white.png);
}
.ref-book-illustration {
content:url(/img/graphics/ref-book-light.png)
}
.tutorial-illustration {
content:url(/img/graphics/tutorials-illustration-light.png)
}
.concepts-doc-illustration {
content:url(/img/graphics/concepts-docs-light.png)
}
}
.dark {
.sdk-img {
content:url(/assets/img/backgrounds/sdk-black.png);
}
.ref-book-illustration {
content:url(/img/graphics/ref-book.png)
}
.tutorial-illustration {
content:url(/img/graphics/tutorials-illustration.png)
}
.concepts-doc-illustration {
content:url(/img/graphics/concepts-docs.png)
}
}
@@ -28,7 +58,11 @@
.page-docs-index {
.dev-tools-links {
grid-gap: 40px;
h6::before {
margin-top: -20px;
height: 20px;
}
h6:hover {
color:#9A52FF;
@@ -187,3 +221,9 @@
width: calc(100% + 64px);
}
}
.explore-links {
.card-grid {
grid-gap: 40px;
}
}

View File

@@ -1060,7 +1060,15 @@
.page-docs-index {
&::before {
background-image: url(../img/backgrounds/bg-docs.png);
// TODO: Get this image to rotate properly :)
background-image: url(../img/backgrounds/bg-overview-top@2x.png);
position: absolute;
width: 464.17px;
height: 580px;
left: 561.12px;
top: 366.76px;
transform: rotate(165deg);
}
.center-search {

View File

@@ -25,10 +25,10 @@
{% endif %}
{% endmacro %}
{% macro flatCard(href, title, description, linkText, src) %}
{% macro flatCard(href, title, description, linkText, imgClass) %}
<div class="card video-image flat-card">
<img
src={{src}}
class="mb-2 {{imgClass}}"
alt={{title}}
/>
<h5 class="row">{{ title }}</h5>
@@ -231,30 +231,27 @@
%}
<section class="text-left">
<div class="mx-auto mb-10">
<h4>Getting Started</h4>
</div>
<div class="card-grid flat-card-grid card-grid-3xN">
<div class="col">
{{ flatCard("./concepts/",
"Concepts",
"Lorem ipsum dolor sit amet consectetur. Ullamcorper senectus egestas mauris ante tellus eu feugiat cursus. Quis in mi augue curabitur orci purus massa nec sagittis.",
"Learn the \"what\" and the \"why\" behind fundamental aspects of the XRP Ledger.",
"Read the Docs",
"/img/graphics/concepts-docs.svg") }}
"concepts-doc-illustration") }}
</div>
<div class="col">
{{ flatCard("./tutorials/",
"Tutorials",
"Lorem ipsum dolor sit amet consectetur. Ullamcorper senectus egestas mauris ante tellus eu feugiat cursus. Quis in mi augue curabitur orci purus massa nec sagittis.",
"Get step-by-step guidance to perform common tasks with the XRP Ledger.",
"View Tutorials",
"/img/graphics/blue-computer.png") }}
"tutorial-illustration") }}
</div>
<div class="col">
{{ flatCard("./references/",
"References",
"Lorem ipsum dolor sit amet consectetur. Ullamcorper senectus egestas mauris ante tellus eu feugiat cursus. Quis in mi augue curabitur orci purus massa nec sagittis.",
"Look up detailed documentation for XRPL transactions, requests and more.",
"View References",
"/img/graphics/ref-book.png") }}
"ref-book-illustration") }}
</div>
</div>
</section>
@@ -371,7 +368,7 @@
class="dev-tools-img"
>
</div>
<div class="col">
<div class="col explore-links">
<div class="d-flex flex-column-reverse w-100">
<h4 class="mb-10">Explore, Test, Verify</h4>
<h6 class="mb-3">Explore Dev Tools</h6>