! Good on small mobile now just tablets

themes/resume/layouts/index.html

@@ -27,7 +27,7 @@
     </div>
 	<div class="headline">
 		<h1 class="headline-title reveal-text">{{.Site.Title}}</h1>
-		<p class="reveal-text" style="font-size: 2rem;">{{.Site.Params.Description}}</p>
+		<p class="one-liner reveal-text">{{.Site.Params.Description}}</p>
 		<!-- TODO: move this into a partial for better control -->
 		{{ if .Site.Params.Gitlab }}
 		<a class="socials reveal-text" href="{{.Site.Params.Gitlab}}">

themes/resume/layouts/partials/experience.html

@@ -9,7 +9,7 @@
                         <em class="text-muted">@</em> 
                         <a class="bigger">{{.Params.Company}}</a>
                     </a>
-                    <p class="badge badge-dark float-right">{{.Params.When}}</p>
+                    <p class="badge badge-dark float-right media-float">{{.Params.When}}</p>
                     <p>{{.Content}}</p>
                 </li>
             {{ end }}

themes/resume/layouts/partials/head.html

@@ -3,6 +3,8 @@
     <link href="/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="/css/style.css">
     <link rel="shortcut icon" type="image/png" href="{{ .Site.BaseURL }}/images/favicon.png">
+	<title>{{.Site.Title}}</title>
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta property="og:title" content="{{ .Site.Title }}">
     <meta property="og:description" content="{{ .Site.Params.description }}">
     <meta property="og:site_name" content="{{ .Site.Params.name }}">

themes/resume/static/css/style.css

@@ -71,6 +71,9 @@ html {
 	font-size: 4rem;
 	font-weight: bold;
 }
+.one-liner {
+	font-size: 2rem;
+}
 
 .socials {
 	display:inline;
@@ -138,6 +141,7 @@ html {
 .card {
   padding: 1em;
   margin: 1em;
+  min-width: 250px;
 }
 a { color:#dcdcdc; }
 a:hover { color: #EAA221; }
@@ -187,3 +191,24 @@ ul.timeline > li:before {
 .bigger {
   font-size: 1.5rem;
 }
+
+
+@media (max-width: 1000px) {
+	p { font-size: x-large; }
+	li { font-size: x-large; }
+	h6 { font-size: x-large; }
+	.media-float { float: none!important; }
+	.container { max-width: 100%; }
+	.card { 
+		max-width: 100%;
+		margin-top: 1em;
+		margin-bottom: 1em;
+		margin-left: auto;
+		margin-right: auto;
+	}
+	.headline { bottom: 0; }
+	.headline-title { font-size: 1.5em; }
+	.one-liner { font-size: 1em; }
+}
+
+