From a322b09182088a0a36d1e6fe475dde045d95dd4c Mon Sep 17 00:00:00 2001 From: Raphael Gimenez Date: Fri, 19 Oct 2018 07:07:19 +0200 Subject: [PATCH 1/2] Added CSS and Js Mobile version only --- css/main.css | 139 +++++++++++++++++++++++++++++++++++++++++++++++ css/main.css.map | 9 +++ css/main.scss | 107 ++++++++++++++++++++++++++++++++++++ index.html | 43 ++++++++++----- js/main.js | 20 +++++++ 5 files changed, 304 insertions(+), 14 deletions(-) create mode 100644 css/main.css create mode 100644 css/main.css.map create mode 100644 css/main.scss create mode 100644 js/main.js diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..a9885e1 --- /dev/null +++ b/css/main.css @@ -0,0 +1,139 @@ +html { + height: 100%; +} + +body { + background-color: #e7dfc6; + width: 100%; + height: 100%; + margin: 0; + font-family: Cinzel, serif; + font-size: 1.5em; + letter-spacing: 0.4em; +} + +body form { + height: 100%; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; +} + +body form #messageWrapper, +body form #nameWrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + cursor: pointer; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 50%; + height: 200px; + width: 200px; + color: #e7dfc6; + background-color: #131b23; + -webkit-box-shadow: 0 0 6px #131b23; + box-shadow: 0 0 6px #131b23; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +body form #messageWrapper input, +body form #nameWrapper input { + margin-top: 10px; + display: none; + border-radius: 5px; + background-color: #e7dfc6; + -webkit-box-shadow: none; + box-shadow: none; + border: none; + outline: unset; + padding: 10px; + -webkit-transition: background-color 0.3s ease; + transition: background-color 0.3s ease; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +body form #messageWrapper input:focus, +body form #nameWrapper input:focus { + background-color: white; +} + +body form #messageWrapper.active, +body form #nameWrapper.active { + position: absolute; + z-index: 1; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + border-radius: 0; + width: 100%; + height: 100%; +} + +body form button.submit { + position: relative; + z-index: 0; + background-color: #131b23; + color: #e7dfc6; + font-family: inherit; + font-size: inherit; + letter-spacing: inherit; + border-radius: 5px; + border: none; + padding: 10px 30px; +} + +body form button[disabled].submit::before { + position: absolute; + content: " "; + width: 80%; + height: 1px; + background-color: #e7dfc6; + top: 50%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +body form button.submit::before { + width: 0%; +} + +body form button:enabled.submit { + -webkit-box-shadow: 0 5px 0 #816c61; + box-shadow: 0 5px 0 #816c61; +} + +body form button:enabled.submit:hover, +body form button:enabled.submit:focus { + -webkit-transform: translateY(2px); + transform: translateY(2px); + -webkit-box-shadow: 0 3px 0 #816c61; + box-shadow: 0 3px 0 #816c61; +} + +body form button:enabled.submit:active { + -webkit-transform: translateY(5px); + transform: translateY(5px); + -webkit-box-shadow: 0 0px 0 #816c61; + box-shadow: 0 0px 0 #816c61; +} +/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..8365f66 --- /dev/null +++ b/css/main.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAWA,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,IAAI;CACb;;AACD,AAAA,IAAI,CAAC;EACH,gBAAgB,EAdP,OAAO;EAehB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,aAAa;EAC1B,SAAS,EAAE,KAAK;EAChB,cAAc,EAAE,KAAK;CAqFtB;;AA5FD,AAQE,IARE,CAQF,IAAI,CAAC;EACH,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,YAAY;EAC7B,WAAW,EAAE,MAAM;EACnB,MAAM,EAAE,CAAC;CA4EV;;AA3FH,AAgBI,IAhBA,CAQF,IAAI,CAQF,eAAe;AAhBnB,IAAI,CAQF,IAAI,CASF,YAAY,CAAC;EACX,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,MAAM,EAAE,OAAO;EACf,WAAW,EAAE,MAAM;EACnB,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;EACZ,KAAK,EAtCA,OAAO;EAuCZ,gBAAgB,EApCR,OAAO;EAqCf,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CArCX,OAAO;EAsCf,UAAU,EAAE,aAAa;CAgB1B;;AA5CL,AA6BM,IA7BF,CAQF,IAAI,CAQF,eAAe,CAab,KAAK;AA7BX,IAAI,CAQF,IAAI,CASF,YAAY,CAYV,KAAK,CAAC;EACJ,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,GAAG;EAClB,gBAAgB,EA9Cb,OAAO;EA+CV,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,0BAA0B;EACtC,WAAW,EAAE,+CAA+C;CAC7D;;AAxCP,AAyCM,IAzCF,CAQF,IAAI,CAQF,eAAe,CAyBb,KAAK,AAAA,MAAM;AAzCjB,IAAI,CAQF,IAAI,CASF,YAAY,CAwBV,KAAK,AAAA,MAAM,CAAC;EACV,gBAAgB,EAtDP,KAAqB;CAuD/B;;AA3CP,AA6CI,IA7CA,CAQF,IAAI,CAqCF,eAAe,AAAA,OAAO;AA7C1B,IAAI,CAQF,IAAI,CAsCF,YAAY,AAAA,OAAO,CAAC;EAClB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,cAAc,EAAE,MAAM;EACtB,aAAa,EAAE,CAAC;EAChB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CACb;;AArDL,AAsDI,IAtDA,CAQF,IAAI,CA8CF,MAAM,AAAA,OAAO,CAAC;EACZ,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,gBAAgB,EAnER,OAAO;EAoEf,KAAK,EAvEA,OAAO;EAwEZ,WAAW,EAAE,OAAO;EACpB,SAAS,EAAE,OAAO;EAClB,cAAc,EAAE,OAAO;EACvB,aAAa,EAAE,GAAG;EAClB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,SAAS;CACnB;;AAjEL,AAkEI,IAlEA,CAQF,IAAI,CA0DF,MAAM,CAAA,AAAA,QAAC,AAAA,CAAS,OAAO,AAAA,QAAQ,CAAC;EAC9B,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,gBAAgB,EApFX,OAAO;EAqFZ,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,gBAAgB,CAAC,gBAAgB;CAC7C;;AA3EL,AA4EI,IA5EA,CAQF,IAAI,CAoEF,MAAM,AAAA,OAAO,AAAA,QAAQ,CAAC;EACpB,KAAK,EAAE,EAAE;CACV;;AA9EL,AA+EI,IA/EA,CAQF,IAAI,CAuEF,MAAM,AAAA,QAAQ,AAAA,OAAO,CAAC;EACpB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CA3Ff,OAAO;CA4FZ;;AAjFL,AAkFI,IAlFA,CAQF,IAAI,CA0EF,MAAM,AAAA,QAAQ,AAAA,OAAO,AAAA,MAAM;AAlF/B,IAAI,CAQF,IAAI,CA2EF,MAAM,AAAA,QAAQ,AAAA,OAAO,AAAA,MAAM,CAAC;EAC1B,SAAS,EAAE,eAAe;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAhGf,OAAO;CAiGZ;;AAtFL,AAuFI,IAvFA,CAQF,IAAI,CA+EF,MAAM,AAAA,QAAQ,AAAA,OAAO,AAAA,OAAO,CAAC;EAC3B,SAAS,EAAE,eAAe;EAC1B,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CApGf,OAAO;CAqGZ", + "sources": [ + "main.scss" + ], + "names": [], + "file": "main.css" +} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss new file mode 100644 index 0000000..a8c5b20 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,107 @@ +$colors: ( + primary: #e7dfc6, + primary-light: lighten(#e7dfc6, 20%), + accent: #816c61, + background: #131b23 +); + +@function color($color-name) { + @return map-get($colors, $color-name); +} + +html { + height: 100%; +} +body { + background-color: color(primary); + width: 100%; + height: 100%; + margin: 0; + font-family: Cinzel, serif; + font-size: 1.5em; + letter-spacing: 0.4em; + form { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + margin: 0; + #messageWrapper, + #nameWrapper { + display: flex; + justify-content: center; + cursor: pointer; + align-items: center; + border-radius: 50%; + height: 200px; + width: 200px; + color: color(primary); + background-color: color(background); + box-shadow: 0 0 6px color(background); + transition: all 0.3s ease; + input { + margin-top: 10px; + display: none; + border-radius: 5px; + background-color: color(primary); + box-shadow: none; + border: none; + outline: unset; + padding: 10px; + transition: background-color 0.3s ease; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + } + input:focus { + background-color: color(primary-light); + } + } + #messageWrapper.active, + #nameWrapper.active { + position: absolute; + z-index: 1; + flex-direction: column; + border-radius: 0; + width: 100%; + height: 100%; + } + button.submit { + position: relative; + z-index: 0; + background-color: color(background); + color: color(primary); + font-family: inherit; + font-size: inherit; + letter-spacing: inherit; + border-radius: 5px; + border: none; + padding: 10px 30px; + } + button[disabled].submit::before { + position: absolute; + content: " "; + width: 80%; + height: 1px; + background-color: color(primary); + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + button.submit::before { + width: 0%; + } + button:enabled.submit { + box-shadow: 0 5px 0 color(accent); + } + button:enabled.submit:hover, + button:enabled.submit:focus { + transform: translateY(2px); + box-shadow: 0 3px 0 color(accent); + } + button:enabled.submit:active { + transform: translateY(5px); + box-shadow: 0 0px 0 color(accent); + } + } +} diff --git a/index.html b/index.html index d5a22a2..7135362 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,29 @@ - - - Please leave your message here! (For a change, be creative!) - - -
- Message
-
- Name -
- -
- - + + + + + + + + Please leave your message here! + + + + + +
+
+ +
+
+
+ +
+
+ +
+ + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..e284dd8 --- /dev/null +++ b/js/main.js @@ -0,0 +1,20 @@ +$('#nameWrapper, #messageWrapper').on('click', (e) => { + if(!$(e.target).hasClass('active')) { + $(e.target).addClass('active'); + $('#' + e.target.getAttribute('id') + ' input').fadeIn(); + } else { + $('#' + e.target.getAttribute('id') + ' input').fadeOut(100); + setTimeout(() => { + $(e.target).removeClass('active'); + }, 100) + } +}) + +const inputs = $('input'); +inputs.on('change', () => { + if (inputs[0].value.length > 0 && inputs[1].value.length > 0) { + $('button').attr('disabled', false); + } else { + $('button').attr('disabled', true); + } +}) \ No newline at end of file From daf0a3f10a4ef535d64d1dc585f74b9523fd7515 Mon Sep 17 00:00:00 2001 From: Raphael Gimenez Date: Fri, 19 Oct 2018 08:56:59 +0200 Subject: [PATCH 2/2] Desktop version Added media queries for desktop screens --- css/main.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++ css/main.css.map | 2 +- css/main.scss | 56 ++++++++++++++++++++++++++++++++- index.html | 5 +-- js/main.js | 26 +++++++++------- 5 files changed, 154 insertions(+), 16 deletions(-) diff --git a/css/main.css b/css/main.css index a9885e1..ff53985 100644 --- a/css/main.css +++ b/css/main.css @@ -10,6 +10,25 @@ body { font-family: Cinzel, serif; font-size: 1.5em; letter-spacing: 0.4em; + overflow: hidden; +} + +body .background { + display: none; +} + +@media (min-width: 950px) { + body .background { + display: block; + position: absolute; + z-index: -1; + top: -50%; + left: 0; + width: 80%; + height: 200%; + background-color: #131b23; + border-radius: 0 50% 50% 0; + } } body form { @@ -31,6 +50,17 @@ body form { margin: 0; } +@media (min-width: 950px) { + body form { + display: -ms-grid; + display: grid; + -ms-grid-columns: 80% auto; + grid-template-columns: 80% auto; + -ms-grid-rows: 1fr 1fr; + grid-template-rows: 1fr 1fr; + } +} + body form #messageWrapper, body form #nameWrapper { display: -webkit-box; @@ -54,6 +84,22 @@ body form #nameWrapper { transition: all 0.3s ease; } +@media (min-width: 950px) { + body form #messageWrapper, + body form #nameWrapper { + width: 500px; + height: auto; + cursor: auto; + background-color: unset; + -webkit-box-shadow: unset; + box-shadow: unset; + border-radius: 0; + display: block; + margin: auto; + font-size: 2em; + } +} + body form #messageWrapper input, body form #nameWrapper input { margin-top: 10px; @@ -70,11 +116,23 @@ body form #nameWrapper input { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } +@media (min-width: 950px) { + body form #messageWrapper input, + body form #nameWrapper input { + display: block; + } +} + body form #messageWrapper input:focus, body form #nameWrapper input:focus { background-color: white; } +body form #messageWrapper input#message, +body form #nameWrapper input#message { + width: 200px; +} + body form #messageWrapper.active, body form #nameWrapper.active { position: absolute; @@ -101,6 +159,22 @@ body form button.submit { padding: 10px 30px; } +@media (min-width: 950px) { + body form button.submit { + -ms-grid-column: 2; + grid-column: 2; + -ms-grid-row: 1; + -ms-grid-row-span: 2; + grid-row: 1 / 3; + } + body form button.submit span { + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: tb-rl; + writing-mode: vertical-rl; + text-orientation: upright; + } +} + body form button[disabled].submit::before { position: absolute; content: " "; @@ -113,6 +187,13 @@ body form button[disabled].submit::before { transform: translateX(-50%) translateY(-50%); } +@media (min-width: 950px) { + body form button[disabled].submit::before { + width: 1px; + height: 90%; + } +} + body form button.submit::before { width: 0%; } diff --git a/css/main.css.map b/css/main.css.map index 8365f66..2c71663 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "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", + "mappings": "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", "sources": [ "main.scss" ], diff --git a/css/main.scss b/css/main.scss index a8c5b20..7efe93e 100644 --- a/css/main.scss +++ b/css/main.scss @@ -4,10 +4,15 @@ $colors: ( accent: #816c61, background: #131b23 ); - +$desktop: 950px; @function color($color-name) { @return map-get($colors, $color-name); } +@mixin desktop { + @media (min-width: #{$desktop}) { + @content; + } +} html { height: 100%; @@ -20,6 +25,21 @@ body { font-family: Cinzel, serif; font-size: 1.5em; letter-spacing: 0.4em; + overflow: hidden; + .background { + display: none; + @include desktop { + display: block; + position: absolute; + z-index: -1; + top: -50%; + left: 0; + width: 80%; + height: 200%; + background-color: color(background); + border-radius: 0 50% 50% 0; + } + } form { height: 100%; width: 100%; @@ -28,6 +48,11 @@ body { justify-content: space-evenly; align-items: center; margin: 0; + @include desktop { + display: grid; + grid-template-columns: 80% auto; + grid-template-rows: 1fr 1fr; + } #messageWrapper, #nameWrapper { display: flex; @@ -41,6 +66,17 @@ body { background-color: color(background); box-shadow: 0 0 6px color(background); transition: all 0.3s ease; + @include desktop { + width: 500px; + height: auto; + cursor: auto; + background-color: unset; + box-shadow: unset; + border-radius: 0; + display: block; + margin: auto; + font-size: 2em; + } input { margin-top: 10px; display: none; @@ -52,10 +88,16 @@ body { padding: 10px; transition: background-color 0.3s ease; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + @include desktop { + display: block; + } } input:focus { background-color: color(primary-light); } + input#message { + width: 200px; + } } #messageWrapper.active, #nameWrapper.active { @@ -77,6 +119,14 @@ body { border-radius: 5px; border: none; padding: 10px 30px; + @include desktop { + grid-column: 2; + grid-row: 1 / 3; + span { + writing-mode: vertical-rl; + text-orientation: upright; + } + } } button[disabled].submit::before { position: absolute; @@ -87,6 +137,10 @@ body { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); + @include desktop { + width: 1px; + height: 90%; + } } button.submit::before { width: 0%; diff --git a/index.html b/index.html index 7135362..cc8e614 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ +
@@ -18,9 +19,9 @@
-
+
- +
diff --git a/js/main.js b/js/main.js index e284dd8..d090feb 100644 --- a/js/main.js +++ b/js/main.js @@ -1,17 +1,19 @@ -$('#nameWrapper, #messageWrapper').on('click', (e) => { - if(!$(e.target).hasClass('active')) { - $(e.target).addClass('active'); - $('#' + e.target.getAttribute('id') + ' input').fadeIn(); - } else { - $('#' + e.target.getAttribute('id') + ' input').fadeOut(100); - setTimeout(() => { - $(e.target).removeClass('active'); - }, 100) - } -}) +if ($(window).width() < 950) { + $('#nameWrapper, #messageWrapper').on('click', (e) => { + if(!$(e.target).hasClass('active')) { + $(e.target).addClass('active'); + $('#' + e.target.getAttribute('id') + ' input').fadeIn(); + } else { + $('#' + e.target.getAttribute('id') + ' input').fadeOut(100); + setTimeout(() => { + $(e.target).removeClass('active'); + }, 100) + } + }) +} const inputs = $('input'); -inputs.on('change', () => { +inputs.on('input', () => { if (inputs[0].value.length > 0 && inputs[1].value.length > 0) { $('button').attr('disabled', false); } else {