Testing sidebar filter

dactyl-config.yml

@@ -3926,9 +3926,9 @@ pages:
 # Code Samples page (final location TBD)
     -   name: Code Samples
         html: code-samples.html
-        parent: docs.html
+        # parent: docs.html
         template: page-code-samples.html.jinja
-        sidebar: left_only
+        sidebar: disabled
         filters:
             - code_samples
         top_nav_grouping: Online Tools

styles/_cards.scss

@@ -1,6 +1,23 @@
 .card, .cta-card, .q-wrapper {
   box-shadow: $dropdown-box-shadow;
 }
+#code-samples-deck  {
+  .card {
+    box-shadow: none;
+    margin: 0 2rem 5rem 2rem;
+  }
+  .card-header {
+    border-bottom: none;
+    background-color: unset;
+  }
+  .card-footer {
+    background-color: unset;
+  }
+
+  .card-deck .card a{
+    margin: 0 2.5rem 5rem 2.5rem;
+  }
+}
 
 .card-body > p,
 .card-body > p:not(:last-child) {
@@ -33,6 +50,8 @@ a.card:hover h3 {
     display: inline-block; // fix sizing in Chrome
   }
   margin-bottom: 0.75rem;
+  margin-left: -15px;
+  border: 2px solid #232325;
 }
 
 .card-deck {

styles/light/_light-theme.scss

@@ -340,6 +340,19 @@ aside .active > a:hover {
   background-color: $light-standout-bg;
   box-shadow: $light-box-shadow;
 }
+#code-samples-deck {
+  .card {
+    box-shadow: $light-box-shadow;
+  }
+  .card-header {
+    border-bottom: none;
+    background-color: $light-standout-bg;
+  }
+  .card-footer {
+    background-color: $light-standout-bg;
+  }
+}
+
 
 // FAQ
 .page-faq,

template/page-code-samples.html.jinja

@@ -4,22 +4,64 @@
 {% block mainclasses %}landing page-community{% endblock %}
 
 {% block main %}
+<div class="overflow-hidden">
+
+<div class="position-relative">
+    <img src="./img/backgrounds/xrpl-overview-purple.svg" class="landing-bg" id="xrpl-overview-purple">
+  </div>
 
 <section class="py-26 text-center">
   <div class="col-lg-8 mx-auto text-center">
     <div class="d-flex flex-column-reverse">
+      
       <h1 class="mb-0">{% trans %}Solutions to Accelerate Development{% endtrans %}</h1>
       <h6 class="eyebrow mb-3">{% trans %}Code Samples{% endtrans %}</h6>
     </div>
+    <a class="mt-12 btn btn-primary btn-arrow" href="#">Submit Code Samples</a>
   </div>
 </section>
 
+<div class="position-relative d-none-sm">
+    <img src="./img/backgrounds/xrpl-overview-orange.svg" id="xrpl-overview-orange">
+  </div>
+
 <section class="container-new py-26">
-  <div class="d-flex flex-column-reverse col-sm-8 p-0">
+  <div class="d-flex flex-column col-sm-8 p-0">
     <h3 class="h4 h2-sm">{% trans %}Browse sample code for building common use cases on the XRP Ledger{% endtrans %}</h3>
     <h6 class="eyebrow mb-3">{% trans %}Explore Code Samples{% endtrans %}</h6>
   </div>
-  <div class="row row-cols-1 row-cols-lg-3 card-deck mt-10" id="code-samples-deck">
+ 
+
+  <div class="row col-12  card-deck mt-10" id="code-samples-deck">
+
+    <div class="row col-md-4">
+      
+      
+      <div class="p-2">
+<form >
+<p>Code Language</p>
+<div>
+<input type="checkbox" name="langs" id="langs_javascript" value="JavaScript" checked> <label for="langs_javascript">JavaScript</label>
+</div>
+<div>
+<input type="checkbox" name="langs" id="langs_perl" value="Perl"> <label for="langs_perl">Python</label>
+</div>
+<div>
+<input type="checkbox" name="langs" id="langs_php" value="PHP" checked> <label for="langs_php">Java</label>
+</div>
+<div>
+<input type="checkbox" name="langs" id="langs_ruby" value="Ruby"> <label for="langs_ruby">HTTP/Websocket</label>
+</div>
+<div>
+{# <input type="submit" name="submit" value="Submit"/> #}
+</div>
+</form>
+</div>
+<br><br>
+
+    </div>
+
+
     {# {% set code_samples = [
       { "href": "https://github.com/XRPLF/xrpl-dev-portal/tree/master/content/_code-samples/checks",
         "title":  _("Checks Tutorials"),
@@ -42,9 +84,9 @@
       "py": "assets/img/logos/python.svg",
       "http": "assets/img/logos/globe.svg",
     } %}
-
+<div class="row col-md-8 px-0">
     {% for card in code_samples %}
-      <a class="card" href="{{target.github_forkurl}}/tree/{{target.github_branch}}/{{card.href}}">
+      <a class="card cardtest col-12 col-lg-5" href="{{target.github_forkurl}}/tree/{{target.github_branch}}/{{card.href}}">
         <div class="card-header">
         {% for lang in card.langs %}
           <span class="circled-logo"><img src="{{lang_icons[lang]}}" /></span>
@@ -57,9 +99,30 @@
         <div class="card-footer">&nbsp;</div>
       </a>
     {% endfor %}
+    </div>
   </div>
 </section>
 
+
+<section class="py-26 container">
+  <div class="col-lg-12 mx-auto ">
+    <div class="d-flex flex-column-reverse">
+      <h6 class="eyebrow mb-3">{% trans %}Help the XRPL community by submitting your own code samples{% endtrans %}</h6>
+      <h3 class="h4 h2-sm">{% trans %}Contribute Code Samples{% endtrans %}</h3>
+    </div>
+<div class="row">
+  <div class=" col-lg-3 "><h5 class="pb-4">Fork and clone</h5><p>Fork the xrpl-dev-portal repo. Using git, clone the fork to your computer.</p></div>
+  <div class=" col-lg-3 "><h5 class="pb-4">Add to folder</h5><p>Add your sample code to the content/_code-samples folder. Be sure to include a README.md that summarizes what it does and anything else people should know about it.</p></div>
+  <div class=" col-lg-3 "><h5 class="pb-4">Commit and push</h5><p>Commit your changes and push them to your fork on GitHub.</p></div>
+  <div class=" col-lg-3 "><h5 class="pb-4">Open a pull request</h5><p>Open a pull request to the original repo. Maintainers will review your submission and suggest changes if necessary. If the code sample is helpful, it’ll be merged and added to XRPL.org!</p></div>
+</div>
+
+    <a class="mt-12 btn btn-primary btn-arrow" href="#">Submit Code Samples</a>
+  </div>
+</section>
+
+
+</div>
 {% endblock %}