GNOME.org
 

[gtk-web/gtk4-prep: 1/2] landing page: new splash


commit 924b91b6e9865875390cc8c5ea248b25c5b8f4dd
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon Oct 5 21:25:30 2020 +0200

    landing page: new splash
    
    Use an illustration for gtk4 launch
    
    Fixes https://gitlab.gnome.org/Infrastructure/gtk-web/-/issues/61

 _pages/index.html        | 61 +++++++++++++++++++++++++++++-------------------
 assets/img/wall-gtk4.svg |  1 +
 2 files changed, 38 insertions(+), 24 deletions(-)
---
diff --git a/_pages/index.html b/_pages/index.html
index 79b7302d..71377b6b 100644
--- a/_pages/index.html
+++ b/_pages/index.html
@@ -1,8 +1,8 @@
 ---
-navbar_type: transparent
+navbar_type: dark
 permalink: /
 
-page_main_heading: Create interfaces that users just love
+page_main_heading: Create apps that users just love
 page_main_heading_description: Offering a complete set of UI elements, GTK is suitable for projects ranging 
from small one-off tools to complete application suites.
 
 downloads:
@@ -85,38 +85,51 @@ news_and_events_list:
     description: If you are a developer and want to contribute to GTK, you are more than [welcome to do 
so](/docs/getting-started/).
 ---
 
-{% include header.html %}
+{% include header.html %} {% include navbar.html %}
 
-{% assign back_img = '/assets/img/wall-gtk-main.jpg' | absolute_url %}
-<section class="d-flex flex-column" id="landing" style="background: #111b27 url('{{ back_img }}');">
-
-  {% include navbar.html %}
-  <div class="container d-flex align-items-center py-5">
+<section class="py-4 d-flex flex-column align-items-center bg-dark text-white">
+  <div class="container">
     <div class="row">
-      <div class="col-md-6 d-flex justify-content-center flex-column main-heading text-white">
-        <h1 class="display-4 mb-3 text-shadow">{{ page.page_main_heading }}</h1>
-        <span class="text-light mb-4 text-shadow">{{ page.page_main_heading_description | markdownify 
}}</span>
+      <div class="col-md-5 d-flex justify-content-end flex-column main-heading">
+        <h1 class="display-5 pb-3">{{ page.page_main_heading }}</h1>
+        <span class="text-info lead">{{ page.page_main_heading_description | markdownify }}</span>
+      </div>
+      <!--
+
+          <a href="{{ '/docs/' | absolute_url }}" class="btn btn-md btn-primary" role="button">Learn GTK</a>
+
+        </div>
+
+      -->
+      <div class="col-md-7 d-none d-md-flex justify-content-center align-items-center flex-column">
+        <img
+          src="{{ '/assets/img/wall-gtk4.svg' | absolute_url }}"
+          class="img-fluid w-75"
+          alt="GTK Docs Wallpaper"
+        />
         <div class="mb-4 d-flex">
           <a href="{{ '/docs/' | absolute_url }}" class="btn btn-md btn-primary" role="button">Learn GTK</a>
           <div class="dropdown">
-            <a class="btn btn-md btn-outline-secondary dropdown-toggle ml-2" href="#" role="button" 
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</a>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-              {% for download in page.downloads %}
-                <a href="{{ download.link | absolute_url }}" class="dropdown-item"><i class="{{ 
download.icon }} pr-2 fa-fw"></i>{{ download.os }}</a>
-              {% endfor %}
+              <a class="btn btn-md btn-outline-secondary dropdown-toggle ml-2" href="#" role="button" 
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</a>
+              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                {% for download in page.downloads %}
+                  <a href="{{ download.link | absolute_url }}" class="dropdown-item"><i class="{{ 
download.icon }} pr-2 fa-fw"></i>{{ download.os }}</a>
+                {% endfor %}
+              </div>
             </div>
-          </div>
-        </div>
+          </div><!-- dropdown-->
         <div>
-          <span class="text-light"><span class="small text-info">Latest stable</span> v{{ 
site.data.api_fetch.stable_tags[0].name }}</span>
-          <span class="text-info mx-2">&bull;</span>
-          <span class="text-light"><span class="small text-info">Latest devel</span> v{{ 
site.data.api_fetch.devel_tags[0].name }}</span>
+              <span class="text-light"><span class="small text-info">Latest stable</span> v{{ 
site.data.api_fetch.stable_tags[0].name }}</span>
+              <span class="text-info mx-2">&bull;</span>
+              <span class="text-light"><span class="small text-info">Latest devel</span> v{{ 
site.data.api_fetch.devel_tags[0].name }}</span>
+            </div>
         </div>
       </div>
-    </div>
-  </div>
+
+    </div><!--row-->
+  </div><!--container-->
 </section>
-</div>
+
 
 <section class="pt-5 pb-4" id="bindings">
   <div class="container">
diff --git a/assets/img/wall-gtk4.svg b/assets/img/wall-gtk4.svg
new file mode 100644
index 00000000..d79eccb4
--- /dev/null
+++ b/assets/img/wall-gtk4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; width="1026" 
height="1026"><defs><linearGradient xlink:href="#d" id="k" x1="496" y1="744" x2="506.718" y2="784" 
gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.1846 0 0 1.1846 -94.514 -97.468)"/><linearGradient 
id="f"><stop offset="0" stop-color="#f6f5f4"/><stop offset="1" 
stop-color="#c5c1ba"/></linearGradient><linearGradient xlink:href="#a" id="h" x1="832" y1="776.125" x2="896" 
y2="776.125" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.1846 0 0 1.1846 -141.898 
-97.468)"/><linearGradient id="b"><stop offset="0" stop-color="#ff7800"/><stop offset="1" 
stop-color="#ed333b"/></linearGradient><linearGradient xlink:href="#c" id="j" x1="384.194" y1="742.01" 
x2="384.194" y2="800" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.1846 0 0 1.1846 -94.514 
-97.468)"/><linearGradient id="c"><stop offset="0" stop-color="#c0bfbc"/><stop offset=".696" 
stop-color="#8b8984"/><stop offs
 et="1" stop-color="#969591"/></linearGradient><linearGradient id="a"><stop offset="0" 
stop-color="#63452c"/><stop offset=".279" stop-color="#805939"/><stop offset="1" 
stop-color="#553b26"/></linearGradient><linearGradient id="d"><stop offset="0" stop-color="#176340"/><stop 
offset="1" stop-color="#26a269"/></linearGradient><linearGradient xlink:href="#e" id="l" x1="203.261" 
y1="784" x2="203.261" y2="800" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.1846 0 0 1.1846 
-37.654 -97.468)"/><linearGradient id="e"><stop offset="0" stop-color="#9a9996"/><stop offset=".7" 
stop-color="#adaba8"/><stop offset="1" stop-color="#60605c"/></linearGradient><linearGradient xlink:href="#f" 
id="i" x1="-689.755" y1="646.41" x2="-689.755" y2="672" gradientUnits="userSpaceOnUse" 
gradientTransform="matrix(1.1846 0 0 1.1846 94.514 -97.468)"/><clipPath clipPathUnits="userSpaceOnUse" 
id="g"><path d="M672 272v32a16 16 135 01-16 16h-64a16 16 135 00-16 16v32a16 16 135 01-16 16h-32a16 16 135 
00-16 16v3
 2a16 16 135 01-16 16h-96a16 16 135 00-16 16v32a16 16 135 01-16 16h-32a16 16 45 01-16-16v-96a16 16 45 
00-16-16h-96a16 16 135 00-16 16v96a16 16 135 01-16 16h-32a16 16 135 00-16 16v32a16 16 45 0016 16h32a16 16 45 
0116 16v96a16 16 45 0016 16h160a16 16 135 0016-16v-96a16 16 135 0116-16h352a16 16 45 0116 16v96a16 16 45 0016 
16h96a16 16 135 0016-16v-96a16 16 135 0116-16h32a16 16 135 0016-16V400a16 16 45 00-16-16h-32a16 16 45 
01-16-16v-96a16 16 45 00-16-16H688a16 16 135 00-16 16z" fill="#c061cb" stroke-width="6.859" 
stroke-linecap="round" paint-order="markers fill stroke"/></clipPath></defs><g clip-path="url(#g)" 
transform="matrix(1.1846 0 0 1.1846 -132.422 -97.468)" stroke-width=".844" paint-order="markers fill stroke" 
opacity=".27"><path fill="#3c3a3f" d="M160 384h192v128H160z"/><path fill="#5e5c64" d="M128 
512h64v96h-64z"/><path fill="#48474c" d="M192 480h224v224H192z"/><path fill="#6a6871" d="M384 
448h192v64H384z"/><path fill="#5e5c64" d="M384 512h128v64H384zM576 512h-64v64h64z"/><path 
 fill="#4a484f" d="M576 352h-96v96h96z"/><path fill="#65636b" d="M960 384H768v192h192z"/><path fill="#5e5c64" 
d="M928 256H768v128h160z"/><path fill="#4b4a50" d="M768 256H640v64h128z"/><path fill="#4a484f" d="M928 
576H736v128h192z"/><path fill="#55545b" d="M768 320H576v288h192z"/></g><path d="M683.533-631.73c-12.108 
0-21.853 12.674-21.853 28.418v129.266c0 15.743 9.745 26.655 21.853 26.633h75.754l46.92 46.922 
46.922-46.922h72.94c12.107 0 21.855-10.89 21.855-26.633v-129.266c0-15.744-9.748-28.418-21.855-28.418z" 
fill="#e01b24"/><path d="M683.533-632.005c-12.108 0-21.853 8.555-21.853 24.299v129.265c0 15.744 9.745 26.634 
21.853 26.634h75.754l46.92 46.922 46.922-46.922h72.94c12.107 0 21.855-10.89 
21.855-26.634v-129.265c0-15.744-9.748-24.3-21.855-24.3z" fill="#ed333b"/><path d="M780.748-583.184a33.752 
33.752 0 00-33.753 33.752 33.752 33.752 0 0010.172 24.151l-.375.193 50.033 50.033 
50.033-50.033-.126-.064a33.752 33.752 0 0010.305-24.28 33.752 33.752 0 00-33.752-33.752 33.752 33.752 0 
00-26.2
 69 12.56 33.752 33.752 0 00-26.268-12.56z" fill="#fff"/><g stroke-width=".844"><path d="M901.314 662.611c0 
11.517-8.833 20.853-19.729 20.853-10.896 0-19.728-9.336-19.728-20.853 0-11.516 19.728-62.981 
19.728-62.981s19.729 51.465 19.729 62.981z" fill="#2ec27e"/><path d="M881.585 599.63s-.661 1.769-.826 
2.203v81.587c.276.012.547.044.826.044 10.895 0 19.728-9.336 19.728-20.853 
0-11.517-19.728-62.98-19.728-62.98z" fill="#26a269"/></g><g stroke-width=".844"><path d="M937.17 
729.492c-9.576 9.576-24.683 9.994-33.742.935-9.06-9.06-8.641-24.166.934-33.742 9.576-9.575 68.77-35.963 
68.77-35.963s-26.387 59.195-35.963 68.77z" fill="#2ec27e"/><path d="M973.13 660.723s-2.02.92-2.518 
1.144l-67.835 67.836c.22.24.418.491.65.723 9.06 9.06 24.166 8.64 33.742-.935 9.575-9.575 35.961-68.768 
35.961-68.768z" fill="#26a269"/></g><path d="M881.322 655.814l-5.342 170.335 11.003.364z" 
fill="#1b754c"/><path d="M951.498 681.486l-71.68 68.943 4.591 4.906z" fill="#1a704b"/><g 
transform="matrix(.58796 0 0 .58796 -90
 5.462 3984.08)" stroke-width="1.701"><path d="M2875.496-6025.689h17.595c3.284 0 5.025 2.77 5.927 5.927l2.388 
8.36c1.048 3.669-3.072 6.888-6.888 6.888h-20.448c-3.816 0-7.937-3.22-6.889-6.888l2.388-8.36c.902-3.157 
2.644-5.927 5.927-5.927z" style="marker:none" fill="#f3f1ef"/><path d="M2797.496-6008.975h105.942c3.284 0 
5.366 2.692 5.927 5.928l3.98 22.966c.598 3.454-2.822 6.327-6.328 6.327h-113.1c-3.505 
0-6.926-2.873-6.327-6.327l3.98-22.966c.56-3.236 2.643-5.928 5.926-5.928z" style="marker:none" 
fill="#fff"/><path d="M2797.596-5981.913h110.518c3.283 0 6.244 2.658 5.927 5.927l-11.939 123.167c-.262 
2.705-2.188 4.905-4.905 4.905h-88.684c-2.717 0-4.643-2.2-4.905-4.905l-11.939-123.167c-.317-3.269 2.644-5.927 
5.927-5.927z" style="marker:none" fill="#deddda"/><path d="M2797.597-5981.913c-3.284 0-6.245 2.659-5.928 
5.927l11.939 123.167c.262 2.705 2.187 4.904 4.904 4.904h42.98c-2.717 
0-4.642-2.2-4.905-4.904l-11.938-123.167c-.317-3.268 2.644-5.927 5.927-5.927z" style="marker:none" 
fill="#9a9996"/>
 <path d="M2797.597-5981.913c-3.284 0-6.245 2.659-5.928 5.927l6.137 63.318h42.98l-6.137-63.318c-.317-3.268 
2.644-5.927 5.927-5.927z" style="marker:none" fill="#d2d0cc"/><path d="M2868.436-6008.974c3.284 0 5.367 2.692 
5.928 5.927l3.978 22.965c.599 3.454-2.82 6.328-6.326 6.328h35.002c3.505 0 6.925-2.874 
6.326-6.328l-3.978-22.965c-.561-3.235-2.645-5.927-5.928-5.927z" style="marker:none" fill="#deddda"/><rect 
ry="5.041" rx="5.041" y="-5992.26" x="2781.539" height="36.612" width="140.461" style="marker:none" 
fill="#f6f5f4"/><path d="M2906.082-5950.077a38.204 38.204 0 00-38.204 38.205 38.204 38.204 0 0036.254 
38.106l7.356-75.878a38.204 38.204 0 00-5.406-.432z" style="marker:none" fill="#c0bfbc"/><path 
d="M2875.414-5992.26a5.914 5.914 0 015.928 5.926v24.758a5.915 5.915 0 01-5.928 5.928h40.658a5.915 5.915 0 
005.928-5.928v-24.758a5.914 5.914 0 00-5.928-5.926z" style="marker:none" fill="#deddda"/></g><path 
d="M843.688 793.647h75.814l-8.292 56.564h-59.23z" fill="url(#h)"/><path d="M911.21 850.2
 1l8.292-56.563-20.86.15-3.877 56.344z" fill="#473220"/><path transform="scale(-1 1)" fill="url(#i)" 
paint-order="markers fill stroke" d="M-805.78 546.954h151.629v151.629H-805.78z"/><path fill="#f6f5f4" 
paint-order="markers fill stroke" d="M815.257 698.582H663.628v151.629h151.629z"/><path fill="#c0bfbc" 
paint-order="markers fill stroke" d="M540.43 546.954h113.721v151.629H540.43zM398.279 
698.582H512v151.629H398.279z"/><path fill="#f6f5f4" paint-order="markers fill stroke" d="M663.629 
698.582H512v151.629h151.629z"/><path fill="#c0bfbc" paint-order="markers fill stroke" d="M413.006 
737.503l-94.066-68.695-57.333 112.707 94.066 68.696z"/><path d="M360.602 
781.515l57.333-112.707H318.94l-57.333 112.708z" fill="#fff"/><path fill="#26a269" paint-order="markers fill 
stroke" d="M407.755 708.059h94.768v132.675h-94.768z"/><path fill="#deddda" paint-order="markers fill stroke" 
d="M512 737.504l-94.065-68.696-57.333 112.708 94.065 68.695z"/><path d="M454.667 
850.21h-98.994l-94.066-68.694h98.995z" fi
 ll="url(#j)"/><path fill="#57e389" paint-order="markers fill stroke" d="M663.629 
556.43h132.675v132.675H663.629z"/><path fill="#a51d2d" paint-order="markers fill stroke" d="M549.907 
556.43h94.768v132.675h-94.768z"/><path style="font-variation-settings:normal;marker:none" fill="#e01b24" 
d="M673.105 708.059H805.78v132.675H673.105z"/><path fill="#73a0d0" paint-order="markers fill stroke" 
d="M521.477 708.059h132.675v132.675H521.477z"/><path d="M502.357 708.059l.166.507v-.507zm.166 48.228l-42.604 
84.447h42.604z" fill="url(#k)" paint-order="markers fill stroke"/><rect width="132.675" height="137.355" 
x="-162.401" y="742.848" rx="14.858" ry="14.036" transform="skewX(15) scale(1 .96593)" fill="#deddda" 
paint-order="markers fill stroke"/><path d="M53.561 727.012c-4.777 0-6.967 3.07-6.026 6.584L74.48 834.15c.941 
3.514 4.78 6.586 9.555 6.586h93.914c4.776 0 6.967-3.072 6.026-6.586L157.03 
733.596c-.941-3.514-4.777-6.584-9.554-6.584z" fill="#3584e4" paint-order="markers fill stroke"/><g stroke-wi
 dth="3.109"><path style="marker:none" d="M111.557 761.272a3.152 2.413 41.185 00-1.256.37l-11.671 7.971a3.152 
2.413 41.185 00-.739 2.389l4.272 15.943a3.152 2.413 41.185 002.019 2.389l15.943 7.971a3.152 2.413 41.185 
002.758 0l11.671-7.971a3.152 2.413 41.185 00.74-2.389l-4.273-15.943a3.152 2.413 41.185 
00-2.019-2.389l-15.943-7.972a3.152 2.413 41.185 00-1.502-.37z" fill="#fff"/><path style="marker:none" 
d="M128.878 770.77l-12.47 8.517-17.034-8.518 12.47-8.517z" fill="#98c1f1"/><path style="marker:none" 
d="M121.938 797.209l12.355-8.325-4.528-16.97-12.345 8.432z" fill="#33d17a"/><path d="M120.462 
797.156l-16.816-8.325-4.565-16.97 16.863 8.432z" style="marker:none" fill="#e01b24"/></g><path d="M66.591 
831.257v9.477a9.456 9.456 0 009.477 9.477H275.08a9.456 9.456 0 009.477-9.477v-9.477H76.068z" fill="url(#l)" 
paint-order="markers fill stroke"/><path d="M60.334 831.257l2.596 9.477c1.387 5.064 7.888 9.477 13.138 
9.477h66.337c5.25 0 9.477-4.807 9.477-9.477v-9.477H76.068z" fill="#77767b" paint-o
 rder="markers fill stroke"/><path style="font-variation-settings:normal;marker:none" d="M500.104 
740.348l-48.778 95.89-78.827-57.567 48.778-95.89z" fill="#e01b24"/><path d="M282.62 788.371l75.29 
54.984h75.745l-75.29-54.984z" fill="#1a5fb4"/><path d="M323.876 676.855l-49.147 96.614h80.939l49.147-96.614z" 
fill="#33d17a"/><path d="M879.659 732.272l-7.983-4.829.813-4.031 7.796 2.731z" fill="#1b754c"/></svg>
\ No newline at end of file
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]