Beautiful Hugo

هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.

Overall

blog, clean minimal, low density, light

Palette

background #ffffff; surfaces [#f5f5f5]; text #404040; muted text #808080; primary #2a6ea1; accents []

Type

headings Open Sans, 800, title case; body Lora, 18px; scale h1 80px / h2 30px / h3 24px

Shape & spacing

card radius 4px, no borders, shadow rgba(0,0,0,0.05) 0px 1px 1px 0px inset, section spacing 40px, content width 750px

Sections (top to bottom)

• Header — fixed top bar with logo center, nav links right-aligned, white background
• Hero — large centered headline with subheading, optional full-width image banner above content
• Content — vertical list of posts, each with title, subtitle, meta line (date/time/words/author), excerpt, tags, [Read More] link; cards have subtle padding and light gray border-bottom
• Footer — two rows of circular social icons (dark gray on light gray), centered author credit and theme info

Signature details

• Circular social icon grid in footer with consistent spacing and dark fill
• Subtle inset shadow on cards for depth
• Monospace code blocks with syntax highlighting
• Rotating "bigimg" header banners with caption overlay
• Minimalist typography pairing serif body with sans-serif headings
• Consistent use of light gray dividers between sections

Other pages

• /post/2017-03-07-bigimg-sample: full-width rotating image banner, YAML code examples, inline math rendering, social share buttons
• /page/about/: centered heading with underline, bullet list, embedded link, smaller social icons above footer

1. 1

   انقر على «استخدم هذا القالب» لفتحه في Ottermind Studio مع ملء الموجز.

2. 2

   أضف إلى الموجز علامتك التجارية وجمهورك وصفحاتك ومحتواك.

3. 3

   ينشئ Ottermind موقعًا جديدًا مستوحى من هذا التصميم، وتابع تعديله في المحادثة.