spuit 0.1.2 → 0.2.1

data/site/README.md

@@ -0,0 +1,12 @@
+
+サーバーの起動:
+
+```
+$ make up
+```
+
+開発:
+
+```
+$ make dev
+```

data/site/archetypes/default.md

@@ -0,0 +1,6 @@
+---
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+

data/site/config.toml

@@ -0,0 +1,24 @@
+baseURL = "http://example.org/"
+languageCode = "ja"
+title = "Spuit"
+theme = "spuit"
+copyright = "🍄"
+
+pygmentsCodefences = true
+pygmentsCodeFencesGuessSyntax = true
+pygmentsStyle = "monokai"
+pygmentsUseClasses = true
+pygmentsoptions = "linenos=inline"
+
+[params]
+description = "description"
+keywords = "keywords"
+googleAnalyticsId = ""
+fbAppId = ""
+
+[permalinks]
+post = "/:year/:month/:title/"
+
+[taxonomies]
+tag = "tags"
+category = "categories"

data/site/content/posts/components.html

@@ -0,0 +1,445 @@
+---
+title: Components
+draft: false
+date: 2020-01-01
+tags:
+- tagname
+categories:
+- categoryname
+---
+
+<h2 class="title-lg">Typefaces</h2>
+
+<section class="preview" id="typefaces">
+  <h1>heading 1</h1>
+  <h2>heading 2</h2>
+  <h3>heading 3</h3>
+  <h4>heading 4</h4>
+  <h5>heading 5</h5>
+  <h6>heading 6</h6>
+  <p class="has-indent">
+    paragrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagraf
+  </p>
+  <p><a href="#">linklinklinklinklinklink</a></p>
+  <p><b>boldboldboldboldboldboldbold</b></p>
+  <p><small>smallsmallsmallsmallsmallsmallsmallsmall</small></p>
+  <blockquote>
+    blockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquote
+    <cite><a href="#" target="_blank">xxx</a></cite>
+  </blockquote>
+</section>
+
+<div class="mt-5"></div>
+<h2>Buttons</h2>
+
+<section class="preview" id="buttons">
+  <div class="group-lined">
+    <a href="#" class="button">Button</a>
+    <input type="submit" class="button" value="Input" />
+    <button type="button" class="button">Button</button>
+    <a href="#" class="button has-loading">Button with loading</a>
+    <a href="#" class="button-semiflat">Semiflat</a>
+    <a href="#" class="button-outline">Outline</a>
+    <a href="#" class="button-emboss">Emboss</a>
+    <a href="#" class="button-link">Link</a>
+  </div>
+</section>
+
+<div class="mt-5"></div>
+<h2 class="title-lg">Group</h2>
+
+<section class="preview" id="groups">
+  <span class="title-xs">.group-stretch</span>
+  <div class="group-stretch">
+    <a href="#" class="button">ButtonButtonButton</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+  </div>
+  <div class="mt-5"></div>
+  <span class="title-xs">.group-center</span>
+  <div class="group-center">
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button-outline">Button</a>
+  </div>
+  <div class="mt-5"></div>
+  <span class="title-xs">.group-vertical</span>
+  <div class="group-vertical">
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+  </div>
+  <div class="mt-5"></div>
+  <span class="title-xs">.group-lined</span>
+  <div class="group-lined">
+    <a href="#" class="button">ButtonButton</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+    <a href="#" class="button">Button</a>
+  </div>
+</section>
+
+<div class="mt-5"></div>
+<h2 class="title-lg">Form</h2>
+
+<section class="preview" id="form">
+  <form>
+
+    <span class="title-xs">.fieldset-horizontal</span>
+    <div class="fieldset-horizontal has-input">
+      <label for="">Label <small class="red">[must]</small></label>
+      <div>
+        <input type="text" class="input" placeholder="placeholder" />
+        <small>explanation or <span class="red">validation</span></small>
+      </div>
+    </div>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.fieldset-vertical</span>
+
+    <div class="group-vertical">
+      <div class="fieldset-vertical">
+        <label for="">Label</label>
+        <div>
+          <input type="text" class="input" placeholder="placeholder" />
+          <small>explanation</small>
+        </div>
+      </div>
+
+      <div class="fieldset-vertical">
+        <legend>legend</legend>
+        <textarea cols="50" id="field-textarea" placeholder="placeholder" rows="10"></textarea>
+      </div>
+    </div>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.group-lined / .radio</span>
+    <ul class="group-lined">
+      <li class="radio">
+        <input id="field-radio2-0" name="field-radio2" type="radio" value="0">
+        <label for="field-radio2-0">
+          Radio
+        </label>
+      </li>
+      <li class="radio">
+        <input id="field-radio2-1" name="field-radio2" type="radio" value="1">
+        <label for="field-radio2-1">
+          Radio
+        </label>
+      </li>
+      <li class="radio">
+        <input id="field-radio2-2" name="field-radio2" type="radio" value="2">
+        <label for="field-radio2-2">
+          Radio
+        </label>
+      </li>
+    </ul>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.group-lined / .radio(nested)</span>
+    <ul class="group-lined">
+      <li class="radio">
+        <label for="field-radio3-0">
+          <input id="field-radio3-0" name="field-radio3" type="radio" value="0">
+          Radio
+        </label>
+      </li>
+      <li class="radio">
+        <label for="field-radio3-1">
+          <input id="field-radio3-1" name="field-radio3" type="radio" value="1">
+          Radio
+        </label>
+      </li>
+      <li class="radio">
+        <label for="field-radio3-2">
+          <input id="field-radio3-2" name="field-radio3" type="radio" value="2">
+          Radio
+        </label>
+      </li>
+    </ul>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.group-lined / .custom-radio</span>
+    <ul class="group-lined">
+      <li class="custom-radio">
+        <input id="field-radio4-0" name="field-radio4" type="radio" value="0">
+        <label for="field-radio4-0">
+          Custom Radio
+        </label>
+      </li>
+      <li class="custom-radio">
+        <input id="field-radio4-1" name="field-radio4" type="radio" value="1">
+        <label for="field-radio4-1">
+          Custom Radio
+        </label>
+      </li>
+      <li class="custom-radio">
+        <input id="field-radio4-2" name="field-radio4" type="radio" value="2">
+        <label for="field-radio4-2">
+          Custom Radio
+        </label>
+      </li>
+    </ul>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.group-lined / .checkbox</span>
+    <ul class="group-lined">
+      <li class="checkbox">
+        <input id="field-checkbox2-0" name="field-checkbox2" type="checkbox" value="0">
+        <label for="field-checkbox2-0">
+          checkbox
+        </label>
+      </li>
+      <li class="checkbox">
+        <input id="field-checkbox2-1" name="field-checkbox2" type="checkbox" value="1">
+        <label for="field-checkbox2-1">
+          checkbox
+        </label>
+      </li>
+      <li class="checkbox">
+        <input id="field-checkbox2-2" name="field-checkbox2" type="checkbox" value="2">
+        <label for="field-checkbox2-2">
+          checkbox
+        </label>
+      </li>
+    </ul>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.group-lined / .checkbox(nested)</span>
+    <ul class="group-lined">
+      <li class="checkbox">
+        <label for="field-checkbox3-0">
+          <input id="field-checkbox3-0" name="field-checkbox3" type="checkbox" value="0">
+          checkbox
+        </label>
+      </li>
+      <li class="checkbox">
+        <label for="field-checkbox3-1">
+          <input id="field-checkbox3-1" name="field-checkbox3" type="checkbox" value="1">
+          checkbox
+        </label>
+      </li>
+      <li class="checkbox">
+        <label for="field-checkbox3-2">
+          <input id="field-checkbox3-2" name="field-checkbox3" type="checkbox" value="2">
+          checkbox
+        </label>
+      </li>
+    </ul>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.group-lined / .custom-checkbox</span>
+    <ul class="group-lined">
+      <li class="custom-checkbox">
+        <input id="field-checkbox4-0" name="field-checkbox4" type="checkbox" value="0">
+        <label for="field-checkbox4-0">
+          Custom checkbox
+        </label>
+      </li>
+      <li class="custom-checkbox">
+        <input id="field-checkbox4-1" name="field-checkbox4" type="checkbox" value="1">
+        <label for="field-checkbox4-1">
+          Custom checkbox
+        </label>
+      </li>
+      <li class="custom-checkbox">
+        <input id="field-checkbox4-2" name="field-checkbox4" type="checkbox" value="2">
+        <label for="field-checkbox4-2">
+          Custom checkbox
+        </label>
+      </li>
+    </ul>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.switch(checkbox)</span>
+    <div class="fieldset-horizontal">
+      <legend>legend</legend>
+      <ul class="reset-ul">
+        <li>
+          <div class="switch">
+            <input id="field-checkbox-switch-0" type="checkbox" value="0">
+            <label for="field-checkbox-switch-0"></label>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.selectbox</span>
+    <div class="fieldset-horizontal has-input">
+      <legend>legend</legend>
+      <div class="select">
+        <select id="select">
+          <option disabled selected>choose...</option>
+          <option value="1">option</option>
+          <option value="2">option</option>
+          <option value="3">option</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.fileupload</span>
+    <div class="fieldset-horizontal has-input">
+      <legend>legend</legend>
+      <div>
+        <input type="file" name="file-upload" id="file-upload">
+        <label for="file-upload"><small>Choose files</small></label>
+      </div>
+    </div>
+
+    <div class="mt-5"></div>
+    <span class="title-xs">.actions</span>
+    <div class="group-center">
+      <input class="button" type="submit" value="Submit" />
+      <input class="button-outline" type="reset" value="Reset" />
+    </div>
+  </form>
+</section>
+
+<div class="mt-5"></div>
+<h2 class="title-lg">Table</h2>
+
+<section class="preview" id="table">
+  <span class="title-xs">.table</span>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>xxx</th>
+        <th>xxx</th>
+        <th>xxx</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="mt-5"></div>
+  <span class="title-xs">.table-line</span>
+  <table class="table-line">
+    <thead>
+      <tr>
+        <th>xxx</th>
+        <th>xxx</th>
+        <th>xxx</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="mt-5"></div>
+  <span class="title-xs">.table-line</span>
+  <table class="table-stripe">
+    <thead>
+      <tr>
+        <th>xxx</th>
+        <th>xxx</th>
+        <th>xxx</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+      <tr>
+        <td>xxx</td>
+        <td>xxx</td>
+        <td>xxx</td>
+      </tr>
+    </tbody>
+  </table>
+</section>
+
+<div class="mt-5"></div>
+<h2 class="title-lg">Icons</h2>
+
+<section class="preview" id="icons">
+  <i class="icon-hamburger"></i>
+  <i class="icon-twitter"></i>
+  <i class="icon-facebook"></i>
+  <i class="icon-hatena"></i>
+  <i class="icon-svg"></i>
+</section>
+
+<div class="mt-5"></div>
+<h2 class="title-lg">Balloon</h2>
+
+<section class="preview" id="others">
+  <span class="balloon l"></span>
+  <span class="balloon t"></span>
+  <span class="balloon b"></span>
+  <span class="balloon r"></span>
+</section>
+
+<div class="mt-5"></div>
+<h2 class="title-lg">Utilities</h2>
+
+<section class="preview" id="utilities">
+  <span class="title-xs">.word-break</span>
+  <div>
+    <p class="word-break">.word-break</p>
+  </div>
+
+  <div class="mt-4"></div>
+  <span class="title-xs">.word-break-none</span>
+  <div>
+    <p class="word-break-none">.word-break-none</p>
+  </div>
+
+  <div class="mt-4"></div>
+  <span class="title-xs">.text-overflow</span>
+  <div>
+    <p class="text-overflow">.text-overflow</p>
+  </div>
+
+  <div class="mt-4"></div>
+  <span class="title-xs">.wordwrap-fadeout</span>
+  <div class="wordwrap-fadeout">
+    <p>
+      .wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout
+    </p>
+  </div>
+</section>