cloudhead.io · commit

Make lots of adjustments, for mobile

81832d902d5ed294afea0346afb20606527ac38c

Alexis Sellier committed 6 years ago 1 parent 75b47cce

build +1 -1

    @year = Date.today.year
    @articles = $articles
  end

  def to_html
    ERB.new(PAGE_TEMPLATE).result(binding).gsub(/ +$/, '')
    ERB.new(PAGE_TEMPLATE, trim_mode: "<>-").result(binding).gsub(/ +$/, '')
  end

  def styles?
    File.exists? Pathname::new(@name).join("style.css")
  end

css/base.css +39 -9

	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 100%;
}

body {
	color: #eee;
	background-color: #05050c;
	max-width: 912px;
	margin: 0 auto;
	padding: 120px 0 180px 0;
	line-height: 1.4em;
	font-size: 1.25rem;
	font-size: 125%;
	scrollbar-width: thin;
	scrollbar-height: thin;
	scrollbar-color: var(--highlight-color) transparent;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: greyscale;


section.body {
	margin-bottom: 36rem;
}

footer {
	font-size: 1rem;
	color: var(--subtle-color);
}

body > footer {
	display: none;
	padding: 1rem 1rem 0 1rem;
}

/*
 * HEADERS
 */

h1, h2, h3, h4 {

h3, h4, h5 {
	font-weight: normal !important;
}

h1 {
	font-size: 1.2em;
	font-size: 1.2rem;
	line-height: 1.4em;
	font-weight: bold;
}
h2 {
	font-size: 1.3em;
	font-size: 1.3rem;
	line-height: 1.4em;
	margin-bottom: 30px;
	margin-top: 90px;
}
h3 {
	font-size: 1.1em;
	font-size: 1.1rem;
}

/*
 * CODE
 */

	background-color: #060f11;
	border-radius: 4px;
	overflow-x: scroll !important;
}
pre code {
	white-space: pre-wrap;
	white-space: pre;
}

code {
	color: #a1fde6;

	left: 1rem;
	top: 1rem;
	z-index: -1;
}
nav li {
	font-size: 20px;
	line-height: 1.25em;
}
nav a {
	color: var(--highlight-color);
}
nav footer {
	font-size: 1rem;
	color: var(--subtle-color);
	position: fixed;
	bottom: 1rem;
	left: 1rem;
}



@media /* Smaller desktop */
only screen and (max-device-width: 960px),
only screen and (max-width: 960px) {
	body {
		padding: 1rem;
		font-size: 100%;
		max-width: 100%;
		padding: 1rem 0rem;
	}
	nav {
		display: block;
		position: static;
		margin-bottom: 1rem;
	}
	nav footer {
		display: none;
	}
	nav ul {
		column-count: 2;
		column-gap: 4em;

		-webkit-column-count: 2;
		-webkit-column-gap: 4rem;
		-moz-column-count: 2;
		-moz-column-gap: 4rem;
	}
	img[alt="crates.io"], img[alt="docs.rs"] {
		height: 1.25rem;
	}
	h1, h2, h3, h4, h5, h6, p, nav {
		padding: 0 1rem;
	}
	pre {
		padding: 1rem 1rem calc(1rem - var(--scrollbar-width)) 1rem;
	}
	body > footer {
		display: block;
	}
}

@media /* Mobile */
only screen and (max-device-width: 720px),
only screen and (max-width: 720px) {
	body {
		font-size: 87.5%;
	}
	video {
		height: auto;
		width: 100%;
		border-left: none;
		border-right: none;

page.html.erb +9 -9

<!doctype html>
<html lang="en">
  <head>
    <title><%= title %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/css/fonts.css">
    <link rel="stylesheet" type="text/css" href="/css/base.css">
    <% if styles? %>
    <link rel="stylesheet" type="text/css" href="style.css">
    <% end %>
    <% if styles? %><link rel="stylesheet" type="text/css" href="style.css"><% end %>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/">/</a> <span class="subtle">home</span></li>
        <li><a href="http://twitter.com/cloudhead">@cloudhead</a> <span class="subtle">follow my tweets</span></li>
        <li><a href="https://github.com/cloudhead">code</a> <span class="subtle">github.com/cloudhead</span></li>
        <li><a href="https://github.com/cloudhead/dotfiles">dotfiles</a> <span class="subtle">~/.*</span></li>
        <li><a href="https://github.com/cloudhead/shady.vim">shady</a> <span class="subtle">:colorscheme</span</li>
        <li><a href="https://rx.cloudhead.io">rx</a> <span class="subtle">rx.cloudhead.io</span></li>
        <% articles.each do |a| %>
        <li>
        <% articles.each do |a| -%><li>
          <a href="/<%= a.name %>/"><%= a.name %></a>
          <span class="subtle"><%= a.teaser || a.date %></span>
        </li>
        <% end %>
        </li><% end %>
        <li><a href="https://twitter.com/cloudhead">tweets</a></li>
        <li><a href="https://merveilles.town/@cloudhead">toots</a></li>
        <li><a href="https://ello.co/cloudhead">drawings</a></li>
      </ul>
      <footer>

    <% if body %>
    <article class="note">
    <% if title %>
      <header>
        <h1><%= title %></h1>
        <% if date %>
        <% if date -%>
        <p class="date"><%= date %></p>
        <% end %>
      </header>
    <% end %>
    <section class="body">
      <%= body %>
      <%= body -%>
    </section>
    <footer>
    </footer>
    </article>
    <footer>
      &copy; <%= year %> Alexis Sellier
    </footer>
    <script type="text/javascript" src="/js/hirust.js"></script>
    <% end %>
  </body>
</html>

style.css +1 -0

body {
	background: url(/images/bg.png) no-repeat fixed bottom center;
	background-size: contain;
}

h1 {
	font-size: 20px;
	text-shadow: -2px -2px white;

93	97
94	98		section.body {
95	99		margin-bottom: 36rem;
96	100		}
97	101
	102	+	footer {
	103	+	font-size: 1rem;
	104	+	color: var(--subtle-color);
	105	+	}
	106	+
	107	+	body > footer {
	108	+	display: none;
	109	+	padding: 1rem 1rem 0 1rem;
	110	+	}
	111	+
98	112		/*
99	113		* HEADERS
100	114		*/
101	115
102	116		h1, h2, h3, h4 {

107	121		h3, h4, h5 {
108	122		font-weight: normal !important;
109	123		}
110	124
111	125		h1 {
112		-	font-size: 1.2em;
	126	+	font-size: 1.2rem;
113	127		line-height: 1.4em;
114	128		font-weight: bold;
115	129		}
116	130		h2 {
117		-	font-size: 1.3em;
	131	+	font-size: 1.3rem;
118	132		line-height: 1.4em;
119	133		margin-bottom: 30px;
120	134		margin-top: 90px;
121	135		}
122	136		h3 {
123		-	font-size: 1.1em;
	137	+	font-size: 1.1rem;
124	138		}
125	139
126	140		/*
127	141		* CODE
128	142		*/

132	146		background-color: #060f11;
133	147		border-radius: 4px;
134	148		overflow-x: scroll !important;
135	149		}
136	150		pre code {
137		-	white-space: pre-wrap;
138	151		white-space: pre;
139	152		}
140	153
141	154		code {
142	155		color: #a1fde6;

244	257		left: 1rem;
245	258		top: 1rem;
246	259		z-index: -1;
247	260		}
248	261		nav li {
249		-	font-size: 20px;
250	262		line-height: 1.25em;
251	263		}
252	264		nav a {
253	265		color: var(--highlight-color);
254	266		}
255	267		nav footer {
256		-	font-size: 1rem;
257		-	color: var(--subtle-color);
258	268		position: fixed;
259	269		bottom: 1rem;
260	270		left: 1rem;
261	271		}
262	272

305	315
306	316		@media /* Smaller desktop */
307	317		only screen and (max-device-width: 960px),
308	318		only screen and (max-width: 960px) {
309	319		body {
310		-	padding: 1rem;
	320	+	font-size: 100%;
	321	+	max-width: 100%;
	322	+	padding: 1rem 0rem;
311	323		}
312	324		nav {
313	325		display: block;
314	326		position: static;
315	327		margin-bottom: 1rem;
316	328		}
	329	+	nav footer {
	330	+	display: none;
	331	+	}
317	332		nav ul {
318	333		column-count: 2;
319	334		column-gap: 4em;
320	335
321	336		-webkit-column-count: 2;
322	337		-webkit-column-gap: 4rem;
323	338		-moz-column-count: 2;
324	339		-moz-column-gap: 4rem;
325	340		}
	341	+	img[alt="crates.io"], img[alt="docs.rs"] {
	342	+	height: 1.25rem;
	343	+	}
	344	+	h1, h2, h3, h4, h5, h6, p, nav {
	345	+	padding: 0 1rem;
	346	+	}
	347	+	pre {
	348	+	padding: 1rem 1rem calc(1rem - var(--scrollbar-width)) 1rem;
	349	+	}
	350	+	body > footer {
	351	+	display: block;
	352	+	}
326	353		}
327	354
328	355		@media /* Mobile */
329	356		only screen and (max-device-width: 720px),
330	357		only screen and (max-width: 720px) {
	358	+	body {
	359	+	font-size: 87.5%;
	360	+	}
331	361		video {
332	362		height: auto;
333	363		width: 100%;
334	364		border-left: none;
335	365		border-right: none;

17	17		@year = Date.today.year
18	18		@articles = $articles
19	19		end
20	20
21	21		def to_html
22		-	ERB.new(PAGE_TEMPLATE).result(binding).gsub(/ +$/, '')
	22	+	ERB.new(PAGE_TEMPLATE, trim_mode: "<>-").result(binding).gsub(/ +$/, '')
23	23		end
24	24
25	25		def styles?
26	26		File.exists? Pathname::new(@name).join("style.css")
27	27		end

10	10		margin: 0;
11	11		padding: 0;
12	12		box-sizing: border-box;
13	13		}
14	14
	15	+	html {
	16	+	font-size: 100%;
	17	+	}
	18	+
15	19		body {
16	20		color: #eee;
17	21		background-color: #05050c;
18	22		max-width: 912px;
19	23		margin: 0 auto;
20	24		padding: 120px 0 180px 0;
21	25		line-height: 1.4em;
22		-	font-size: 1.25rem;
	26	+	font-size: 125%;
23	27		scrollbar-width: thin;
24	28		scrollbar-height: thin;
25	29		scrollbar-color: var(--highlight-color) transparent;
26	30		-webkit-font-smoothing: antialiased;
27	31		-moz-osx-font-smoothing: greyscale;

1	1		<!doctype html>
2	2		<html lang="en">
3	3		<head>
4	4		<title><%= title %></title>
5	5		<meta charset="utf-8">
	6	+	<meta name="viewport" content="width=device-width, initial-scale=1">
6	7		<link rel="stylesheet" type="text/css" href="/css/fonts.css">
7	8		<link rel="stylesheet" type="text/css" href="/css/base.css">
8		-	<% if styles? %>
9		-	<link rel="stylesheet" type="text/css" href="style.css">
10		-	<% end %>
	9	+	<% if styles? %><link rel="stylesheet" type="text/css" href="style.css"><% end %>
11	10		</head>
12	11		<body>
13	12		<nav>
14	13		<ul>
15	14		<li><a href="/">/</a> <span class="subtle">home</span></li>
16	15		<li><a href="http://twitter.com/cloudhead">@cloudhead</a> <span class="subtle">follow my tweets</span></li>
17	16		<li><a href="https://github.com/cloudhead">code</a> <span class="subtle">github.com/cloudhead</span></li>
18	17		<li><a href="https://github.com/cloudhead/dotfiles">dotfiles</a> <span class="subtle">~/.*</span></li>
19	18		<li><a href="https://github.com/cloudhead/shady.vim">shady</a> <span class="subtle">:colorscheme</span</li>
20	19		<li><a href="https://rx.cloudhead.io">rx</a> <span class="subtle">rx.cloudhead.io</span></li>
21		-	<% articles.each do \|a\| %>
22		-	<li>
	20	+	<% articles.each do \|a\| -%><li>
23	21		<a href="/<%= a.name %>/"><%= a.name %></a>
24	22		<span class="subtle"><%= a.teaser \|\| a.date %></span>
25		-	</li>
26		-	<% end %>
	23	+	</li><% end %>
27	24		<li><a href="https://twitter.com/cloudhead">tweets</a></li>
28	25		<li><a href="https://merveilles.town/@cloudhead">toots</a></li>
29	26		<li><a href="https://ello.co/cloudhead">drawings</a></li>
30	27		</ul>
31	28		<footer>

35	32		<% if body %>
36	33		<article class="note">
37	34		<% if title %>
38	35		<header>
39	36		<h1><%= title %></h1>
40		-	<% if date %>
	37	+	<% if date -%>
41	38		<p class="date"><%= date %></p>
42	39		<% end %>
43	40		</header>
44	41		<% end %>
45	42		<section class="body">
46		-	<%= body %>
	43	+	<%= body -%>
47	44		</section>
48	45		<footer>
49	46		</footer>
50	47		</article>
	48	+	<footer>
	49	+	© <%= year %> Alexis Sellier
	50	+	</footer>
51	51		<script type="text/javascript" src="/js/hirust.js"></script>
52	52		<% end %>
53	53		</body>
54	54		</html>

1	1		body {
2	2		background: url(/images/bg.png) no-repeat fixed bottom center;
	3	+	background-size: contain;
3	4		}
4	5
5	6		h1 {
6	7		font-size: 20px;
7	8		text-shadow: -2px -2px white;