Revamp everything

- Remake UI from the ground up
- Add copy text button
- Remove preprocessors
- Add responsive styles
- Add repo link
- Add credits
parent 210b442d
# ひらガタ
# ひらガタ (Hiragata)
Convert hiragana to katakana, and vice versa.
\ No newline at end of file
Conversor de hiragana para katakana e vice-versa.
This diff is collapsed.
%html
%head
%meta(http-equiv="Content-Type" content="text/html; charset=utf-8")
%link(href="styles.css" rel="stylesheet")
%link(href="favicon.png" rel="icon")
%script(src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript")
%script(src="scripts.js" type="text/javascript")
%title ひらガタ - Convert hiragana to katakana, and vice versa.
%body
#logo
%img(src="logo.svg" alt="Hiragata")
%p Convert hiragana to katakana, and vice versa.
%section
%label(for="from") Input
%textarea#from(autofocus)
%section
%label(for="to")
%span Read Only
Output
%textarea#to(readonly title="Read Only")
<!doctype html>
<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='styles.css' rel='stylesheet'>
<link href='favicon.png' rel='icon'>
<script src='http://code.jquery.com/jquery-2.0.3.min.js' type='text/javascript'></script>
<script src='scripts.js' type='text/javascript'></script>
<title>ひらガタ - Convert hiragana to katakana, and vice versa.</title>
</head>
<body>
<div id='logo'>
<img alt='Hiragata' src='logo.svg'>
<p>Convert hiragana to katakana, and vice versa.</p>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<link href="favicon.png" rel="icon">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
<script src="scripts.js"></script>
<title>ひらガタ - Conversor de hiragana para katakana e vice-versa</title>
</head>
<body>
<header class="site-header">
<h1 class="site-title"><ruby><rb lang="jp">ひらガタ</rb><rt class="site-title__reading">Hiragata</rt></ruby></h1>
<p class="site-description">
Conversor de hiragana para katakana e vice-versa.
<br>
Projeto <a href="http://gitlab.com/broworkers/hiragata" target="_blank">open source</a> por <a href="http://twitter.com/rmasoni" target="_blank">@rmasoni</a> e <a href="http://twitter.com/dlibanori" target="_blank">@dlibanori</a>.
</p>
</header>
<main class="site-content">
<div class="grid">
<section class="grid__item">
<label class="label label--input" for="input">Texto original</label>
<textarea class="field" id="input" autofocus placeholder="Insira o texto em hiragana ou katakana para ser convertido."></textarea>
</section>
<section class="grid__item">
<label class="label label--output" for="output">
Texto convertido
<button class="copy" type="button" data-clipboard-trigger data-clipboard-target="#output">Copiar</button>
</label>
<textarea class="field" id="output" readonly placeholder="O texto convertido aparecerá aqui."></textarea>
</section>
</div>
<section>
<label for='from'>Input</label>
<textarea autofocus id='from'></textarea>
</section>
<section>
<label for='to'>
<span>Read Only</span>
Output
</label>
<textarea id='to' readonly title='Read Only'></textarea>
</section>
</body>
</main>
</body>
</html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="150px" height="150px" viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Slice 1</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page 1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M61.434,18.486 C62.454,21.036 63.746,22.022 66.058,22.022 C66.602,22.022 67.01,21.988 67.894,21.852 C64.732,26.204 63.406,29.876 63.406,34.126 C63.406,40.348 66.84,44.292 72.246,44.292 C74.966,44.292 77.55,43.238 79.284,41.436 C81.29,39.294 82.31,36.064 82.31,31.712 C82.31,29.06 82.174,27.768 81.256,22.77 L81.358,22.736 C82.854,27.394 83.908,30.114 85.268,32.664 C86.628,35.18 87.546,36.2 88.464,36.2 C89.314,36.2 89.824,35.282 89.824,33.752 C89.824,32.29 89.484,31.236 88.77,30.624 C87.478,29.536 87.104,29.094 86.288,27.666 C84.69,24.878 83.636,22.158 83.33,19.948 C83.126,18.656 83.126,18.656 82.718,18.146 C82.072,17.364 81.052,16.786 80.338,16.786 C79.658,16.786 79.182,17.262 79.182,17.874 C79.182,18.282 79.182,18.316 79.692,19.914 C80.44,22.362 80.848,25.286 80.848,28.04 C80.848,31.474 80.202,34.466 79.08,36.472 C77.516,39.158 74.898,40.688 71.736,40.688 C67.588,40.688 65.072,38.07 65.072,33.752 C65.072,30.488 66.602,27.054 69.39,24.13 C70.512,22.906 72.178,21.614 73.334,21.104 C74.456,20.56 74.66,20.356 74.66,19.846 C74.66,18.826 72.926,17.33 71.77,17.33 C71.498,17.33 71.294,17.432 70.716,17.84 C69.22,18.996 66.806,19.778 64.8,19.778 C63.44,19.778 62.726,19.438 61.774,18.214 Z M75,150 C33.5786417,150 0,116.421358 0,75 C0,33.5786417 33.5786417,0 75,0 C116.421358,0 150,33.5786417 150,75 C150,116.421358 116.421358,150 75,150 Z M69.832,44.848 C70.614,47.432 71.804,48.86 74.184,50.152 C73.504,50.39 73.504,50.39 71.804,50.968 C69.526,51.716 68.71,52.022 67.996,52.396 C66.806,53.042 66.398,53.654 66.398,54.878 L66.398,55.218 C66.432,55.388 66.432,55.524 66.432,55.592 C66.432,56 66.296,57.02 65.956,59.162 C65.854,59.774 65.718,60.726 65.548,62.018 C65.344,63.31 65.242,63.956 65.174,64.296 C64.902,65.316 64.902,65.316 64.902,65.554 C64.902,66.064 65.208,66.846 65.684,67.594 C66.364,68.614 67.248,69.226 68.064,69.226 C68.404,69.226 68.744,69.09 69.016,68.818 C69.22,68.648 69.288,68.512 69.628,67.866 C70.138,66.88 71.192,65.554 72.348,64.5 C74.32,62.698 76.36,61.78 78.366,61.78 C80.746,61.78 82.208,63.242 82.208,65.622 C82.208,67.798 81.188,69.566 78.944,71.198 C76.666,72.864 74.15,73.85 70.104,74.598 L70.206,75.006 C76.054,74.972 80.236,73.986 83.194,71.946 C85.2,70.518 86.288,68.614 86.288,66.37 C86.288,62.766 83.33,60.352 78.944,60.352 C75.85,60.352 72.45,61.644 68.166,64.5 L68.166,64.194 C68.166,63.582 68.302,61.236 68.472,58.89 C68.54,58.142 68.574,57.666 68.574,57.428 C68.574,56.884 68.472,56.34 68.336,56.068 C67.792,55.048 67.656,54.674 67.656,54.3 C67.656,53.79 68.2,53.314 69.118,53.042 C70.988,52.498 73.402,52.158 75.51,52.158 C76.19,52.158 76.666,52.192 76.938,52.226 C78.434,52.498 78.57,52.532 78.842,52.532 C79.726,52.532 80.304,52.022 80.304,51.206 C80.304,50.526 79.964,49.744 79.352,49.098 C78.672,48.35 78.196,48.112 76.938,48.01 C75.85,47.942 74.83,47.704 73.776,47.33 C72.11,46.752 71.158,46.038 70.172,44.678 Z M60.006,104.19 L60.21,104.496 C62.658,103.408 64.834,101.98 66.874,100.144 C70.682,96.642 73.096,92.596 75.102,86.408 C76.802,86.034 79.93,85.558 80.644,85.558 C81.222,85.558 81.494,85.83 81.494,86.442 C81.494,88.414 80.44,93.99 79.59,96.744 C78.842,99.124 78.434,99.736 77.618,99.736 C76.7,99.736 74.558,99.226 71.566,98.308 L71.396,98.682 C74.15,100.28 75.544,101.47 75.714,102.32 C75.884,103.136 75.952,103.272 76.122,103.476 C76.326,103.714 76.7,103.884 77.108,103.884 C78.4,103.884 79.624,103.374 80.61,102.456 C82.14,101.062 82.956,98.648 84.282,91.644 C84.894,88.278 84.928,88.142 85.2,87.7 C85.676,86.986 85.744,86.816 85.744,86.544 C85.744,86.068 85.472,85.626 84.826,84.912 C83.636,83.722 82.786,83.178 82.038,83.178 C81.732,83.178 81.562,83.212 81.29,83.382 C80.576,83.756 80.44,83.79 79.318,83.96 L75.646,84.504 C76.496,81.546 76.632,81.172 77.108,80.322 C77.414,79.812 77.516,79.506 77.516,79.2 C77.516,78.588 77.074,78.078 75.986,77.432 C74.66,76.684 72.926,76.14 71.702,76.14 C71.09,76.14 70.818,76.208 70.342,76.446 C72.246,77.228 72.96,77.976 72.96,79.234 C72.96,80.39 72.62,82.226 71.94,84.98 C69.526,85.388 66.194,85.762 65.208,85.762 C63.746,85.762 62.862,85.218 61.91,83.756 C61.808,84.062 61.774,84.232 61.774,84.436 C61.774,85.082 62.114,86.034 62.658,86.816 C63.508,88.074 64.562,88.856 65.412,88.856 C65.684,88.856 65.956,88.788 66.364,88.584 C67.52,88.04 69.152,87.53 71.396,87.02 C69.866,91.474 68.098,94.908 65.616,98.274 C63.848,100.688 62.386,102.218 60.006,104.19 Z M82.072,78.554 L81.902,78.86 C83.602,80.05 84.588,81.138 85.88,83.314 C86.322,84.096 86.458,84.198 86.866,84.198 C87.512,84.198 88.056,83.348 88.056,82.294 C88.056,80.934 86.39,79.88 82.072,78.554 Z M84.588,76.344 C86.594,77.466 87.886,78.656 88.974,80.39 C89.348,81.002 89.552,81.172 89.858,81.172 C90.47,81.172 90.878,80.458 90.878,79.438 C90.878,78.52 90.504,78.01 89.348,77.398 C88.124,76.786 86.458,76.31 84.724,76.072 Z M62.59,134.7 L62.76,135.074 C66.058,134.156 69.152,132.728 72.246,130.654 C77.04,127.458 81.494,122.494 84.928,116.646 C85.71,115.286 85.914,115.048 86.39,114.674 C86.866,114.334 87.07,114.028 87.07,113.654 C87.07,113.144 86.56,112.362 85.71,111.546 C84.622,110.526 83.976,110.118 83.398,110.118 C83.058,110.118 82.922,110.152 82.446,110.424 C81.97,110.696 81.528,110.832 80.066,111.07 C77.618,111.512 76.836,111.614 76.02,111.614 C75.816,111.614 75.646,111.614 75.306,111.58 C76.598,110.016 76.972,109.438 76.972,108.996 C76.972,108.452 76.53,107.908 75.476,107.228 C74.048,106.31 72.484,105.732 71.43,105.732 C71.158,105.732 70.988,105.766 70.614,105.902 C71.872,106.48 72.654,107.364 72.654,108.146 C72.654,108.894 72.144,109.982 70.716,112.124 C68.2,115.966 65.14,119.4 61.91,122.12 L62.148,122.494 C64.936,121.236 67.52,119.536 69.628,117.666 C71.362,119.23 72.586,120.794 73.912,123.276 C74.388,124.092 74.66,124.398 75.102,124.568 C73.572,126.438 71.702,128.24 69.254,130.212 C67.146,131.946 65.514,133.034 62.59,134.7 Z M82.752,112.498 C81.562,115.49 78.876,120.08 76.768,122.596 C76.802,122.426 76.802,122.29 76.802,122.222 C76.802,121.202 76.258,120.318 75,119.366 C73.64,118.346 72.212,117.632 70.274,117.02 C71.668,115.864 72.756,114.708 74.388,112.668 C75.204,113.416 75.884,113.756 76.462,113.756 C76.768,113.756 76.972,113.722 77.516,113.518 C78.672,113.144 81.256,112.634 82.752,112.498 Z M82.752,112.498" id="Oval 1" fill="#787C73"></path>
</g>
</svg>
\ No newline at end of file
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
dict = {}
dict['あ'] = 'ア'
dict['い'] = 'イ'
dict['う'] = 'ウ'
dict['え'] = 'エ'
dict['お'] = 'オ'
dict['ぁ'] = 'ァ'
dict['ぃ'] = 'ィ'
dict['ぅ'] = 'ゥ'
dict['ぇ'] = 'ェ'
dict['ぉ'] = 'ォ'
dict['か'] = 'カ'
dict['き'] = 'キ'
dict['く'] = 'ク'
dict['け'] = 'ケ'
dict['こ'] = 'コ'
dict['が'] = 'ガ'
dict['ぎ'] = 'ギ'
dict['ぐ'] = 'グ'
dict['げ'] = 'ゲ'
dict['ご'] = 'ゴ'
dict['さ'] = 'サ'
dict['し'] = 'シ'
dict['す'] = 'ス'
dict['せ'] = 'セ'
dict['そ'] = 'ソ'
dict['ざ'] = 'ザ'
dict['じ'] = 'ジ'
dict['ず'] = 'ズ'
dict['ぜ'] = 'ゼ'
dict['ぞ'] = 'ゾ'
dict['た'] = 'タ'
dict['ち'] = 'チ'
dict['つ'] = 'ツ'
dict['て'] = 'テ'
dict['と'] = 'ト'
dict['だ'] = 'ダ'
dict['ぢ'] = 'ヂ'
dict['づ'] = 'ヅ'
dict['で'] = 'デ'
dict['ど'] = 'ド'
dict['な'] = 'ナ'
dict['に'] = 'ニ'
dict['ぬ'] = 'ヌ'
dict['ね'] = 'ネ'
dict['の'] = 'ノ'
dict['ま'] = 'マ'
dict['み'] = 'ミ'
dict['む'] = 'ム'
dict['め'] = 'メ'
dict['も'] = 'モ'
dict['は'] = 'ハ'
dict['ひ'] = 'ヒ'
dict['ふ'] = 'フ'
dict['へ'] = 'ヘ'
dict['ほ'] = 'ホ'
dict['ば'] = 'バ'
dict['び'] = 'ビ'
dict['ぶ'] = 'ブ'
dict['べ'] = 'ベ'
dict['ぼ'] = 'ボ'
dict['ぱ'] = 'パ'
dict['ぴ'] = 'ピ'
dict['ぷ'] = 'プ'
dict['ぺ'] = 'ペ'
dict['ぽ'] = 'ポ'
dict['ら'] = 'ラ'
dict['り'] = 'リ'
dict['る'] = 'ル'
dict['れ'] = 'レ'
dict['ろ'] = 'ロ'
dict['や'] = 'ヤ'
dict['ゆ'] = 'ユ'
dict['よ'] = 'ヨ'
dict['ゃ'] = 'ャ'
dict['ゅ'] = 'ュ'
dict['ょ'] = 'ョ'
dict['っ'] = 'ッ'
dict['わ'] = 'ワ'
dict['ゐ'] = 'ヰ'
dict['ゑ'] = 'ヱ'
dict['を'] = 'ヲ'
dict['ん'] = 'ン'
dict['ゔ'] = 'ヴ'
dict['ゝ'] = 'ヽ'
dict['ゞ'] = 'ヾ'
dict[value] = key for key, value of dict
jQuery ($) ->
translate = ->
str = ''
str += dict[letter] || letter for letter in $('#from').val()
$('#to').val(str)
$('#from').on 'keyup', translate
// Generated by CoffeeScript 1.6.3
(function(){var e,t,n;e={};e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";e[""]="";for(t in e){n=e[t];e[n]=t}jQuery(function(t){var n;n=function(){var n,r,i,s,o;r="";o=t("#from").val();for(i=0,s=o.length;i<s;i++){n=o[i];r+=e[n]||n}return t("#to").val(r)};return t("#from").on("keyup",n)})}).call(this);
\ No newline at end of file
// Conversion table
(function() {
var e, t, n;
e = {};
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
e[""] = "";
for (t in e) {
n = e[t];
e[n] = t
}
jQuery(function(t) {
var n;
n = function() {
var n, r, i, s, o;
r = "";
o = t("#input").val();
for (i = 0, s = o.length; i < s; i++) {
n = o[i];
r += e[n] || n
}
return t("#output").val(r)
};
return t("#input").on("keyup", n)
})
}).call(this);
// Copy button
$("document").ready(function(){
// Check if browser supports copy API
if (ClipboardJS.isSupported()) {
// Load library only with success event
// (this prevents error event to trigger when copying empty textarea)
var clipboard = new ClipboardJS("[data-clipboard-trigger]");
clipboard.on("success", function(e) {
$("[data-clipboard-trigger]").text("Copiado!").addClass("copy--success").removeClass("copy--error").prop("disabled", true);
e.clearSelection();
// Return to original state after 2s
setTimeout(function() {
$("[data-clipboard-trigger]").text("Copiar").removeClass("copy--success").prop("disabled", false);
}
, 2000);
});
} else {
// Load library with error event
// (only so unsupported browsers trigger error event)
var clipboard = new ClipboardJS("[data-clipboard-trigger]");
clipboard.on("error", function(e) {
$("[data-clipboard-trigger]").text("Copie manualmente").addClass("copy--error").prop("disabled", true);
});
};
});
@import url(reset.css);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic);
::selection {
background-color: rgba(120, 124, 115, 0.2); }
:root {
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--color-primary: black;
--color-secondary: white;
}
body {
background-color: #eaebe9;
color: #454742;
font: 400 20px/1.5 Source Sans Pro, sans-serif;
margin: 0 auto;
padding: 3em;
text-align: center;
width: 40em; }
#logo img {
margin-bottom: 1em;
width: 10em; }
#logo p {
color: #787c73;
font-size: 1em;
margin-bottom: 3em; }
label {
background-color: #787c73;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
color: #eaebe9;
display: block;
font-size: 1.2em;
padding: 0.4em 0 0;
background-color: #eee;
font-family: var(--font);
color: var(--color-primary);
margin: 0;
padding: 0;
}
a {
color: var(--color-secondary);
}
.site-header {
align-items: center;
background-color: var(--color-primary);
color: var(--color-secondary);
height: 4rem;
display: flex;
justify-content: space-between;
padding: 0 1rem;
}
@media screen and (max-width: 600px) {
.site-header {
display: block;
height: auto;
padding: 1rem .5rem;
text-align: center;
}
}
.site-content {
padding: 1rem;
}
.site-title {
font-size: 1.6rem;
font-weight: 400;
margin: 0;
}
.site-title__reading {
font-size: .2rem;
font-weight: 700;
letter-spacing: .6em;
opacity: .6;
text-transform: uppercase;
}
.site-description {
font-size: .75rem;
margin: 0;
opacity: .8;
text-align: right;
}
@media screen and (max-width: 600px) {
.site-description {
text-align: center;
}
}
.label {
align-items: center;
background-color: var(--color-primary);
box-sizing: border-box;
color: var(--color-secondary);
display: flex;
height: 2.5rem;
justify-content: space-between;
padding: 0 1rem;
}
.copy {
background: none;
border: none;
color: var(--color-secondary);
cursor: pointer;
font-family: var(--font);
font-size: .75rem;
font-weight: 500;
margin: 0;
outline: none;
padding: 0;
text-transform: uppercase;
vertical-align: middle;
}
.copy:disabled {
cursor: default;
}
@keyframes pulse {
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.copy--success {
animation: pulse 200ms;
color: lime;
}
.copy--error {
animation: pulse 200ms;
color: orange;
}
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
}
.grid__item {
position: relative;
text-transform: uppercase; }
label span {
background-color: #91958d;
border-radius: 0.5em;
font-size: 0.5em;
padding: 0.5em 1em;
position: absolute;
right: 1em;
top: 1em; }
textarea {
background-color: white;
border: 0.3em solid #787c73;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
color: #454742;
}
.grid__item:first-child:after {
border: .6rem solid transparent;
border-bottom-width: 2rem;
border-top-width: 2rem;
border-left-color: var(--color-primary);
content: "";
height: 0;
position: absolute;
left: 100%;
top: calc(50% - 2rem);
z-index: 1;
width: 0;
}
@media screen and (max-width: 600px) {
.grid__item:first-child:after {
border: .6rem solid transparent;
border-left-width: 2rem;
border-right-width: 2rem;
border-top-color: var(--color-primary);
top: 100%;
left: calc(50% - 2rem);
}
}
.field {
background-color: var(--color-secondary);
border: .125rem solid;
box-sizing: border-box;
color: var(--color-primary);
display: block;
font: 400 1.5em Source Sans Pro, sans-serif;
height: 10em;
margin-bottom: 2em;
font-family: var(--font);
font-size: 1rem;
height: calc(100vh - 6rem - 2.5rem);
outline: none;
padding: 1em;
padding: 1rem;
resize: none;
width: 100%; }
width: 100%;
}
@media screen and (max-width: 600px) {
.field {
height: calc(50vh - 6rem - 2.5rem);
}
}
@import "bourbon"
@import "reset.css"
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic)
$brand-color: #787c73
$off-white: lighten($brand-color, 45%)
$font: Source Sans Pro, sans-serif
::selection
background-color: rgba($brand-color, .2)