Merge pull request #15 from adityalochan/develop

Modularised CSS
adityalochan · Apr 3, 2024 · fd99cdd · fd99cdd
2 parents 1642d9b + fb3ea75
commit fd99cdd
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 169 deletions.
diff --git a/assets/css/footer.css b/assets/css/footer.css
@@ -0,0 +1,31 @@
+
+#footwrap {
+ background: #2f2f2f;
+ padding-top: 50px;
+ padding-bottom: 50px;
+}
+
+#footwrap p, #footwrap h5 {
+ color: white;
+}
+
+#footwrap t {
+ font-weight: 700;
+}
+
+#footwrap i {
+ padding-right: 8px;
+ color: #1abc9c;
+}
+
+/* Copyright Wrap */
+
+#c {
+ background: #222222;
+ padding-top: 15px;
+ text-align: right;
+}
+
+#c p {
+ color: white
+}
diff --git a/assets/css/intro.css b/assets/css/intro.css
@@ -0,0 +1,19 @@
+/* Intnro Wrap */
+
+#intro {
+ background: #2c3e50;
+ padding-top: 60px;
+ padding-bottom: 60px;
+ color: white;
+} 
+
+#intro h5, p {
+ color: white;
+}
+
+#intro i {
+ color: white;
+ font-size: 20px;
+ padding-right: 8px;
+ vertical-align: middle;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -6,6 +6,12 @@
  * URL: http://blacktie.co
  */
 
+@import url('typography.css');
+@import url('navigation.css');
+@import url('intro.css');
+@import url('skills.css');
+@import url('footer.css');
+
 body {
  background-color: #f2f2f2;
  font-family: "Lato";
@@ -17,23 +23,6 @@ body {
  -webkit-overflow-scrolling: touch;
 }
 
-/* Titles */
-h1, h2, h3, h4, h5, h6 {
- font-family: "Raleway";
- font-weight: 300;
- color: #333;
-}
-
-
-/* Paragraph & Typographic */
-p {
- line-height: 28px;
- margin-bottom: 25px;
-}
-
-.centered {
- text-align: center;
-}
 
 /* Links */
 a {
@@ -72,85 +61,6 @@ a:after {
  padding: 0;
 }
 
-
-/*---------------------------------------------------
- 3.1 Topbar
----------------------------------------------------*/
-
-#section-topbar {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 10000;
- overflow: visible;
- font: normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#section-topbar a {
- color: #fff;
-}
-
-#topbar-inner {
- background: #111;
- line-height: 0;
- text-align: center;
-}
-
-/*
- Top Bar
-
- By default, top navigation bar uses "fixed" position
-*/
-#section-topbar ul#nav {
- display: inline-block;
- position: relative;
- margin: 0;
- padding: 0;
-
- border-right: 1px solid #222;
-
- /* For IE, the outcast */
- zoom:1;
- *display: inline;
-}
-
-#section-topbar ul#nav > li {
- display: block;
- float: left;
- padding: 0;
-}
-
-
-#section-topbar ul#nav a{
- display: block;
- font: normal 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
- text-decoration: none;
- padding: 18px 20px 18px 20px;
- border-left: 1px solid #222;
-}
-
- #section-topbar ul#nav a:hover {
- background: #222;
- text-decoration: none;
- border-left: 1px solid #111;
- }
-
- #section-topbar ul#nav .active a {
- background: #44bbaa;
- border-left: 1px solid #111;
- }
-
- #section-topbar ul#nav .active a:hover {
- background: #44bbaa;
- }
-#section-topbar i {
- font-size: 15px;
-}
-
-#section-topbar button{
- background-color: white;
-}
 /*---------------------------------------------------
  SECTION WRAPS
 ---------------------------------------------------*/
@@ -179,85 +89,18 @@ a:after {
 
 #headerwrap h1 {
  font-size: 60px;
- color: #778899;
+ color: white;
  text-shadow: 1px 2px grey;
+ padding-left: 680px;
+ padding-top: 140px;
 }
 
 #headerwrap h3 {
  font-size: 20px;
  color: white;
+ padding-left: 680px;
 }
 
-/* Intnro Wrap */
-
-#intro {
- background: #2c3e50;
- padding-top: 60px;
- padding-bottom: 60px;
- color: white;
-} 
-
-#intro h5, p {
- color: white;
-}
-
-#intro i {
- color: white;
- font-size: 20px;
- padding-right: 8px;
- vertical-align: middle;
-}
-
-
-#skillswrap {
- background: #2c3e50;
- padding-top: 60px;
- padding-bottom: 60px;
- color: white;
-}
-
-#skillswrap h5, p {
- color: white;
-}
-
-#footwrap {
- background: #2f2f2f;
- padding-top: 50px;
- padding-bottom: 50px;
-}
-
-#footwrap p {
- color: white;
-}
-
-#footwrap h5 {
- color: white;
-}
-
-
-#footwrap t {
- font-weight: 700;
-}
-
-#footwrap i {
- padding-right: 8px;
- color: #1abc9c;
-}
-
-/* Copyright Wrap */
-
-#c {
- background: #222222;
- padding-top: 15px;
- text-align: right;
-}
-
-#c p {
- color: white
-}
-
-
-
 /* Global Values */
 
 .desc {

diff --git a/assets/css/navigation.css b/assets/css/navigation.css
@@ -0,0 +1,78 @@
+/*---------------------------------------------------
+ 3.1 Topbar
+---------------------------------------------------*/
+
+#section-topbar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 10000;
+ overflow: visible;
+ font: normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+#section-topbar a {
+ color: #fff;
+}
+
+#topbar-inner {
+ background: #111;
+ line-height: 0;
+ text-align: center;
+}
+
+/*
+ Top Bar
+
+ By default, top navigation bar uses "fixed" position
+*/
+#section-topbar ul#nav {
+ display: inline-block;
+ position: relative;
+ margin: 0;
+ padding: 0;
+
+ border-right: 1px solid #222;
+
+ /* For IE, the outcast */
+ zoom:1;
+ *display: inline;
+}
+
+#section-topbar ul#nav > li {
+ display: block;
+ float: left;
+ padding: 0;
+}
+
+
+#section-topbar ul#nav a{
+ display: block;
+ font: normal 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
+ text-decoration: none;
+ padding: 18px 20px 18px 20px;
+ border-left: 1px solid #222;
+}
+
+ #section-topbar ul#nav a:hover {
+ background: #222;
+ text-decoration: none;
+ border-left: 1px solid #111;
+ }
+
+ #section-topbar ul#nav .active a {
+ background: #44bbaa;
+ border-left: 1px solid #111;
+ }
+
+ #section-topbar ul#nav .active a:hover {
+ background: #44bbaa;
+ }
+#section-topbar i {
+ font-size: 15px;
+}
+
+#section-topbar button{
+ background-color: white;
+}
diff --git a/assets/css/skills.css b/assets/css/skills.css
@@ -0,0 +1,10 @@
+#skillswrap {
+ background: #2c3e50;
+ padding-top: 60px;
+ padding-bottom: 60px;
+ color: white;
+}
+
+#skillswrap h5, p {
+ color: white;
+}
diff --git a/assets/css/typography.css b/assets/css/typography.css
@@ -0,0 +1,17 @@
+/* typography.css */
+h1, h2, h3, h4, h5, h6 {
+ font-family: "Raleway";
+ font-weight: 300;
+ color: #333;
+ }
+
+/* Paragraph & Typographic */
+ p {
+ line-height: 28px;
+ margin-bottom: 25px;
+ }
+
+ .centered {
+ text-align: center;
+ }
+
diff --git a/index.html b/index.html
@@ -73,8 +73,8 @@
  <div class="container">
  <div class="row centered">
  <div class="col-lg-08">
- <h1 style="padding-left: 680px;padding-top: 140px;color: white"> Aditya L Sharma</h1>
- <h3 style="padding-left: 680px;color: white"> Senior Software Developer | 2x IRONMAN 70.3 | Ultra-Runner | Century Rider | Half-Marathon Swimmer | Scuba Diver | Vegetarian<br>
+ <h1 class="header-title"> Aditya L Sharma</h1>
+ <h3 class="header-subtitle"> Senior Software Developer | IRONMAN 70.3 | Ultra-Runner | Century Rider | Half-Marathon Swimmer | Scuba Diver<br>
  <br>[email protected]<br>
  <br>Available for Hire
  </h3>