Compare commits
2 Commits
bb1e53e54f
...
52a7aa19d7
| Author | SHA1 | Date | |
|---|---|---|---|
|
52a7aa19d7 | ||
|
|
b6969ee5c7 |
29
assets/icons/logo.svg
Normal file
29
assets/icons/logo.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="240" height="60" viewBox="0 0 240 60" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<!-- Server/infrastructure icon -->
|
||||
<g transform="translate(10, 15)">
|
||||
<!-- Server rack base -->
|
||||
<rect x="0" y="0" width="24" height="30" rx="2" fill="#6b7280" stroke="#9ca3af" stroke-width="1"/>
|
||||
|
||||
<!-- Server rack details -->
|
||||
<rect x="2" y="2" width="20" height="6" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="2" y="10" width="20" height="6" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="2" y="18" width="20" height="6" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="2" y="26" width="20" height="2" rx="1" fill="#10b981"/>
|
||||
|
||||
<!-- Status lights -->
|
||||
<circle cx="20" cy="5" r="1.5" fill="#10b981"/>
|
||||
<circle cx="20" cy="13" r="1.5" fill="#10b981"/>
|
||||
<circle cx="20" cy="21" r="1.5" fill="#10b981"/>
|
||||
</g>
|
||||
|
||||
<!-- Text: "shrug.host" -->
|
||||
<text x="45" y="28" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="600" fill="#ffffff">
|
||||
shrug.host
|
||||
</text>
|
||||
|
||||
<!-- Tagline -->
|
||||
<text x="45" y="45" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#e5e7eb">
|
||||
hosting that just works
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,13 +1,45 @@
|
||||
// Custom project styles for shrug.host
|
||||
|
||||
// Variables
|
||||
$primary-color: #007bff;
|
||||
$secondary-color: #6c757d;
|
||||
$dark-text: #2c3e50;
|
||||
$light-text: #495057;
|
||||
$muted-text: #6c757d;
|
||||
$border-color: #e9ecef;
|
||||
$success-color: #28a745;
|
||||
// Brand Variables (aligned with branding.md)
|
||||
$primary-color: #6b7280; // Primary neutral gray
|
||||
$accent-color: #10b981; // Green for reliability/uptime
|
||||
$secondary-color: #9ca3af; // Light gray
|
||||
$dark-text: #374151; // Dark gray text
|
||||
$light-text: #6b7280; // Medium gray text
|
||||
$muted-text: #9ca3af; // Light gray text
|
||||
$border-color: #e5e7eb; // Light border
|
||||
$success-color: #10b981; // Green for success
|
||||
|
||||
// Fix text contrast issues
|
||||
.td-cover-block {
|
||||
h1, .display-1, .lead, p {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure good contrast on colored backgrounds
|
||||
.td-box--primary {
|
||||
h1, h2, h3, h4, h5, h6, p, .lead {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.td-box--dark {
|
||||
h1, h2, h3, h4, h5, h6, p, .lead {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Specific brand integrations
|
||||
.btn-primary {
|
||||
background-color: $accent-color !important;
|
||||
border-color: $accent-color !important;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background-color: darken($accent-color, 10%) !important;
|
||||
border-color: darken($accent-color, 10%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
$card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
$card-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.1);
|
||||
@ -19,6 +51,17 @@ $transition: all 0.2s ease;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
// Navbar logo sizing
|
||||
.navbar-logo svg {
|
||||
height: 50px !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
// Hide the text logo since SVG already contains text
|
||||
.navbar-brand__name {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
header {
|
||||
min-height: auto;
|
||||
}
|
||||
@ -181,7 +224,7 @@ main > section:nth-of-type(-n+3) {
|
||||
|
||||
i {
|
||||
margin-bottom: 1.5rem !important;
|
||||
color: $primary-color !important;
|
||||
color: $accent-color !important;
|
||||
font-size: 3rem !important;
|
||||
}
|
||||
|
||||
@ -299,7 +342,7 @@ body.td-section {
|
||||
margin: 1rem 0 1.5rem 0 !important;
|
||||
|
||||
strong {
|
||||
background: linear-gradient(135deg, $primary-color, darken($primary-color, 15%)) !important;
|
||||
background: linear-gradient(135deg, $accent-color, darken($accent-color, 15%)) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
background-clip: text !important;
|
||||
@ -418,7 +461,7 @@ body.td-section {
|
||||
|
||||
i {
|
||||
font-size: 3rem !important;
|
||||
color: $primary-color !important;
|
||||
color: $accent-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -443,7 +486,7 @@ body.td-section {
|
||||
}
|
||||
|
||||
ul li:before {
|
||||
color: $primary-color;
|
||||
color: $accent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -500,7 +543,7 @@ body.td-section {
|
||||
|
||||
i {
|
||||
margin-bottom: 1.5rem !important;
|
||||
color: $primary-color !important;
|
||||
color: $accent-color !important;
|
||||
font-size: 3rem !important;
|
||||
}
|
||||
|
||||
|
||||
32
assets/scss/_variables_project.scss
Normal file
32
assets/scss/_variables_project.scss
Normal file
@ -0,0 +1,32 @@
|
||||
/*
|
||||
Override Bootstrap and Docsy variables for shrug.host brand alignment
|
||||
*/
|
||||
|
||||
// Brand color palette (from logo)
|
||||
$shrug-primary: #6b7280; // Server rack base color
|
||||
$shrug-accent: #10b981; // Green status lights
|
||||
$shrug-secondary: #9ca3af; // Server rack stroke
|
||||
$shrug-text-primary: #374151; // Main logo text
|
||||
$shrug-text-secondary: #6b7280; // Tagline text
|
||||
$shrug-bg-elements: #e5e7eb; // Server modules
|
||||
|
||||
// Override Bootstrap color variables - more subtle approach
|
||||
$primary: #4f81a3 !default; // Muted blue that complements our gray palette
|
||||
$secondary: $shrug-secondary !default; // Use our light gray as secondary
|
||||
$success: $shrug-accent !default; // Use our green for success states
|
||||
$info: #c0e0de !default; // Keep existing info color
|
||||
$warning: #ffa630 !default; // Keep existing warning color
|
||||
$danger: #ed6a5a !default; // Keep existing danger color
|
||||
$light: $shrug-bg-elements !default; // Use our background color
|
||||
$dark: $shrug-text-primary !default; // Use our dark text color
|
||||
|
||||
// Text colors - keep readable
|
||||
$body-color: $shrug-text-primary !default;
|
||||
$headings-color: $shrug-text-primary !default;
|
||||
|
||||
// Link colors - use our accent sparingly
|
||||
$link-color: $shrug-accent !default;
|
||||
$link-hover-color: darken($shrug-accent, 15%) !default;
|
||||
|
||||
// Border colors
|
||||
$border-color: $shrug-bg-elements !default;
|
||||
17
hugo.toml
17
hugo.toml
@ -12,7 +12,7 @@ enableGitInfo = true
|
||||
[languages]
|
||||
[languages.en]
|
||||
title = "shrug.host"
|
||||
description = "Human-scale hosting for small organizations"
|
||||
description = "Human-scale hosting that just works - reliable infrastructure for small organizations"
|
||||
languageName = "English"
|
||||
weight = 1
|
||||
|
||||
@ -50,6 +50,21 @@ section = ["HTML", "print", "RSS"]
|
||||
copyright = "Shrug.host"
|
||||
privacy_policy = ""
|
||||
|
||||
# Social media configuration
|
||||
[params.social]
|
||||
linkedin = "company/shrug-host"
|
||||
bluesky = "@shrug.host"
|
||||
|
||||
# Open Graph defaults
|
||||
[params.og]
|
||||
image = "/images/social/og-card.svg"
|
||||
type = "website"
|
||||
|
||||
# Twitter card defaults
|
||||
[params.twitter]
|
||||
card = "summary_large_image"
|
||||
image = "/images/social/og-card.svg"
|
||||
|
||||
# Menu title if your navbar has a versions selector
|
||||
version_menu = "Releases"
|
||||
archived_version = false
|
||||
|
||||
31
static/bak.svg
Normal file
31
static/bak.svg
Normal file
@ -0,0 +1,31 @@
|
||||
<svg width="200" height="60" viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Light background for contrast -->
|
||||
<rect width="200" height="60" fill="#ffffff" rx="4"/>
|
||||
|
||||
<!-- Server/infrastructure icon -->
|
||||
<g transform="translate(10, 15)">
|
||||
<!-- Server rack base -->
|
||||
<rect x="0" y="0" width="24" height="30" rx="2" fill="#6b7280" stroke="#9ca3af" stroke-width="1"/>
|
||||
|
||||
<!-- Server rack details -->
|
||||
<rect x="2" y="2" width="20" height="6" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="2" y="10" width="20" height="6" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="2" y="18" width="20" height="6" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="2" y="26" width="20" height="2" rx="1" fill="#10b981"/>
|
||||
|
||||
<!-- Status lights -->
|
||||
<circle cx="20" cy="5" r="1.5" fill="#10b981"/>
|
||||
<circle cx="20" cy="13" r="1.5" fill="#10b981"/>
|
||||
<circle cx="20" cy="21" r="1.5" fill="#10b981"/>
|
||||
</g>
|
||||
|
||||
<!-- Text: "shrug.host" -->
|
||||
<text x="45" y="25" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="600" fill="#374151">
|
||||
shrug.host
|
||||
</text>
|
||||
|
||||
<!-- Tagline -->
|
||||
<text x="45" y="42" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#6b7280">
|
||||
hosting that just works
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
static/favicon.ico
Normal file
1
static/favicon.ico
Normal file
@ -0,0 +1 @@
|
||||
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8IS0tIFNlcnZlci9pbmZyYXN0cnVjdHVyZSBpY29uIC0tPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQsIDQpIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjIiIGZpbGw9IiM2YjcyODAiLz4KICAgIDxyZWN0IHg9IjIiIHk9IjIiIHdpZHRoPSIyMCIgaGVpZ2h0PSI2IiByeD0iMSIgZmlsbD0iI2U1ZTdlYiIvPgogICAgPHJlY3QgeD0iMiIgeT0iMTAiIHdpZHRoPSIyMCIgaGVpZ2h0PSI2IiByeD0iMSIgZmlsbD0iI2U1ZTdlYiIvPgogICAgPHJlY3QgeD0iMiIgeT0iMTgiIHdpZHRoPSIyMCIgaGVpZ2h0PSI0IiByeD0iMSIgZmlsbD0iIzEwYjk4MSIvPgogIDwvZz4KPC9zdmc+
|
||||
11
static/favicon.svg
Normal file
11
static/favicon.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Server icon simplified for favicon -->
|
||||
<rect x="4" y="4" width="24" height="24" rx="2" fill="#6b7280"/>
|
||||
<rect x="6" y="6" width="20" height="4" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="6" y="12" width="20" height="4" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="6" y="18" width="20" height="4" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="6" y="24" width="20" height="2" rx="1" fill="#10b981"/>
|
||||
<circle cx="24" cy="8" r="1.5" fill="#10b981"/>
|
||||
<circle cx="24" cy="14" r="1.5" fill="#10b981"/>
|
||||
<circle cx="24" cy="20" r="1.5" fill="#10b981"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 622 B |
105
static/images/social/bluesky-card.svg
Normal file
105
static/images/social/bluesky-card.svg
Normal file
@ -0,0 +1,105 @@
|
||||
<svg width="1200" height="675" viewBox="0 0 1200 675" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Bluesky-friendly design with open/community feel -->
|
||||
<defs>
|
||||
<linearGradient id="blueskyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4f81a3;stop-opacity:1" />
|
||||
<stop offset="30%" style="stop-color:#5a8bb0;stop-opacity:1" />
|
||||
<stop offset="70%" style="stop-color:#4f81a3;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#374151;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Subtle pattern for texture -->
|
||||
<pattern id="dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="20" cy="20" r="1" fill="#ffffff" opacity="0.1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<!-- Background with subtle pattern -->
|
||||
<rect width="1200" height="675" fill="url(#blueskyGradient)"/>
|
||||
<rect width="1200" height="675" fill="url(#dots)"/>
|
||||
|
||||
<!-- Community-focused server illustration -->
|
||||
<g transform="translate(90, 180)">
|
||||
<!-- Multiple small servers representing community -->
|
||||
<g transform="translate(0, 0)">
|
||||
<rect x="0" y="0" width="35" height="50" rx="3" fill="#6b7280" stroke="#9ca3af" stroke-width="1.5"/>
|
||||
<rect x="3" y="3" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="16" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="29" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="42" width="29" height="5" rx="1" fill="#10b981"/>
|
||||
<circle cx="29" cy="8" r="2" fill="#10b981"/>
|
||||
<circle cx="29" cy="21" r="2" fill="#10b981"/>
|
||||
<circle cx="29" cy="34" r="2" fill="#10b981"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(45, 10)">
|
||||
<rect x="0" y="0" width="35" height="50" rx="3" fill="#6b7280" stroke="#9ca3af" stroke-width="1.5"/>
|
||||
<rect x="3" y="3" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="16" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="29" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="42" width="29" height="5" rx="1" fill="#10b981"/>
|
||||
<circle cx="29" cy="8" r="2" fill="#10b981"/>
|
||||
<circle cx="29" cy="21" r="2" fill="#10b981"/>
|
||||
<circle cx="29" cy="34" r="2" fill="#10b981"/>
|
||||
</g>
|
||||
|
||||
<g transform="translate(90, -5)">
|
||||
<rect x="0" y="0" width="35" height="50" rx="3" fill="#6b7280" stroke="#9ca3af" stroke-width="1.5"/>
|
||||
<rect x="3" y="3" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="16" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="29" width="29" height="10" rx="1" fill="#e5e7eb"/>
|
||||
<rect x="3" y="42" width="29" height="5" rx="1" fill="#10b981"/>
|
||||
<circle cx="29" cy="8" r="2" fill="#10b981"/>
|
||||
<circle cx="29" cy="21" r="2" fill="#10b981"/>
|
||||
<circle cx="29" cy="34" r="2" fill="#10b981"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Main content with community focus -->
|
||||
<g transform="translate(250, 150)">
|
||||
<!-- Brand name -->
|
||||
<text x="0" y="70" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="68" font-weight="700" fill="#ffffff">
|
||||
shrug.host
|
||||
</text>
|
||||
|
||||
<!-- Community-focused tagline -->
|
||||
<text x="0" y="130" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="32" font-weight="500" fill="#e5e7eb">
|
||||
hosting that just works
|
||||
</text>
|
||||
|
||||
<!-- Community benefits -->
|
||||
<text x="0" y="180" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="24" font-weight="400" fill="#d1d5db">
|
||||
Supporting small organizations and creative projects
|
||||
</text>
|
||||
<text x="0" y="220" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="24" font-weight="400" fill="#d1d5db">
|
||||
with reliable, human-scale infrastructure
|
||||
</text>
|
||||
|
||||
<!-- Community values -->
|
||||
<g transform="translate(0, 260)">
|
||||
<circle cx="8" cy="12" r="4" fill="#10b981"/>
|
||||
<text x="20" y="18" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="20" font-weight="400" fill="#e5e7eb">
|
||||
No vendor lock-in
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(200, 260)">
|
||||
<circle cx="8" cy="12" r="4" fill="#10b981"/>
|
||||
<text x="20" y="18" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="20" font-weight="400" fill="#e5e7eb">
|
||||
Transparent pricing
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(400, 260)">
|
||||
<circle cx="8" cy="12" r="4" fill="#10b981"/>
|
||||
<text x="20" y="18" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="20" font-weight="400" fill="#e5e7eb">
|
||||
Real human support
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Friendly CTA -->
|
||||
<text x="0" y="340" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="22" font-weight="500" fill="#10b981">
|
||||
Learn more at shrug.host
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
36
static/images/social/icon-only.svg
Normal file
36
static/images/social/icon-only.svg
Normal file
@ -0,0 +1,36 @@
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Icon-only version for small displays -->
|
||||
<defs>
|
||||
<radialGradient id="iconGradient" cx="50%" cy="30%" r="70%">
|
||||
<stop offset="0%" style="stop-color:#4f81a3;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#374151;stop-opacity:1" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="200" height="200" rx="15" fill="url(#iconGradient)"/>
|
||||
|
||||
<!-- Centered server rack -->
|
||||
<g transform="translate(70, 60)">
|
||||
<!-- Server rack base -->
|
||||
<rect x="0" y="0" width="60" height="80" rx="4" fill="#6b7280" stroke="#9ca3af" stroke-width="2"/>
|
||||
|
||||
<!-- Server modules -->
|
||||
<rect x="5" y="5" width="50" height="16" rx="2" fill="#e5e7eb"/>
|
||||
<rect x="5" y="26" width="50" height="16" rx="2" fill="#e5e7eb"/>
|
||||
<rect x="5" y="47" width="50" height="16" rx="2" fill="#e5e7eb"/>
|
||||
|
||||
<!-- Power bar -->
|
||||
<rect x="5" y="68" width="50" height="7" rx="2" fill="#10b981"/>
|
||||
|
||||
<!-- Status lights -->
|
||||
<circle cx="50" cy="13" r="3" fill="#10b981"/>
|
||||
<circle cx="50" cy="34" r="3" fill="#10b981"/>
|
||||
<circle cx="50" cy="55" r="3" fill="#10b981"/>
|
||||
|
||||
<!-- Data ports -->
|
||||
<rect x="10" y="10" width="8" height="4" rx="1" fill="#6b7280"/>
|
||||
<rect x="10" y="31" width="8" height="4" rx="1" fill="#6b7280"/>
|
||||
<rect x="10" y="52" width="8" height="4" rx="1" fill="#6b7280"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
62
static/images/social/linkedin-card.svg
Normal file
62
static/images/social/linkedin-card.svg
Normal file
@ -0,0 +1,62 @@
|
||||
<svg width="1200" height="627" viewBox="0 0 1200 627" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Professional LinkedIn-focused design -->
|
||||
<defs>
|
||||
<linearGradient id="linkedinGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4f81a3;stop-opacity:1" />
|
||||
<stop offset="50%" style="stop-color:#5a8bb0;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#374151;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="627" fill="url(#linkedinGradient)"/>
|
||||
|
||||
<!-- Professional layout with server rack -->
|
||||
<g transform="translate(80, 160)">
|
||||
<!-- Server rack icon -->
|
||||
<rect x="0" y="0" width="50" height="65" rx="4" fill="#6b7280" stroke="#9ca3af" stroke-width="2"/>
|
||||
<rect x="4" y="4" width="42" height="12" rx="2" fill="#e5e7eb"/>
|
||||
<rect x="4" y="20" width="42" height="12" rx="2" fill="#e5e7eb"/>
|
||||
<rect x="4" y="36" width="42" height="12" rx="2" fill="#e5e7eb"/>
|
||||
<rect x="4" y="52" width="42" height="8" rx="2" fill="#10b981"/>
|
||||
|
||||
<!-- Status lights -->
|
||||
<circle cx="42" cy="10" r="2.5" fill="#10b981"/>
|
||||
<circle cx="42" cy="26" r="2.5" fill="#10b981"/>
|
||||
<circle cx="42" cy="42" r="2.5" fill="#10b981"/>
|
||||
</g>
|
||||
|
||||
<!-- Main content -->
|
||||
<g transform="translate(160, 120)">
|
||||
<!-- Company name -->
|
||||
<text x="0" y="60" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="64" font-weight="700" fill="#ffffff">
|
||||
shrug.host
|
||||
</text>
|
||||
|
||||
<!-- Professional tagline -->
|
||||
<text x="0" y="110" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="28" font-weight="500" fill="#e5e7eb">
|
||||
Professional Hosting Solutions
|
||||
</text>
|
||||
|
||||
<!-- Key benefits -->
|
||||
<text x="0" y="160" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="22" font-weight="400" fill="#d1d5db">
|
||||
✓ Human-scale support for small organizations
|
||||
</text>
|
||||
<text x="0" y="190" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="22" font-weight="400" fill="#d1d5db">
|
||||
✓ Reliable infrastructure without enterprise complexity
|
||||
</text>
|
||||
<text x="0" y="220" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="22" font-weight="400" fill="#d1d5db">
|
||||
✓ Transparent pricing, no vendor lock-in
|
||||
</text>
|
||||
|
||||
<!-- Professional CTA -->
|
||||
<text x="0" y="270" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="20" font-weight="600" fill="#10b981">
|
||||
Learn about our hosting solutions →
|
||||
</text>
|
||||
</g>
|
||||
|
||||
<!-- Subtle branding footer -->
|
||||
<text x="1100" y="600" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="16" font-weight="400" fill="#9ca3af" text-anchor="end">
|
||||
shrug.host
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
66
static/images/social/og-card.svg
Normal file
66
static/images/social/og-card.svg
Normal file
@ -0,0 +1,66 @@
|
||||
<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Background gradient -->
|
||||
<defs>
|
||||
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#4f81a3;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#374151;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="630" fill="url(#bgGradient)"/>
|
||||
|
||||
<!-- Server rack icon (larger for social card) -->
|
||||
<g transform="translate(100, 180)">
|
||||
<!-- Server rack base -->
|
||||
<rect x="0" y="0" width="60" height="75" rx="5" fill="#6b7280" stroke="#9ca3af" stroke-width="2"/>
|
||||
|
||||
<!-- Server modules -->
|
||||
<rect x="5" y="5" width="50" height="15" rx="2" fill="#e5e7eb" stroke="#d1d5db" stroke-width="1"/>
|
||||
<rect x="5" y="25" width="50" height="15" rx="2" fill="#e5e7eb" stroke="#d1d5db" stroke-width="1"/>
|
||||
<rect x="5" y="45" width="50" height="15" rx="2" fill="#e5e7eb" stroke="#d1d5db" stroke-width="1"/>
|
||||
|
||||
<!-- Power/status bar -->
|
||||
<rect x="5" y="65" width="50" height="5" rx="2" fill="#10b981"/>
|
||||
|
||||
<!-- Status lights -->
|
||||
<circle cx="50" cy="12.5" r="3" fill="#10b981"/>
|
||||
<circle cx="50" cy="32.5" r="3" fill="#10b981"/>
|
||||
<circle cx="50" cy="52.5" r="3" fill="#10b981"/>
|
||||
|
||||
<!-- Data ports -->
|
||||
<rect x="10" y="10" width="8" height="3" rx="1" fill="#6b7280"/>
|
||||
<rect x="10" y="30" width="8" height="3" rx="1" fill="#6b7280"/>
|
||||
<rect x="10" y="50" width="8" height="3" rx="1" fill="#6b7280"/>
|
||||
</g>
|
||||
|
||||
<!-- Main content area -->
|
||||
<g transform="translate(200, 150)">
|
||||
<!-- Main title -->
|
||||
<text x="0" y="60" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="72" font-weight="700" fill="#ffffff">
|
||||
shrug.host
|
||||
</text>
|
||||
|
||||
<!-- Tagline -->
|
||||
<text x="0" y="120" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="32" font-weight="400" fill="#e5e7eb">
|
||||
hosting that just works
|
||||
</text>
|
||||
|
||||
<!-- Description -->
|
||||
<text x="0" y="180" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="24" font-weight="400" fill="#d1d5db">
|
||||
Human-scale hosting for small organizations
|
||||
</text>
|
||||
<text x="0" y="220" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="24" font-weight="400" fill="#d1d5db">
|
||||
and projects that need reliability without
|
||||
</text>
|
||||
<text x="0" y="260" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="24" font-weight="400" fill="#d1d5db">
|
||||
enterprise complexity.
|
||||
</text>
|
||||
|
||||
<!-- Call to action -->
|
||||
<rect x="0" y="300" width="200" height="50" rx="6" fill="#10b981"/>
|
||||
<text x="100" y="332" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="18" font-weight="600" fill="#ffffff" text-anchor="middle">
|
||||
View Hosting Plans
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
45
static/images/social/profile-logo.svg
Normal file
45
static/images/social/profile-logo.svg
Normal file
@ -0,0 +1,45 @@
|
||||
<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Profile logo - square format for social media avatars -->
|
||||
<defs>
|
||||
<radialGradient id="profileGradient" cx="50%" cy="30%" r="70%">
|
||||
<stop offset="0%" style="stop-color:#5a8bb0;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#374151;stop-opacity:1" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="400" height="400" rx="20" fill="url(#profileGradient)"/>
|
||||
|
||||
<!-- Large server rack icon centered -->
|
||||
<g transform="translate(170, 120)">
|
||||
<!-- Server rack base -->
|
||||
<rect x="0" y="0" width="60" height="80" rx="4" fill="#6b7280" stroke="#9ca3af" stroke-width="2"/>
|
||||
|
||||
<!-- Server modules -->
|
||||
<rect x="5" y="5" width="50" height="16" rx="2" fill="#e5e7eb" stroke="#d1d5db" stroke-width="1"/>
|
||||
<rect x="5" y="26" width="50" height="16" rx="2" fill="#e5e7eb" stroke="#d1d5db" stroke-width="1"/>
|
||||
<rect x="5" y="47" width="50" height="16" rx="2" fill="#e5e7eb" stroke="#d1d5db" stroke-width="1"/>
|
||||
|
||||
<!-- Power bar -->
|
||||
<rect x="5" y="68" width="50" height="7" rx="2" fill="#10b981"/>
|
||||
|
||||
<!-- Status lights -->
|
||||
<circle cx="50" cy="13" r="3" fill="#10b981"/>
|
||||
<circle cx="50" cy="34" r="3" fill="#10b981"/>
|
||||
<circle cx="50" cy="55" r="3" fill="#10b981"/>
|
||||
|
||||
<!-- Data ports -->
|
||||
<rect x="10" y="10" width="8" height="4" rx="1" fill="#6b7280"/>
|
||||
<rect x="10" y="31" width="8" height="4" rx="1" fill="#6b7280"/>
|
||||
<rect x="10" y="52" width="8" height="4" rx="1" fill="#6b7280"/>
|
||||
</g>
|
||||
|
||||
<!-- Text below icon -->
|
||||
<text x="200" y="250" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="32" font-weight="700" fill="#ffffff" text-anchor="middle">
|
||||
shrug.host
|
||||
</text>
|
||||
|
||||
<text x="200" y="280" font-family="system-ui, -apple-system, BlinkMacSystemFont, sans-serif" font-size="16" font-weight="400" fill="#e5e7eb" text-anchor="middle">
|
||||
hosting that just works
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
x
Reference in New Issue
Block a user