deuill
/
grawkit
mirror of https://github.com/deuill/grawkit.git
1
0
Fork 0
Code Actions Packages

Update styling and template 

This changes minor aspects of the Playground, including colors, fonts,
and other basic effects, in an effort to improve the aesthetics.
This commit is contained in:
Alex Palaistras 2022-01-22 14:55:45 +00:00
parent ec3cfbdf0e
commit 3b8c5eca21
2 changed files with 50 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
play/static/css/main.css
View File

@ -7,9 +7,9 @@ html {
} }
body { body {
background: #fff repeat center fixed; background: #fefefe;
color: #333; color: #333;
font-family: Nunito, Helvetica, sans-serif; font-family: sans-serif;
font-size: 1.6rem; font-size: 1.6rem;
} }
@ -28,16 +28,18 @@ ul, ol {
list-style: disc outside; list-style: disc outside;
padding-left: 2rem; padding-left: 2rem;
} }
code { code {
background-color: #f8f8f8; background-color: #eeeeec;
border-color: #f1f1f1; border-color: #eee;
border-radius: 0; border-radius: 0.2rem;
font-size: 100%; font-size: 100%;
} }
a { a {
color: #c31; color: #c0392b;
transition: background .2s ease, border .2s ease, box-shadow .2s ease, color .2s ease, top .2s ease; font-weight: bold;
text-decoration: none;
} }
a:hover, a:active { a:hover, a:active {
@ -45,30 +47,38 @@ a:hover, a:active {
} }
.button { .button {
background: #fff; background: #333;
border: 0.2rem solid #333; border: 0.2rem solid #333;
border-radius: 0; border-radius: 0;
box-shadow: 0 0.2rem #333; color: #fefefe;
color: #333; font-family: monospace;
font-size: 1.35rem; font-weight: bold;
font-weight: 600; padding: 0 1rem;
font-variant: small-caps;
padding: 0 0.5rem 0.25rem;
position: relative;
text-transform: none; text-transform: none;
top: 0; transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
}
.button-alt {
background: #fefefe;
color: #333;
} }
.button:hover, .button:focus { .button:hover, .button:focus {
background: #fff; background: #c82829;
border-color: #c31; border-color: #c82829;
box-shadow: 0 0 #c31; color: #fefefe;
color: #333; }
top: 0.2rem;
.button-alt:hover, .button-alt:focus {
background: #fefefe;
border-color: #c82829;
color: #c82829;
} }
.preview-header { .preview-header {
padding: 1rem 0; border-bottom: 0.1rem solid #c1c1c1;
margin-bottom: 2rem;
padding: 1rem 0 0;
} }
.preview-header a { .preview-header a {
@ -93,8 +103,10 @@ a:hover, a:active {
} }
.editor { .editor {
background: #f8f8f8; background: #f3f3f3;
border: none; border: 0 solid #eee;
border-width: 0.1rem 0.1rem 0.4rem 0.1rem;
border-radius: 0;
font-family: monospace; font-family: monospace;
height: 65rem; height: 65rem;
overflow: auto; overflow: auto;
@ -104,7 +116,7 @@ a:hover, a:active {
} }
.editor:focus { .editor:focus {
border: none; border: 0.15rem solid #c82829;
} }
.preview-generated { .preview-generated {
@ -117,6 +129,6 @@ a:hover, a:active {
} }
.error { .error {
color: #cc0000; color: #c82829;
padding: 0 1rem; padding: 0 1rem;
} }

22
play/static/template/index.template
View File

@ -7,17 +7,15 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
<link rel="stylesheet" href="/css/normalize.css"> <link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/skeleton.css"> <link rel="stylesheet" href="/css/skeleton.css">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
</head> </head>
<body> <body>
<div class="content container"> <form action="/" method="post" class="content">
<form action="/" method="post"> <div class="preview-header">
<div class="preview-header row"> <div class="container row">
<div class="column one-half"> <div class="column one-half">
<a href="/"> <a href="/">
<span class="title">Grawkit<br>Playground</span> <span class="title">Grawkit<br>Playground</span>
@ -26,12 +24,14 @@
</div> </div>
<div class="column one-half"> <div class="column one-half">
<div class="action-buttons"> <div class="action-buttons">
<button type="submit" name="generate" class="button" onclick="submitForm(this.form); return false;">Generate</button> <button type="submit" name="generate" class="button button-alt" onclick="submitForm(this.form); return false;">Generate</button>
<button type="submit" name="download" class="button">Download</button> <button type="submit" name="download" class="button">Download</button>
</div> </div>
</div> </div>
</div> </div>
<div class="preview-content row"> </div>
<div class="preview-content">
<div class="container row">
<div class="column one-half"> <div class="column one-half">
<textarea name="content" class="editor">{{if .Content}}{{printf .Content}}{{else}}{{template "default-content.template"}}{{end}}</textarea> <textarea name="content" class="editor">{{if .Content}}{{printf .Content}}{{else}}{{template "default-content.template"}}{{end}}</textarea>
</div> </div>
@ -39,11 +39,13 @@
<div id="generated" class="preview-generated">{{if .Preview}}{{printf .Preview}}{{else}}{{template "default-preview.template"}}{{end}}</div> <div id="generated" class="preview-generated">{{if .Preview}}{{printf .Preview}}{{else}}{{template "default-preview.template"}}{{end}}</div>
</div> </div>
</div> </div>
<div class="preview-footer"> </div>
<div class="preview-footer">
<div class="container">
<div id="error" class="error">{{if .Error}}{{printf .Error}}{{end}}</div> <div id="error" class="error">{{if .Error}}{{printf .Error}}{{end}}</div>
</div> </div>
</form> </div>
</div> </form>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>
</html> </html>