@extends('layouts.base', [
  'bodyclass' => 'docs',
  'meta_title' => 'Dev docs',
  'meta_description' => 'All documents published by Luuk, for the interested. Coming from my stack.',
])

@section('content')
  <section class="hero position-relative">
    <div class="container">
      <div class="grid pt-4 pt-lg-8 gap-0">
        <div class="g-col-12 g-col-lg-6 g-start-lg-2">
          <strong>Docs_</strong>
          <h1 class="mb-3 ms-n1 h2">
            Luuk's docs, for the interested
          </h1>
        </div>
        <div class="g-col-10 g-col-lg-6 g-start-lg-2">
          <p>
            Mostly articles and how-to's about web development coming from my used stack. If you are interested in a specific topic, please <a href="{{ URL::to('/contact') }}" class="link">let me know</a>.
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="docs py-6">
    <div class="container">
      <div class="grid">
        <div class="g-col-10 g-col-lg-7 g-start-lg-3">
          <div class="grid gcols-1">
            <hr>
            <a href="{{ URL::to('/docs/barba-with-gsap-reset-scrollsmoother') }}" class="py-3">
              <h4 class="m-0">Reset GSAP ScrollSmoother after Barba transition</h4>
              <p class="m-0">After a Barba page transition the ScrollSmoother instance should be reset to work nicely</p>
            </a>
            <hr>
            <a href="{{ URL::to('/docs/barba-with-gsap-using-flip') }}" class="py-3">
              <h4 class="m-0">Using GSAP Flip during a Barba transition</h4>
              <p class="m-0">How to use Flip while animating between different-sized Barba containers</p>
            </a>
            <hr>
            <a href="{{ URL::to('/docs/darkmode-done-right') }}" class="py-3">
              <h4 class="m-0">Website darkmode done right</h4>
              <p class="m-0">Using Bootstrap v5 CSS variables to create a darkmode switch</p>
            </a>
            <hr>
            <h5 class="pt-5">More incoming...</h5>
          </div>
        </div>
        
      </div>
    </div>
  </section>
@endsection

@section('scripts')
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
@endsection