From 081f6897184e0fa6dda1077abe50ccd4ea1b962e Mon Sep 17 00:00:00 2001 From: Sandile-Dev01 Date: Wed, 19 Jul 2023 13:28:33 +0200 Subject: [PATCH] added a new theme and extras --- css/styles.css | 134 +++++++++++++++++++--------------- css/themes/black-peach.css | 19 +++++ index.html | 143 ++++++++++++++++++++----------------- 3 files changed, 174 insertions(+), 122 deletions(-) create mode 100644 css/themes/black-peach.css diff --git a/css/styles.css b/css/styles.css index 2a1bcc7c..25c4623a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,75 +1,95 @@ -/* Typography */ - +*, html { - font-family: 'Roboto', sans-serif; + box-sizing: border-box; } -@media (min-width: 576px) { - html { - font-size: 14px; - } -} +@media (min-width: 0) { + /* Styles for the main container */ + main { + min-height: 100vh; -@media (min-width: 768px) { - html { - font-size: 16px; - } -} + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + padding: 0 5%; + } -@media (min-width: 992px) { - html { - font-size: 18px; - } -} + p { + font-family: "Lato", sans-serif; + } -@media (min-width: 1200px) { - html { - font-size: 20px; - } -} + /* Typography styles */ -.icons-social i { - font-size: 3em; -} + .intro { + font-family: "Reem Kufi", sans-serif; + font-size: 10vw; + font-weight: 600; + } -/* Custom Styles */ + .tagline { + display: flex; + justify-content: center; + gap: 1rem; + font-size: 3.5vw; + margin: 1.5rem 0; + font-weight: 100; + } -main { - display: flex; - flex-direction: column; - min-height: 100vh; - justify-content: center; - padding: 0 30px; - text-align: center; -} + /* Icons styles */ -main > .intro { - font-family: 'Reem Kufi', sans-serif; - font-size: 3.75em; - font-weight: 600; -} + .icons-social i { + font-size: 3em; + } -main > .tagline { - font-size: 1.5rem; - margin: 1.5rem 0; - font-weight: 100; -} + .icons-social i { + padding: 0 0.2rem; + margin: 0 0.5rem; + transition: 350ms ease-in-out; + } -.icons-social i { - padding: 10px; + .icons-social i:hover { + translate: 0 -0.25rem; + } + + .icons-social a { + text-decoration: none; + } } -.icons-social a { - text-decoration: none; +@media (min-width: 768px) { + /* Typography styles */ + + .intro { + font-size: 5rem; + } + + .tagline { + font-size: 2rem; + } } -.devto { - margin-bottom: -0.20rem; +@media (min-width: 1440px) { + /* Typography styles */ + + .intro { + font-size: 6.5vw; + } + + .tagline { + font-size: 1.5vw; + } } -.devto svg { - margin-bottom: -0.20rem; - margin-left: 0.675rem;; - width: 2.65rem; - height: 2.65rem; -} \ No newline at end of file +@media (min-width: 2400px) { + /* Typography styles */ + + .intro { + font-size: 6vw; + } + + /* Icons styles */ + .icons-social i { + font-size: 4em; + } +} diff --git a/css/themes/black-peach.css b/css/themes/black-peach.css new file mode 100644 index 00000000..ee1b14dc --- /dev/null +++ b/css/themes/black-peach.css @@ -0,0 +1,19 @@ +/* Theme */ + +main { + background: #000a01; + color: #ffa372; +} + +.icons-social a { + color: #ffa372; +} + +.tagline p { + font-style: italic; + color: #ffffff; +} + +.icons-social i:hover { + color: #ffffff; +} diff --git a/index.html b/index.html index 648afa3b..84d44f11 100644 --- a/index.html +++ b/index.html @@ -1,71 +1,84 @@ - - - - + + + + - Dinesh Pandiyan | Awesome Dev + Dinesh Pandiyan | Awesome Dev - + - - - - - - - - - - - - - - - -
-
Hello, I'm Dinesh!
-
All-Star Dev | Code Fanatic | Linux Hacker | Bleh
- -
- - - Github - - - - Twitter - - - - DEV Community - - - - StackOverflow - - - - LinkedIn - - - - Medium - - - - FreeCodeCamp - - - - Behance - - - - CodePen - -
-
- + + + + + + + + + + + + + + + + + + + + + +
+
Hello, I'm Dinesh!
+
+

All-Star Dev

+ | +

Code Fanatic

+ | +

Linux Hacker

+
+ +
+ + + Github + + + + DEV Community + + + + LinkedIn + + + + Medium + + + + StackOverflow + + + + Twitter + +
+
+