diff options
Diffstat (limited to '_includes/head.html')
| -rw-r--r-- | _includes/head.html | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..cd90cbb --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,145 @@ +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>{{ site.page_title }}</title> + <meta name="description" content="{{ site.app_description }}"> + <link rel="shortcut icon" href="{{ site.app_icon | relative_url }}"> + {% if site.enable_smart_app_banner %} + <meta name="apple-itunes-app" content="app-id={{ site.ios_app_id }}"> + {% endif %} + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> + <style> + :root { + --bulma-shadow-l: 0; + } + + body { + background-color: #f8f9fc; + } + + .card { + background-color: #e3e7ee; + } + + @media (prefers-color-scheme: dark) { + body { + background-color: #0a0e17; + } + + .card { + background-color: #111827; + } + } + + .card { + border: 2px solid rgba(156, 163, 175, 0.1); + border-radius: 0.75rem; + height: 100%; + transition: all 0.3s ease; + } + + .card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + border-color: {{ site.accent_color }}80; + } + + .card-content { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + } + .app-icon { + border-radius: 30px; + width: 120px; + height: 120px; + } + + .store-button { + height: 4rem; + margin: 0.5rem; + } + .phone-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + } + .phone-frame { + position: absolute; + height: 90vh; + z-index: 10; + pointer-events: none; + } + .phone-screenshot { + height: 87vh; + border-radius: 3rem; + } + @media (min-width: 768px) { + .phone-screenshot { + margin-right: 1px; + } + } + .app-icon-clip { + clip-path: path('M120,37.2V37c0-.9,0-1.8,0-2.7a35.1,35.1,0,0,0-.51-5.9,19.62,19.62,0,0,0-1.86-5.6,18.8,18.8,0,0,0-8.28-8.3,19.62,19.62,0,0,0-5.62-1.9,35.46,35.46,0,0,0-5.91-.51c-.9,0-1.8,0-2.73,0H55.41c-.9,0-1.8,0-2.73,0a43.35,43.35,0,0,0-5.91.51,19.74,19.74,0,0,0-5.62,1.9,18.84,18.84,0,0,0-8.28,8.3,19.62,19.62,0,0,0-1.86,5.6,35.51,35.51,0,0,0-.51,5.9c0,.9,0,1.8,0,2.73v40.2c0,.9,0,1.8,0,2.73a43.35,43.35,0,0,0,.51,5.91,19.62,19.62,0,0,0,1.86,5.6,18.84,18.84,0,0,0,8.28,8.28,19.71,19.71,0,0,0,5.62,1.86,35.46,35.46,0,0,0,5.91.51c.9,0,1.8,0,2.73,0H95.09c.9,0,1.8,0,2.73,0a43.28,43.28,0,0,0,5.91-.51,19.55,19.55,0,0,0,5.62-1.86,18.8,18.8,0,0,0,8.28-8.28,19.62,19.62,0,0,0,1.86-5.6,35.51,35.51,0,0,0,.51-5.91c0-.9,0-1.8,0-2.73V37.2Z'); + } + + .feature-box { + height: 100%; + } + .feature-box .icon { + color: {{site.accent_color}}; + margin-bottom: 0.5rem; + } + .feature-box .title { + margin-bottom: 0.75rem; + font-size: 1.1rem; + } + .feature-box p { + font-size: 0.9rem; + line-height: 1.5; + } + .social-icons { + margin-bottom: 1.5rem; + } + + .social-icons .icon { + margin: 0 0.5rem; + transition: transform 0.3s ease; + } + + .social-icons .icon:hover { + transform: translateY(-5px); + } + + .footer-links { + margin-top: 1rem; + } + + .footer-links a { + padding: 0 1rem; + border-right: 1px solid #dbdbdb; + } + + .footer-links a:last-child { + border-right: none; + } + + .made-by { + font-weight: 500; + margin-bottom: 1rem; + } + + .social-icons .icon { + color: {{ site.footer_link_color }}; + transition: filter 0.2s ease; + } + + .social-icons a:hover { + filter: brightness(0.65); + } + </style> +</head> |