From 6aff6fbacc911afc0f523a54193c562dc32956a5 Mon Sep 17 00:00:00 2001
From: swaggboi
Date: Sun, 13 Feb 2022 02:44:53 -0500
Subject: [PATCH] Make things look a little better on mobile
---
public/main.css | 116 -------------------------------------------
public/willpower.css | 18 +++++--
views/index.erb | 15 +++---
3 files changed, 21 insertions(+), 128 deletions(-)
delete mode 100644 public/main.css
diff --git a/public/main.css b/public/main.css
deleted file mode 100644
index 702d640..0000000
--- a/public/main.css
+++ /dev/null
@@ -1,116 +0,0 @@
-* {
- box-sizing: border-box;
-}
-
-html, body {
- margin: 0px;
- height: 100%;
-}
-
-.modal.background {
- background-image: url('/tip.jpg');
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- height: 100%;
- width: 100%;
- position: absolute;
-}
-
-.modal.box {
- background-color: #A9D0F5;
- border-radius: 15px;
- border-style: solid;
- border-color: #FFFFFF;
- text-align: center;
- width: 50%;
- padding: 1em;
- -webkit-animation-name: from_top;
- -webkit-animation-duration: 1.5s;
- animation-name: from_top;
- animation-duration: 1.5s;
- position: absolute;
- left: 25%;
- top: 25%;
- z-index: 10;
-}
-
-.modal.button {
- border-radius: 5px;
- border: solid;
- color: #FFFFFF;
- font-size: 1em;
- padding: 15px 25px;
- text-align: center;
- transition-duration: 0.3s;
-}
-
-.modal.button:hover {
- background-color: #FFFFFF;
- border: solid;
- color: #000000;
- cursor: pointer;
-}
-
-.modal.button.accept {
- /* background-color: #04B404; */
-}
-
-.modal.button.decline {
- background-color: #FF4D4D;
-}
-
-#video {
- background-image: url('/willpower.gif');
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- height: 100%;
- width: 100%;
- z-index: 255;
- position: absolute;
- display: none;
-}
-
-.modal.loader {
- border: 16px solid #C9C9C9;
- border-top: 16px solid #000000;
- border-radius: 50%;
- width: 120px;
- height: 120px;
- animation: spin 2s linear infinite;
- margin: -4em auto auto -4em;
- display: flex;
- top: 50%;
- left: 50%;
- position: absolute;
-}
-
-@-webkit-keyframes from_top {
- from {
- top: -25%;
- opacity: 0;
- }
-
- to {
- top: 25%;
- opacity: 1;
- }
-}
-
-@keyframes from_top {
- from {
- top: -25%;
- opacity: 0;
- }
-
- to {
- top: 25%;
- opacity: 1;
- }
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
diff --git a/public/willpower.css b/public/willpower.css
index 6335624..256c28d 100644
--- a/public/willpower.css
+++ b/public/willpower.css
@@ -16,6 +16,9 @@ html, body {
height: 100%;
width: 100%;
position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.modal.box {
@@ -24,26 +27,31 @@ html, body {
border-style: solid;
border-color: #FFFFFF;
text-align: center;
- width: 50%;
+ width: 70%;
padding: 1em;
-webkit-animation-name: from_top;
-webkit-animation-duration: 1.5s;
animation-name: from_top;
animation-duration: 1.5s;
position: absolute;
- left: 25%;
- top: 25%;
z-index: 10;
}
+.modal.buttons {
+ display: flex;
+ gap: 2em;
+}
+
.modal.button {
border-radius: 5px;
border: solid;
color: #000000;
- font-size: 1em;
- padding: 15px 25px;
+ padding: 15px 0;
text-align: center;
transition-duration: 0.3s;
+ font-weight: bold;
+ font-size: 1em;
+ flex: 1;
}
.modal.button:hover {
diff --git a/views/index.erb b/views/index.erb
index ada2b66..dbd46b2 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -9,13 +9,14 @@
automatically through cookies or similar technology.
For further information please visit
allaboutcookies.org.
-
-
-
+
+
+
+