Styling and other dumb ideas

ludwigschubert · Mar 4, 2019 · 9073ada · 9073ada
1 parent c047bc9
commit 9073ada
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/holidays.html b/holidays.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>twotwelve.house wishes you happy holidays</title>
+		<link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+		<img style="box-shadow: 0px 5px 45px 0px #888" src="images/holiday-card-2018.jpg">
+	</body>
+</html>
diff --git a/images/holiday-card-2018.jpg b/images/holiday-card-2018.jpg
diff --git a/images/ii-i-ii.svg b/images/ii-i-ii.svg
diff --git a/images/ludwig-pizza.jpg b/images/ludwig-pizza.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>twotwelve.house</title>
+		<link rel="stylesheet" href="style.css">
+		<style>
+			@media only screen and (min-width: 1664px) {
+				body {
+					margin-top: -8em;
+					transform: rotate(-30deg);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<header>
+			<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" alt="twotwelve.house">
+				<g id="ii-i-ii" stroke="#000000" stroke-width="4" stroke-linecap="square">
+					<path d=" M2,0 L2 ,100"></path>
+					<path d="M19,0 L19,100"></path>
+					<path d="M50,0 L50,100"></path>
+					<path d="M81,0 L81,100"></path>
+					<path d="M98,0 L98,100"></path>
+				</g>
+			</svg>
+			<h1 id="twotwelve.house">twotwelve<wbr>.house</h1>
+		</header>
+		<main>
+			<section>
+				<p title=", and the interdependant universe!">We're <a href="https://www.milesbrundage.com/">Miles Brundage</a>, <a href="https://katelee168.github.io">Katherine Lee</a>, and <a href="https://schubert.io/">Ludwig Schubert</a>.</p>
+			</section>
+			<section>
+				<h2 id="books-we-are-reading">Books we're reading</h2>
+				<ul>
+					<li>
+						<cite>Other Minds, Peter Godfrey-Smith<cite>
+					</li>
+					<li>
+						<cite>Lincoln in the Bardo, George Saunders<cite>
+					</li>
+				</ul>
+				<p>But remember the first rule of rogue book club: there are no rules in rogue book club. Read whetever you want.</p>
+			</section>
+			<section>
+				<h2 id="foods-we-are-eating">Foods we're eating</h2>
+				<img class="wonky" src="images/ludwig-pizza.jpg" alt="Too cool for Katherine's glasses." />
+			</section>
+		</main>
+		<footer>
+			<ul>
+				<li>We're glad you're with us.</li>
+				<li><a class="secret-link-so-secret-pssst" href="holidays.html">We hope you had happy holidays.</a></em></li>
+				<li>We hope all beings have happiness, and the causes for happiness.</li>
+			</ul>
+		</footer>
+	</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,79 @@
+/* normalize */
+
+html {
+	-webkit-text-size-adjust: 100%;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+/* twotwelve.house styles */
+
+body {
+	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+	line-height: 1.5;
+	max-width: 520px;
+	margin: auto;
+	padding: 2em 1em;
+	color: hsl(34, 50%, 6%);
+	background: hsl(35, 10%, 98%);
+	transition: transform 1s;
+}
+
+header {
+	margin-bottom: 2em;
+}
+
+main {
+
+}
+
+footer {
+	margin-top: 2em;
+}
+
+a {
+	color: hsl(206, 50%, 13%);
+	text-decoration: solid underline hsl(35, 10%, 57%);
+}
+
+a:visited {
+	color: hsl(256, 71%, 13%);
+}
+
+h1 {
+	font-size: 0.85em;
+	letter-spacing: 2px;
+}
+
+h1, h2, h3, h4 {
+	font-weight: 400;
+	text-transform: uppercase;
+}
+
+h2, h3, h4 {
+	letter-spacing: 0.05em;
+	margin-top: 2em;
+	font-size: 1.15em;
+}
+
+img {
+	max-width: 100%;
+}
+
+img.wonky {
+	clip-path: polygon(0% 0%, 100% 1%, 98% 99%, 1% 97%);
+	filter: grayscale(90%);
+	opacity: 0.9;
+	margin-left: -.5em;
+}
+
+#ii-i-ii {
+	stroke: hsl(35, 50%, 13%);
+}
+
+a.secret-link-so-secret-pssst {
+	text-decoration: none;
+	color: inherit;
+}