The Deep Tech Wiki

User:C/Sandbox Main page 2: Difference between revisions

Newer edit →
VisualWikitext
Created page with "<style> →--- TOP SECTION GRID ---: .dtp-top-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; margin-bottom: 40px; } →--- FEATURED GRID ---: .dtp-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; } .dtp-featured-card { border: 1px solid #ddd; padding: 20px; border-radius: 6px; min-height: 120px; } →--- TABLET BREAKPOINT ---: @media (max-width: 900p..."
 
No edit summary
Line 1: Line 1:
<style>
<!-- TOP SECTION -->
/* --- TOP SECTION GRID --- */
<div style="display:flex; flex-wrap:wrap; gap:40px; margin-bottom:40px;">
.dtp-top-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}


/* --- FEATURED GRID --- */
   <!-- Left column (1/3 on desktop, full width on mobile) -->
.dtp-featured-grid {
   <div style="flex:1 1 300px; max-width:450px;">
   display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
}
 
.dtp-featured-card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 6px;
  min-height: 120px;
}
 
/* --- TABLET BREAKPOINT --- */
@media (max-width: 900px) {
  .dtp-top-grid {
    grid-template-columns: 1fr; /* stack top sections */
   }
  .dtp-featured-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 featured columns */
  }
}
 
/* --- MOBILE BREAKPOINT --- */
@media (max-width: 600px) {
  .dtp-featured-grid {
    grid-template-columns: 1fr; /* stack featured cards */
  }
}
</style>
 
<!-- Two-column top layout (responsive) -->
<div class="dtp-top-grid">
 
  <div>
     <h2>The Deep Tech Wiki</h2>
     <h2>The Deep Tech Wiki</h2>
     <p>
     <p>
Line 53: Line 11:
   </div>
   </div>


   <div>
  <!-- Right column (2/3 on desktop, full width on mobile) -->
   <div style="flex:2 1 500px; min-width:300px;">
     <h2>Ecosystem pages</h2>
     <h2>Ecosystem pages</h2>
     <p>We're mapping the ecosystem one stakeholder at a time. Below is a snapshot of what's been created so far:</p>
     <p>
      We're mapping the ecosystem one stakeholder at a time. Below is a snapshot of what's been created so far:
    </p>


     {{Stakeholder count widget}}
     {{Stakeholder count widget}}
Line 67: Line 28:
</div>
</div>


<!-- FEATURED SECTION -->
<h2>Featured pages</h2>
<h2>Featured pages</h2>


<!-- Featured section (responsive) -->
<div style="display:flex; flex-wrap:wrap; gap:24px; margin-top:20px;">
<div class="dtp-featured-grid">
 
   <div class="dtp-featured-card">
   <div style="flex:1 1 250px; border:1px solid #ddd; padding:20px; border-radius:6px; min-height:120px;">
     <em>Featured placeholder 1</em><br />
     <em>Featured placeholder 1</em><br>
     (Future featured-page template goes here)
     (Future featured-page template goes here)
   </div>
   </div>


   <div class="dtp-featured-card">
   <div style="flex:1 1 250px; border:1px solid #ddd; padding:20px; border-radius:6px; min-height:120px;">
     <em>Featured placeholder 2</em><br />
     <em>Featured placeholder 2</em><br>
     (Future featured-page template goes here)
     (Future featured-page template goes here)
   </div>
   </div>


   <div class="dtp-featured-card">
   <div style="flex:1 1 250px; border:1px solid #ddd; padding:20px; border-radius:6px; min-height:120px;">
     <em>Featured placeholder 3</em><br />
     <em>Featured placeholder 3</em><br>
     (Future featured-page template goes here)
     (Future featured-page template goes here)
   </div>
   </div>
</div>
</div>
Retrieved from "https://deeptech.wiki/wiki/User:C/Sandbox_Main_page_2"