├── .gitignore ├── LICENSE ├── README.md ├── assets ├── background.png ├── favicon.ico ├── rule.png ├── scripts.js ├── scripts.min.js ├── style.css ├── style.css.map ├── style.min.css └── style.scss ├── index.html └── netlify.toml /.gitignore: -------------------------------------------------------------------------------- 1 | prepros.config 2 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2017 Keno Clayton 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Steam Review Editor 2 | 3 | Steam Review Editor allows you to easily create and modify your reviews in real-time, without having to manually apply steam's complex markup tags. 4 | 5 | --- 6 | 7 | ## Usage 8 | 9 | Simply type your review, hit "Copy to Clipboard", and paste it in Steam! 10 | 11 | While the markup is automatically applied, there are currently a few elements that may require your modification before publishing your review. 12 | 13 | 1. Blockquotes by default, have an author value of "author". Modify this to your liking, or omit it completely. 14 | 15 | ## Resources 16 | 17 | * The text editor is [Quill](http://quilljs.com/) and is modified using CSS 18 | * The website is built with [Bootstrap v4.6.2](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 19 | * The colours, as well as other layout ideas were mostly sourced from Steam's very own website: [Steam Store](http://store.steampowered.com) 20 | 21 | ## Contributions 22 | 23 | All contributions to the project are totally welcome. Anything that can improve the editor, website performance, layout or fix bugs are likely to be merged with the base project. 24 | -------------------------------------------------------------------------------- /assets/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dons20/steam-review-editor/652c195f955699fb827c5d9e52333af67a571a8c/assets/background.png -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dons20/steam-review-editor/652c195f955699fb827c5d9e52333af67a571a8c/assets/favicon.ico -------------------------------------------------------------------------------- /assets/rule.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dons20/steam-review-editor/652c195f955699fb827c5d9e52333af67a571a8c/assets/rule.png -------------------------------------------------------------------------------- /assets/scripts.js: -------------------------------------------------------------------------------- 1 | window.addEventListener( 2 | "load", 3 | function load() { 4 | // Temporary workaround for Quill not loading properly 5 | if (!window.jQuery || !window.Quill) return setTimeout(load, 120); 6 | 7 | const Inline = Quill.import("blots/inline"); 8 | const BlockEmbed = Quill.import("blots/block/embed"); 9 | 10 | class SpoilerBlot extends Inline { 11 | static blotName = "spoiler"; 12 | static className = "spoiler"; 13 | static tagName = "span"; 14 | 15 | static create() { 16 | return super.create(); 17 | } 18 | 19 | static formats() { 20 | return true; 21 | } 22 | 23 | optimize(context) { 24 | super.optimize(context); 25 | if (this.domNode.tagName !== this.statics.tagName) { 26 | this.replaceWith(this.statics.blotName); 27 | } 28 | } 29 | } 30 | 31 | class DividerBlot extends BlockEmbed { 32 | static blotName = 'divider'; 33 | static tagName = 'hr'; 34 | } 35 | 36 | const steamDivider = function () { 37 | const range = quillInstance.getSelection(true); 38 | quillInstance.insertText(range.index, '', Quill.sources.USER); 39 | quillInstance.insertEmbed(range.index, 'divider', true, Quill.sources.USER); 40 | quillInstance.setSelection(range.index + 1, Quill.sources.SILENT); 41 | }; 42 | 43 | Quill.register("formats/spoiler", SpoilerBlot); 44 | Quill.register("formats/divider", DividerBlot); 45 | 46 | const Delta = Quill.import("delta"); 47 | const quillInstance = new Quill("#editor", { 48 | modules: { 49 | toolbar: { 50 | container: "#toolbar", 51 | handlers: { 52 | divider: steamDivider 53 | }, 54 | }, 55 | }, 56 | formats: [ 57 | "header", 58 | "bold", 59 | "italic", 60 | "underline", 61 | "strike", 62 | "blockquote", 63 | "code", 64 | "code-block", 65 | "divider", 66 | "spoiler", 67 | "list", 68 | "link", 69 | ], 70 | placeholder: "Write your review here!", 71 | theme: "snow", 72 | }); 73 | 74 | let text = quillInstance.container.firstChild.innerHTML; 75 | 76 | // Enable all tooltips 77 | $('[data-toggle="tooltip"]').tooltip(); 78 | 79 | let change = new Delta(); 80 | 81 | quillInstance.on("selection-change", function (range, oldRange, source) { 82 | text = quillInstance.container.firstChild.innerHTML; 83 | convertHTML(text); 84 | if (range) { 85 | $("#editorWindow").addClass("active"); 86 | } else { 87 | $("#editorWindow").removeClass("active"); 88 | } 89 | }); 90 | 91 | quillInstance.on("text-change", function (delta, oldDelta, source) { 92 | text = quillInstance.container.firstChild.innerHTML; 93 | convertHTML(text); 94 | change = change.compose(delta); 95 | }); 96 | 97 | /** 98 | * @param {string} convertText 99 | */ 100 | function convertHTML(convertText) { 101 | //Process the markup tags 102 | let markupText = convertText 103 | .replace(/

/g, "") 104 | .replace(/<\/p>/g, "\n") 105 | .replace(//g, "[b]") 106 | .replace(/<\/strong>/g, "[/b]") 107 | .replace(/

/g, "[hr][/hr]\n") 108 | .replace(/

/g, "[h1]") 109 | .replace(/<\/h1>/g, "[/h1]\n") 110 | .replace(/

/g, "[h2]") 111 | .replace(/<\/h2>/g, "[/h2]\n") 112 | .replace(/

/g, "[h3]") 113 | .replace(/<\/h3>/g, "[/h3]\n") 114 | .replace(//g, "[i]") 115 | .replace(/<\/em>/g, "[/i]") 116 | .replace(//g, "[u]") 117 | .replace(/<\/u>/g, "[/u]") 118 | .replace(/
    /g, "") 119 | .replace(/<\/ol>/g, "") 120 | .replace(/((
  1. )(.*?)(<\/li>))+/g, `[olist]\n$&[/olist]\n`) 121 | .replace(/((
  2. )(.*?)(<\/li>))+/g, `[list]\n$&[/list]\n`) 122 | .replace(/
  3. /g, "\t[*]") 123 | .replace(/<\/li>/g, "\n") 124 | .replace(/
    /g, "\n") 125 | .replace(//g, "]") 127 | .replace(/<\/a>/g, "[/url]") 128 | .replace(//g, "[strike]") 129 | .replace(/<\/s>/g, "[/strike]") 130 | .replace(/
    /g, "[quote=author]") 131 | .replace(/<\/blockquote>/g, "[/quote]\n") 132 | .replace(/()/g, "") 133 | .replace(/(.*?)<\/span>/g, "[spoiler]$1[/spoiler]") 134 | .replace(//g, "") 135 | .replace(/<\/span>/g, "[/spoiler]") 136 | .replace(/
    /g, "[code]")
137 |         .replace(/<\/pre>/g, "[/code]\n")
138 |         .replace(//g, "[noparse]")
139 |         .replace(/<\/code>/g, "[/noparse]");
140 | 
141 |       let previewText = quillInstance.getSemanticHTML().replaceAll('
    ', `
142 |         
    
143 |           
    Originally posted by author:
    
144 |       `);
145 | 
146 |       //Set the markup display
147 |       $("#markup").html(markupText);
148 | 
149 |       //Set the preview display
150 |       $("#preview").html(previewText);
151 |     }
152 | 
153 |     function CopyToClipboard(containerid) {
154 |       let t = document.createElement("textarea");
155 |       t.id = "t";
156 |       t.style.height = 0;
157 |       document.body.appendChild(t);
158 |       t.value = document.getElementById(containerid).innerText;
159 |       let selector = document.querySelector("#t");
160 |       selector.select();
161 |       selector.setSelectionRange(0, 99999); /*For mobile devices*/
162 |       navigator.clipboard.writeText(selector.value);
163 |       // Remove the textarea
164 |       document.body.removeChild(t);
165 |       alert("Markup copied to clipboard!");
166 |     }
167 | 
168 |     function pushFooter() {
169 |       let docHeight = $(window).height();
170 |       let footerHeight = $("#footer").height();
171 |       let footerTop = $("#footer").position().top + footerHeight;
172 | 
173 |       if (footerTop < docHeight) {
174 |         $("#footer").css("margin-top", 10 + (docHeight - footerTop) + "px");
175 |       }
176 |     }
177 | 
178 |     //Show Preview
179 |     $("#previewCollapse").on("show.bs.collapse", function () {
180 |       quillInstance.blur();
181 |       document.getElementById("showBtn").innerHTML = "Hide Preview";
182 |     });
183 | 
184 |     //Hide Preview
185 |     $("#previewCollapse").on("hide.bs.collapse", function () {
186 |       document.getElementById("showBtn").innerHTML = "Show Preview";
187 |       quillInstance.focus();
188 |     });
189 | 
190 |     $("#copyBtn").click(function () {
191 |       CopyToClipboard("markup");
192 |     });
193 | 
194 |     $("#closeBtn").click(function () {
195 |       $("#help").fadeOut(1000, function complete() {
196 |         pushFooter();
197 |       });
198 |     });
199 | 
200 |     // Save periodically
201 |     setInterval(function () {
202 |       if (change.length() > 0) {
203 |         // console.log("Saving changes", change);
204 |         change = new Delta();
205 |       }
206 |     }, 5 * 1000);
207 | 
208 |     // Check for unsaved data
209 |     window.onbeforeunload = function () {
210 |       if (change.length() > 0) {
211 |         return "There are unsaved changes. Are you sure you want to leave?";
212 |       }
213 |     };
214 | 
215 |     $(document).ready(function () {
216 |       pushFooter();
217 |       let fade = $(".fade");
218 |       fade.css({ opacity: "0" });
219 |       fade.fadeTo(500, 1, "swing");
220 | 
221 |       let today = new Date();
222 |       let day = today.getDate();
223 |       let monthName = today.toLocaleString("en-us", { month: "long" });
224 | 
225 |       $(".current-date").html(`${day} ${monthName}`);
226 |     });
227 |   },
228 |   false
229 | );
230 | 


--------------------------------------------------------------------------------
/assets/scripts.min.js:
--------------------------------------------------------------------------------
1 | window.addEventListener("load",(function e(){if(!window.jQuery||!window.Quill)return setTimeout(e,120);const t=Quill.import("blots/inline"),l=Quill.import("blots/block/embed");Quill.register("formats/spoiler",class extends t{static blotName="spoiler";static className="spoiler";static tagName="span";static create(){return super.create()}static formats(){return!0}optimize(e){super.optimize(e),this.domNode.tagName!==this.statics.tagName&&this.replaceWith(this.statics.blotName)}}),Quill.register("formats/divider",class extends l{static blotName="divider";static tagName="hr"});const o=Quill.import("delta"),i=new Quill("#editor",{modules:{toolbar:{container:"#toolbar",handlers:{divider:function(){const e=i.getSelection(!0);i.insertText(e.index,"",Quill.sources.USER),i.insertEmbed(e.index,"divider",!0,Quill.sources.USER),i.setSelection(e.index+1,Quill.sources.SILENT)}}}},formats:["header","bold","italic","underline","strike","blockquote","code","code-block","divider","spoiler","list","link"],placeholder:"Write your review here!",theme:"snow"});let r=i.container.firstChild.innerHTML;$('[data-toggle="tooltip"]').tooltip();let n=new o;function a(e){let t=e.replace(/
    /g,"").replace(/<\/p>/g,"\n").replace(//g,"[b]").replace(/<\/strong>/g,"[/b]").replace(/
    /g,"[hr][/hr]\n").replace(/
    /g,"[h1]").replace(/<\/h1>/g,"[/h1]\n").replace(/
    /g,"[h2]").replace(/<\/h2>/g,"[/h2]\n").replace(/
    /g,"[h3]").replace(/<\/h3>/g,"[/h3]\n").replace(//g,"[i]").replace(/<\/em>/g,"[/i]").replace(//g,"[u]").replace(/<\/u>/g,"[/u]").replace(/
      /g,"").replace(/<\/ol>/g,"").replace(/((
    1. )(.*?)(<\/li>))+/g,"[olist]\n$&[/olist]\n").replace(/((
    2. )(.*?)(<\/li>))+/g,"[list]\n$&[/list]\n").replace(/
    3. /g,"\t[*]").replace(/<\/li>/g,"\n").replace(/
      /g,"\n").replace(/      /g,"]").replace(/<\/a>/g,"[/url]").replace(//g,"[strike]").replace(/<\/s>/g,"[/strike]").replace(/
      /g,"[quote=author]").replace(/<\/blockquote>/g,"[/quote]\n").replace(/()/g,"").replace(/(.*?)<\/span>/g,"[spoiler]$1[/spoiler]").replace(//g,"").replace(/<\/span>/g,"[/spoiler]").replace(/
      /g,"[code]").replace(/<\/pre>/g,"[/code]\n").replace(//g,"[noparse]").replace(/<\/code>/g,"[/noparse]"),l=i.getSemanticHTML().replaceAll("
      ",'\n        
      \n          
      Originally posted by author:
      \n      ');$("#markup").html(t),$("#preview").html(l)}function c(){let e=$(window).height(),t=$("#footer").height(),l=$("#footer").position().top+t;l0&&(n=new o)}),5e3),window.onbeforeunload=function(){if(n.length()>0)return"There are unsaved changes. Are you sure you want to leave?"},$(document).ready((function(){c();let e=$(".fade");e.css({opacity:"0"}),e.fadeTo(500,1,"swing");let t=new Date,l=t.getDate(),o=t.toLocaleString("en-us",{month:"long"});$(".current-date").html(`${l} ${o}`)}))}),!1);


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
  1 | #closeBtn {
  2 |   float: right;
  3 |   margin: 1em;
  4 |   background-color: #AAA;
  5 | 
  6 |   &:hover {
  7 |     background-color: #CCC;
  8 |   }
  9 | }
 10 | 
 11 | #editorWindow {
 12 |   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
 13 |   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
 14 |   box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
 15 |   -webkit-transition: box-shadow 0.2s ease;
 16 |   -moz-transition: box-shadow 0.2s ease;
 17 |   -ms-transition: box-shadow 0.2s ease;
 18 |   -o-transition: box-shadow 0.2s ease;
 19 |   transition: box-shadow 0.2s ease;
 20 |   background-color: #fff; }
 21 |   #editorWindow.active {
 22 |     -webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
 23 |     -moz-box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
 24 |     box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
 25 | 
 26 | #editor {
 27 |   min-height: 13rem; }
 28 | 
 29 | .brighter {
 30 |   background-image: url("rule.png");
 31 |   background-position: bottom left;
 32 |   background-repeat: no-repeat;
 33 |   color: #fff;
 34 |   font-size: 17px;
 35 |   letter-spacing: 2px;
 36 |   line-height: 26px;
 37 |   margin: 0 0 10px;
 38 |   text-transform: uppercase; }
 39 | 
 40 | .btn {
 41 |   cursor: pointer;
 42 |   border-color: #000; }
 43 | 
 44 | .btn-primary {
 45 |   background: #2f89bc 5%;
 46 |   background: linear-gradient(180deg, #2f89bc 5%, #17435c 95%);
 47 |   background: -webkit-linear-gradient(legacy-direction(180deg, #2f89bc 5%, #17435c 95%));
 48 |   color: #A4D7F5; }
 49 |   .btn-primary:hover {
 50 |     background: #66c0f4;
 51 |     background: linear-gradient(180deg, #66c0f4 5%, #2f89bc 95%);
 52 |     background: -webkit-linear-gradient(legacy-direction(180deg, #66c0f4 5%, #2f89bc 95%));
 53 |     color: #fff;
 54 |     text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); }
 55 | 
 56 | .btn-success {
 57 |   background: #799905 5%;
 58 |   background: linear-gradient(180deg, #799905 5%, #536904 95%);
 59 |   background: -webkit-linear-gradient(legacy-direction(180deg, #799905 5%, #536904 95%));
 60 |   color: #D2E885; }
 61 |   .btn-success:hover {
 62 |     background: #799905;
 63 |     background: linear-gradient(180deg, #799905 5%, #536904 95%);
 64 |     background: -webkit-linear-gradient(legacy-direction(180deg, #799905 5%, #536904 95%));
 65 |     color: #fff;
 66 |     text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); }
 67 | 
 68 | .display-4 {
 69 |   -webkit-transition: color 0.3s ease;
 70 |   -moz-transition: color 0.3s ease;
 71 |   -ms-transition: color 0.3s ease;
 72 |   -o-transition: color 0.3s ease;
 73 |   transition: color 0.3s ease;
 74 |   color: #b8b6b4; }
 75 |   .display-4:hover {
 76 |     color: #eee; }
 77 | 
 78 | .editor-toolbar {
 79 |   text-align: center; }
 80 | 
 81 | .fa-inverse {
 82 |   background: #2f89bc 5%;
 83 |   background: linear-gradient(180deg, #2f89bc 5%, #17435c 95%);
 84 |   background: -webkit-linear-gradient(legacy-direction(180deg, #2f89bc 5%, #17435c 95%));
 85 |   color: black; }
 86 |   .fa-inverse.hide {
 87 |     -webkit-text-fill-color: transparent; }
 88 | 
 89 | .fa-lg {
 90 |   font-size: 17px !important; }
 91 | 
 92 | .fa-2x {
 93 |   font-size: 20px !important; }
 94 | 
 95 | .jumbotron {
 96 |   background-color: #171a21;
 97 |   color: #b8b6b4;
 98 |   font-variant: small-caps;
 99 |   font-family: 'Monserrat', sans-serif;
100 |   text-shadow: 1px 1px 10px #222;
101 |   text-align: center; }
102 | 
103 | .markup {
104 |   background-color: #111A24;
105 |   color: #acb2b8;
106 |   font-family: "Motiva Sans", Sans-serif;
107 |   font-size: 13px;
108 |   line-height: 17px;
109 |   white-space: pre; }
110 | 
111 | .my-review-container {
112 |   display: grid;
113 |   background-color: #16202D;
114 |   grid-template-columns: repeat(3, minmax(80px, 1fr));
115 | 
116 |   & .avatar-and-username {
117 |     display: grid;
118 |     grid-column: 1;
119 |     grid-template-columns: 50px 1fr;
120 |     opacity: 0.6;
121 | 
122 |     .my-review-container:hover & {
123 |       opacity: 1;
124 |     }
125 | 
126 |     & .user-avatar {
127 |       color: #63B7E9;
128 |     }
129 | 
130 |     & .username-and-review-count {
131 |       display: grid;
132 |       align-items: center;
133 | 
134 |       & .name {
135 |         color: #c1dbf4;
136 |         text-overflow: ellipsis;
137 |         white-space: nowrap;
138 |         overflow: hidden;
139 |       }
140 | 
141 |       & .review-count {
142 |         font-size: 11px;
143 |         color: #c1dbf4;
144 |       }
145 |     }
146 |   }
147 | 
148 |   & .recommended-and-hours-on-record {
149 |     display: grid;
150 |     grid-column: 2 / span 2;
151 |     grid-template-columns: 50px 1fr;
152 |     background-color: #121a24;
153 | 
154 |     & .thumbs-up-icon {
155 |       color: #63B7E9;
156 |     }
157 | 
158 |     & .recommended {
159 |       font-size: 16px;
160 |       color: #d6d7d8;
161 |     }
162 | 
163 |     & .hours {
164 |       font-size: 11px;
165 |       color: #8091a2;
166 |       font-weight: 300;
167 |       opacity: 0.6;
168 |     }
169 |   }
170 | 
171 |   & .posted-date {
172 |     grid-column: 2 / span 2;
173 |     color: #8091A2;
174 |     font-size: 10px;
175 |     font-family: Arial, Helvetica, sans-serif;
176 |     opacity: 0.6;
177 |   }
178 | 
179 |   & .preview-container {
180 |     grid-column: 2 / span 2;
181 | 
182 |     & .preview {
183 |       color: #ACB2B8;
184 |       overflow-wrap: break-word;
185 |       overflow: hidden;
186 | 
187 |       & a {
188 |         color: #ebebeb;
189 |       }
190 | 
191 |       & blockquote {
192 |         border: 1px solid #56707f;
193 |         border-radius: 5px;
194 |         padding: 1em;
195 |         width: 100%;
196 |         font-size: 92%;
197 | 
198 |         & .quote-author {
199 |           font-size: 92%;
200 |         }
201 |       }
202 | 
203 |       & code {
204 |         background: transparent;
205 |         color: #acb2b8;
206 |       }
207 | 
208 |       & h1 {
209 |         color: #5aa9d6;
210 |         font-size: 20px;
211 |       }
212 | 
213 |       & h2 {
214 |         color: #5aa9d6;
215 |         font-size: 18px;
216 |       }
217 | 
218 |       & h3 {
219 |         color: #5aa9d6;
220 |         font-size: 16px;
221 |       }
222 | 
223 |       & hr {
224 |         border-top: 2px solid #EEEEEE;
225 |       }
226 | 
227 |       & p {
228 |         margin-bottom: 0 !important;
229 |       }
230 | 
231 |       & pre {
232 |         background: transparent;
233 |         border: 1px solid #555;
234 |         border-radius: 5px;
235 |         color: #acb2b8;
236 |         padding: 0.8rem;
237 |         width: 100%;
238 |       }
239 | 
240 |       & .spoiler {
241 |         background: black;
242 |         color: initial;
243 |         padding-inline: 0.5em;
244 | 
245 |         &:hover {
246 |           color: #eee;
247 |         }
248 |       }
249 |     }
250 |   }
251 | }
252 | 
253 | @media screen and (max-width: 767px) {
254 |   .my-review-container {
255 |     background-color: #121a24;
256 | 
257 |     & .avatar-and-username {
258 |       & .username-and-review-count {
259 |         grid-template-columns: 30% 1fr;
260 | 
261 |         & .review-count {
262 |           font-size: 13px;
263 |           border-left: 2px solid grey;
264 |         }
265 |       }
266 |     }
267 | 
268 |     & .recommended-and-hours-on-record {
269 |       background-color: #1B2838;
270 |       grid-column: 1 / span 3;
271 |       order: 1;
272 | 
273 |       & .thumbs-up-icon {
274 |         color: #7b9823;
275 | 
276 |         & .fa-inverse {
277 |           background: transparent;
278 |         }
279 |       }
280 | 
281 |       & .hours {
282 |         font-size: 13px;
283 |       }
284 |     }
285 | 
286 |     & .avatar-and-username, & .posted-date, & .preview-container {
287 |       grid-column: 1 / span 3;
288 |       order: 2;
289 |     }
290 |   }
291 | }
292 | 
293 | .ql-editor {
294 |   line-height: 1.5rem;
295 | 
296 |   & hr {
297 |     border-top: 2px solid #AAA;
298 |   }
299 | 
300 |   & .spoiler {
301 |     background: black;
302 |     color: #aaa;
303 | 
304 |     &:hover {
305 |       color: #eee;
306 |     }
307 |   }
308 | }
309 | 
310 | .github-fork-ribbon:before { background-color: #333; }
311 | 
312 | a i {
313 |   color: white; }
314 | 
315 | body {
316 |   background: url("background.png") center top no-repeat #1B2838;
317 |   font-family: "Motiva Sans", Sans-serif;
318 |   font-size: 13px;
319 |   height: 100%;
320 |   line-height: 1.3rem;
321 |   min-height: 100%;
322 |   overflow-wrap: break-word; }
323 | 
324 | div.container-fluid {
325 |   padding-left: 0px;
326 |   padding-right: 0px; }
327 | div.tutorial {
328 |   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
329 |   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
330 |   box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
331 |   background: #e3eaef;
332 |   background: linear-gradient(180deg, #e3eaef 5%, #c7d5e0 95%);
333 |   background: -webkit-linear-gradient(legacy-direction(180deg, #e3eaef 5%, #c7d5e0 95%));
334 |   background-color: #fff;
335 |   border-radius: 10px 10px;
336 |   font-size: 19.5px;
337 |   line-height: 1.95rem;
338 |   padding: 1.5rem;
339 |   text-align: center;
340 |   width: 66.66%; }
341 | 
342 | footer {
343 |   background: rgba(0, 0, 0, 0.3);
344 |   background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
345 |   background: -webkit-linear-gradient(legacy-direction(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%));
346 |   color: #b8b6b4;
347 |   line-height: 1.69rem;
348 |   margin-top: 3rem;
349 |   text-align: center;
350 |   padding: 0.3rem 0; }
351 | 
352 | textarea {
353 |   min-height: 15rem;
354 |   min-width: 60rem;
355 |   -webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.75);
356 |   -moz-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.75);
357 |   box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.75);
358 |   margin-bottom: 2rem; }
359 | 
360 | /*# sourceMappingURL=style.css.map */
361 | 


--------------------------------------------------------------------------------
/assets/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AA0DA,SACE,WAAY,CACZ,WAAY,CAGd,cAhCM,0CAAyB,CAEzB,kCAAiB,CAXrB,uCAAyB,CAIzB,+CAAiB,CAAjB,uCAAiB,CAAjB,+BAAiB,CAAjB,4DAAiB,CAwCjB,qBAAsB,CACtB,qBApCI,iDAAyB,CAEzB,yCAAiB,CAuCvB,QACE,gBAAiB,CAGnB,UACE,gCAAiC,CACjC,+BAAgC,CAChC,2BAA4B,CAC5B,UAAW,CACX,cAAe,CACf,kBAAmB,CACnB,gBAAiB,CACjB,eAAgB,CAChB,wBAAyB,CAG3B,KACE,cAAe,CACf,iBAAkB,CAGpB,aAlDE,qBA/B6C,CAgC7C,uGAAoD,CAApD,yDAAoD,CACpD,mFAA8E,CAkD9E,aAAc,CACd,mBArDA,kBAAuC,CACvC,uGAAoD,CAApD,yDAAoD,CACpD,mFAA8E,CAqD5E,UAAW,CACX,uCAA6C,CAIjD,aA5DE,qBA9BoC,CA+BpC,uGAAoD,CAApD,yDAAoD,CACpD,mFAA8E,CA4D9E,aAAc,CACd,mBA/DA,kBAAuC,CACvC,uGAAoD,CAApD,yDAAoD,CACpD,mFAA8E,CA+D5E,UAAW,CACX,uCAA6C,CAIjD,WA3FE,kCAAyB,CAIzB,0BAAiB,CAyFjB,aA3GyB,CA4GzB,iBACE,UA1Ga,CA8GjB,gBACE,iBAAkB,CAGpB,YAlFE,qBA/B6C,CAgC7C,uGAAoD,CAApD,yDAAoD,CACpD,mFAA8E,CAkF9E,WAAY,CACZ,iBACE,mCAAoC,CAIxC,OACE,wBAA0B,CAG5B,OACE,wBAA0B,CAI5B,WACE,wBAxI+B,CAyI/B,aAxIyB,CAyIzB,uBAAwB,CACxB,kCAAoC,CACpC,6BAA8B,CAC9B,iBAAkB,CAGpB,iBACE,wBAAyB,CACzB,aAnJkB,CAoJlB,oCA1I0B,CA2I1B,cAAe,CACf,gBAAiB,CACjB,eAAa,CAGf,SACI,wBAAS,CCvDV,eDwDmB,CCvDnB,WD4DH,aAAS,CAEP,oBACA,0BAAgB,CAChB,iBAAI,CACF,cAlKgB,CAoKlB,WC5DC,cD8DC,sBAAkB,CAClB,aAAe,CC5DhB,YD+DD,aAAO,CACL,cAAY,CC7Db,aDgED,sBAAK,CACH,qBAhLc,CAiLd,iBAAe,CAEjB,aAAM,CACJ,cAAY,CACZ,UAAQ,CC9DX,mBACE,wBDgEgB,CC9DlB,aDmED,wBAAmB,CACjB,aAAgB,CCjEf,eDoEH,cAAa,CACX,aAAkB,CAClB,oBACA,aAAI,CACF,gBAAc,CClEf,mBACE,0BDmEe,CCjEnB,aACE,aDqEa,CCpEb,cAAe,CDwElB,sCCtEC,CAEA,aDyED,cAAS,CACP,aAAiB,CCtElB,SACE,gBD/Ic,CCgJd,UAAa,CD2EhB,eACE,UAAa,CAGf,WACE,kBAAY,CAGd,2BAAK,sBC1EJ,ID8EC,WAjOc,CCsJf,KD8EC,6DAAgB,CAChB,oCAAyB,CC5ExB,cAAe,CDgFhB,YACE,kBAAiB,CACjB,eAAe,CAEjB,wBAAW,CC9EZ,oBD/IK,gBAAY,CAUhB,iBAqNmC,CC7EpC,aDtIC,0CAAY,CAqNV,kCAAwB,CACxB,kBAAyB,CACzB,uGAA6B,CAA7B,yDAA6B,CAC7B,mFAAe,CACf,qBAAkB,CAClB,uBAAa,CC3Ed,gBAAiB,CD+EpB,mBAAO,CAhOL,cAAY,CACZ,iBAAY,CACZ,YAAY,CCqJb,OD6EC,0BAAgB,CAChB,kGAAkB,CAAlB,0EAAkB,CAClB,oGAAiB,CC3EhB,aAAc,CD8EjB,mBAAS,CACL,eAAiB,CACjB,iBAAgB,CAvPd,gBAAoB,CC6KzB,SD4EG,gBAAe,CC1EhB,eAAgB,CAChB,oDAAwD,CAExD,4CAAgD,CAChD,kBAAqB,E"}


--------------------------------------------------------------------------------
/assets/style.min.css:
--------------------------------------------------------------------------------
1 | #closeBtn{float:right;margin:1em;background-color:#AAA;&:hover{background-color:#CCC}}#editorWindow{-webkit-box-shadow:0 0 3px rgba(0,0,0,0.4);box-shadow:0 0 3px rgba(0,0,0,0.4);-webkit-transition:box-shadow 0.2s ease;-webkit-transition:-webkit-box-shadow 0.2s ease;transition:-webkit-box-shadow 0.2s ease;transition:box-shadow 0.2s ease;transition:box-shadow 0.2s ease,-webkit-box-shadow 0.2s ease;background-color:#fff}#editorWindow.active{-webkit-box-shadow:0 0 10px rgba(255,255,255,0.7);box-shadow:0 0 10px rgba(255,255,255,0.7)}#editor{min-height:13rem}.brighter{background-image:url("rule.png");background-position:bottom left;background-repeat:no-repeat;color:#fff;font-size:17px;letter-spacing:2px;line-height:26px;margin:0 0 10px;text-transform:uppercase}.btn{cursor:pointer;border-color:#000}.btn-primary{background:#2f89bc 5%;background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#2f89bc),color-stop(95%,#17435c));background:linear-gradient(180deg,#2f89bc 5%,#17435c 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#2f89bc 5%,#17435c 95%));color:#A4D7F5}.btn-primary:hover{background:#66c0f4;background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#66c0f4),color-stop(95%,#2f89bc));background:linear-gradient(180deg,#66c0f4 5%,#2f89bc 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#66c0f4 5%,#2f89bc 95%));color:#fff;text-shadow:1px 1px 0px rgba(0,0,0,0.3)}.btn-success{background:#799905 5%;background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#799905),color-stop(95%,#536904));background:linear-gradient(180deg,#799905 5%,#536904 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#799905 5%,#536904 95%));color:#D2E885}.btn-success:hover{background:#799905;background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#799905),color-stop(95%,#536904));background:linear-gradient(180deg,#799905 5%,#536904 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#799905 5%,#536904 95%));color:#fff;text-shadow:1px 1px 0px rgba(0,0,0,0.3)}.display-4{-webkit-transition:color 0.3s ease;transition:color 0.3s ease;color:#b8b6b4}.display-4:hover{color:#eee}.editor-toolbar{text-align:center}.fa-inverse{background:#2f89bc 5%;background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#2f89bc),color-stop(95%,#17435c));background:linear-gradient(180deg,#2f89bc 5%,#17435c 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#2f89bc 5%,#17435c 95%));color:black}.fa-inverse.hide{-webkit-text-fill-color:transparent}.fa-lg{font-size:17px!important}.fa-2x{font-size:20px!important}.jumbotron{background-color:#171a21;color:#b8b6b4;font-variant:small-caps;font-family:'Monserrat',sans-serif;text-shadow:1px 1px 10px #222;text-align:center}.markup{background-color:#111A24;color:#acb2b8;font-family:"Motiva Sans",Sans-serif;font-size:13px;line-height:17px;white-space:pre}.my-review-container{display:-ms-grid;display:grid;background-color:#16202D;-ms-grid-columns:(minmax(80px,1fr))[3];grid-template-columns:repeat(3,minmax(80px,1fr));& .avatar-and-username{display:-ms-grid;display:grid;-ms-grid-column:1;grid-column:1;-ms-grid-columns:50px 1fr;grid-template-columns:50px 1fr;opacity:0.6;.my-review-container:hover &{opacity:1}& .user-avatar{color:#63B7E9}& .username-and-review-count{display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;& .name{color:#c1dbf4;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}& .review-count{font-size:11px;color:#c1dbf4}}}& .recommended-and-hours-on-record{display:-ms-grid;display:grid;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/span 2;-ms-grid-columns:50px 1fr;grid-template-columns:50px 1fr;background-color:#121a24;& .thumbs-up-icon{color:#63B7E9}& .recommended{font-size:16px;color:#d6d7d8}& .hours{font-size:11px;color:#8091a2;font-weight:300;opacity:0.6}}& .posted-date{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/span 2;color:#8091A2;font-size:10px;font-family:Arial,Helvetica,sans-serif;opacity:0.6}& .preview-container{-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/span 2;& .preview{color:#ACB2B8;overflow-wrap:break-word;overflow:hidden;& a{color:#ebebeb}& blockquote{border:1px solid #56707f;border-radius:5px;padding:1em;width:100%;font-size:92%;& .quote-author{font-size:92%}}& code{background:transparent;color:#acb2b8}& h1{color:#5aa9d6;font-size:20px}& h2{color:#5aa9d6;font-size:18px}& h3{color:#5aa9d6;font-size:16px}& hr{border-top:2px solid #EEEEEE}& p{margin-bottom:0!important}& pre{background:transparent;border:1px solid #555;border-radius:5px;color:#acb2b8;padding:0.8rem;width:100%}& .spoiler{background:black;color:initial;padding-inline:0.5em;&:hover{color:#eee}}}}}@media screen and (max-width:767px){.my-review-container{background-color:#121a24;& .avatar-and-username{& .username-and-review-count{-ms-grid-columns:30% 1fr;grid-template-columns:30% 1fr;& .review-count{font-size:13px;border-left:2px solid grey}}}& .recommended-and-hours-on-record{background-color:#1B2838;-ms-grid-column:1;-ms-grid-column-span:3;grid-column:1/span 3;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;& .thumbs-up-icon{color:#7b9823;& .fa-inverse{background:transparent}}& .hours{font-size:13px}}& .avatar-and-username,& .posted-date,& .preview-container{-ms-grid-column:1;-ms-grid-column-span:3;grid-column:1/span 3;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}}}.ql-editor{line-height:1.5rem;& hr{border-top:2px solid #AAA}& .spoiler{background:black;color:#aaa;&:hover{color:#eee}}}.github-fork-ribbon:before{background-color:#333}a i{color:white}body{background:url("background.png") center top no-repeat #1B2838;font-family:"Motiva Sans",Sans-serif;font-size:13px;height:100%;line-height:1.3rem;min-height:100%;overflow-wrap:break-word}div.container-fluid{padding-left:0px;padding-right:0px}div.tutorial{-webkit-box-shadow:0 0 3px rgba(0,0,0,0.4);box-shadow:0 0 3px rgba(0,0,0,0.4);background:#e3eaef;background:-webkit-gradient(linear,left top,left bottom,color-stop(5%,#e3eaef),color-stop(95%,#c7d5e0));background:linear-gradient(180deg,#e3eaef 5%,#c7d5e0 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#e3eaef 5%,#c7d5e0 95%));background-color:#fff;border-radius:10px 10px;font-size:19.5px;line-height:1.95rem;padding:1.5rem;text-align:center;width:66.66%}footer{background:rgba(0,0,0,0.3);background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.3)),to(rgba(0,0,0,0.5)));background:linear-gradient(180deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.5) 100%);background:-webkit-linear-gradient(legacy-direction(180deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.5) 100%));color:#b8b6b4;line-height:1.69rem;margin-top:3rem;text-align:center;padding:0.3rem 0}textarea{min-height:15rem;min-width:60rem;-webkit-box-shadow:0px 0px 10px 3px rgba(0,0,0,0.75);box-shadow:0px 0px 10px 3px rgba(0,0,0,0.75);margin-bottom:2rem}
2 | /*# sourceMappingURL=style.min.css.map */


--------------------------------------------------------------------------------
/assets/style.scss:
--------------------------------------------------------------------------------
  1 | //$primary-color: #2c9eea;
  2 | //$secondary-color: #4adbcf;
  3 | //$tertiary-color: #85a5dd;
  4 | 
  5 | //Colours
  6 | $body-background-color: #1B2838;
  7 | $body-color: #acb2b8;
  8 | $header-background-color: #171a21;
  9 | $header-font-color: #b8b6b4;
 10 | $h1-color: #5aa9d6;
 11 | $link-color: #ebebeb;
 12 | $text-color: #eee;
 13 | $primary-button-gradient: rgba(47,137,188,1) 5%, rgba(23,67,92,1) 95%;
 14 | $secondary-button-gradient: #799905 5%, #536904 95%;
 15 | 
 16 | //Other
 17 | $primary-font: "Motiva Sans", Sans-serif;
 18 | $font-size: 13px;
 19 | $line-height: 1.3rem;
 20 | 
 21 | //Mixin for transitions
 22 | @mixin transition($args...) {
 23 |   -webkit-transition: $args;
 24 |   -moz-transition: $args;
 25 |   -ms-transition: $args;
 26 |   -o-transition: $args;
 27 |   transition: $args;
 28 | }
 29 | 
 30 | //Mixin for box shadows
 31 | @mixin box-shadow($args...) {
 32 |       -webkit-box-shadow: $args;
 33 |       -moz-box-shadow: $args;
 34 |       box-shadow: $args;
 35 | }
 36 | 
 37 | //Mixin for gradients
 38 | @mixin gradient($direction, $colorStops...) {
 39 |   @if is-direction($direction) == false {
 40 |     $colorStops: $direction, $colorStops;
 41 |     $direction: 180deg;
 42 |   }
 43 | 
 44 |   background: nth(nth($colorStops, 1), 1);
 45 |   background: linear-gradient($direction, $colorStops);
 46 |   background: -webkit-linear-gradient(legacy-direction($direction, $colorStops));
 47 | }
 48 | 
 49 | /// Test if `$value` is a valid direction
 50 | /// @param {*} $value - Value to test
 51 | /// @return {Bool}
 52 | @function is-direction($value) {
 53 |   $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
 54 |   $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
 55 | 
 56 |   @return $is-keyword or $is-angle;
 57 | }
 58 | 
 59 | #closeBtn {
 60 |   float: right;
 61 |   margin: 1rem;
 62 | }
 63 | 
 64 | #editorWindow {
 65 |   @include box-shadow(0 0 3px rgba( 0, 0, 0, 0.4));
 66 |   @include transition(box-shadow 0.2s ease);
 67 |   background-color: #fff;
 68 |   &.active {
 69 |     @include box-shadow(0 0 10px rgba( 255, 255, 255, 0.7));
 70 |   }
 71 | }
 72 | 
 73 | #editor {
 74 |   min-height: 13rem;
 75 | }
 76 | 
 77 | .brighter {
 78 |   background-image: url('rule.png');
 79 |   background-position: bottom left;
 80 |   background-repeat: no-repeat;
 81 |   color: #fff;
 82 |   font-size: 17px;
 83 |   letter-spacing: 2px;
 84 |   line-height: 26px;
 85 |   margin: 0 0 10px;
 86 |   text-transform: uppercase;
 87 | }
 88 | 
 89 | .btn {
 90 |   cursor: pointer;
 91 |   border-color: #000;
 92 | }
 93 | 
 94 | .btn-primary {
 95 |   @include gradient(180deg, $primary-button-gradient);
 96 |   color: #A4D7F5;
 97 |   &:hover {
 98 |     @include gradient(180deg, rgba(102,192,244,1) 5%, rgba(47,137,188,1) 95%);
 99 |     color: #fff;
100 |     text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.3 );
101 |   }
102 | }
103 | 
104 | .btn-success {
105 |   @include gradient(180deg, $secondary-button-gradient);
106 |   color: #D2E885;
107 |   &:hover {
108 |     @include gradient(180deg, rgba(121,153,5,1) 5%, rgba(83,105,4,1) 95%);
109 |     color: #fff;
110 |     text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.3 );
111 |   }
112 | }
113 | 
114 | .display-4 {
115 |   @include transition(color 0.3s ease);
116 |   color: $header-font-color;
117 |   &:hover {
118 |     color: $text-color;
119 |   }
120 | }
121 | 
122 | .editor-toolbar {
123 |   text-align: center;
124 | }
125 | 
126 | .fa-inverse {
127 |   @include gradient(180deg, $primary-button-gradient);
128 |   color: black;
129 |   &.hide {
130 |     -webkit-text-fill-color: transparent;
131 |   }
132 | }
133 | 
134 | .fa-lg {
135 |   font-size: 17px !important;
136 | }
137 | 
138 | .fa-2x {
139 |   font-size: 20px !important;
140 | }
141 | 
142 | 
143 | .jumbotron {
144 |   background-color: $header-background-color;
145 |   color: $header-font-color;
146 |   font-variant: small-caps;
147 |   font-family: 'Monserrat', sans-serif;
148 |   text-shadow: 1px 1px 10px #222;
149 |   text-align: center;
150 | }
151 | 
152 | .markup {
153 |   background-color: #111A24;
154 |   color: $body-color;
155 |   font-family: $primary-font;
156 |   font-size: 13px;
157 |   line-height: 17px;
158 |   white-space: pre-line;
159 | }
160 | 
161 | @media only screen and (min-width: 1200px) {
162 |     .preview {
163 |       min-width: 400px;
164 |       max-width: 400px;
165 |     }
166 | }
167 | 
168 | .preview {
169 |   @extend .markup;
170 |   overflow-wrap: break-word;
171 |   overflow: hidden;
172 |   & a {
173 |     color: $link-color;
174 |   }
175 |   & blockquote {
176 |     border: 1px solid lightblue;
177 |     border-radius: 5px;
178 |     padding: 0.8rem;
179 |     width: 100%;
180 |   }
181 |   & code {
182 |     background: transparent;
183 |     color: $body-color;
184 |   }
185 |   & h1 {
186 |     color: $h1-color;
187 |     font-size: 15px;
188 |   }
189 |   & pre {
190 |     background: transparent;
191 |     border: 1px solid #555;
192 |     border-radius: 5px;
193 |     color: $body-color;
194 |     padding: 0.8rem;
195 |     width: 100%;
196 |   }
197 | }
198 | 
199 | .preview-container {
200 |   background-color: #111A24;
201 | }
202 | 
203 | .preview-top {
204 |   background-color: #111A24;
205 |   color: #63B7E9;
206 |   & p {
207 |     color: #8091a2;
208 |     &.name {
209 |       color: #c6d4df;
210 |       font-weight: bold;
211 |     }
212 |   }
213 |   & .next {
214 |     background: rgba( 0, 0, 0, 0.2 );
215 |   }
216 | }
217 | 
218 | .recommended {
219 |   font-size: 16px;
220 |   color: #d6d7d8;
221 | }
222 | 
223 | .spoiler {
224 |   background: black;
225 |   color: #aaa;
226 |   &:hover {
227 |     color: $text-color;
228 |   }
229 | }
230 | 
231 | .ql-editor {
232 |   line-height: 1.5rem;
233 | }
234 | 
235 | a i{
236 |   color: white;
237 | }
238 | 
239 | body {
240 |   //background-color: $body-background-color;
241 |   background: url('background.png') center top no-repeat $body-background-color;
242 |   font-family: $primary-font;
243 |   font-size: $font-size;
244 |   height: 100%;
245 |   line-height: $line-height;
246 |   min-height: 100%;
247 |   overflow-wrap: break-word;
248 | }
249 | 
250 | div {
251 |   &.container-fluid {
252 |     padding-left: 0px;
253 |     padding-right: 0px;
254 |   }
255 |   &.tutorial {
256 |     @include box-shadow(0 0 3px rgba( 0, 0, 0, 0.4));
257 |     @include gradient(180deg, #e3eaef 5%, #c7d5e0 95%);
258 |     background-color: #fff;
259 |     border-radius: 10px 10px;
260 |     font-size: $font-size*1.5;
261 |     line-height: $line-height*1.5;
262 |     padding: 1.5rem;
263 |     text-align: center;
264 |     width: 66.66%;
265 |   }
266 | }
267 | 
268 | footer {
269 |   @include gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
270 |   color: $header-font-color;
271 |   line-height: $line-height*1.3;
272 |   margin-top: 3rem;
273 |   text-align: center;
274 |   padding: 0.3rem 0;
275 | }
276 | 
277 | textarea {
278 |     min-height: 15rem;
279 |     min-width: 60rem;
280 |     @include box-shadow(0px 0px 10px 3px rgba(0, 0, 0, 0.75));
281 |     margin-bottom: 2rem;
282 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |     
  4 |         Steam Review Editor - Edit and Preview in Realtime
  5 |         
  6 |         
  7 |         
  8 |         
  9 |         
 10 | 
 11 |         
 12 |                 
 13 |         
 14 |         
 15 |         
 16 |         
 17 |         
 18 |     
 19 |     
 20 |         
 21 |               Fork me on GitHub
 22 |         
      
 23 |             
      
 24 |                 
      
 25 |                     
      Steam Review Editor
      
 26 |                 
      
 27 |             
      
 28 |         
      
 29 | 
 30 |         
 31 |         
      
 32 |             
      
 33 |                 
      
 34 |                     
 35 |                     
      Steam Review Editor allows you to easily create and modify your reviews in real-time without having to manually apply steam markup tags. Simply type your review, hit "Copy to Clipboard", and paste it in Steam!
      
 36 |                 
      
 37 |             
      
 38 |         
      
 39 | 
 40 |            
 41 |         
      
 42 |             
      
 43 |                 
 44 |                     
 50 |                 
 51 |                 
 52 |                     
 53 |                     
 54 |                     
 55 |                 
 56 |                 
 57 |                     
 58 |                     
 59 |                     
 60 |                     
 61 |                     
 62 |                     
 63 |                 
 64 |                 
 65 |                     
 66 |                     
 67 |                     
 68 |                 
 69 |                 
 70 |                     
 71 |                     
 72 |                 
 73 |                 
 74 |                     
 75 |                 
 76 |             
      
 77 |             
      
 78 |             
      
 79 |         
      
 80 | 
 81 |         
 82 |         
      
 83 |             
      
 84 |                 
      
 85 |                     
 86 |                 
      
 87 |             
      
 88 |             
      
 89 |                 
      
 90 |                     
 91 |                 
      
 92 |             
      
 93 |         
      
 94 | 
 95 |         
 96 |         
      
 97 |             
      
 98 |                 
      
 99 |                     
      
100 |                         
      
101 |                             
      Store Preview
      
102 |                         
      
103 | 
104 |                         
      
105 |                             
      
106 |                                 
      
107 |                                     
108 |                                         
109 |                                         
110 |                                     
111 |                                 
      
112 |                                 
      
113 |                                     Your Username
114 |                                     1 review
115 |                                 
      
116 |                             
      
117 | 
118 |                             
      
119 |                                 
      
120 |                                     
121 |                                         
122 |                                         
123 |                                     
124 |                                 
      
125 | 
126 |                                 
      
127 |                                     Recommended
128 |                                     0.0 hrs on record
129 |                                 
      
130 |                             
      
131 | 
132 |                             
      
133 |                                 Posted: 
134 |                             
      
135 | 
136 |                             
      
137 |                                 
      
138 |                             
      
139 |                         
      
140 |                     
      
141 |                     
      
142 |                         
      
143 |                             
      Markup Preview
      
144 |                         
      
145 |                         
      
146 |                     
      
147 |                 
      
148 |             
      
149 |         
      
150 | 
151 |         
152 |         
170 | 
171 |         
172 |         
      
173 | 
174 |         
175 |         
      
176 |             
      
177 |                 
178 |                 
179 |                 
180 |                 
      Copyright ©  Keno Clayton, Licensed under the Apache License, Version 2.0
181 |                 
      
182 |                 This website is not associated with Valve Corporation
      
183 |             
      
184 |         
      
185 | 
186 |         
187 |         
188 |         
189 |         
190 |         
191 |         
192 |         
193 |         
194 | 
195 |         
196 |         
197 | 
198 |         
199 |         
200 |     
201 | 
202 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [[redirects]]
2 |     from = "/steam-review-editor/*"
3 |     to = "https://projects.claytoninnovations.com/:splat"
4 |     status = 200


--------------------------------------------------------------------------------