[Feat] 매운맛 페이지에서 메인 페이지로 돌아가는 버튼 생성

간략한 안내문도 한글로 변경
boostcampwm-2021 · Sep 23, 2021 · e0bccc3 · e0bccc3
1 parent 0597db0
commit e0bccc3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/public/stylesheets/cookie.css b/public/stylesheets/cookie.css
@@ -27,6 +27,11 @@ body {
     overflow: hidden;
 }
 
+.button-wrapper {
+    display: flex;
+    flex-direction: row;
+}
+
 button {
     appearance: none;
     background: none;
@@ -87,10 +92,13 @@ small, .small {
     display: flex;
     justify-content: center;
     flex-direction: column;
-    height: 40vmin;
+    height: 140vmax;
     position: relative;
     width: 100%;
 
+    padding: 10px 0 10px 0;
+}
+
 #fortuneCookie:not(.open) {
     transform-origin: 50% 0%;
     animation-name: shake;
@@ -110,16 +118,32 @@ small, .small {
     border-radius: 0.25rem;
     color: white;
     font-size: 1rem;
-    margin-top: 0.5rem;
-    padding: 0.25rem;
     transition: 250ms;
+
+    margin: 0 1rem 0 1rem;
 }
 
 #new:hover {
     background-color: white;
     border-color: var(--main-color);
     color: var(--main-color);
 }
+
+#return {
+    background-color: grey;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    color: white;
+    font-size: 1rem;
+    transition: 250ms;
+
+    margin: 0 1rem 0 1rem;
+}
+
+#return:hover {
+    background-color: white;
+    border-color: grey;
+    color: grey;
 }
 
 .cookie {
@@ -128,7 +152,7 @@ small, .small {
     height: 40vmin;
     width: 40vmin;
     position: absolute;
-    top: 0;
+    top: 30px;
     z-index: 5;
 }
 

diff --git a/views/hot.pug b/views/hot.pug
@@ -2,7 +2,7 @@ extends layout
 
 block content
     h1 매운맛 쿠키
-    small Tap on the cookie to open
+    small 쿠키를 클릭 해주세요
     #fortuneCookie
         button(type="button")#cookie
             .cookie
@@ -12,9 +12,10 @@ block content
                     .fortune
                     .numbers
         button(type="button")#flip.front.small
-    button#new(type="button") 새로 뽑기
-    form(action="/" method="get")
-        button#return(type="submit") 돌아가기
+    .button-wrapper
+        button#new(type="button") 새로 뽑기
+        form(action="/" method="get")
+            button#return(type="submit") 돌아가기
 
     script(src='javascripts/cookie.js')