From b203e86af15e4eeccff0d74806fda88f2a751c05 Mon Sep 17 00:00:00 2001
From: Heitor Mattosinho <heitormattosinho@gmail.com>
Date: Wed, 28 Oct 2020 19:08:07 -0300
Subject: [PATCH] refactor (user/login): change width based on viewport

---
 .../public/infra/css/common-author.css        | 112 ++++++++++++++++++
 src/adonisjs/public/user/index.html           |   2 +-
 2 files changed, 113 insertions(+), 1 deletion(-)

diff --git a/src/adonisjs/public/infra/css/common-author.css b/src/adonisjs/public/infra/css/common-author.css
index faa5459ae..a2cc00b2a 100644
--- a/src/adonisjs/public/infra/css/common-author.css
+++ b/src/adonisjs/public/infra/css/common-author.css
@@ -1,5 +1,117 @@
 @charset "UTF-8";
 
+/* Small devices (landscape phones, 576px and up)*/
+@media (min-width: 576px) {
+  .w-sm-100 {
+  width:100%!important;
+  }
+  .w-sm-75 {
+  width:75%!important;
+  }
+  .w-sm-50 {
+  width:50%!important;
+  }
+  .w-sm-25 {
+  width:25%!important;
+  }
+  .h-sm-100 {
+  height:100%!important;
+  }
+  .h-sm-75 {
+  height:75%!important;
+  }
+  .h-sm-50 {
+  height:50%!important;
+  }
+  .h-sm-25 {
+  height:25%!important;
+  }
+}
+
+/* Medium devices (tablets, 768px and up)*/
+@media (min-width: 768px) {
+  .w-md-100 {
+  width:100%!important;
+  }
+  .w-md-75 {
+  width:75%!important;
+  }
+  .w-md-50 {
+  width:50%!important;
+  }
+  .w-md-25 {
+  width:25%!important;
+  }
+  .h-md-100 {
+  height:100%!important;
+  }
+  .h-md-75 {
+  height:75%!important;
+  }
+  .h-md-50 {
+  height:50%!important;
+  }
+  .h-md-25 {
+  height:25%!important;
+  }
+}
+
+/* Large devices (desktops, 992px and up)*/
+@media (min-width: 992px) {
+  .w-lg-100 {
+  width:100%!important;
+  }
+  .w-lg-75 {
+  width:75%!important;
+  }
+  .w-lg-50 {
+  width:50%!important;
+  }
+  .w-lg-25 {
+  width:25%!important;
+  }
+  .h-lg-100 {
+  height:100%!important;
+  }
+  .h-lg-75 {
+  height:75%!important;
+  }
+  .h-lg-50 {
+  height:50%!important;
+  }
+  .h-lg-25 {
+  height:25%!important;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up)*/
+@media (min-width: 1200px) {
+  .w-xl-100 {
+  width:100%!important;
+  }
+  .w-xl-75 {
+  width:75%!important;
+  }
+  .w-xl-50 {
+  width:50%!important;
+  }
+  .w-xl-25 {
+  width:25%!important;
+  }
+  .h-xl-100 {
+  height:100%!important;
+  }
+  .h-xl-75 {
+  height:75%!important;
+  }
+  .h-xl-50 {
+  height:50%!important;
+  }
+  .h-xl-25 {
+  height:25%!important;
+  }
+}
+
 body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14pt;
diff --git a/src/adonisjs/public/user/index.html b/src/adonisjs/public/user/index.html
index 846cc00b2..a1f1fab11 100644
--- a/src/adonisjs/public/user/index.html
+++ b/src/adonisjs/public/user/index.html
@@ -46,7 +46,7 @@
 
         <div class="d-flex justify-content-center w-100 registration-padding">
 
-          <div>
+          <div class="w-md-50">
             <h1 class="text-center">Log in</h1>
             <dcc-rest id="harena-login" bind="harena-login"></dcc-rest>
               <div class="bg-white shadow sm:rounded-lg">