No edit summary |
No edit summary Tag: 2017 source edit |
||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
< | <html> | ||
<style> | |||
/* Reset + base */ | |||
* { margin: 0; padding: 0; box-sizing: border-box; } | |||
body { | |||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; | |||
color: #242424; | |||
} | |||
/* HEADER */ | |||
.header { | |||
display: flex; | |||
align-items: center; /* Changed from flex-start to center */ | |||
justify-content: space-between; | |||
background: linear-gradient( | |||
90deg, | |||
#F5F7FF 0%, /* pale lavender */ | |||
#FFFFFF 100% /* pure white */ | |||
); | |||
padding: 30px 5%; /* Increased padding for better spacing */ | |||
overflow: hidden; | |||
min-height: 300px; /* Adjusted for fixed image height */ | |||
} | |||
h1 { | |||
border-bottom: none; | |||
} | |||
.header-content { | |||
max-width: 48%; /* Adjusted for better balance */ | |||
padding: 0; /* Removed padding-top since we're centering */ | |||
} | |||
.header-subtitle { | |||
display: block; | |||
font-size: 0.75rem; | |||
letter-spacing: 0.5px; | |||
text-transform: uppercase; | |||
color: #6e6e73; | |||
} | |||
.header-content h1 { | |||
font-size: 2rem; | |||
font-weight: 700; | |||
color: #1d1d1f; | |||
margin-bottom: 0.1em; | |||
letter-spacing: -1px; | |||
} | |||
.header-lead { | |||
font-size: 0.95rem; | |||
color: #3c3c44; | |||
margin-bottom: 0.5em; | |||
max-width: 600px; | |||
opacity: 0.9; | |||
} | |||
* | /* SEARCH */ | ||
* | .search-box { | ||
display: flex; | |||
width: 100%; | |||
max-width: 500px; | |||
background: white; | |||
border-radius: 8px; | |||
box-shadow: 0 5px 20px rgba(0,0,0,0.08); | |||
overflow: hidden; | |||
transition: box-shadow 0.3s ease; | |||
} | |||
.search-box:hover { | |||
box-shadow: 0 8px 30px rgba(0,0,0,0.12); | |||
} | |||
.search-input { | |||
flex: 1; | |||
border: none; | |||
padding: 10px 18px; | |||
font-size: 0.95rem; | |||
outline: none; | |||
} | |||
.search-button { | |||
background: #007AFF; | |||
color: white; | |||
border: none; | |||
padding: 10px 22px; | |||
font-size: 0.95rem; | |||
cursor: pointer; | |||
transition: background 0.3s ease; | |||
} | |||
.search-button:hover { | |||
background: #0051D5; | |||
} | |||
/* HEADER IMAGE */ | |||
.header-image { | |||
max-width: 52%; /* Adjusted to match content width change */ | |||
text-align: left; | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; | |||
height: 100%; | |||
padding-left: 20px; /* Reduced spacing to bring image closer */ | |||
} | |||
.header-image img { | |||
width: auto; /* Let width adjust based on height */ | |||
height: 240px; /* Fixed height for consistent sizing */ | |||
max-width: 100%; /* Don't exceed container */ | |||
display: inline-block; | |||
object-fit: contain; /* Ensures image maintains aspect ratio */ | |||
} | |||
* | /* MAIN CONTENT */ | ||
.container { | |||
max-width: 1400px; | |||
margin: 0 auto; | |||
padding: 0 5% 30px; | |||
} | |||
.section-title { | |||
text-align: left; | |||
margin-bottom: 15px; | |||
margin-top: 10px; | |||
} | |||
.section-title h2 { | |||
font-size: 1.75rem; | |||
font-weight: 600; | |||
margin-bottom: 2px; | |||
color: #242424; | |||
} | |||
.section-title p { | |||
font-size: 1rem; | |||
color: #707070; | |||
font-weight: 400; | |||
} | |||
=== | /* DOCUMENT GRID - Microsoft Learn Style */ | ||
.docs-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |||
gap: 10px; | |||
margin-bottom: 30px; | |||
} | |||
.doc-card { | |||
background: white; | |||
border: 1px solid #e0e0e0; | |||
border-radius: 6px; | |||
padding: 16px 18px; | |||
text-decoration: none; | |||
color: inherit; | |||
transition: all 0.2s ease; | |||
display: flex; | |||
align-items: flex-start; | |||
gap: 12px; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.doc-card:hover { | |||
border-color: #0078d4; | |||
box-shadow: 0 2px 8px rgba(0,0,0,0.08); | |||
} | |||
.doc-card::after { | |||
content: 'β'; | |||
position: absolute; | |||
right: 16px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
color: #0078d4; | |||
opacity: 0; | |||
transition: all 0.2s ease; | |||
font-size: 1rem; | |||
} | |||
.doc-card:hover::after { | |||
opacity: 1; | |||
right: 12px; | |||
} | |||
.doc-icon { | |||
width: 32px; | |||
height: 32px; | |||
min-width: 32px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 6px; | |||
font-size: 16px; | |||
flex-shrink: 0; | |||
} | |||
/* icon background + color - more subtle */ | |||
.icon-overview { background: #e6f2ff; color: #0078d4; } | |||
.icon-designer { background: #f0e6ff; color: #5c2e91; } | |||
.icon-modeling { background: #ffe6f0; color: #c239b3; } | |||
.icon-turnkey { background: #ffe6eb; color: #d13438; } | |||
.icon-server { background: #fff0e6; color: #ff8c00; } | |||
.icon-framework { background: #e6f5e6; color: #107c10; } | |||
.icon-legacy { background: #f0f0f0; color: #5c5c5c; } | |||
.icon-integration { background: #e6fff9; color: #00b7c3; } | |||
.icon-customization { background: #fff9e6; color: #8661c5; } | |||
.icon-data { background: #e6f3ff; color: #0078d4; } | |||
.icon-security { background: #e6f5e6; color: #107c10; } | |||
.icon-extensions { background: #ffe6e6; color: #d13438; } | |||
.icon-services { background: #ebe6ff; color: #5c2e91; } | |||
.icon-operations { background: #e6f7ff; color: #0078d4; } | |||
.icon-administration { background: #fff4e6; color: #ff8c00; } | |||
.icon-reporting { background: #f5ede6; color: #7a5548; } | |||
.doc-content { | |||
flex: 1; | |||
padding-right: 24px; | |||
} | |||
.doc-title { | |||
font-size: 1.1rem; | |||
font-weight: 600; | |||
margin-bottom: 3px; | |||
color: #242424; | |||
line-height: 1.2; | |||
} | |||
.doc-description { | |||
font-size: 0.875rem; | |||
color: #707070; | |||
line-height: 1.35; | |||
} | |||
/* Responsive */ | |||
@media (max-width: 768px) { | |||
.header { | |||
flex-direction: column; | |||
text-align: center; | |||
padding: 20px 5%; | |||
align-items: center; | |||
min-height: auto; /* Remove min-height on mobile */ | |||
} | |||
.header-content, .header-image { | |||
max-width: 100%; | |||
padding: 0; | |||
} | |||
.header-image { | |||
margin-top: 15px; | |||
justify-content: center; | |||
padding-left: 0; /* Remove left padding on mobile */ | |||
} | |||
.header-image img { | |||
height: 180px; /* Fixed height on mobile */ | |||
width: auto; | |||
} | |||
.header-content h1 { | |||
font-size: 1.75rem; | |||
} | |||
.docs-grid { | |||
grid-template-columns: 1fr; | |||
gap: 8px; | |||
} | |||
.section-title { | |||
margin-bottom: 15px; | |||
margin-top: 8px; | |||
} | |||
.doc-card { | |||
padding: 12px 14px; | |||
} | |||
.doc-card::after { | |||
opacity: 1; | |||
} | |||
} | |||
</style> | |||
<body> | |||
<!-- Header --> | |||
<header class="header"> | |||
<div class="header-content"> | |||
<small class="header-subtitle">DOCUMENTATION</small> | |||
<h1>Technical documentation</h1> | |||
<p class="header-lead"> | |||
Search for in-depth articles on MDriven developer tools and technologies. | |||
</p> | |||
<form class="search-box"> | |||
<input type="text" class="search-input" placeholder="Search documentation..."> | |||
<button type="submit" class="search-button">Search</button> | |||
</form> | |||
</div> | |||
<div class="header-image"> | |||
<!-- replace with your actual SVG/PNG/WEBP --> | |||
<img src="/images/documentation.webp" alt="Documentation illustration"> | |||
</div> | |||
</header> | |||
<!-- Main Content --> | |||
<main class="container"> | |||
<!-- Documentation Categories --> | |||
<section> | |||
<div class="section-title"> | |||
<h2>Product directory</h2> | |||
<p>Explore guides and articles by product.</p> | |||
</div> | |||
<div class="docs-grid"> | |||
<a href="/index.php/Documentation:General" class="doc-card"> | |||
<div class="doc-icon icon-overview">π</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Overview</h3> | |||
<p class="doc-description">Get started with MDriven fundamentals and core concepts</p> | |||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Designer" class="doc-card"> | |||
<div class="doc-icon icon-designer">π¨</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Designer</h3> | |||
<p class="doc-description">Learn to design models and user interfaces visually</p> | |||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Modeling" class="doc-card"> | |||
<div class="doc-icon icon-modeling">ποΈ</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Modeling</h3> | |||
<p class="doc-description">Master model creation and domain-driven design principles</p> | |||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Turnkey" class="doc-card"> | |||
<div class="doc-icon icon-turnkey">π</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Turnkey</h3> | |||
<p class="doc-description">Deploy complete applications quickly with Turnkey solutions</p> | |||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Server" class="doc-card"> | |||
<div class="doc-icon icon-server">π₯οΈ</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Server</h3> | |||
<p class="doc-description">Configure and manage MDriven server environments</p> | |||
</div> | |||
</a> | |||
=== | <a href="/index.php/Documentation:Framework" class="doc-card"> | ||
<div class="doc-icon icon-framework">βοΈ</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Framework</h3> | |||
<p class="doc-description">Understand the MDriven framework architecture and APIs</p> | |||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Legacy" class="doc-card"> | |||
<div class="doc-icon icon-legacy">π</div> | |||
<div class="doc-content"> | |||
< | <h3 class="doc-title">Legacy</h3> | ||
< | <p class="doc-description">Documentation for previous versions and migration guides</p> | ||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Integration" class="doc-card"> | |||
<div class="doc-icon icon-integration">π</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Integration</h3> | |||
<p class="doc-description">Connect MDriven with external systems and services</p> | |||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Customization" class="doc-card"> | |||
<div class="doc-icon icon-customization">β¨</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Customization</h3> | |||
<p class="doc-description">Customize appearance, behavior, and functionality</p> | |||
</div> | |||
</a> | |||
. | <a href="/index.php/Documentation:Data" class="doc-card"> | ||
/ | <div class="doc-icon icon-data">πΎ</div> | ||
<div class="doc-content"> | |||
<h3 class="doc-title">Data</h3> | |||
<p class="doc-description">Manage data persistence, queries, and migrations</p> | |||
</div> | |||
</a> | |||
. | <a href="/index.php/Documentation:Security" class="doc-card"> | ||
<div class="doc-icon icon-security">π</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Security</h3> | |||
<p class="doc-description">Implement authentication, authorization, and security best practices</p> | |||
</div> | |||
</a> | |||
. | <a href="/index.php/Documentation:Extensions" class="doc-card"> | ||
<div class="doc-icon icon-extensions">π§©</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Extensions</h3> | |||
<p class="doc-description">Extend MDriven capabilities with plugins and add-ons</p> | |||
</div> | |||
</a> | |||
. | <a href="/index.php/Documentation:Services" class="doc-card"> | ||
<div class="doc-icon icon-services">βοΈ</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Services</h3> | |||
<p class="doc-description">Build and consume web services and REST APIs</p> | |||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Operations" class="doc-card"> | |||
<div class="doc-icon icon-operations">β‘</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Operations</h3> | |||
<p class="doc-description">Monitor performance and manage operational tasks</p> | |||
</div> | |||
</a> | |||
<a href="/index.php/Documentation:Administration" class="doc-card"> | |||
<div class="doc-icon icon-administration">π€</div> | |||
<div class="doc-content"> | |||
<h3 class="doc-title">Administration</h3> | |||
<p class="doc-description">Administer users, permissions, and system settings</p> | |||
</div> | |||
</a> | |||
</ | <a href="/index.php/Documentation:Reporting" class="doc-card"> | ||
< | <div class="doc-icon icon-reporting">π</div> | ||
< | <div class="doc-content"> | ||
< | <h3 class="doc-title">Reporting</h3> | ||
<p class="doc-description">Create reports, dashboards, and data visualizations</p> | |||
</div> | |||
</a> | |||
</div> | |||
</section> | |||
</main> | |||
</body> | |||
</html> | </html> | ||
__HIDECREDIT__ | |||
__NOBREADCRUMBS__ | |||
Revision as of 01:58, 21 July 2025
Technical documentation
Search for in-depth articles on MDriven developer tools and technologies.

Product directory
Explore guides and articles by product.
Overview
Get started with MDriven fundamentals and core concepts
Designer
Learn to design models and user interfaces visually
Modeling
Master model creation and domain-driven design principles
Turnkey
Deploy complete applications quickly with Turnkey solutions
Server
Configure and manage MDriven server environments
Framework
Understand the MDriven framework architecture and APIs
Legacy
Documentation for previous versions and migration guides
Integration
Connect MDriven with external systems and services
Customization
Customize appearance, behavior, and functionality
Data
Manage data persistence, queries, and migrations
Security
Implement authentication, authorization, and security best practices
Extensions
Extend MDriven capabilities with plugins and add-ons
Services
Build and consume web services and REST APIs
Operations
Monitor performance and manage operational tasks
Administration
Administer users, permissions, and system settings
Reporting
Create reports, dashboards, and data visualizations
__HIDECREDIT__