add LSP to downloads page (#3692)

* add LSP to downloads page

* grouped download tables in div

* add styling, fix text

* improve letter casing

Co-authored-by: Vladimir Panteleev <CyberShadow@users.noreply.github.com>

---------

Co-authored-by: Vladimir Panteleev <CyberShadow@users.noreply.github.com>

Author: WebFreak001

css/style.css

@@ -718,41 +718,100 @@ td.param_desc
     font-style: italic;
 }
 
+.download-tables > .download-compilers {
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+
+.download-tables {
+    display: flex;
+    gap: 2.5em;
+    align-items: center;
+}
+
+@media screen and (max-width: 65em) {
+    .download-tables {
+        flex-direction: column;
+    }
+}
+
+table.lsp {
+    max-width: 30em;
+    background-color: white;
+    border: none;
+    border-radius: 0.5em;
+    border-top-left-radius: 0.25em;
+    border-top-right-radius: 0.25em;
+    /* TODO: currently with shadow, since it's new and shiny, make this fit with the other content eventually */
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 5px 7px rgba(0,0,0,0.2);
+    position: relative;
+}
+
+table.lsp tbody > tr:nth-child(1) > td:before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 0.5em;
+    background-color: #B03931;
+    border-top-left-radius: 0.25em;
+    border-top-right-radius: 0.25em;
+}
+
+table.lsp img {
+    background-color: white;
+    border-radius: 0.5em;
+    padding: 0.5em;
+}
+
+table.lsp td {
+    padding: 1em;
+}
+
+table.lsp tbody > tr:nth-child(1) > td {
+    padding-bottom: 0;
+    padding-top: 1.5em;
+}
+
 table.download-compilers
 {
     width: 100%;
     max-width: 50em;
     table-layout: fixed;
 }
 
-table.download-compilers td
+.download-tables table td
 {
     border: none;
 }
 
-table.download-compilers h2
+.download-tables h2
 {
     margin: 0;
+    margin-bottom: 4pt;
+    text-align: center;
 }
 
-table.download-compilers > tbody > tr:first-child > td
+.download-tables table > tbody > tr:first-child > td
 {
     text-align: center;
     vertical-align: middle;
 }
 
-table.download-compilers > tbody > tr:nth-child(2) > td
+.download-tables table > tbody > tr:nth-child(2) > td
 {
     text-align: left;
 }
 
-table.download-compilers > tbody > tr:nth-child(2) > td > ul
+.download-tables table > tbody > tr:nth-child(2) > td > ul
 {
     margin-bottom: 0;
     padding-left: 1em;
 }
 
-table.download-compilers div.download-link
+.download-tables table div.download-link
 {
     text-align: center;
     margin-bottom: 1em;
@@ -763,7 +822,14 @@ table.download-compilers img
     width: 100%;
 }
 
-table.download-compilers h3
+table.lsp img
+{
+    width: 100%;
+    max-width: 8em;
+    margin: 0;
+}
+
+.download-tables table h3
 {
     margin-top: 0;
     text-align: center;

download.dd

@@ -2,6 +2,8 @@ Ddoc
 
 $(D_S Downloads,
 
+$(DIVC download-tables,
+
 $(TABLEC download-compilers,
   $(T caption,
     $(DIVID download-choose, ($(LINK2 https://wiki.dlang.org/Compilers, more information)))
@@ -60,6 +62,30 @@ $(TABLEC download-compilers,
   )
 )
 
+$(TABLEC lsp,
+  $(TR
+    $(TD $(LINK2 https://github.com/Pure-D/serve-d/#usage, $(IMG lsp-served-logo.png)))
+  )
+  $(TR
+    $(TD
+      $(H3 Language Server)
+      $(P
+        To start coding effectively, we recommend using an editor supporting the
+        Language Server Protocol. For $(B VSCode) you can immediately install the
+        $(LINK2 https://marketplace.visualstudio.com/items?itemName=webfreak.code-d, VSCode extension $(B code-d))
+        <sup>$(LINK2 https://open-vsx.org/extension/webfreak/code-d, [openvsx])</sup>
+      )
+    )
+  )
+  $(TR
+    $(TD
+      $(DIVC download-link, $(LINK2 https://github.com/Pure-D/serve-d/#usage, About) &middot; $(LINK2 https://github.com/Pure-D/serve-d/releases, Download))
+    )
+  )
+)
+
+)
+
 $(DIVC download_channels,
   $(DIVC download_channel,
     $(H2 $(LNAME2 dmd,DMD $(DMDV2)))