diff --git a/_includes/footer.html b/_includes/footer.html index 4fc86e21..b998a69a 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -34,3 +34,7 @@
Development
+ + \ No newline at end of file diff --git a/_includes/icon.html b/_includes/icon.html deleted file mode 100644 index 07bf9d1e..00000000 --- a/_includes/icon.html +++ /dev/null @@ -1,16 +0,0 @@ -{%- comment -%} -Usage: {% include icon.html name="sun" size="24" class="custom-class" %} -Sizes: 16, 20, 24 (default), 32, 48 -{%- endcomment -%} - -{%- assign valid_sizes = '16,20,24,32,48' | split: ',' -%} -{%- if valid_sizes contains include.size -%} - {%- assign size_folder = include.size -%} -{%- else -%} - {%- assign size_folder = '24' -%} -{%- endif -%} - - - {%- assign icon_path = 'icons/' | append: size_folder | append: '/' | append: include.name | append: '.svg' -%} - {%- include {{ icon_path }} -%} - diff --git a/_includes/icons.html b/_includes/icons.html new file mode 100644 index 00000000..20eac0dc --- /dev/null +++ b/_includes/icons.html @@ -0,0 +1,4 @@ +{% capture sprite %} + {% include icons/sprite.svg %} +{% endcapture %} +{{ sprite }} diff --git a/_includes/icons/20/close.svg b/_includes/icons/20/close.svg deleted file mode 100644 index 2a4387e5..00000000 --- a/_includes/icons/20/close.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/_includes/icons/20/moon.svg b/_includes/icons/20/moon.svg deleted file mode 100644 index 155cdf70..00000000 --- a/_includes/icons/20/moon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/_includes/icons/20/sun.svg b/_includes/icons/20/sun.svg deleted file mode 100644 index f94c00e3..00000000 --- a/_includes/icons/20/sun.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/_includes/icons/24/chevron-down.svg b/_includes/icons/24/chevron-down.svg deleted file mode 100644 index b6736695..00000000 --- a/_includes/icons/24/chevron-down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/_includes/icons/24/close.svg b/_includes/icons/24/close.svg deleted file mode 100644 index fec8102d..00000000 --- a/_includes/icons/24/close.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/_includes/icons/24/moon.svg b/_includes/icons/24/moon.svg deleted file mode 100644 index aa6b54e8..00000000 --- a/_includes/icons/24/moon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/_includes/icons/24/sun.svg b/_includes/icons/24/sun.svg deleted file mode 100644 index ba1b15de..00000000 --- a/_includes/icons/24/sun.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/_includes/icons/sprite.svg b/_includes/icons/sprite.svg new file mode 100644 index 00000000..3fb8561a --- /dev/null +++ b/_includes/icons/sprite.svg @@ -0,0 +1,1014 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_layouts/default.html b/_layouts/default.html index 13ed4886..7ff10df4 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -49,8 +49,8 @@
diff --git a/_layouts/docu.html b/_layouts/docu.html index 63a04bc3..0c9a65d2 100644 --- a/_layouts/docu.html +++ b/_layouts/docu.html @@ -63,6 +63,7 @@
+ ⌘+k ctrl+k
@@ -113,8 +114,8 @@ {% endunless %} {% endif %}
@@ -174,7 +175,10 @@
In this article
- + + diff --git a/_layouts/post.html b/_layouts/post.html index 74951d70..ae016c41 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -58,8 +58,8 @@
diff --git a/_layouts/postarchive.html b/_layouts/postarchive.html index 28a66cbc..ea02d78f 100644 --- a/_layouts/postarchive.html +++ b/_layouts/postarchive.html @@ -53,8 +53,8 @@
diff --git a/_sass/abstracts/_mixins.scss b/_sass/abstracts/_mixins.scss index 31b1381b..9b140f01 100644 --- a/_sass/abstracts/_mixins.scss +++ b/_sass/abstracts/_mixins.scss @@ -355,6 +355,18 @@ margin-top: 30px; } + h3, + h4 { + + table { + margin-top: 18px; + } + } + + h2 + .highlighter-rouge, + h3 + .highlighter-rouge{ + margin-top: 30px; + } + blockquote { h4 { @include title-2(); @@ -384,12 +396,18 @@ margin-left: 0; line-height: 27px; } + tr{ + border-bottom: 1px solid var(--doc-codebox-border-color, #E6E6E6) + } + th{ + padding: 5px 10px; + } } - + table thead th { @include title-2(); } - + table tbody td { @include body-standard(); padding: 10px; @@ -402,6 +420,17 @@ div.highlight { max-width: 750px; + border-radius: 10px; + border: 1px solid var(--doc-codebox-border-color, #D9D9D9); + } + + pre.highlight { + tab-size: 4; + white-space: pre; + overflow-x: auto; + padding: 15px; + margin: 0; + border-radius: 10px; } div.highlighter-rouge + table, @@ -435,7 +464,7 @@ code.language-plaintext { border: 1px solid var(--doc-codebox-border-color, #E6E6E6); background: var(--doc-codebox-background-color, #F2F2F2); - font-family: "JetBrainsMono-Medium", "Lucida Console", monospace; + font-family: "JetBrainsMono-Medium", monospace; border-radius: 3px; padding: 0px 2px; margin: 0; @@ -454,37 +483,59 @@ } } -.duckdb_logo, -#duckdb_logo{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 131.767 38'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%231d1d1b%7D.st1%7Bfill:%23fff100%7D%3C/style%3E%3C/defs%3E%3Cpath d='M19 38.055c-10.493 0-19-8.507-19-19s8.464-19 19-19 19 8.507 19 19-8.507 19-19 19Z' style='fill:%231a1a1a'/%3E%3Cpath d='M14.444 11.196c-4.318 0-7.859 3.54-7.859 7.86 0 4.36 3.54 7.858 7.86 7.858 4.317 0 7.858-3.54 7.858-7.859s-3.54-7.859-7.859-7.859ZM28.586 16.227h-3.735v5.657h3.735a2.828 2.828 0 0 0 0-5.657Z' class='st1'/%3E%3Cpath d='M70.301 22.123c0 1.684-.475 3.093-2.245 3.093s-2.246-1.409-2.246-3.093v-7.168h-3.195v7.859c0 3.066 2.461 4.853 5.44 4.853 2.98 0 5.442-1.787 5.442-4.853v-7.86H70.3v7.17ZM51.43 10.66h-4.954v16.703h4.954c5.3 0 9.286-1.728 9.286-8.363 0-6.636-3.987-8.34-9.286-8.34Zm-.138 14.123h-1.52V13.24h1.52c3.04 0 6.014.76 6.014 5.76 0 5.045-2.973 5.783-6.014 5.783ZM81.639 25.197c-1.751 0-2.996-1.45-2.996-4.054 0-2.581 1.314-3.986 2.972-3.986 1.222 0 2.327.852 2.581 2.05h3.041c-.437-3.064-3.018-4.516-5.622-4.516-3.709 0-6.22 2.72-6.22 6.497 0 3.756 2.373 6.475 6.082 6.475 2.58 0 5.138-1.129 5.875-4.517h-3.04c-.438 1.475-1.568 2.051-2.673 2.051ZM100.483 14.968h-3.571l-4.516 4.977v-9.286h-3.179v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.746zM107.002 10.66h-4.953v16.703h4.953c5.3 0 9.286-1.728 9.286-8.363 0-6.636-3.986-8.34-9.286-8.34Zm-.138 14.123h-1.52V13.24h1.52c3.041 0 6.014.76 6.014 5.76 0 5.045-2.973 5.783-6.014 5.783ZM129.28 18.54c.853-.554 1.89-1.96 1.89-3.526 0-3.433-3.157-4.355-6.083-4.355h-6.497v16.704h6.773c3.434 0 6.405-1.336 6.405-4.93 0-2.304-1.198-3.272-2.488-3.894Zm-7.395-5.3h3.409c1.544 0 2.49.783 2.49 2.096 0 1.475-.923 2.212-2.49 2.212h-3.41V13.24Zm3.64 11.543h-3.64v-4.747h3.502c2.05 0 3.018.83 3.018 2.397 0 1.544-.945 2.35-2.88 2.35Z' class='st0'/%3E%3C/svg%3E"); +@mixin reset-button { + // Reset common browser styles + background: none; + border: none; + padding: 0; + margin: 0; + font: inherit; + cursor: pointer; + outline: none; +} + +@mixin reset-unordered-list { + margin: 0; + padding: 0; +} + +@mixin reset-list-item { + list-style: none; +} + +@mixin logo { background-size: contain; background-repeat: no-repeat; background-position: center left; - width: 131.77px; height: 70px; pointer-events: none; } +.duckdb_logo, +#duckdb_logo{ + @include logo; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 131.767 38'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%231d1d1b%7D.st1%7Bfill:%23fff100%7D%3C/style%3E%3C/defs%3E%3Cpath d='M19 38.055c-10.493 0-19-8.507-19-19s8.464-19 19-19 19 8.507 19 19-8.507 19-19 19Z' style='fill:%231a1a1a'/%3E%3Cpath d='M14.444 11.196c-4.318 0-7.859 3.54-7.859 7.86 0 4.36 3.54 7.858 7.86 7.858 4.317 0 7.858-3.54 7.858-7.859s-3.54-7.859-7.859-7.859ZM28.586 16.227h-3.735v5.657h3.735a2.828 2.828 0 0 0 0-5.657Z' class='st1'/%3E%3Cpath d='M70.301 22.123c0 1.684-.475 3.093-2.245 3.093s-2.246-1.409-2.246-3.093v-7.168h-3.195v7.859c0 3.066 2.461 4.853 5.44 4.853 2.98 0 5.442-1.787 5.442-4.853v-7.86H70.3v7.17ZM51.43 10.66h-4.954v16.703h4.954c5.3 0 9.286-1.728 9.286-8.363 0-6.636-3.987-8.34-9.286-8.34Zm-.138 14.123h-1.52V13.24h1.52c3.04 0 6.014.76 6.014 5.76 0 5.045-2.973 5.783-6.014 5.783ZM81.639 25.197c-1.751 0-2.996-1.45-2.996-4.054 0-2.581 1.314-3.986 2.972-3.986 1.222 0 2.327.852 2.581 2.05h3.041c-.437-3.064-3.018-4.516-5.622-4.516-3.709 0-6.22 2.72-6.22 6.497 0 3.756 2.373 6.475 6.082 6.475 2.58 0 5.138-1.129 5.875-4.517h-3.04c-.438 1.475-1.568 2.051-2.673 2.051ZM100.483 14.968h-3.571l-4.516 4.977v-9.286h-3.179v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.746zM107.002 10.66h-4.953v16.703h4.953c5.3 0 9.286-1.728 9.286-8.363 0-6.636-3.986-8.34-9.286-8.34Zm-.138 14.123h-1.52V13.24h1.52c3.041 0 6.014.76 6.014 5.76 0 5.045-2.973 5.783-6.014 5.783ZM129.28 18.54c.853-.554 1.89-1.96 1.89-3.526 0-3.433-3.157-4.355-6.083-4.355h-6.497v16.704h6.773c3.434 0 6.405-1.336 6.405-4.93 0-2.304-1.198-3.272-2.488-3.894Zm-7.395-5.3h3.409c1.544 0 2.49.783 2.49 2.096 0 1.475-.923 2.212-2.49 2.212h-3.41V13.24Zm3.64 11.543h-3.64v-4.747h3.502c2.05 0 3.018.83 3.018 2.397 0 1.544-.945 2.35-2.88 2.35Z' class='st0'/%3E%3C/svg%3E"); + width: 131.77px; +} + .ducklake_logo, #ducklake_logo{ + @include logo; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 153.114 38'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%231d1d1b%7D%3C/style%3E%3C/defs%3E%3Cpath d='M70.327 22.083c0 1.684-.475 3.093-2.245 3.093s-2.246-1.409-2.246-3.093v-7.168h-3.195v7.859c0 3.066 2.461 4.853 5.441 4.853s5.441-1.787 5.441-4.853v-7.859h-3.195v7.168ZM51.455 10.62h-4.953v16.705h4.953c5.3 0 9.286-1.729 9.286-8.364s-3.986-8.341-9.286-8.341Zm-.137 14.124h-1.521V13.2h1.521c3.041 0 6.014.76 6.014 5.76 0 5.045-2.973 5.784-6.014 5.784ZM81.671 25.158c-1.751 0-2.995-1.451-2.995-4.055 0-2.581 1.313-3.986 2.973-3.986 1.221 0 2.327.853 2.58 2.051h3.041c-.438-3.064-3.018-4.516-5.621-4.516-3.71 0-6.222 2.719-6.222 6.498 0 3.756 2.373 6.475 6.083 6.475 2.581 0 5.138-1.129 5.875-4.517h-3.041c-.438 1.475-1.566 2.051-2.673 2.051ZM100.517 14.928h-3.571l-4.517 4.977V10.62H89.25v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.447-4.747zM105.376 10.62h-3.295v16.704h11.428v-2.673h-8.133V10.62zM123.07 16.518c-.668-1.175-1.936-1.866-3.503-1.866-3.018 0-5.46 2.581-5.46 6.474 0 3.963 2.511 6.498 5.46 6.498 1.291 0 2.696-.484 3.503-1.866v1.566h3.18V14.928h-3.18v1.59Zm-2.788 8.664c-1.659 0-2.834-1.613-2.834-4.032s1.175-4.055 2.834-4.055c1.751 0 2.903 1.543 2.903 4.032 0 2.558-1.152 4.056-2.903 4.056ZM140.347 14.928h-3.571l-4.516 4.977V10.62h-3.18v16.704h3.18v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.747zM147.096 25.158c-1.521 0-2.949-1.037-3.133-3.156h9.146c.115-4.378-2.258-7.35-6.082-7.35-3.664 0-6.222 2.742-6.222 6.428 0 3.571 2.327 6.544 6.313 6.544 3.387 0 5.185-2.051 5.853-3.895h-3.272c-.645 1.083-1.612 1.429-2.604 1.429Zm-.092-8.179c1.336 0 2.811.737 2.88 2.834h-5.875c.253-2.097 1.797-2.834 2.995-2.834Z' class='st0'/%3E%3Cpath d='M19 0C8.507 0 0 8.507 0 19s8.507 19 19 19 19-8.507 19-19S29.493 0 19 0Z' style='fill:%231a1a1a'/%3E%3Cpath d='M16.603 9.608a9.308 9.308 0 0 1 8.075 4.62h1.727c2.375 0 4.361 1.9 4.361 4.318 0 2.375-1.943 4.361-4.361 4.361h-1.252a9.324 9.324 0 0 1-8.161 5.484h-.864c-4.966-.259-8.895-4.361-8.895-9.37 0-5.182 4.189-9.414 9.37-9.414Zm0 2.85c-3.584 0-6.52 2.936-6.52 6.52a6.514 6.514 0 0 0 6.52 6.52c2.893 0 5.355-1.9 6.218-4.491l.302-.993h3.282c.777 0 1.468-.691 1.468-1.468s-.648-1.468-1.468-1.468h-3.498l-.389-.82c-1.036-2.245-3.282-3.8-5.916-3.8Z' style='fill:%232eafff;fill-rule:evenodd'/%3E%3C/svg%3E"); - background-size: contain; - background-repeat: no-repeat; - background-position: center left; width: 153.11px; - height: 70px; - pointer-events: none; } .duckdblabs_logo, #duckdblabs_logo{ + @include logo; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 187.823 38'%3E%3Cdefs%3E%3Cstyle%3E.st1%7Bfill:%231d1d1b%7D%3C/style%3E%3C/defs%3E%3Cpath d='M19 38C8.507 38 0 29.493 0 19S8.464 0 19 0s19 8.507 19 19-8.507 19-19 19Z' style='fill:%23ff6900'/%3E%3Cpath d='M31.415 19c0-4.361-3.54-7.86-7.86-7.86s-7.858 3.542-7.858 7.86 3.54 7.86 7.859 7.86 7.859-3.542 7.859-7.86ZM9.414 21.828h3.735v-5.656H9.414a2.828 2.828 0 0 0 0 5.657ZM70.327 22.083c0 1.685-.475 3.094-2.245 3.094s-2.245-1.41-2.245-3.094v-7.168H62.64v7.86c0 3.065 2.461 4.853 5.441 4.853s5.44-1.788 5.44-4.854v-7.859h-3.195v7.168ZM51.456 10.62h-4.954v16.704h4.954c5.3 0 9.286-1.728 9.286-8.364 0-6.635-3.987-8.34-9.286-8.34Zm-.138 14.124h-1.522V13.2h1.522c3.04 0 6.014.76 6.014 5.76 0 5.046-2.973 5.784-6.014 5.784ZM81.675 25.158c-1.75 0-2.995-1.451-2.995-4.054 0-2.582 1.314-3.987 2.972-3.987 1.222 0 2.327.853 2.58 2.051h3.042c-.438-3.064-3.019-4.516-5.622-4.516-3.71 0-6.22 2.719-6.22 6.497 0 3.756 2.372 6.475 6.082 6.475 2.58 0 5.138-1.129 5.875-4.517h-3.04c-.438 1.475-1.568 2.051-2.674 2.051ZM100.52 14.928h-3.571l-4.516 4.977V10.62h-3.18v16.704h3.18v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.747zM107.039 10.62h-4.954v16.704h4.954c5.3 0 9.286-1.728 9.286-8.364 0-6.635-3.987-8.34-9.286-8.34Zm-.138 14.124h-1.52V13.2h1.52c3.04 0 6.014.76 6.014 5.76 0 5.046-2.973 5.784-6.014 5.784ZM129.317 18.5c.852-.553 1.89-1.959 1.89-3.525 0-3.433-3.158-4.355-6.083-4.355h-6.498v16.704h6.774c3.433 0 6.405-1.336 6.405-4.93 0-2.304-1.198-3.272-2.488-3.894Zm-7.396-5.3h3.41c1.543 0 2.489.783 2.489 2.097 0 1.474-.922 2.212-2.49 2.212h-3.409V13.2Zm3.64 11.544h-3.64v-4.747h3.502c2.051 0 3.019.83 3.019 2.397 0 1.544-.945 2.35-2.881 2.35ZM141.794 10.62h-1.544v16.704h10.392v-1.428h-8.848V10.62zM160.478 17.071c-.853-1.498-2.35-2.35-4.193-2.35-2.858 0-5.161 2.327-5.161 6.45 0 4.126 2.303 6.453 5.16 6.453 1.844 0 3.341-.853 4.194-2.327v2.027h1.451V14.928h-1.451v2.143Zm-3.894 9.262c-2.304 0-3.917-1.866-3.917-5.161 0-3.295 1.613-5.16 3.917-5.16 1.913 0 4.01 1.474 4.01 5.16s-2.097 5.161-4.01 5.161ZM170.982 14.72c-1.843 0-3.295.853-4.193 2.351V10.62h-1.428v16.704h1.428v-2.027c.898 1.474 2.35 2.327 4.193 2.327 2.857 0 5.184-2.327 5.184-6.452 0-4.124-2.327-6.451-5.184-6.451Zm-.299 11.613c-1.866 0-3.986-1.475-3.986-5.161 0-3.686 2.12-5.16 3.986-5.16 2.304 0 3.94 1.865 3.94 5.16s-1.636 5.161-3.94 5.161ZM183.538 20.435l-1.752-.323c-1.382-.253-2.328-.898-2.328-2.12 0-1.497 1.798-2.027 3.158-2.027 1.75 0 3.11.876 3.41 2.35h1.497c-.299-1.958-2.097-3.617-4.77-3.617-2.787 0-4.746 1.451-4.746 3.41s1.59 2.949 3.365 3.318l1.935.369c1.682.322 3.065.829 3.065 2.28 0 1.66-1.867 2.281-3.365 2.281-1.89 0-3.502-.898-3.756-2.834h-1.497c.369 2.834 2.58 4.102 5.138 4.102 2.695 0 4.93-1.313 4.93-3.78 0-2.349-2.257-3.04-4.284-3.41Z' class='st1'/%3E%3C/svg%3E"); - background-size: contain; - background-repeat: no-repeat; - background-position: center left; width: 187.82px; - height: 70px; - pointer-events: none; +} + +#duckcon7_logo { + @include logo; + background-image: url('/images/logo-dl/duckcon7.svg'); + width: 190.51px; } .button{ diff --git a/_sass/abstracts/_variables.scss b/_sass/abstracts/_variables.scss index 2770cdc3..eb7b3893 100644 --- a/_sass/abstracts/_variables.scss +++ b/_sass/abstracts/_variables.scss @@ -17,13 +17,13 @@ $black200: #E5E5E5; $black100: #F5F5F5; $black50: #FAFAFA; -$fontMono: "JetBrainsMono-Regular", "Lucida Console", monospace; -$fontMonoMedium: "JetBrainsMono-Medium", "Lucida Console", monospace; -$fontMonoBold: "JetBrainsMono-Bold", "Lucida Console", monospace; -$fontMonoXBold: "JetBrainsMono-ExtraBold", "Lucida Console", monospace; -$fontMonoItalic: "JetBrainsMono-Italic", "Lucida Console", monospace; -$fontMonoItalicMedium: "JetBrainsMono-Medium-Italic", "Lucida Console", monospace; -$fontMonoItalicBold: "JetBrainsMono-Bold-Italic", "Lucida Console", monospace; +$fontMono: "JetBrainsMono-Regular", monospace; +$fontMonoMedium: "JetBrainsMono-Medium", monospace; +$fontMonoBold: "JetBrainsMono-Bold", monospace; +$fontMonoXBold: "JetBrainsMono-ExtraBold", monospace; +$fontMonoItalic: "JetBrainsMono-Italic", monospace; +$fontMonoItalicMedium: "JetBrainsMono-Medium-Italic", monospace; +$fontMonoItalicBold: "JetBrainsMono-Bold-Italic", monospace; $fontSans: "SuisseIntl", Helvetica, Arial, sans-serif; @@ -48,8 +48,6 @@ $docuh5: 18px; - - /* Colors */ :root { --blue-02: #020608; @@ -208,6 +206,14 @@ $docuh5: 18px; --yellow-transparent-98: #fffff599; // LIGHT MODE + --cli-background: #ffffff; + --cli-bar: #f1f1f1; + --cli-error: #c33720; + --cli-keyword: #34bc26; + --cli-memory: #ff981f; + --cli-number: #afad24; + --cli-table: #696969; + --cli-text: #000000; --ddbce-button-ce-background-color: var(--purple-80); --ddbce-button-ce-border-color: var(--purple-60); --ddbce-highlight-purple-background-color: var(--grey-10); @@ -293,9 +299,16 @@ $docuh5: 18px; --lake-infobox-tertiary-background-color: var(--blue-transparent-85); --lake-ribbon-background-color: var(--blue-transparent-80); --lake-ribbon-border-color: var(--blue-transparent-80); + --main-background-gradient-100: #fff1004d; + --main-background-lines: #f9ed4d; --main-blogpost-background-color: var(--grey-100); --main-blogpost-border-color: var(--grey-90); + --main-blogpost-border-color-blue: var(--blue-90); + --main-blogpost-border-color-orange: var(--orange-90); + --main-blogpost-border-color-yellow: var(--yellow-transparent-40); --main-body-background-color: var(--grey-98); + --main-body-background-color-0: #fafafa00; + --main-body-background-gradient: #fafafa00; --main-codebox-border-color: #0d0d0d26; --main-codebox-dropshadow: #0000000d; --main-codebox-main-background-color: var(--grey-transparent-98); @@ -309,8 +322,21 @@ $docuh5: 18px; --main-infobox-background-color: var(--purple-transparent-98); --main-infobox-background-color-hover: var(--purple-transparent-90); --main-infobox-border-color: var(--purple-transparent-90); + --main-infographics-arrow: var(--grey-80); + --main-infographics-element-background: var(--grey-100); + --main-infographics-element-border: var(--grey-85); + --main-infographics-element-transparent: var(--grey-transparent-95); + --main-infographics-highlight: var(--purple-70); + --main-infographis-primary-background: var(--grey-90); + --main-infographis-secondary-backgroun: var(--grey-95); --main-marker-background-color: var(--yellow-transparent-60); - --main-marker-border-color: var(--yellow-45); + --main-marker-border-color: var(--yellow-50); + --main-number-box-background: #efefef; + --main-number-box-border: #dedede99; + --main-number-box-gradient-end: #d4ccff00; + --main-number-box-gradient-start: var(--purple-transparent-90); + --main-number-box-text-secondary: var(--grey-transparent-30); + --main-quaternary-color: var(--grey-80); --main-ribbon-background-color-blue: var(--blue-transparent-80); --main-ribbon-background-color-purple: var(--purple-transparent-80); --main-ribbon-background-color-yellow: var(--yellow-transparent-80); @@ -337,6 +363,7 @@ $docuh5: 18px; --menu-topmenu-text-color: var(--grey-10); --menu-topmenu-text-color-hover: var(--purple-60); --no-export-labs: var(--grey-transparent-95); + --no-export-terminal-background: #ffffff; --social-shape-gradient-end-color: var(--yellow-40); --social-shape-gradient-start-color: var(--yellow-45); --social-social-background: var(--grey-95); @@ -370,6 +397,14 @@ $docuh5: 18px; // DARK MODE html.darkmode { + --cli-background: #000000; + --cli-bar: #464646; + --cli-error: #c33720; + --cli-keyword: #34bc26; + --cli-memory: #ff981f; + --cli-number: #afad24; + --cli-table: #cdcdcd; + --cli-text: #ffffff; --ddbce-button-ce-background-color: var(--purple-80); --ddbce-button-ce-border-color: var(--purple-60); --ddbce-highlight-purple-background-color: var(--purple-80); @@ -448,18 +483,25 @@ html.darkmode { --lake-graphics-element-border: var(--blue-30); --lake-highlight-blue-background-color: var(--grey-10); --lake-highlight-blue-text-color: var(--blue-70); - --lake-infobox-border-color: var(--grey-transparent-20); + --lake-infobox-border-color: var(--blue-transparent-20); --lake-infobox-primary-background-color: var(--blue-transparent-15); --lake-infobox-quaternary-background-color: var(--blue-transparent-5); --lake-infobox-secondary-background-color: var(--blue-transparent-15); --lake-infobox-tertiary-background-color: var(--blue-transparent-15); --lake-ribbon-background-color: var(--blue-transparent-20); --lake-ribbon-border-color: var(--blue-transparent-30); + --main-background-gradient-100: #9e95004d; + --main-background-lines: #454100; --main-blogpost-background-color: var(--grey-02); --main-blogpost-border-color: var(--grey-20); + --main-blogpost-border-color-blue: var(--blue-20); + --main-blogpost-border-color-orange: var(--orange-20); + --main-blogpost-border-color-yellow: var(--yellow-20); --main-body-background-color: var(--grey-05); + --main-body-background-color-0: #0d0d0d00; + --main-body-background-gradient: #0d0d0d00; --main-codebox-border-color: var(--grey-20); - --main-codebox-dropshadow: #ffffff26; + --main-codebox-dropshadow: #ffffff0d; --main-codebox-main-background-color: var(--grey-transparent-05); --main-codebox-sub-background-color: var(--grey-transparent-20); --main-highlight-orange-background: var(--grey-10); @@ -468,11 +510,24 @@ html.darkmode { --main-highlight-purple-text-color: var(--grey-10); --main-highlight-yellow-background-color: var(--yellow-50); --main-highlight-yellow-text-color: var(--grey-10); - --main-infobox-background-color: var(--grey-transparent-15); + --main-infobox-background-color: var(--grey-transparent-10); --main-infobox-background-color-hover: var(--grey-transparent-20); --main-infobox-border-color: var(--grey-transparent-20); + --main-infographics-arrow: var(--grey-40); + --main-infographics-element-background: var(--grey-20); + --main-infographics-element-border: var(--grey-30); + --main-infographics-element-transparent: var(--grey-transparent-10); + --main-infographics-highlight: var(--yellow-50); + --main-infographis-primary-background: var(--grey-10); + --main-infographis-secondary-backgroun: var(--grey-15); --main-marker-background-color: var(--yellow-transparent-30); --main-marker-border-color: var(--yellow-transparent-40); + --main-number-box-background: var(--yellow-05); + --main-number-box-border: #4d460099; + --main-number-box-gradient-end: #fff1001a; + --main-number-box-gradient-start: var(--yellow-transparent-40); + --main-number-box-text-secondary: var(--grey-transparent-70); + --main-quaternary-color: var(--grey-40); --main-ribbon-background-color-blue: var(--blue-transparent-20); --main-ribbon-background-color-purple: var(--purple-transparent-20); --main-ribbon-background-color-yellow: var(--yellow-transparent-20); @@ -499,6 +554,7 @@ html.darkmode { --menu-topmenu-text-color: var(--grey-98); --menu-topmenu-text-color-hover: var(--yellow-50); --no-export-labs: var(--grey-transparent-15); + --no-export-terminal-background: #000000; --social-shape-gradient-end-color: var(--grey-30); --social-shape-gradient-start-color: var(--grey-15); --social-social-background: var(--grey-05); @@ -600,4 +656,3 @@ html.darkmode { --type-display-1: 38px; } } - diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss index 457f432e..2000d90c 100644 --- a/_sass/base/_base.scss +++ b/_sass/base/_base.scss @@ -85,7 +85,6 @@ img.downloadlogo{ width: 150px; position: absolute; top: 10px; - left: 15px; z-index: 999; opacity: 0!important; } @@ -196,6 +195,15 @@ body.installation div.environment.select label.onlymobile{ @include display-1(); margin: 0; } + + &--small { + padding: 65px 0 20px 0; + + h1, + .pagetitle-heading { + @include headline-1; + } + } @media only screen and (max-width: 770px) { padding: 45px 0px; diff --git a/_sass/base/_typography.scss b/_sass/base/_typography.scss index 03eb96ab..09aa6448 100644 --- a/_sass/base/_typography.scss +++ b/_sass/base/_typography.scss @@ -14,21 +14,22 @@ word-break: break-word; &::after{ content: ""; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11.8 0H6.613v1.514h2.603L3.804 6.926l1.07 1.07 5.412-5.412v2.603H11.8V0ZM5.922 1.286H0V11.8h10.33V5.878H8.815v4.408H1.514V2.8h4.408V1.286Z' clip-rule='evenodd'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11.8 0H6.613v1.514h2.603L3.804 6.926l1.07 1.07 5.412-5.412v2.603H11.8V0ZM5.922 1.286H0V11.8h10.33V5.878H8.815v4.408H1.514V2.8h4.408V1.286Z' clip-rule='evenodd'/%3E%3C/svg%3E"); display: inline-block; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; width: .80em; height: .80em; - background-size: contain; - background-repeat: no-repeat; - background-position: center center; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center center; margin-left: .25em; margin-right: 1px; transform: translateY(.1em); + background-color: var(--main-text-secondary-color, #666); } &:hover::after{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath fill='%234396D7' fill-rule='evenodd' d='M11.8 0H6.613v1.514h2.603L3.804 6.926l1.07 1.07 5.412-5.412v2.603H11.8V0ZM5.922 1.286H0V11.8h10.33V5.878H8.815v4.408H1.514V2.8h4.408V1.286Z' clip-rule='evenodd'/%3E%3C/svg%3E"); + background-color: #4396D7; } } diff --git a/_sass/components/_copy_button.scss b/_sass/components/_copy_button.scss index 8744cff0..f2c499e2 100644 --- a/_sass/components/_copy_button.scss +++ b/_sass/components/_copy_button.scss @@ -2,6 +2,11 @@ @use '../abstracts/variables' as *; @use '../abstracts/mixins' as *; +.wasm .highlight button.copy{ + top: 16px; + right: 16px; +} + pre.highlight > button, .highlight button.copy{ position: absolute; diff --git a/_sass/components/_feature_list.scss b/_sass/components/_feature_list.scss new file mode 100644 index 00000000..55ee2591 --- /dev/null +++ b/_sass/components/_feature_list.scss @@ -0,0 +1,48 @@ +@use '../abstracts/mixins' as *; +.feature-list .flexwrap{ + @include reset-unordered-list; + + margin-top: 70px; + row-gap: 20px; + + .featurebox{ + @include reset-list-item; + + width: calc(33% - 10px); + padding: 30px 20px; + -ms-flex-negative: 0; + flex-shrink: 0; + border-radius: 15px; + border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.60)); + background: var(--main-infobox-background-color, rgba(246, 245, 255, 0.60)); + -webkit-backdrop-filter: blur(7px); + backdrop-filter: blur(7px); + .icon{ + margin-bottom: 25px; + width: 45px; + height: 45px; + background-size: contain; + &.simple{ + background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.9998 43.8851C34.5343 43.8851 43.8849 34.5345 43.8849 23C43.8849 11.4655 34.5343 2.11499 22.9998 2.11499C11.4653 2.11499 2.11475 11.4655 2.11475 23C2.11475 34.5345 11.4653 43.8851 22.9998 43.8851Z' stroke='%237D66FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8042 24.9262L20.0386 30.138L32.2525 17.9771' stroke='%237D66FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); + } + &.featurerich{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m25.38 26.437 7.137 7.138M31.989 12.69l-6.08 6.08M17.448 22.603h-4.23'/%3E%3Ccircle cx='22.207' cy='22.207' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='35.954' cy='37.011' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='35.954' cy='8.988' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='8.46' cy='22.207' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E"); + } + &.speed{ + background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M43.885 23c0 11.535-9.35 20.885-20.885 20.885-11.535 0-20.885-9.35-20.885-20.885 0-11.534 9.35-20.885 20.885-20.885 11.534 0 20.885 9.35 20.885 20.885Z' clip-rule='evenodd'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M25.866 23a2.867 2.867 0 1 1-5.733 0 2.867 2.867 0 0 1 5.733 0Z' clip-rule='evenodd'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m25.047 25.457 8.19 8.19'/%3E%3C/svg%3E"); + } + &.free{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M25.435 30.358c2.912-1.067 4.433-3.12 4.433-6.655s-3.021-6.65-6.796-6.656c-3.983-.006-6.988 3.108-6.94 6.656.048 3.547 1.764 5.908 4.51 6.761l-4.865 11.802C9.266 40.604 2.644 33.029 2.644 23.703 2.644 12.656 11.645 3.7 22.928 3.7c11.282 0 20.428 8.955 20.428 20.002 0 9.471-6.56 16.94-13.21 18.596l-4.71-11.941Z'/%3E%3C/svg%3E"); + } + &.portable{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M27.929 8.46c1.145 0 2.077 1.173 2.077 2.616v2.577h-14.54v-2.577c0-1.442.93-2.616 2.076-2.616H27.93Z'/%3E%3Crect width='37.389' height='23.887' x='4.041' y='13.653' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' rx='5'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M34.371 14.903V36.29M11.1 36.29V14.903'/%3E%3C/svg%3E"); + } + &.extensible{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-width='2.5' d='M29.085 35.656a5.109 5.109 0 0 1-1.71-1.58 4.99 4.99 0 0 1-.579-4.462 5.052 5.052 0 0 1 1.252-1.952 5.153 5.153 0 0 1 2.003-1.202 5.213 5.213 0 0 1 4.519.644 5.09 5.09 0 0 1 1.575 1.712c.096.17.233.315.397.423a1.261 1.261 0 0 0 1.616-.195l3.912-3.854c.925-.912.925-1.733.416-2.28l-6.133-6.043a.317.317 0 0 1 .139-.524 5.121 5.121 0 0 0 2.92-2.37 4.996 4.996 0 0 0 .482-3.696 4.975 4.975 0 0 0-1.336-2.332A5.089 5.089 0 0 0 36.19 6.63a5.207 5.207 0 0 0-3.752.475 5.08 5.08 0 0 0-2.405 2.877.318.318 0 0 1-.227.214.329.329 0 0 1-.305-.077l-6.133-6.043a1.33 1.33 0 0 0-1.852 0l-4.305 4.264a1.253 1.253 0 0 0-.394 1.043 1.241 1.241 0 0 0 .602.94 5.063 5.063 0 0 1 1.918 2.164c.412.889.554 1.877.407 2.843a5.007 5.007 0 0 1-1.236 2.601 5.126 5.126 0 0 1-2.477 1.514 5.164 5.164 0 0 1-3.21-.214 5.072 5.072 0 0 1-2.438-2.066 1.238 1.238 0 0 0-.398-.424 1.262 1.262 0 0 0-1.615.196l-3.912 3.876c-.926.912-.926 1.71-.416 2.28l6.133 6.043a.318.318 0 0 1-.017.446.326.326 0 0 1-.145.078 5.144 5.144 0 0 0-2.912 2.374 5.019 5.019 0 0 0-.49 3.692 4.998 4.998 0 0 0 1.348 2.334 5.112 5.112 0 0 0 2.378 1.314 5.207 5.207 0 0 0 3.746-.466 5.08 5.08 0 0 0 2.41-2.863.318.318 0 0 1 .22-.229.328.328 0 0 1 .313.07l6.133 6.042a1.306 1.306 0 0 0 1.829 0l4.328-4.264a1.21 1.21 0 0 0 .433-1.065 1.197 1.197 0 0 0-.212-.553 1.221 1.221 0 0 0-.453-.389Z'/%3E%3C/svg%3E"); + } + } + p{ + margin: 15px 0; + } + } +} \ No newline at end of file diff --git a/_sass/components/_icons.scss b/_sass/components/_icons.scss index a5dacd5d..f8035a7c 100644 --- a/_sass/components/_icons.scss +++ b/_sass/components/_icons.scss @@ -2,22 +2,21 @@ @use '../abstracts/variables' as *; @use '../abstracts/mixins' as *; -/** Icon System **/ -.icon { +svg.icon{ + width: 1.25rem; + height: 1.25rem; + fill: none; + stroke: currentColor; + stroke-width: 2; display: inline-block; + transition: all 0.2s ease; +} + +td svg.icon{ vertical-align: middle; - &-16 { width: 16px; height: 16px; } - &-20 { width: 20px; height: 20px; } - &-24 { width: 24px; height: 24px; } - &-32 { width: 32px; height: 32px; } - &-48 { width: 48px; height: 48px; } - - svg { - width: 100%; - height: 100%; - display: block; - transition: all 0.2s ease; + @media only screen and (max-width: 650px) { + width: 1rem; + height: 1rem; } - } \ No newline at end of file diff --git a/_sass/layout/_footer.scss b/_sass/layout/_footer.scss index 07d8f994..fecbd94a 100644 --- a/_sass/layout/_footer.scss +++ b/_sass/layout/_footer.scss @@ -70,6 +70,10 @@ footer{ color: $purple; } } + span{ + color: var(--main-text-secondary-color, #B2B2B2); + line-height: 2; + } } h6{ text-decoration: none; diff --git a/_sass/layout/_header.scss b/_sass/layout/_header.scss index 1dc355f6..687ad483 100644 --- a/_sass/layout/_header.scss +++ b/_sass/layout/_header.scss @@ -15,7 +15,8 @@ header .headerline { z-index: 900; /* Header Content Container */ .headercontent { - max-width: calc(100% - 40px); + max-width: 1180px; + padding: 0 15px; height: 100%; margin: 0 auto; color: var(--menu-topmenu-text-color, #1A1A1A); @@ -25,7 +26,7 @@ header .headerline { /* Logo */ .duckdbhome { font-size: 20px; - font-family: "DuckDB-Symbol"; + position: relative; a { text-decoration: none; @@ -156,17 +157,16 @@ header .headerline { } /* Search Icon */ .search_icon { - width: 17px; + width: 19px; height: 70px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' fill='none' viewBox='0 0 16 15'%3E%3Cpath stroke='%231A1A1A' stroke-width='1.5' d='m10.77 9.909 3.926 3.926'/%3E%3Ccircle cx='6.62' cy='6.52' r='5.173' stroke='%231A1A1A' stroke-width='1.5'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-size: contain; - background-position: center center; + display: flex; + justify-content: center; + align-items: center; cursor: pointer; display: none; &:hover { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' fill='none' viewBox='0 0 16 15'%3E%3Cpath stroke='%236A58DA' stroke-width='1.5' d='m10.77 9.909 3.926 3.926'/%3E%3Ccircle cx='6.62' cy='6.52' r='5.173' stroke='%236A58DA' stroke-width='1.5'/%3E%3C/svg%3E"); + color: var(--menu-topmenu-text-color-hover, #6A58DA); } } } @@ -196,6 +196,8 @@ header .headerline { align-items: center; justify-content: center; transition: all .3s; + color: var(--main-text-secondary-color, #666); + &[data-mode="dark"] { .icon-sun { display: none; @@ -215,24 +217,13 @@ header .headerline { } &:hover { border-color: var(--menu-topmenu-text-color-hover, #6A58DA); - - svg path { - fill: var(--menu-topmenu-text-color-hover, #6A58DA); - } - - svg *[stroke] { - stroke: var(--menu-topmenu-text-color-hover, #6A58DA); - } - } - - svg path { - transition: fill .2s; - fill: var(--main-text-secondary-color, #666); + color: var(--menu-topmenu-text-color-hover, #6A58DA); } - svg *[stroke] { - transition: stroke .2s; - stroke: var(--main-text-secondary-color, #666); + .icon-sun, + .icon-moon{ + width: 16px; + height: 16px; } } @@ -297,7 +288,7 @@ a.github:hover .starcount { body.landing header .headerline .headercontent .landingmenu nav .search_icon, body.documentation header .headerline .headercontent .landingmenu nav .search_icon, body.blog header .headerline .headercontent .landingmenu nav .search_icon { - display: block; + display: flex; } /* Site-wide Banner */ @@ -337,7 +328,7 @@ body.blog header .headerline .headercontent .landingmenu nav .search_icon { .close { position: absolute; right: 26px; - top: calc(50% - 12px); + top: calc(50% - 10px); cursor: pointer; svg path{ fill: var(--main-text-primary-color, #0D0D0D); diff --git a/_sass/layout/_responsive.scss b/_sass/layout/_responsive.scss index ec04d359..cbf423e6 100644 --- a/_sass/layout/_responsive.scss +++ b/_sass/layout/_responsive.scss @@ -216,10 +216,15 @@ display: none; } - - .opensearch > span.shortcut{ - display: none!important; + .opensearch{ + aspect-ratio: 1/1; + justify-content: center; + + > span.shortcut{ + display: none!important; + } } + body.documentation .sidenavigation { position: fixed; right: 15px; @@ -457,9 +462,12 @@ body.landing .install .result+p span { margin-left: 0; } - - footer .sitefooter .footercontent, - header .headerline .headercontent { + + header .headerline .headercontent{ + max-width: 100%; + } + + footer .sitefooter .footercontent { max-width: calc(100% - 30px); } @@ -719,14 +727,10 @@ body.documentation div.version > div:first-child:hover{ border: 1px solid var(--menu-dropdown-border-color, #333)!important; } + html.darkmode body .opensearch:hover svg.icon, + header .headerline .headercontent .options button.mode[data-mode=dark]:hover, header .headerline .headercontent .options button.mode[data-mode=light]:hover, html.darkmode body header .headerline .headercontent .options button.mode[data-mode=light]:hover{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23B2B2B2' stroke='%23B2B2B2' stroke-miterlimit='10' stroke-width='.9' d='M10.201 14.041a4.041 4.041 0 1 0 0-8.082 4.041 4.041 0 0 0 0 8.082Z'/%3E%3Cpath stroke='%23B2B2B2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='.9' d='M10.201 3.51V1.046M5.611 5.41 3.865 3.664M3.712 10H1.246m4.365 4.59-1.746 1.746m6.336.154v2.465m4.59-4.365 1.746 1.746M16.69 10h2.465m-4.364-4.59 1.746-1.746'/%3E%3C/svg%3E")!important; - } - header .headerline .headercontent .options button.mode[data-mode=dark]:hover{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' stroke='%23666' stroke-miterlimit='10' stroke-width='.9' d='M6.558 4.993c-.324-1.467-.027-2.853.675-3.96.054-.09-.009-.207-.117-.198a7.057 7.057 0 0 0-6.318 7.93c.396 3.167 2.988 5.742 6.165 6.101a7.061 7.061 0 0 0 7.893-6.66.13.13 0 0 0-.207-.108c-2.971 2.069-7.309.448-8.09-3.105Z'/%3E%3C/svg%3E")!important; - } - html.darkmode body .opensearch:hover{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%23999999' stroke-width='1.5' d='m10.432 9.692 3.926 3.927'/%3E%3Ccircle cx='6.282' cy='6.303' r='5.173' stroke='%23999999' stroke-width='1.5'/%3E%3C/svg%3E")!important; + color: var(--main-text-secondary-color, #666)!important; } } diff --git a/_sass/pages/_blog.scss b/_sass/pages/_blog.scss index 2a5d2e2b..c5d27fc0 100644 --- a/_sass/pages/_blog.scss +++ b/_sass/pages/_blog.scss @@ -10,6 +10,7 @@ section.blog .postpreview:nth-child(4){ section.blog, section.upcoming-events, +section.speakers, .post-list .newstiles{ .newswrap, .newstileswrap{ margin-top: 70px; @@ -44,7 +45,7 @@ section.upcoming-events, } .length{ border-radius: 5px; - border: 1px solid var(--Landing-Page---codebox-border-gradient-end-color, #D9D9D9); + border: 1px solid var(--main-text-tertiary-color, #B2B2B2); background: var(--main-codebox-main-background-color, rgba(250, 250, 250, 0.60)); text-transform: none; padding: 0 .6em; @@ -57,7 +58,6 @@ section.upcoming-events, .postimg{ aspect-ratio: 7/3; overflow: hidden; - background-color: $duckDByellow; position: relative; a.blocklink{ display: block; @@ -136,12 +136,21 @@ section.upcoming-events, } } } - .postpreview.external-post { - position: relative; - border: 2px solid var(--lake-infobox-border-color, rgba(204, 235, 255, 0.60)); - - &::after { - + .postpreview { + &.external-post { + border: 1px solid var(--lake-infobox-border-color, rgba(204, 235, 255, 0.60)); + + &[data-source="duckdblabs.com"] { + border: 1px solid var(--main-blogpost-border-color-orange); + } + + &[data-source="duckdb.org"] { + border: 1px solid var(--main-blogpost-border-color-yellow); + } + + &[data-source="ducklake.com"] { + border: 1px solid var(--main-blogpost-border-color-blue); + } } } .eventpreview{ @@ -263,7 +272,6 @@ main.main-everywhere .recentposts .newstileswrap .postpreview { } img{ - margin: 0 auto; border:none; display: -webkit-box; display: -ms-flexbox; @@ -273,6 +281,20 @@ img{ justify-content: center; } +div.graphics-box, +div.graphic-box{ + border-radius: 10px; + border: 1px solid var(--main-infographics-element-border, #D9D9D9); + background: var(--main-infographis-primary-background, #E6E6E6); + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + img{ + max-width: 100%; + } +} + body.post { table { diff --git a/_sass/pages/_default.scss b/_sass/pages/_default.scss index 198408c2..2f0e12d7 100644 --- a/_sass/pages/_default.scss +++ b/_sass/pages/_default.scss @@ -139,3 +139,11 @@ body:not(.layout_default) .blog_typography{ } } } + +.svg-sprite { + position: absolute; + width: 0; + height: 0; + overflow: hidden; + visibility: hidden; +} \ No newline at end of file diff --git a/_sass/pages/_docs-components-and-pages.scss b/_sass/pages/_docs-components-and-pages.scss index 7d5b4e8d..0a41b9bf 100644 --- a/_sass/pages/_docs-components-and-pages.scss +++ b/_sass/pages/_docs-components-and-pages.scss @@ -243,8 +243,10 @@ body.documentation { .opensearch { border-radius: 10px; border: 1px solid var(--menu-dropdown-border-color, #333); - padding: 6px 8px 8px 35px; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%23999999' stroke-width='1.5' d='m10.432 9.692 3.926 3.927'/%3E%3Ccircle cx='6.282' cy='6.303' r='5.173' stroke='%23999999' stroke-width='1.5'/%3E%3C/svg%3E"); + padding: 6px; + display: flex; + gap: 5px; + align-items: center; background-size: 15px 15px; background-repeat: no-repeat; background-position: 12px 12px; @@ -252,6 +254,12 @@ body.documentation { position: relative; transition: all .3s; height: 40px; + + svg.icon{ + width: 18px; + height: 18px; + color: var(--menu-topmenu-searchbar-shortcut-text-color, #999); + } >.shortcut { @include tiny(); @@ -268,7 +276,9 @@ body.documentation { &:hover { border: 1px solid var(--menu-topmenu-text-color-hover, #6A58DA); color: var(--menu-topmenu-searchbar-shortcut-text-color, #999); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%236A58DA' stroke-width='1.5' d='m10.432 9.692 3.926 3.927'/%3E%3Ccircle cx='6.282' cy='6.303' r='5.173' stroke='%236A58DA' stroke-width='1.5'/%3E%3C/svg%3E"); + svg.icon{ + + } } } diff --git a/_sass/pages/_docs-content.scss b/_sass/pages/_docs-content.scss index f5512ee9..b3e34f60 100644 --- a/_sass/pages/_docs-content.scss +++ b/_sass/pages/_docs-content.scss @@ -291,7 +291,8 @@ body.documentation { } body.documentation, -body.post { +body.post, +body.duckcon7 { // Tables table { @@ -583,7 +584,6 @@ body.post { &::marker { display: none; } - } &[open]{ summary{ @@ -594,6 +594,21 @@ body.post { } } } + + > div img { + max-width: 100%; + margin-top: 8px; + } + + > table, + > div .highlight{ + margin-top: 8px; + } + + } + + details + details{ + margin-top: 1em; } } \ No newline at end of file diff --git a/_sass/pages/_docs-layout.scss b/_sass/pages/_docs-layout.scss index b5bb29e0..d37e3488 100644 --- a/_sass/pages/_docs-layout.scss +++ b/_sass/pages/_docs-layout.scss @@ -33,6 +33,10 @@ body.documentation { } } } + + header .headerline .headercontent{ + max-width: 100%; + } // Headline bar .headlinebar { diff --git a/_sass/pages/_duckcon7.scss b/_sass/pages/_duckcon7.scss new file mode 100644 index 00000000..448ca295 --- /dev/null +++ b/_sass/pages/_duckcon7.scss @@ -0,0 +1,422 @@ +@use '../abstracts/mixins' as *; + +@mixin mobile-padding { + @media (max-width: 940px) { + padding-right: var(--mobile-horizontal-padding); + padding-left: var(--mobile-horizontal-padding); + } +} + +.duckcon7 { + --primary-font-stack: "SuisseIntl", sans-serif; + --mobile-horizontal-padding: 15px; + + // Override the max-width for the header content + header .headerline .headercontent { + @include mobile-padding; + max-width: var(--page-max-width-large, 1150px); + } + + // Override the padding for the main content + &.layout_default #main_content_wrap { + margin-top: 0; + padding: 0; + } + + .content > section { + margin-bottom: 150px; + } + + .divider { + width: 100%; + height: 1px; + max-width: var(--page-max-width-large, 1150px); + margin: 150px auto; + background-color: var(--grey-30, #4c4c4c); + border: none; + } + + .hero { + @include code-large; + --hero-padding: 20px; + --hero-footer-button-size: 36px; + + height: 100vh; + position: relative; + color: var(--yellow-20); + + .hero-image { + width: 100%; + height: 100%; + object-fit: cover; + } + + .hero-footer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--hero-padding); + } + + .hero-footer-content { + display: inline-flex; + gap: 50px; + } + + .hero-footer-column { + flex: 1; + white-space: nowrap; + + p { + margin: 0; + } + } + + .hero-footer-button { + @include reset-button; + position: absolute; + right: 0; + left: 0; + margin: auto; + bottom: var(--hero-padding); + width: var(--hero-footer-button-size); + height: var(--hero-footer-button-size); + } + } + + .program { + --first-column-width: 90px; + --td-padding: 10px; + + table { + display: table; + table-layout: fixed; + } + + thead, tbody, tr { + width: 100%; + } + + tr { + display: grid; + grid-template-columns: var(--first-column-width) 1.7fr 1fr 1fr; + + @media (max-width: 940px) { + grid-template-columns: var(--first-column-width) 1fr; + grid-template-rows: 1fr 1fr; + } + } + + td { + border-bottom: none; + padding: var(--td-padding); + } + + .button { + margin-right: 0; + } + + tbody tr { + align-items: center; + + td:first-child { + @include code-standard; + color: var(--main-text-secondary-color, #B2B2B2); + } + + td:nth-child(3) { + color: var(--main-text-tertiary-color); + + @media (max-width: 940px) { + grid-column: span 2; + text-align: center; + } + } + + td:nth-child(4) { + @media (max-width: 940px) { + grid-column: span 2; + text-align: center; + } + } + } + + .table-section { + margin-top: 50px; + } + + .table-section-title { + margin-left: calc(var(--first-column-width) + var(--td-padding)); + margin-bottom: 30px; + } + + .table-title { + // Both rules are duplicates of the title-1 mixin, but we need to override the font-size and font-weight + font-size:var(--type-title-1, 18px); + font-weight: 600; + } + + .button { + text-decoration: none; + + &:hover { + color: #000; + } + } + } + + .announcement { + padding: 260px 0 80px; + text-align: center; + font-family: var(--primary-font-stack); + font-size: 38px; + line-height: 120%; + letter-spacing: -0.095px; + + p { + margin: 0 auto; + } + + @media (max-width: 940px) { + padding-right: var(--mobile-horizontal-padding); + padding-left: var(--mobile-horizontal-padding); + } + } + + .slider { + @include tiny; + .swiper { + width: 100%; + height: 100%; + } + + .swiper-slide { + width: 50vw !important; + transform: scale(0.8); + transform-origin: top; + text-align: center; + transition: transform 0.3s ease-in-out; + } + + .swiper-slide-prev { + transform-origin: top right; + } + + .swiper-slide-next { + transform-origin: top left; + } + + .swiper-slide-active { + transform: scale(1); + } + + .swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 20px; + overflow: hidden; + } + + .swiper-slide p { + margin-top: 10px; + margin-bottom: 0; + } + + .swiper-button-next, + .swiper-button-prev { + --icon-size: 36px; + --icon-offset: 50px; + + top: 0; + height: 100%; + width: 20%; + + svg { + background-color: rgba(108, 108, 108, 0.50); + border-radius: 50%; + width: var(--icon-size); + height: var(--icon-size); + padding: 9px; + + path { + fill: var(--main-text-primary-color); + } + } + } + + .swiper-button-prev { + justify-content: flex-start; + left: 0; + background: linear-gradient(270deg, rgba(13, 13, 13, 0.00) 0%, rgba(13, 13, 13, 0.80) 78.79%); + + svg { + margin-left: var(--icon-offset); + } + } + + .swiper-button-next { + justify-content: flex-end; + right: 0; + background: linear-gradient(90deg, rgba(13, 13, 13, 0.00) 0%, rgba(13, 13, 13, 0.80) 78.79%); + + svg { + margin-right: var(--icon-offset); + } + } + } + + .section-header { + --section-header-padding: 40px; + + margin-right: auto; + margin-left: auto; + padding-right: var(--section-header-padding); + padding-left: var(--section-header-padding); + text-align: center; + + @media (max-width: 940px) { + --section-header-padding: 10px; + } + } + + .speakers { + @include mobile-padding; + } + + .speakers .speakers-list { + @include reset-unordered-list; + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + grid-row-gap: 32px; + grid-column-gap: 16px; + margin-top: 50px; + + .speaker-item { + @include reset-list-item; + } + + .postpreview { + width: 100%; + height: 100%; + + .postimg { + aspect-ratio: 1; + } + + a::after { + display: none !important; + } + } + + @media (min-width: 770px) { + --columns: 4; + } + } + + @media only screen and (max-width: 940px) { + section.venue-access .feature-list .featurebox { + width: calc(50% - 10px); + } + } + + @media only screen and (max-width: 660px) { + section.venue-access .feature-list .featurebox { + width: 100%; + } + } + + .venue-access { + @include mobile-padding; + } + + .sponsors { + @include mobile-padding; + + .sponsors-list { + @include reset-unordered-list; + display: flex; + justify-content: center; + margin-top: 50px; + + li { + @include reset-list-item; + } + } + + } + + .map { + @include mobile-padding; + + .embedded-map { + border-radius: 20px; + overflow: hidden; + width: 100%; + height: 438px; + margin-bottom: 100px; + } + + .map-menu { + @include reset-unordered-list; + @include tiny; + + display: flex; + justify-content: flex-end; + gap: 25px; + margin-bottom: 15px; + + li { + @include reset-list-item; + + a::after { + display: none !important; + } + } + } + + .map-marker { + background-image: url('/images/events/duckcon7/duckdb-pin.svg'); + background-size: cover; + width: 40px; + height: 40px; + border-radius: 50%; + position: relative; + + &::after { + position: absolute; + left: calc(100% + 10px); + display: block; + content: 'Pakhuis de Zwijger'; + background-color: var(--grey-100); + font-size: 15px; + font-weight: 600; + padding: 10px; + border-radius: 44px; + color: var(--main-body-background-color); + white-space: nowrap; + } + } + } + + .join-us { + @include mobile-padding; + } + + .join-us .card { + padding: 30px; + margin: 0 auto; + border-radius: 15px; + border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.6)); + background-color: rgba(24, 24, 24, 0.60); + text-align: center; + + .button { + margin: 25px 0 0; + } + } +} \ No newline at end of file diff --git a/_sass/pages/_duckdb.scss b/_sass/pages/_duckdb.scss index a130fac2..5003afd7 100644 --- a/_sass/pages/_duckdb.scss +++ b/_sass/pages/_duckdb.scss @@ -12,4 +12,39 @@ body.design{ margin-top: 4*8px; } + .usage-example{ + padding: 30px; + background: white; + display: inline-block; + + img{ + all: unset; + max-width: 100%; + } + } + + .color-cards{ + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + gap: 8px; + } + + .color-card{ + width: 169px; + line-height: 1.37; + white-space: nowrap; + display: inline-block; + + strong{ + display: inline-block; + margin-bottom: 8px; + font-weight: 700; + } + + &--main{ + width: auto; + } + } + } \ No newline at end of file diff --git a/_sass/pages/_duckdblabs.scss b/_sass/pages/_duckdblabs.scss index ef696751..1220982f 100644 --- a/_sass/pages/_duckdblabs.scss +++ b/_sass/pages/_duckdblabs.scss @@ -49,6 +49,7 @@ body.landing{ } section.support{ + padding-top: 30px; .options{ display: flex; flex-wrap: wrap; @@ -122,43 +123,6 @@ body.landing{ background-position: right bottom; background-repeat: no-repeat; z-index: 9; - .collaborators{ - border-radius: 15px; - border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.60)); - background: var(--main-infobox-background-color, rgba(246, 245, 255, 0.60)); - backdrop-filter: blur(13px); - max-width: 750px; - margin: 0 auto; - margin-top: 100px; - h3{ - padding: 20px; - font-size: var(--type-title-2, 16px); - border-bottom: 1px solid var(--doc-codebox-border-color, #E6E6E6); - text-align: center; - } - .logos{ - padding: 20px 30px; - display: grid; - grid-template-columns: repeat(4, 1fr); - justify-items: center; - align-items: center; - text-align: center; - column-gap: 70px; - row-gap: 30px; - a{ - text-decoration: none; - } - img{ - height: 32px; - width: auto; - display: block; - transition: transform .3s; - &:hover{ - transform: scale(1.08); - } - } - } - } } section.introduction{ @@ -234,11 +198,17 @@ body.landing{ } .landing_bg_1{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='346' height='508' fill='none'%3E%3CforeignObject width='402.5' height='535.5' x='-43' y='-14'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(7px);clip-path:url(%23a);height:100%25;width:100%25'/%3E%3C/foreignObject%3E%3Cpath fill='%23F2F2F2' fill-opacity='.6' d='M123.5 507.5H11c-22.091 0-40-17.909-40-40V0h374.5v122.5c0 22.091-17.909 40-40 40h-102c-22.091 0-40 17.909-40 40v265c0 22.091-17.909 40-40 40Z' data-figma-bg-blur-radius='14'/%3E%3Cdefs%3E%3CclipPath id='a' transform='translate(43 14)'%3E%3Cpath d='M123.5 507.5H11c-22.091 0-40-17.909-40-40V0h374.5v122.5c0 22.091-17.909 40-40 40h-102c-22.091 0-40 17.909-40 40v265c0 22.091-17.909 40-40 40Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - width: 25%; - aspect-ratio: 375 / 507; + background-image: unset; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 346 508'%3E%3Cpath d='M0 0v507.5h123.5c22.091 0 40-17.909 40-40v-265c0-22.091 17.909-40 40-40h102c22.091 0 40-17.909 40-40V0z' style='stroke:%23fff;stroke-miterlimit:10'/%3E%3C/svg%3E"); + width: 20%; + background-color: rgba(242, 242, 242, 0.60); + backdrop-filter: blur(2px); + aspect-ratio: 102 / 150; top: 70px; z-index: 2; + mask-position: top left; + mask-size: contain; + mask-repeat: no-repeat; } .landing_bg_1_1{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='717' height='195' fill='none'%3E%3Cpath stroke='url(%23a)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M-54 1.762h242.117c21.939 0 39.783 17.67 39.998 39.607l1.099 112.023c.215 21.938 18.06 39.608 39.998 39.608H715'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='700.5' x2='7' y1='248.5' y2='42' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FAFAFA'/%3E%3Cstop offset='.405' stop-color='%23FF6900' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23FAFAFA'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); @@ -254,11 +224,15 @@ body.landing{ } .landing_bg_2{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='899' fill='none'%3E%3CforeignObject width='491.016' height='926.5' x='-13.516' y='-14'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(7px);clip-path:url(%23a);height:100%25;width:100%25'/%3E%3C/foreignObject%3E%3Cpath fill='%23F2F2F2' fill-opacity='.6' d='M168.181 858.5V501c0-22.091 17.909-40 40-40h61.302c22.092 0 40-17.909 40-40V155c0-22.092-17.908-40-40-40h-229c-22.091 0-40-17.909-40-40V0h463.003l.013 858.499c.001 22.092-17.908 40.001-40 40.001H208.181c-22.092 0-40-17.909-40-40Z' data-figma-bg-blur-radius='14'/%3E%3Cdefs%3E%3CclipPath id='a' transform='translate(13.516 14)'%3E%3Cpath d='M168.181 858.5V501c0-22.091 17.909-40 40-40h61.302c22.092 0 40-17.909 40-40V155c0-22.092-17.908-40-40-40h-229c-22.091 0-40-17.909-40-40V0h463.003l.013 858.499c.001 22.092-17.908 40.001-40 40.001H208.181c-22.092 0-40-17.909-40-40Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); - width: 30%; - aspect-ratio: 450 / 905; + background-image: unset; + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 348'%3E%3Cpath d='M0-1.006v75c0 22.092 17.909 40 40 40h234.129c19.259 0 34.871 15.613 34.871 34.872v34.621s.004.009.009.009q.008 0 .009.009V308h-.001c0 22.091 17.909 40 40 40h73.998c2.384 0 4.716-.221 6.985-.62V-1.006z'/%3E%3C/svg%3E"); + background-color: rgba(242, 242, 242, 0.60); + width: 25%; + aspect-ratio: 430/348; top: 70px; - background-position: top right; + mask-position: top right; + mask-size: contain; + mask-repeat: no-repeat; } .landing_bg_3{ @@ -344,6 +318,82 @@ body.career{ } } +.logomarquee{ + overflow: hidden; + position: relative; + margin-top: 130px; + + &::before{ + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 65px; + background: linear-gradient(to right, var(--main-background-color, #FAFAFA), transparent); + z-index: 2; + pointer-events: none; + } + + &::after{ + content: ''; + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 65px; + background: linear-gradient(to left, var(--main-background-color, #FAFAFA), transparent); + z-index: 2; + pointer-events: none; + } + + .logos-track{ + display: flex; + width: fit-content; + animation: scroll 50s linear infinite; + + &:hover{ + animation-play-state: paused; + } + } + + .logos{ + display: flex; + gap: 50px; + padding-right: 50px; + + a{ + display: flex; + align-items: center; + flex-shrink: 0; + + img{ + height: 32px; + width: auto; + } + + } + } + + @keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } + } +} + +.logomarquee + .legal{ + text-align: right; + margin-top: 10px; + a{ + color: var(--main-quaternary-color, #CCC); + font-size: var(--type-tiny); + } +} + /** CONTACT FORM STYLES **/ @@ -430,14 +480,14 @@ body.career{ input[type="text"], input[type="password"], textarea { - background-color: white; + background: var(--doc-codebox-background-color, #1A1A1A); + border: 1px solid var(--doc-codebox-border-color, #333); color: var(--main-text-primary-color, #0D0D0D); font-size: 16px; //padding: 25px 10px 25px 10px; padding: 35px 10px 10px 10px; display: block; width: $width; - border: none; border-radius: 10px; transition: all .3s; &:focus { @@ -478,7 +528,8 @@ body.career{ .file-input { display: inline-block; text-align: left; - background: white; + background: var(--doc-codebox-background-color, #1A1A1A); + border: 1px solid var(--doc-codebox-border-color, #333); padding: 16px; width: 450px; position: relative; @@ -567,7 +618,7 @@ body.career{ border: 0; padding: 0; margin: 0; - margin-top: 30px; + margin-top: 24px; @include button(); } } @@ -634,17 +685,20 @@ footer .sitefooter .footercontent .footerlogo{ display: none; } } + .logomarquee{ + margin-top: 100px; + } } @media only screen and (max-width: 690px) { body.landing .landing_bg_1{ - width: 50%; + width: 30%; } body.landing .landing_bg_1_1{ display: none; } body.landing .landing_bg_2{ - width: 50%; + width: 30%; } body.landing section#about{ background-size: 84%; @@ -665,10 +719,11 @@ footer .sitefooter .footercontent .footerlogo{ section.blog .newstileswrap{ margin-bottom: 25px; } - body.landing section#about .collaborators .logos{ + body.logo-attributions .collaborators .logos{ column-gap: 20px; padding: 20px; row-gap: 10px; + grid-template-columns: repeat(3, 1fr); img{ height: 26px; } @@ -676,8 +731,8 @@ footer .sitefooter .footercontent .footerlogo{ footer .sitefooter .footercontent .footernavigation > div{ width: 100%!important; } - body.landing section#about .collaborators .logos{ - grid-template-columns: repeat(3, 1fr); + .logomarquee{ + margin-top: 70px; } } @@ -692,13 +747,15 @@ footer .sitefooter .footercontent .footerlogo{ html.darkmode { body.landing .landing_bg_1{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='346' height='508' fill='none'%3E%3CforeignObject width='402.5' height='535.5' x='-43' y='-14'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(7px);clip-path:url(%23a);height:100%25;width:100%25'/%3E%3C/foreignObject%3E%3Cpath fill='%23262626' fill-opacity='.6' d='M123.5 507.5H11c-22.091 0-40-17.909-40-40V0h374.5v122.5c0 22.091-17.909 40-40 40h-102c-22.091 0-40 17.909-40 40v265c0 22.091-17.909 40-40 40Z' data-figma-bg-blur-radius='14'/%3E%3Cdefs%3E%3CclipPath id='a' transform='translate(43 14)'%3E%3Cpath d='M123.5 507.5H11c-22.091 0-40-17.909-40-40V0h374.5v122.5c0 22.091-17.909 40-40 40h-102c-22.091 0-40 17.909-40 40v265c0 22.091-17.909 40-40 40Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")!important; + background-image: unset!important; + background-color: rgba(38, 38, 38, 0.60); } body.landing .landing_bg_1_1{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='717' height='195' fill='none'%3E%3Cpath stroke='url(%23a)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M-54 1.762h242.117c21.939 0 39.783 17.67 39.998 39.607l1.099 112.023c.215 21.938 18.06 39.608 39.998 39.608H715'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='700.5' x2='7' y1='248.5' y2='42' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230D0D0D'/%3E%3Cstop offset='.405' stop-color='%23FF6900' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%230D0D0D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); } body.landing .landing_bg_2{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='899' fill='none'%3E%3CforeignObject width='491.016' height='926.5' x='-13.516' y='-14'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' style='backdrop-filter:blur(7px);clip-path:url(%23a);height:100%25;width:100%25'/%3E%3C/foreignObject%3E%3Cpath fill='%23262626' fill-opacity='.6' d='M168.181 858.5V501c0-22.091 17.909-40 40-40h61.302c22.092 0 40-17.909 40-40V155c0-22.092-17.908-40-40-40h-229c-22.091 0-40-17.909-40-40V0h463.003l.013 858.499c.001 22.092-17.908 40.001-40 40.001H208.181c-22.092 0-40-17.909-40-40Z' data-figma-bg-blur-radius='14'/%3E%3Cdefs%3E%3CclipPath id='a' transform='translate(13.516 14)'%3E%3Cpath d='M168.181 858.5V501c0-22.091 17.909-40 40-40h61.302c22.092 0 40-17.909 40-40V155c0-22.092-17.908-40-40-40h-229c-22.091 0-40-17.909-40-40V0h463.003l.013 858.499c.001 22.092-17.908 40.001-40 40.001H208.181c-22.092 0-40-17.909-40-40Z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")!important; + background-image: unset!important; + background-color: rgba(38, 38, 38, 0.60); } body.landing #about .landing_bg_3{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='903' height='404' fill='none'%3E%3Cpath stroke='url(%23a)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M-7.5 402.238h195.486c21.99 0 39.856-17.75 40-39.739l1.358-208.759c.143-21.99 18.009-39.74 39.999-39.74H861c22.091 0 40-17.909 40-40V1.5'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='997.621' x2='931.28' y1='479' y2='-8.715' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230D0D0D'/%3E%3Cstop offset='.5' stop-color='%23FF6900' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%230D0D0D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); @@ -709,13 +766,96 @@ html.darkmode { body.landing section#jobs{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='316' fill='none'%3E%3Cpath stroke='url(%23a)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1443 64.572h-272.5c-22.09 0-40 17.91-40 40.001v169.554c0 22.091-17.91 40-40 40h-829c-22.091 0-40-17.909-40-40v-232.5c0-22.092-17.909-40-40-40h-190'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='1509.5' x2='520.822' y1='21.055' y2='-1064.94' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230D0D0D'/%3E%3Cstop offset='.5' stop-color='%23FF6900' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%230D0D0D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); } - body.landing section#about .collaborators .logos img{ + body.logo-attributions .collaborators .logos img{ filter: invert(1); } + + .logomarquee{ + &::before{ + background: linear-gradient(to right, var(--main-background-color, #0D0D0D), transparent); + } + &::after{ + background: linear-gradient(to left, var(--main-background-color, #0D0D0D), transparent); + } + .logos img{ + filter: invert(1); + } + } + body.contact .form input[type=text]:focus, body.contact .form input[type=password]:focus, body.contact .form textarea:focus{ background: var(--purple-15); } body.landing section.support .options .option:hover{ background: #232323; } + .form input[type="text"]:focus, .form input[type="password"]:focus, .form textarea:focus{ + background-color: var(--purple-transparent-20); + } + .form .file-input > .button{ + background-color: var(--grey-transparent-20); + } + .form .file-input:hover > .button{ + background-color: var(--interactive-button-primary-orange-background, #FF6900); + } + .form .file-input:hover > .button{ + background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.25504 9.40523V5.57608H10.1368V3.90518H6.25504V0.11084H4.51436V3.90518H0.615234V5.57608H4.51436V9.40523H6.25504Z' fill='black'/%3E%3C/svg%3E%0A") + } +} + +.logo-attributions{ + .collaborators{ + border-radius: 15px; + border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.60)); + background: var(--main-infobox-background-color, rgba(246, 245, 255, 0.60)); + backdrop-filter: blur(13px); + max-width: 750px; + margin: 0 auto; + margin-top: 20px; + h3{ + padding: 20px; + font-size: var(--type-title-2, 16px); + border-bottom: 1px solid var(--doc-codebox-border-color, #E6E6E6); + text-align: center; + } + .logos{ + padding: 20px 30px; + display: grid; + grid-template-columns: repeat(4, 1fr); + justify-items: center; + align-items: center; + text-align: center; + column-gap: 70px; + row-gap: 30px; + a{ + text-decoration: none; + } + img{ + height: 32px; + width: auto; + display: block; + transition: transform .3s; + &:hover{ + transform: scale(1.08); + } + } + } + } + .attributions{ + margin-top: 30px; + ul li, + strong, + p{ + font-size: var(--type-tiny); + } + ul{ + padding: 0; + margin: 0; + padding-left: 14px; + } + } +} + +.post-list .newstiles .postpreview.external-post{ + //border: 1px solid var(--main-marker-border-color, #FFF100); + border: 1px solid var(--main-blogpost-border-color, #F2F2F2); } \ No newline at end of file diff --git a/_sass/pages/_ducklake.scss b/_sass/pages/_ducklake.scss index 9d0e0ec5..44db4a95 100644 --- a/_sass/pages/_ducklake.scss +++ b/_sass/pages/_ducklake.scss @@ -260,6 +260,11 @@ body.landing{ } section.architecture { + + img{ + margin: 0 auto; + } + .illustration { //width: calc(100% - 450px); width: 750px; diff --git a/_sass/pages/_home.scss b/_sass/pages/_home.scss index db237a61..dac6b677 100644 --- a/_sass/pages/_home.scss +++ b/_sass/pages/_home.scss @@ -150,14 +150,11 @@ body.landing{ } .type{ display: inline-block; - border: 1px solid var(--main-marker-border-color, #EDDD0C); - background: var(--main-marker-background-color, rgba(255, 244, 51, 0.60)); - border-radius: 10px; - padding: 6px 15px 8px 15px; - margin-left: -15px; - margin-top: .15em; - margin-bottom: .15em; + margin-top: 0.2em; + margin-bottom: 0.12em; white-space: nowrap; + border-bottom: 12px solid var(--main-marker-border-color, #EDDD0C); + line-height: 0.6em; .typecursor{ font-weight: 450; margin-left: .1em; @@ -258,7 +255,6 @@ body.landing{ transition: color .3s; } a:hover{ - color: $purple; background: none!important; } pre{ @@ -268,6 +264,12 @@ body.landing{ padding-left: 60px; } } + .result.content{ + .highlight{ + margin-top: 10px; + margin-bottom: 12.5px; + } + } .bottombar{ padding: 15px 20px; border-top: 1px solid var(--main-codebox-border-color, #E6E6E6); @@ -581,48 +583,6 @@ body.landing{ h1{ max-width: 600px; } - .flexwrap{ - margin-top: 70px; - row-gap: 20px; - .featurebox{ - width: calc(33% - 10px); - padding: 30px 20px; - -ms-flex-negative: 0; - flex-shrink: 0; - border-radius: 15px; - border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.60)); - background: var(--main-infobox-background-color, rgba(246, 245, 255, 0.60)); - -webkit-backdrop-filter: blur(7px); - backdrop-filter: blur(7px); - .icon{ - margin-bottom: 25px; - width: 45px; - height: 45px; - background-size: contain; - &.simple{ - background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.9998 43.8851C34.5343 43.8851 43.8849 34.5345 43.8849 23C43.8849 11.4655 34.5343 2.11499 22.9998 2.11499C11.4653 2.11499 2.11475 11.4655 2.11475 23C2.11475 34.5345 11.4653 43.8851 22.9998 43.8851Z' stroke='%237D66FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.8042 24.9262L20.0386 30.138L32.2525 17.9771' stroke='%237D66FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); - } - &.featurerich{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m25.38 26.437 7.137 7.138M31.989 12.69l-6.08 6.08M17.448 22.603h-4.23'/%3E%3Ccircle cx='22.207' cy='22.207' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='35.954' cy='37.011' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='35.954' cy='8.988' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Ccircle cx='8.46' cy='22.207' r='4.759' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E"); - } - &.speed{ - background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M43.885 23c0 11.535-9.35 20.885-20.885 20.885-11.535 0-20.885-9.35-20.885-20.885 0-11.534 9.35-20.885 20.885-20.885 11.534 0 20.885 9.35 20.885 20.885Z' clip-rule='evenodd'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M25.866 23a2.867 2.867 0 1 1-5.733 0 2.867 2.867 0 0 1 5.733 0Z' clip-rule='evenodd'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m25.047 25.457 8.19 8.19'/%3E%3C/svg%3E"); - } - &.free{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M25.435 30.358c2.912-1.067 4.433-3.12 4.433-6.655s-3.021-6.65-6.796-6.656c-3.983-.006-6.988 3.108-6.94 6.656.048 3.547 1.764 5.908 4.51 6.761l-4.865 11.802C9.266 40.604 2.644 33.029 2.644 23.703 2.644 12.656 11.645 3.7 22.928 3.7c11.282 0 20.428 8.955 20.428 20.002 0 9.471-6.56 16.94-13.21 18.596l-4.71-11.941Z'/%3E%3C/svg%3E"); - } - &.portable{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M27.929 8.46c1.145 0 2.077 1.173 2.077 2.616v2.577h-14.54v-2.577c0-1.442.93-2.616 2.076-2.616H27.93Z'/%3E%3Crect width='37.389' height='23.887' x='4.041' y='13.653' stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' rx='5'/%3E%3Cpath stroke='%237D66FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M34.371 14.903V36.29M11.1 36.29V14.903'/%3E%3C/svg%3E"); - } - &.extensible{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' fill='none'%3E%3Cpath stroke='%237D66FF' stroke-width='2.5' d='M29.085 35.656a5.109 5.109 0 0 1-1.71-1.58 4.99 4.99 0 0 1-.579-4.462 5.052 5.052 0 0 1 1.252-1.952 5.153 5.153 0 0 1 2.003-1.202 5.213 5.213 0 0 1 4.519.644 5.09 5.09 0 0 1 1.575 1.712c.096.17.233.315.397.423a1.261 1.261 0 0 0 1.616-.195l3.912-3.854c.925-.912.925-1.733.416-2.28l-6.133-6.043a.317.317 0 0 1 .139-.524 5.121 5.121 0 0 0 2.92-2.37 4.996 4.996 0 0 0 .482-3.696 4.975 4.975 0 0 0-1.336-2.332A5.089 5.089 0 0 0 36.19 6.63a5.207 5.207 0 0 0-3.752.475 5.08 5.08 0 0 0-2.405 2.877.318.318 0 0 1-.227.214.329.329 0 0 1-.305-.077l-6.133-6.043a1.33 1.33 0 0 0-1.852 0l-4.305 4.264a1.253 1.253 0 0 0-.394 1.043 1.241 1.241 0 0 0 .602.94 5.063 5.063 0 0 1 1.918 2.164c.412.889.554 1.877.407 2.843a5.007 5.007 0 0 1-1.236 2.601 5.126 5.126 0 0 1-2.477 1.514 5.164 5.164 0 0 1-3.21-.214 5.072 5.072 0 0 1-2.438-2.066 1.238 1.238 0 0 0-.398-.424 1.262 1.262 0 0 0-1.615.196l-3.912 3.876c-.926.912-.926 1.71-.416 2.28l6.133 6.043a.318.318 0 0 1-.017.446.326.326 0 0 1-.145.078 5.144 5.144 0 0 0-2.912 2.374 5.019 5.019 0 0 0-.49 3.692 4.998 4.998 0 0 0 1.348 2.334 5.112 5.112 0 0 0 2.378 1.314 5.207 5.207 0 0 0 3.746-.466 5.08 5.08 0 0 0 2.41-2.863.318.318 0 0 1 .22-.229.328.328 0 0 1 .313.07l6.133 6.042a1.306 1.306 0 0 0 1.829 0l4.328-4.264a1.21 1.21 0 0 0 .433-1.065 1.197 1.197 0 0 0-.212-.553 1.221 1.221 0 0 0-.453-.389Z'/%3E%3C/svg%3E"); - } - } - p{ - margin: 15px 0; - } - } - } } /** QUICK INSTALLATION SECTION **/ @@ -657,7 +617,7 @@ body.landing{ } .window button.copy{ right: 30px; - top: 30px; + top: 40px; } .highlight{ border-radius: 10px; @@ -701,7 +661,7 @@ body.landing{ right: 0px; } - section.clickbench { + section.most_scalable { .flexwrap { display: flex; flex-wrap: wrap; @@ -718,54 +678,60 @@ body.landing{ padding-right: 40px; } - .box { + } + + .numbersbox { + display: flex; + justify-content: space-around; + padding: 24px; + border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.6)); + border-radius: 15px; + background: var(--main-infobox-background-color, rgba(246, 245, 255, 0.6)); + backdrop-filter: blur(5px); + + > div { display: flex; - justify-content: space-around; - padding: 24px; - border: 1px solid var(--main-infobox-border-color, rgba(212, 204, 255, 0.6)); - border-radius: 15px; - background: var(--main-infobox-background-color, rgba(246, 245, 255, 0.6)); - backdrop-filter: blur(5px); - - > div { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - } - - .label { - color: var(--main-text-secondary-color, #666); - @include pre-title; - } - - .number { - @include display-2; - } - - .info { - @include body-standard; - } - - .divider { - width: 1px; - background: var(--main-infobox-border-color, rgba(212, 204, 255, 0.6)); - } + flex-direction: column; + align-items: center; + gap: 8px; } - - .reference { - width: 100%; - margin-top: 24px; - text-align: right; - font-size: var(--type-tiny, 12px); - color: var(--main-text-tertiary-color, #B2B2B2); - - a { - color: inherit; - } + + .label { + color: var(--main-text-secondary-color, #666); + @include pre-title; + text-align: center; + } + + .number { + @include display-2; + } + + .info { + @include body-standard; + } + + .divider { + width: 1px; + background: var(--main-infobox-border-color, rgba(212, 204, 255, 0.6)); + } + } + + .numbersbox-reference { + width: 100%; + margin-top: 16px; + text-align: right; + font-size: var(--type-tiny, 12px); + color: var(--main-text-tertiary-color, #B2B2B2); + + a { + color: inherit; } } + section.metrics{ + padding: 8px 15px; + } + } @@ -789,7 +755,7 @@ body.landing{ @media only screen and (max-width: 1100px) { - body.landing section.clickbench { + body.landing section.most_scalable { .flexwrap { display: flex; flex-wrap: wrap; @@ -803,10 +769,17 @@ body.landing{ padding: 0; } - .box { + .numbersbox { padding: 16px; } } + + section.metrics .numbersbox{ + >div:last-child, + > .divider:nth-last-child(2){ + display: none; + } + } } @media only screen and (max-width: 940px) { @@ -912,6 +885,45 @@ body.landing{ white-space: nowrap; } } + body.landing section.metrics{ + padding: 7*8px 15px + } + section.metrics .numbersbox{ + flex-wrap: wrap; + padding: 8px; + align-items: flex-start; + + >div:not(.divider){ + width: calc(50% - 6px); + padding: 24px 16px; + box-sizing: border-box; + position: relative; + + &::before{ + content: ""; + width: 76%; + height: 1px; + background-color: var(--main-infobox-border-color, rgba(212, 204, 255, 0.6)); + position: absolute; + top: 2px; + } + + &:nth-child(1)::before, + &:nth-child(3)::before{ + display: none; + } + } + + .divider{ + height: 100px; + align-self: center; + } + + .divider:nth-of-type(4){ + display: none; + } + + } } @media only screen and (max-width: 450px) { @@ -921,7 +933,4 @@ body.landing{ max-width: unset; } } - body.landing section.clickbench .box > div:first-child{ - max-width: 100px; - } } diff --git a/_sass/pages/_installation.scss b/_sass/pages/_installation.scss index 63081675..f7764095 100644 --- a/_sass/pages/_installation.scss +++ b/_sass/pages/_installation.scss @@ -176,58 +176,6 @@ body.installation{ } } - .selection-options[data-role="platform"] .platform-item { - position: relative; - display: inline-flex; - align-items: center; - height: 60px; - } - - .selection-options[data-role="platform"] .platform-item .arch-inline { - display: inline-flex; - flex-wrap: nowrap; - gap: 8px; - border-radius: 10px; - padding: 6px 0px; - opacity: 0; - pointer-events: none; - z-index: 2; - width: 0; - transition: all .3s; - //min-width: 160px; - - .option{ - height: unset; - - .label{ - @include label-2; - } - } - - .option:nth-child(2){ - transform: translateX(-10%); - transition: all .3s; - } - - &.open { - opacity: 1; - pointer-events: auto; - padding: 6px 8px; - width: 150px; - .option:nth-child(2){ - transform: translateX(0); - } - } - - &.error{ - .option{ - border: 1px solid var(--interactive-installation-error-border, #FFA566); - background: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60)); - } - } - } - - .installation-instructions, .instruction-collection{ margin-top: 50px; @@ -259,7 +207,7 @@ body.installation{ #result{ .alternative{ padding-top: 10px; - padding-bottom: 30px; + padding-bottom: 10px; display: none; } .more{ @@ -426,74 +374,11 @@ body.installation{ } - .installation-hint{ - display: inline-flex; - flex-wrap: nowrap; - align-items: center; - gap: 6px; - margin-left: 8px; - vertical-align: middle; - - p{ - margin: 0; - font-size: var(--type-label-1); - font-weight: 600; - color: var(--orange-50, #FF6900); - } - - svg{ - width: 15px; - height: 15px; - transform: translateY(-1px); - } - } - a.download-btn{ - display: flex!important; - justify-content: flex-start; - align-items: center; - width: fit-content; - gap: 10px; - padding: 10px 15px 10px 10px; - border-radius: 10px; - border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6); - background: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60)); - transition: all .3s; - text-decoration: none; - color: inherit; - @include label-1; - - &:before{ - border-radius: 6px; - border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6); - background-color: var(--interactive-installation-icon-background, rgba(230, 230, 230, 0.60)); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%231A1A1A' d='M9.92.646v8.898l3.217-3.249 1.3 1.313L9 13.098l-5.437-5.49 1.3-1.313 3.218 3.25v-8.9h1.838Zm-7.816 10.21v4.642h13.792v-4.641h1.838v6.498H.267v-6.498h1.838Z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-size: 17.5px; - background-position: center center; - width: 40px; - height: 40px; - content: ""; - display: inline-block; - transition: all .3s; - } - - &:after{ - display: none!important; - } - - &:hover{ - border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC); - background-color: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60)); - &::before{ - border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC); - background-color: var(--interactive-installation-icon-background, rgba(230, 230, 230, 0.60)); - } - } - } .shainfo{ - margin-top: 10px; + margin-top: 8px; + color: var(--main-text-secondary-color, #666); span:first-child{ font-weight: 700; @@ -505,6 +390,10 @@ body.installation{ } } + .shainfo + .download-btn{ + margin-top: 3*8px; + } + @@ -748,3 +637,55 @@ body.installation .environment.select label.onlymobile{ color: black; } } + + +a.download-btn{ + display: flex!important; + justify-content: flex-start; + align-items: center; + width: fit-content; + gap: 10px; + padding: 10px 15px 10px 10px; + border-radius: 10px; + border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6); + background: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60)); + transition: all .3s; + text-decoration: none; + color: inherit; + @include label-1; + + &:before{ + border-radius: 6px; + border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6); + background-color: var(--interactive-installation-icon-background, rgba(230, 230, 230, 0.60)); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%231A1A1A' d='M9.92.646v8.898l3.217-3.249 1.3 1.313L9 13.098l-5.437-5.49 1.3-1.313 3.218 3.25v-8.9h1.838Zm-7.816 10.21v4.642h13.792v-4.641h1.838v6.498H.267v-6.498h1.838Z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-size: 17.5px; + background-position: center center; + width: 40px; + height: 40px; + content: ""; + display: inline-block; + transition: all .3s; + } + + &:after{ + display: none!important; + } + + &:hover{ + color: var(--main-text-primary-color, #0D0D0D); + border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC); + background-color: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60)); + &::before{ + border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC); + background-color: var(--interactive-installation-icon-background, rgba(230, 230, 230, 0.60)); + } + } +} + +.nightly_install{ + &.layout_default.blog_typography #main_content_wrap div.highlight{ + max-width: unset; + } +} \ No newline at end of file diff --git a/_sass/pages/_wasm.scss b/_sass/pages/_wasm.scss new file mode 100644 index 00000000..2f9a85a4 --- /dev/null +++ b/_sass/pages/_wasm.scss @@ -0,0 +1,285 @@ +@use 'sass:color'; +@use '../abstracts/variables' as *; +@use '../abstracts/mixins' as *; + + +/** WASM PAGE STYLES **/ + +body.wasm{ + + .pagetitle h1{ + @include headline-1; + } + + .selection-foldout{ + padding: 16px; + background: var(--doc-codebox-background-color, #F2F2F2); + -webkit-transition: background-color .3s; + -o-transition: background-color .3s; + transition: background-color .3s; + margin-bottom: 8px; + border-radius: 10px; + border: 1px solid transparent; + -webkit-transition: border .3s; + -o-transition: border .3s; + transition: border .3s; + + .selection-head{ + h3{ + @include title-1; + cursor: pointer; + position: relative; + margin: 0; + padding-right: 55px; + .selected{ + @include label-1; + margin-left: 20px; + } + &::after{ + content: " "; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%230D0D0D' stroke-linecap='square' stroke-width='1.5' d='m18 9.5-6 6-6-6'/%3E%3C/svg%3E"); + background-color: var(--doc-codebox-button-background-color, #E6E6E6); + background-size: contain; + background-repeat: no-repeat; + width: 28px; + height: 28px; + border-radius: 50%; + position: absolute; + right: 0px; + top: -5px; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + -o-transition: transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + cursor: pointer; + } + } + + a:hover{ + background-color: transparent; + } + } + + &.open h3::after{ + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + } + + &:hover{ + border-color: var(--doc-codebox-border-color); + } + + h4{ + @include label-1; + } + + &.disabled{ + display: none; + } + + } + + .selection-foldout:not(.open) .selection-content{ + display: none; + max-width: calc(100% - 55px); + >p:first-child{ + margin-top: 0; + } + } + + .selection-head + .selection-content{ + padding-top: 24px; + } + + // Form styling + .form-row{ + display: flex; + flex-wrap: wrap; + gap: 16px; + margin-bottom: 16px; + + .form-field{ + flex: 1; + min-width: 200px; + + label{ + display: block; + @include label-1; + margin-bottom: 8px; + font-weight: 600; + } + + input, select{ + width: 100%; + padding: 12px; + border: 1px solid var(--doc-codebox-border-color, #E6E6E6); + border-radius: 8px; + background: var(--interactive-filterbox-background-color, #FAFAFA); + transition: border-color .3s; + font-weight: 500; + color: var(--main-text-primary-color, #0D0D0D); + + &:focus{ + outline: none; + border-color: var(--interactive-folderbox-border-color-hover, #CCC); + } + } + + &.form-field-with-inline-dropdown{ + label{ + display: flex; + align-items: center; + gap: 12px; + + select.inline-dropdown{ + width: 148px; + padding: 4px 24px 4px 8px; + border: none; + border-radius: 4px; + background: transparent; + color: var(--main-text-tertiary-color, #B2B2B2); + font-weight: 400; + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23B2B2B2' stroke-linecap='square' stroke-width='1.5' d='m12 6-4 4-4-4'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 4px center; + background-size: 16px; + + &:hover{ + color: var(--main-text-secondary-color, #666); + } + + &:focus{ + outline: none; + color: var(--main-text-primary-color, #0D0D0D); + } + } + } + } + } + } + + // Links container + .links-container{ + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 16px; + + a{ + display: inline-block; + padding: 8px 12px; + border: 1px solid var(--doc-codebox-border-color, #E6E6E6); + border-radius: 6px; + background: var(--main-background-color, #FFFFFF); + color: var(--main-text-primary-color, #0D0D0D); + text-decoration: none; + @include label-1; + transition: all .3s; + + &:hover{ + border-color: var(--interactive-folderbox-border-color-hover, #CCC); + background: var(--doc-codebox-background-color, #F2F2F2); + } + } + } + + .hidden{ + display: none; + } + + // Table container + .datasettable{ + position: relative; + height: 80vh; + width: 80vw; + left: 50%; + transform: translateX(-50%); + padding: 20px; + + @media only screen and (max-width: 1160px) { + width: 100%; + } + } + + regular-table { + width: auto; + max-width: 100%; + height: 80vh; + border: 1px solid var(--doc-codebox-border-color, #E6E6E6); + border-radius: 6px; + overflow: auto; + margin-top: 2.5rem; + + table{ + font-size: 11px; + margin: 0 auto; + + thead{ + text-align: left; + } + + th, td{ + padding: 10px 4px; + border-bottom: 1px solid var(--doc-codebox-border-color, #E6E6E6); + } + } + } + + pre{ + margin: 8px 0; + padding: 16px; + background: var(--doc-codebox-background-color, #F2F2F2); + border: 1px solid var(--doc-codebox-border-color, #E6E6E6); + border-radius: 8px; + overflow-x: auto; + font-size: var(--type-code, 14px); + font-family: "JetBrainsMono-Regular", monospace; + + code{ + background: transparent; + border: none; + padding: 0; + font-family: $fontMono; + } + } + + p{ + margin: 8px 0; + + &#last_query_status{ + @include label-1; + font-weight: 600; + color: var(--main-text-secondary-color, #666); + margin-top: 16px; + position: relative; + padding-left: 20px; + + &::before{ + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #7D66FF; + transition: background-color 0.3s ease; + } + + &[data-status="idle"]::before{ + background-color: #00C770; + } + + &[data-status="error"]::before{ + background-color: #FF6900; + } + } + } + + +} diff --git a/_sass/themes/_darkmode.scss b/_sass/themes/_darkmode.scss index e0e92320..cb9d917d 100644 --- a/_sass/themes/_darkmode.scss +++ b/_sass/themes/_darkmode.scss @@ -74,12 +74,6 @@ html.darkmode body{ &.landing .upcoming-events:after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='426' fill='none' viewBox='0 0 1440 426'%3E%3Cpath stroke='url(%23a)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1439.5 424.029H696.735c-27.614 0-50-22.386-50-50V51.875c0-27.614-22.386-50-50-50H-.5'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='166.001' x2='1397.35' y1='680.043' y2='345.949' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230D0D0D'/%3E%3Cstop offset='.58' stop-color='%23FFF100' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%230D0D0D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); } - header .headerline .headercontent .landingmenu nav .search_icon{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' fill='none' viewBox='0 0 16 15'%3E%3Cpath stroke='%23FAFAFA' stroke-width='1.5' d='m10.77 9.909 3.926 3.926'/%3E%3Ccircle cx='6.62' cy='6.52' r='5.173' stroke='%23FAFAFA' stroke-width='1.5'/%3E%3C/svg%3E"); - &:hover{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' fill='none' viewBox='0 0 16 15'%3E%3Cpath stroke='%23FFEF00' stroke-width='1.5' d='m10.77 9.909 3.926 3.926'/%3E%3Ccircle cx='6.62' cy='6.52' r='5.173' stroke='%23FFEF00' stroke-width='1.5'/%3E%3C/svg%3E"); - } - } .opensearch:hover{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath stroke='%23FFEF00' stroke-width='1.5' d='m10.432 9.692 3.926 3.927'/%3E%3Ccircle cx='6.282' cy='6.303' r='5.173' stroke='%23FFEF00' stroke-width='1.5'/%3E%3C/svg%3E"); } @@ -93,12 +87,10 @@ html.darkmode body{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='38' fill='none' viewBox='0 0 39 38'%3E%3Cpath fill='%23FFF100' d='M19.318 38c-10.511 0-19-8.489-19-19s8.489-19 19-19c10.512 0 19 8.489 19 19s-8.488 19-19 19Z'/%3E%3Cpath fill='%230D0D0D' d='M29.477 16.182H25.75v5.625h3.727a2.852 2.852 0 0 0 2.83-2.83c0-1.556-1.284-2.795-2.83-2.795ZM7.49 19c0 4.34 3.534 7.875 7.875 7.875S23.24 23.34 23.24 19c0-4.341-3.534-7.876-7.875-7.876-4.34 0-7.875 3.535-7.875 7.876Z'/%3E%3C/svg%3E"); } } - #main_content_wrap a.externallink::after, .singleentry .content a.externallink::after{ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M11.8 0H6.613v1.514h2.603L3.804 6.926l1.07 1.07 5.412-5.412v2.603H11.8V0ZM5.922 1.286H0V11.8h10.33V5.878H8.815v4.408H1.514V2.8h4.408V1.286Z' clip-rule='evenodd'/%3E%3C/svg%3E"); - } &.faq h3::after, &.documentation main .wrap.frequentlyaskedquestions h3::after, .frequentlyaskedquestions h3::after, + &.wasm .selection-foldout .selection-head h3::after, &.installation .selection-head h3::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23F2F2F2' stroke-linecap='square' stroke-width='1.5' d='m18 9.5-6 6-6-6'/%3E%3C/svg%3E"); } @@ -107,7 +99,8 @@ html.darkmode body{ filter: invert(100%) sepia(100%) saturate(1000%) hue-rotate(340deg) brightness(100%); } } - &.installation a.download-btn::before{ + &.installation a.download-btn::before, + a.download-btn::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath fill='%23fff' d='M7.417 10.75 3.25 6.583l1.167-1.208 2.166 2.167V.75H8.25v6.792l2.167-2.167 1.166 1.208-4.166 4.167ZM.75 14.083V9.917h1.667v2.5h10v-2.5h1.666v4.166H.75Z'/%3E%3C/svg%3E"); } &.installation .selection-options .option/*:not(.active)*/ .symbol img{ diff --git a/_sass/utilities/_helpers.scss b/_sass/utilities/_helpers.scss index 42fc129f..b832676d 100644 --- a/_sass/utilities/_helpers.scss +++ b/_sass/utilities/_helpers.scss @@ -168,4 +168,33 @@ a.blocklink{ .text-secondary-color{ color: var(--main-text-secondary-color, #666); -} \ No newline at end of file +} + +.fullwidth { + width: 100%; +} + +$spacings: ( + 0: 0, + 1: 4px, + 2: 8px, + 3: 16px, + 4: 24px, + 5: 32px, + 6: 48px, + 7: 64px +); + +@each $key, $value in $spacings { + .m-#{$key} { margin: $value !important; } + .mt-#{$key} { margin-top: $value !important; } + .mb-#{$key} { margin-bottom: $value !important; } + .ml-#{$key} { margin-left: $value !important; } + .mr-#{$key} { margin-right: $value !important; } + + .p-#{$key} { padding: $value !important; } + .pt-#{$key} { padding-top: $value !important; } + .pb-#{$key} { padding-bottom: $value !important; } + .pl-#{$key} { padding-left: $value !important; } + .pr-#{$key} { padding-right: $value !important; } +} diff --git a/news/index.html b/news/index.html index 1c805fa7..24a61d60 100644 --- a/news/index.html +++ b/news/index.html @@ -40,13 +40,15 @@ {% assign post_link = post.external_post_url %} {% assign link_target = "_blank" %} {% assign link_rel = "noopener noreferrer" %} + {% assign source_domain = post.external_post_url | extract_domain %} {% else %} {% assign is_external = false %} {% assign post_link = post.url %} {% assign link_target = "_self" %} {% assign link_rel = "" %} + {% assign source_domain = "ducklake.com" %} {% endif %} -
+
{% if post.thumb %}