Manhattan Computer Website: Technical Documentation

This documentation covers the layout, design, structure, and custom code used to build and style the Manhattan Computer website using Grav CMS + Quark theme.

🌐 Technologies Used

• CMS: Grav (flat-file, PHP-based)
• Theme: Quark (modified)
• CSS: Custom mci.css
• Markup: Markdown (.md) + Twig
• Responsive design: Yes, with media queries

📁 Page Structure

All main sections are placed in /user/pages/ with custom slugs:

• /home – Main landing page with video header and button grid
• /about – Company overview with styled image and section layout
• /features – Full list of services in a responsive grid (3x3 + 3x3)
• /pricing – Four pricing tiers, styled boxes with transparent black background
• /contact – Offices + contact form + email obfuscation
• /mci – This documentation

🎨 Styling Overview

Custom styles are located in:

/user/themes/quark/css/mci.css

General Overrides

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: #333;
}

.container.grid-lg pre,
.container.grid-lg pre code {
  text-align: left;
  margin-left: 0;
}

Header (Top Menu)

#header {
  background-color: #000 !important;
  width: 100%;
}

#header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  background-color: #000;
}

#header a {
  color: #fff;
}

Video Header Block

.video-banner {
  height: 640px;
  overflow: hidden;
  position: relative;
}

.video-banner video {
  width: 100vw;
  height: 100%;
  object-fit: cover;
}

Button Grid

<div class="button-grid">
  <a href="/" title="Support"><i class="fa fa-envelope"></i><span>CLOUD EMAIL</span></a>
  <!-- 13 more -->
</div>

Grid Styling

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  justify-items: center;
  padding: 1rem;
}

Features Page Layout

<div class="feature-card">
  <div class="feature-icon">
    <img src="support.jpg" alt="Support">
  </div>
  <h3>IT Support</h3>
  <p>...description...</p>
</div>

.feature-card {
  border-radius: 1rem;
  text-align: center;
  padding: 1rem;
}

.feature-card img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

Footer Logos

<div class="footer-logos">
  <img src="/user/pages/assets/foot001.png" alt="Microsoft">
  <img src="/user/pages/assets/foot005.png" alt="IBM">
</div>

📩 Contact Form Integration

• Integrated contact form block
• Emails protected using bidi-override CSS for spam obfuscation

<span style="unicode-bidi: bidi-override; direction: rtl;">moc.cinilpmoc.nattahnam@troppus</span>

📊 SEO & Metadata

• YAML frontmatter includes title, taxonomy, description
• preview.jpg used for social media Open Graph image
• Favicon and meta tags embedded via Twig in base.html.twig

🦩 Twig Usage in Templates

Twig is used extensively for dynamic templating and includes.

Conditional logic

Asset registration

Variables and loop example

🔗 External Menu Link (Admin method)

• Page type: external
• URL: https://support.manhattan.computer
• Added via Grav admin > Pages > Add > External Link

🧪 Notes & Testing

• Caching disabled during layout testing
• Custom favicon, preview image, and font-awesome verified
• Multiple versions tracked: mci_v16...v20 with responsive fixes

Last updated: 2025-04-13