diff --git a/src/components/home/Badge.vue b/src/components/home/Badge.vue
index 475f927..e93c0ed 100644
--- a/src/components/home/Badge.vue
+++ b/src/components/home/Badge.vue
@@ -1,39 +1,46 @@
 <template lang="pug">
 	.Badge
 		router-link.Badge__name(:to=`{
 				name: view,
 				params: params
 			}`) {{ title }}
 </template>
 
 <style lang="scss">
-@import "~styles/_variables";
+@import "~styles/declarations";
 
 .Badge {
 	display: inline-block;
 	box-shadow: $shadow-1;
-	padding: 1rem 2rem;
-	margin: 0.5rem;
+	padding: 0.5rem 1rem;
+	margin: 0.25rem;
 	background-color: white;
 }
+
+@include media-breakpoint-up(md) {
+	.Badge {
+		padding: 1rem 2rem;
+		margin: 0.5rem;
+	}
+}
 </style>
 
 <script>
 export default {
 	name: "Badge",
 	props: {
 		link: {
 			type: Object,
 			required: true
 		}
 	},
 	data() {
 		return {
 			api: this.link.href ? this.link.href : "",
 			view: this.link.view,
 			title: this.link.title,
 			params: this.link.params ? this.link.params : {}
 		}
 	}
 }
 </script>
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index f7e61e7..76b53aa 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,97 +1,120 @@
 @import "variables";
 
 // Makes the @content apply to the given $breakpointName and wider.
 @mixin media-breakpoint-up($breakpointName) {
 	$width: map-get($breakpoints, $breakpointName);
 
 	@if $width {
 		@media (min-width: $width) {
 			@content;
 		}
 	} @else {
 		@error "Impossible to find breakpoint #{$breakpointName}";
 	}
 }
 
+@function strip-unit($num) { @return $num / ($num * 0 + 1); }
+
+@mixin fluid-font($min-vw, $max-vw, $min-font-size, $max-font-size) {
+	$u1: unit($min-vw);
+	$u2: unit($max-vw);
+	$u3: unit($min-font-size);
+	$u4: unit($max-font-size);
+
+	@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+		& {
+			font-size: $min-font-size;
+
+			@media screen and (min-width: $min-vw) {
+				font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+			}
+
+			@media screen and (min-width: $max-vw) {
+				font-size: $max-font-size;
+			}
+		}
+	}
+}
+
 @mixin container() {
 	margin-right: auto;
 	margin-left: auto;
 	padding-right: 0.5rem;
 	padding-left: 0.5rem;
 
 	@each $breakpoint, $container-max-width in $container-max-widths {
 		@include media-breakpoint-up($breakpoint) {
 			width: $container-max-width;
 			max-width: 100%;
 		}
 	}
 }
 
 @mixin input() {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	padding: 0.5rem 1rem;
 	font-size: 1rem;
 	height: 2.25rem;
 	line-height: 1;
 	vertical-align: top;
 	-moz-appearance: none;
 	-webkit-appearance: none;
 
 	&:disabled {
 		cursor: not-allowed;
 	}
 }
 
 @mixin card-padding() {
 	@each $breakpoint, $card-padding in $card-paddings {
 		@include media-breakpoint-up($breakpoint) {
 			padding: $card-padding;
 			padding-bottom: $card-padding + 0.5rem;
 			max-width: 100%;
 		}
 	}
 }
 
 /// Gives a card depth effect.
 /// @param {Number} $depth - depth level (between 1 and 5)
 /// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
 /// @requires {function} top-shadow
 /// @requires {function} bottom-shadow
 @mixin card($depth) {
 	background-color: $card-bg;
 
 	@include card-padding();
 
 	@if $depth < 1 {
 		box-shadow: none;
 	} @else if $depth > 5 {
 		@warn "Invalid $depth `#{$depth}` for mixin `card`.";
 	}
 	@else {
 		box-shadow: bottom-shadow($depth), top-shadow($depth);
 	}
 }
 
 /// Computes a top-shadow for a card effect.
 /// @param {Number} $depth - depth level
 /// @return {List}
 @function top-shadow($depth) {
 	$primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
 	$blur: nth(1.5 3 10 14 19, $depth) * 4px;
 	$color: rgba(black, nth(0.12 0.16 0.19 0.25 0.3, $depth));
 
 	@return 0 $primary-offset $blur $color;
 }
 
 /// Computes a bottom-shadow for a card effect.
 /// @param {Number} $depth - depth level
 /// @return {List}
 @function bottom-shadow($depth) {
 	$primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
 	$blur: nth(1 3 3 5 6, $depth) * 4px;
 	$color: rgba(black, nth(0.24 0.23 0.23 0.22 0.22, $depth));
 
 	@return 0 $primary-offset $blur $color;
 }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 69afeef..f69d4ea 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,62 +1,65 @@
 /// Values
-$body-size: 16px !default;
+$min-font: 14px;
+$max-font: 18px;
+$min-screen: 320px;
+$max-screen: 1280px;
 
 /// Colors
 
 // Brand colors
 $dark-red: #83001f !default;
 $red: #db3e14 !default;
 $yellow: #ffbc31 !default;
 $green: #6ab141 !default;
 $dark-green: #00613a !default;
 
 // typography
 $black: #333 !default;
 $gray: #888 !default;
 
 // other colors
 $blue: #347bff !default;
 $lightgray: darken(white, 5%) !default;
 
 $white-bg: #f9f9f9 !default;
 
 $disabled-bg: $lightgray !default;
 $disabled-fg: $gray !default;
 $disabled-border: darken(white, 10%) !default;
 
 $border-image-wtl: linear-gradient(to right, $dark-green 20%, $green 20%, $green 40%, $yellow 40%, $yellow 60%, $red 60%, $red 80%, $dark-red 80%) 6;
 
 $card-bg: #f2f2f2 !default;
 
 // global styles
 $input-radius: 0.25rem !default;
 $font-weight-semibold: 600 !default;
 $font-weight-bold: 700 !default;
 
 // shadows
 $shadow-1: 0 1px 3px rgba(0, 0, 0, 0.1);
 $shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
 
 /// Breakpoints
 $breakpoints: (
 	xs: 0,
 	sm: 576px,
 	md: 768px,
 	lg: 992px,
 	xl: 1200px
 ) !default;
 
 $container-max-widths: (
 	sm: 540px,
 	md: 720px,
 	lg: 960px,
 	xl: 1140px
 ) !default;
 
 $card-paddings: (
 	xs: 0.5rem,
 	sm: 1rem,
 	md: 1.5rem,
 	lg: 2rem,
 	xl: 2.5rem
 ) !default;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index e5c9d0c..f6a8867 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,38 +1,40 @@
 @import "minireset";
 @import "declarations";
 
 html {
 	color: $black;
-	font-size: $body-size;
+	//font-size: $body-size;
 	overflow-x: hidden;
 	overflow-y: scroll;
 	text-rendering: optimizeLegibility;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
+
+	@include fluid-font($min-screen, $max-screen, $min-font, $max-font);
 }
 
 html,
 body,
 button,
 input,
 select,
 textarea {
 	font-family: "Open Sans", sans-serif;
 }
 
 .flex-content-end {
 	justify-content: flex-end;
 
 	> * {
 		margin-left: 0.5rem;
 	}
 }
 
 .flex-container {
 	display: flex;
 	align-items: center;
 }
 
 .text-center {
 	text-align: center;
 }