Add responsive title and other adjustments to improve appearnce and r…

…esponsiveness
naxels · Apr 17, 2018 · 05e0835 · 05e0835
1 parent b670fdc
commit 05e0835
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 23 deletions.
diff --git a/_sass/_custom-bootstrap.scss b/_sass/_custom-bootstrap.scss
@@ -7,3 +7,31 @@ $link-color: #0155af;
 
 // Bootstrap and its default variables
 @import "bootstrap-4.0.0/scss/bootstrap";
+
+.resume-title {
+  font-size: 4.4em;
+}
+
+@include media-breakpoint-up(sm) {
+  .resume-title {
+    font-size: 6em;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .resume-title {
+    font-size: 7em;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .resume-title {
+    font-size: 7em;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .resume-title {
+    font-size: 7em;
+  }
+}
diff --git a/index.html b/index.html
@@ -13,21 +13,29 @@
 ---
 <div class="container">
   <!-- Header -->
-  <div class="row">
-    <div class="col">
-      <h1 class="my-accent-font display-1 text-center text-nowrap d-none d-sm-none d-md-block d-lg-block d-xl-block">{{ page.author }}</h1>
-      <h1 class="my-accent-font display-3 text-center text-nowrap d-none d-sm-block d-md-none d-lg-none d-xl-none">{{ page.author }}</h1>
-      <h1 class="my-accent-font text-center text-nowrap d-block d-sm-none d-md-none d-lg-none d-xl-none" style="font-size: 3.4em;">{{ page.author }}</h1>
-      <h4 class="my-accent-font text-center text-muted text-nowrap" style="margin-top: -0.5em;">{{ page.subtitle }}</h4>
+  <div class="row align-items-center">
+    <div class="col-24">
+      <h1 class="resume-title my-accent-font display-1 text-center text-nowrap">
+        {{ page.author }}
+      </h1>
     </div>
-  </div>
-  <div class="row">
-    <div class="col-6 offset-9 col-sm-4 offset-sm-10">
+    <div class="col-md-10">
+      <h4 class="my-accent-font text-center text-muted text-nowrap">{{ page.subtitle }}</h4>
+    </div>
+    <div class="col-6 offset-9 col-sm-4 offset-sm-10 offset-md-0">
       <img src="{{ page.portrait }}" class="rounded img-responsive mx-auto d-block" style="width:100%;"/>
     </div>
-  </div>
-  <div class="row">
-    <div class="col-lg-12 offset-lg-6">
+    <div class="col-md-10">
+      <h3 class="text-center" style="font-size: 2em;">
+        {% for network in site.data.networks %}
+        <a href="{{ network.url }}" target="_blank"
+          style="text-decoration: none; color: #6c757d; padding: .2em;">
+          <i class="{{ network.icon }}"></i>
+        </a>
+        {% endfor %}
+      </h3>
+    </div>
+    <div class="col-md-12 offset-md-6 col-xl-10 offset-xl-7">
       <hr/>
       <h5 class="text-center">{{ page.summary }}</h5>
       <br/>
@@ -80,13 +88,13 @@ <h3 class=""><strong>{{ company.name }}</strong></h3>
           </div>
           {% for position in company.positions %}
           <div class="row align-items-center">
-            <div class="col-24 col-md-20 offset-md-4">
+            <div class="col-24 col-md-20 offset-md-4 col-lg-20">
               <h4>{{ position.name }}</h4>
             </div>
-            <div class="col-24 col-md-20 offset-md-4 col-lg-16">
+            <div class="col-24 col-md-5 col-lg-5">
               <p class="text-muted text-left"><small>{{ position.dates }}</small></p>
             </div>
-            <div class="col-24 col-md-20 offset-md-4 col-lg-16">
+            <div class="col-24 col-md-19 col-lg-15 offset-lg-0">
               <ul>
                 {% for point in position.points %}
                 <li class="text-muted">{{ point }}</li>
@@ -139,16 +147,14 @@ <h3 class="text-nowrap">{{ school.name }}</h3>
           {% endfor %}
         </div>
       </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-10 offset-lg-7">
       <br/>
-      <p class="text-center" style="font-size: 2em;">
-        {% for network in site.data.networks %}
-        <a href="{{ network.url }}" target="_blank" style="text-decoration: none; color: black;">
-          <i class="{{ network.icon }}"></i>
-        </a>
-        {% endfor %}
-      </p>
-      <p class="text-center">&copy; {{ "now" | date: "%Y" }} {{ page.author }}.</p>
       <p class="text-center">View page <a href="{{ page.source }}" target="_blank">source</a>.</p>
+      <hr/>
+      <p class="text-center">&copy; {{ "now" | date: "%Y" }} {{ page.author }}.</p>
       <br/>
     </div>
   </div>