From f01c52333d37a46e49a215d893cb14cc70d11ae8 Mon Sep 17 00:00:00 2001 From: Dmytro <34593263+shelegdmitriy@users.noreply.github.com> Date: Sat, 24 Aug 2024 17:15:39 +0200 Subject: [PATCH] feat: new design (#1) * feat: update design * feat: update meta tags --------- Co-authored-by: Dmitriy Sheleg --- css/brands.css | 26 ++++++++++++++++--- css/skeleton-dark.css | 48 +++++++++++++++++++++++++++-------- images/logo-dark.svg | 18 +++++++++++++ index.html | 59 +++++++++++++++++++++++++------------------ 4 files changed, 113 insertions(+), 38 deletions(-) create mode 100644 images/logo-dark.svg diff --git a/css/brands.css b/css/brands.css index 0f04e300f..4b7bed40f 100644 --- a/css/brands.css +++ b/css/brands.css @@ -46,13 +46,30 @@ button { outline: none; border-radius: 8px; cursor: pointer; - -} + +} +.button { + background-color: #007aff; + color: #ffffff; + padding: 12px 20px; + margin: 10px 0; + border-radius: 10px; + text-transform: none; + font-weight: 500; + text-decoration: none; + display: block; + width: 80%; + margin: 10px auto; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; +} button:hover, .button:focus { color: #212121; border-color: #888; - outline: #7AB8FF solid 3px + outline: #7AB8FF solid 3px; + background-color: #005bb5; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } .button.button-primary { color: #fff; @@ -72,6 +89,7 @@ button:hover, vertical-align: middle; width: 20px; height: 20px; + margin-right: 10px; } /* Brand Styles @@ -1076,4 +1094,4 @@ button:hover, .button.button-zoom:hover, .button.button-zoom:focus { filter: brightness(90%); -} \ No newline at end of file +} diff --git a/css/skeleton-dark.css b/css/skeleton-dark.css index 16314fa82..6a6c251cf 100644 --- a/css/skeleton-dark.css +++ b/css/skeleton-dark.css @@ -31,14 +31,24 @@ /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ +.wrapper { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} .container { position: relative; width: 100%; max-width: 600px; text-align: center; - margin: 0 auto; - padding: 0 20px; + margin: 0 16px; + padding: 16px 0; box-sizing: border-box; + background-color: #ffffff; + border-radius: 20px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .container-left { position: relative; @@ -60,7 +70,8 @@ @media (min-width: 400px) { .container { width: 85%; - padding: 0; + margin: 0 auto; + padding: 40px 20px; } } @@ -93,8 +104,10 @@ body { font-size: 18px; line-height: 24px; font-weight: 400; - font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, - sans-serif; + background-color: #f5f5f7; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + color: #1d1d1f; + text-align: center; } /* Typography @@ -103,9 +116,9 @@ h1 { margin-top: 0; margin-bottom: 16px; font-weight: 800; -} -h1 { - font-size: 24px; + font-size: 2.5rem; + font-weight: 600; + color: #1d1d1f; line-height: 64px; letter-spacing: 0; } @@ -119,9 +132,22 @@ h1 { } p { + font-size: 1.1rem; + color: #6e6e73; + margin-bottom: 40px; margin-top: 0; } +p a { + color: #007aff; + text-decoration: none; + font-weight: 500; +} + +p a:hover { + color: #005bb5; +} + /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { @@ -200,10 +226,12 @@ hr { 50% (default): True circle */ .avatar { - width: 128px; - height: 128px; + width: 150px; + height: 150px; + margin-bottom: 20px; object-fit: cover; background-position: center; + border-radius: 20px; } /* open-sans-regular - vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic */ diff --git a/images/logo-dark.svg b/images/logo-dark.svg new file mode 100644 index 000000000..9e8e2b99d --- /dev/null +++ b/images/logo-dark.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 9dbc44977..96450f68d 100644 --- a/index.html +++ b/index.html @@ -3,45 +3,56 @@ - LittleLink - + Dmytro Sheleh - Portfolio & Links + + + + + + + + + + + + + + + + + + + + + + + - - -
-
-
- - - - -

Dmytro Sheleh

+ +
+
+ - -

An open source DIY Linktree alternative.

+

Dmytro Sheleh

- - GitHub
+

An open source DIY Linktree alternative.

- - LinkedIn
+ GitHub - - Email
+ LinkedIn - My CV + Email - -

Powered by LittleLink.

+ My CV -
+

Powered by LittleLink.