cloudhead.io · commit

Improve rx layout/styles

884c3f9f4a5cacf7c28e96c17736def58543fe12

Alexis Sellier committed 6 years ago 1 parent fd7608cb

rx/index.html +51 -41

        color: #ddd;
        padding: 90px 0 90px 0;
        font-size: 20px;
        line-height: 1.4em;
        margin: 0 auto;
        padding: 0 15px;
      }

      body, code {
        font-family: Inconsolata, Consolas, monospace;
      }

      strong {
        font-weight: bold;
      }

      code.block {
        line-height: 0.8em;
        line-height: 1em;
        padding: 6px 12px;
        font-size: 0.8em;
        font-style: normal;
        border: 1px solid #ddd;
        background-color: #000;
        color: white;
        display: inline-block;
      }

      code {
        color: #aaa;
        font-style: italic;

        font-size: 20px;
      }

      body > section {
        margin: 60px auto;
        width: 960px;
        max-width: 640px;
      }

      img {
        display: block;
        margin: 0 auto;

        image-rendering: optimize-contrast;
        -ms-interpolation-mode: nearest-neighbor;
      }

      li {
        list-style-type: none;
        list-style-position: outside;
      }

      ::selection {
        background: #999999;
      }

      .version {
        font-size: 0.8em;
      }

      .screenshot {
        width: 603px;
        height: 459px;
        margin: 0 auto;
        text-align: center;
      }

      .grey {

      a:hover {
        text-decoration: underline;
      }

      @media only screen and (max-device-width: 1280px) {
        body {
          font-size: 15px;
        }
        body > section {
          padding-left: 30px !important;
          padding-right: 30px !important;
          width: 100% !important;
          margin: 30px auto !important;
        }
        ul, ol {
          padding-left: 15px;
          margin-left: 15px;
        }
        pre.block {
          font-size: 0.7em;
        }
        .screenshot > img {
          width: 100%;
          height: auto;
        }
      }
    </style>
  </head>
  <body>

    </section>

    <section>
      <h2>GOALS</h2>
      <ul>
        <li>* Minimal UI. Clean aesthetics. No clutter.</li>
        <li>* Everything that should be controlled by the keyboard, is.</li>
        <li>* Extensible and scriptable with a simple command-based language.</li>
        <li>* Familiar to anyone with vi(m) knowledge.</li>
        <li>* Snappy. All commands run in &lt; 16ms.</li>
        <li>* Optimized for advanced users. vi-like philosophy.</li>
        <li>* Small, hackable codebase. At most 10 KLOC.</li>
        <li>* First-class Linux support.</li>
        <li>* CPU &amp; memory efficient.</li>
        <li>Minimal UI. Clean aesthetics. No clutter.</li>
        <li>Everything that should be controlled by the keyboard, is.</li>
        <li>Extensible and scriptable with a simple command-based language.</li>
        <li>Familiar to anyone with vi(m) knowledge.</li>
        <li>Snappy. All commands run in &lt; 16ms.</li>
        <li>Optimized for advanced users. vi-like philosophy.</li>
        <li>Small, hackable codebase. At most 10 KLOC.</li>
        <li>First-class Linux support.</li>
        <li>CPU &amp; memory efficient.</li>
      </ul>
    </section>

    <section>
      <h2>FEATURES</h2>
      <ul>
        <li>* Built-in sprite animation support, with live preview.</li>
        <li>* Work with multiple files simultaneously.</li>
        <li>* Extensible command system.</li>
        <li>* Text-based configuration.</li>
        <li>* HiDPI display support.</li>
        <li>* Undo/redo support.</li>
        <li>* Color palette support.</li>
        <li>* PNG support.</li>
        <li>* Animated GIF support.</li>
        <li>* Multi-brush / synchronous editing.</li>
        <li>* Symmetry brush mode.</li>
        <li>* Brush filtering a.k.a "pixel-perfect" mode.</li>
        <li>* <em class="grey">Coming soon: Layers.</em></li>
        <li>* <em class="grey">Coming soon: Visual mode.</em></li>
        <li>* <em class="grey">Coming soon: Workspaces.</em></li>
        <li>Built-in sprite animation support, with live preview.</li>
        <li>Work with multiple files simultaneously.</li>
        <li>Extensible command system.</li>
        <li>Text-based configuration.</li>
        <li>HiDPI display support.</li>
        <li>Undo/redo support.</li>
        <li>Color palette support.</li>
        <li>PNG support.</li>
        <li>Animated GIF support.</li>
        <li>Multi-brush / synchronous editing.</li>
        <li>Symmetry brush mode.</li>
        <li>Brush filtering a.k.a "pixel-perfect" mode.</li>
        <li><em class="grey">Coming soon: Layers.</em></li>
        <li><em class="grey">Coming soon: Visual mode.</em></li>
        <li><em class="grey">Coming soon: Workspaces.</em></li>
      </ul>
    </section>

    <section>
      <h2>REQUIREMENTS</h2>

      You can then use the <code>:help</code> command to show the current set of key mappings
      and commands.</p>

      <p>Common commands:</p>

      <pre>
      :help                    Display help
      :e &lt;path..&gt;              Edit path(s)
      :w                       Write/save view
      :q                       Quit view
      :slice &lt;n&gt;               Slice view into &lt;n&gt; frames
      :source &lt;path&gt;           Source an rx script (eg. a palette)
      :f/resize &lt;w&gt; &lt;h&gt;        Resize frames
      <pre class="block">
:help                    Display help
:e &lt;path..&gt;              Edit path(s)
:w                       Write/save view
:q                       Quit view
:slice &lt;n&gt;               Slice view into &lt;n&gt; frames
:source &lt;path&gt;           Source an rx script (eg. a palette)
:f/resize &lt;w&gt; &lt;h&gt;        Resize frames
      </pre>
    </section>

    <section>
      <h2>CONFIGURATION</h2>


      <p>If something ain't working like it's supposed to, there are various things you can
      do to debug the problem:</p>

      <ol>
        <li>1. Run <em>rx</em> with verbose logging, by using the <code>-v</code> command-line flag.
        <li>Run <em>rx</em> with verbose logging, by using the <code>-v</code> command-line flag.
        This will log errors from the underlying libraries that are usually
        suppressed.  You can increase the verbosity further by using <code>-vv</code>.</li>
        <li>2. Try the <em>winit</em> backend, by building <em>rx</em> with eg. <code>--features winit,vulkan</code>.</li>
        <li>Try the <em>winit</em> backend, by building <em>rx</em> with eg. <code>--features winit,vulkan</code>.</li>
      </ol>

      Otherwise, see the following BUGS section.
    </section>


85	87		image-rendering: optimize-contrast;
86	88		-ms-interpolation-mode: nearest-neighbor;
87	89		}
88	90
89	91		li {
90		-	list-style-type: none;
	92	+	list-style-position: outside;
91	93		}
92	94
93	95		::selection {
94	96		background: #999999;
95	97		}

109	111		.version {
110	112		font-size: 0.8em;
111	113		}
112	114
113	115		.screenshot {
114		-	width: 603px;
115		-	height: 459px;
116	116		margin: 0 auto;
117	117		text-align: center;
118	118		}
119	119
120	120		.grey {

134	134		a:hover {
135	135		text-decoration: underline;
136	136		}
137	137
138	138		@media only screen and (max-device-width: 1280px) {
	139	+	body {
	140	+	font-size: 15px;
	141	+	}
139	142		body > section {
140		-	padding-left: 30px !important;
141		-	padding-right: 30px !important;
142	143		width: 100% !important;
	144	+	margin: 30px auto !important;
	145	+	}
	146	+	ul, ol {
	147	+	padding-left: 15px;
	148	+	margin-left: 15px;
	149	+	}
	150	+	pre.block {
	151	+	font-size: 0.7em;
143	152		}
144	153		.screenshot > img {
145	154		width: 100%;
	155	+	height: auto;
146	156		}
147	157		}
148	158		</style>
149	159		</head>
150	160		<body>

187	197		</section>
188	198
189	199		<section>
190	200		<h2>GOALS</h2>
191	201		<ul>
192		-	<li>* Minimal UI. Clean aesthetics. No clutter.</li>
193		-	<li>* Everything that should be controlled by the keyboard, is.</li>
194		-	<li>* Extensible and scriptable with a simple command-based language.</li>
195		-	<li>* Familiar to anyone with vi(m) knowledge.</li>
196		-	<li>* Snappy. All commands run in < 16ms.</li>
197		-	<li>* Optimized for advanced users. vi-like philosophy.</li>
198		-	<li>* Small, hackable codebase. At most 10 KLOC.</li>
199		-	<li>* First-class Linux support.</li>
200		-	<li>* CPU & memory efficient.</li>
	202	+	<li>Minimal UI. Clean aesthetics. No clutter.</li>
	203	+	<li>Everything that should be controlled by the keyboard, is.</li>
	204	+	<li>Extensible and scriptable with a simple command-based language.</li>
	205	+	<li>Familiar to anyone with vi(m) knowledge.</li>
	206	+	<li>Snappy. All commands run in < 16ms.</li>
	207	+	<li>Optimized for advanced users. vi-like philosophy.</li>
	208	+	<li>Small, hackable codebase. At most 10 KLOC.</li>
	209	+	<li>First-class Linux support.</li>
	210	+	<li>CPU & memory efficient.</li>
201	211		</ul>
202	212		</section>
203	213
204	214		<section>
205	215		<h2>FEATURES</h2>
206	216		<ul>
207		-	<li>* Built-in sprite animation support, with live preview.</li>
208		-	<li>* Work with multiple files simultaneously.</li>
209		-	<li>* Extensible command system.</li>
210		-	<li>* Text-based configuration.</li>
211		-	<li>* HiDPI display support.</li>
212		-	<li>* Undo/redo support.</li>
213		-	<li>* Color palette support.</li>
214		-	<li>* PNG support.</li>
215		-	<li>* Animated GIF support.</li>
216		-	<li>* Multi-brush / synchronous editing.</li>
217		-	<li>* Symmetry brush mode.</li>
218		-	<li>* Brush filtering a.k.a "pixel-perfect" mode.</li>
219		-	<li>* <em class="grey">Coming soon: Layers.</em></li>
220		-	<li>* <em class="grey">Coming soon: Visual mode.</em></li>
221		-	<li>* <em class="grey">Coming soon: Workspaces.</em></li>
	217	+	<li>Built-in sprite animation support, with live preview.</li>
	218	+	<li>Work with multiple files simultaneously.</li>
	219	+	<li>Extensible command system.</li>
	220	+	<li>Text-based configuration.</li>
	221	+	<li>HiDPI display support.</li>
	222	+	<li>Undo/redo support.</li>
	223	+	<li>Color palette support.</li>
	224	+	<li>PNG support.</li>
	225	+	<li>Animated GIF support.</li>
	226	+	<li>Multi-brush / synchronous editing.</li>
	227	+	<li>Symmetry brush mode.</li>
	228	+	<li>Brush filtering a.k.a "pixel-perfect" mode.</li>
	229	+	<li><em class="grey">Coming soon: Layers.</em></li>
	230	+	<li><em class="grey">Coming soon: Visual mode.</em></li>
	231	+	<li><em class="grey">Coming soon: Workspaces.</em></li>
222	232		</ul>
223	233		</section>
224	234
225	235		<section>
226	236		<h2>REQUIREMENTS</h2>

270	280		You can then use the <code>:help</code> command to show the current set of key mappings
271	281		and commands.</p>
272	282
273	283		<p>Common commands:</p>
274	284
275		-	<pre>
276		-	:help Display help
277		-	:e <path..> Edit path(s)
278		-	:w Write/save view
279		-	:q Quit view
280		-	:slice <n> Slice view into <n> frames
281		-	:source <path> Source an rx script (eg. a palette)
282		-	:f/resize <w> <h> Resize frames
	285	+	<pre class="block">
	286	+	:help Display help
	287	+	:e <path..> Edit path(s)
	288	+	:w Write/save view
	289	+	:q Quit view
	290	+	:slice <n> Slice view into <n> frames
	291	+	:source <path> Source an rx script (eg. a palette)
	292	+	:f/resize <w> <h> Resize frames
283	293		</pre>
284	294		</section>
285	295
286	296		<section>
287	297		<h2>CONFIGURATION</h2>

15	15		color: #ddd;
16	16		padding: 90px 0 90px 0;
17	17		font-size: 20px;
18	18		line-height: 1.4em;
19	19		margin: 0 auto;
	20	+	padding: 0 15px;
20	21		}
21	22
22	23		body, code {
23	24		font-family: Inconsolata, Consolas, monospace;
24	25		}

40	41		strong {
41	42		font-weight: bold;
42	43		}
43	44
44	45		code.block {
45		-	line-height: 0.8em;
	46	+	line-height: 1em;
46	47		padding: 6px 12px;
47	48		font-size: 0.8em;
48	49		font-style: normal;
49	50		border: 1px solid #ddd;
50	51		background-color: #000;
51	52		color: white;
	53	+	display: inline-block;
52	54		}
53	55
54	56		code {
55	57		color: #aaa;
56	58		font-style: italic;

68	70		font-size: 20px;
69	71		}
70	72
71	73		body > section {
72	74		margin: 60px auto;
73		-	width: 960px;
	75	+	max-width: 640px;
74	76		}
75	77
76	78		img {
77	79		display: block;
78	80		margin: 0 auto;

315	325
316	326		<p>If something ain't working like it's supposed to, there are various things you can
317	327		do to debug the problem:</p>
318	328
319	329		<ol>
320		-	<li>1. Run <em>rx</em> with verbose logging, by using the <code>-v</code> command-line flag.
	330	+	<li>Run <em>rx</em> with verbose logging, by using the <code>-v</code> command-line flag.
321	331		This will log errors from the underlying libraries that are usually
322	332		suppressed. You can increase the verbosity further by using <code>-vv</code>.</li>
323		-	<li>2. Try the <em>winit</em> backend, by building <em>rx</em> with eg. <code>--features winit,vulkan</code>.</li>
	333	+	<li>Try the <em>winit</em> backend, by building <em>rx</em> with eg. <code>--features winit,vulkan</code>.</li>
324	334		</ol>
325	335
326	336		Otherwise, see the following BUGS section.
327	337		</section>
328	338