first version

assets/css/index.css

@@ -0,0 +1,176 @@
+:root {
+  --content-width: 65rem;
+}
+
+*,
+*:after,
+*:before{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  color: currentColor;
+  text-decoration: none;
+}
+
+strong, b {
+  font-weight: 500;
+}
+
+img {
+  width: 100%;
+}
+
+.page {
+  padding: 5vh 5vw 10vh;
+}
+.page > * {
+  max-width: var(--content-width);
+  margin: 0 auto;
+}
+
+.header {
+  margin-bottom: 1.5rem;
+}
+
+.header a {
+  position: relative;
+  text-transform: uppercase;
+  font-size: .875rem;
+  letter-spacing: .05em;
+  padding: .5rem 0;
+  font-weight: 700;
+}
+
+.header .logo {
+  display: block;
+  margin-bottom: 1.5rem;
+  padding: .5rem 0;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.menu a {
+  margin: 0 .75rem;
+}
+
+.menu a[aria-current] {
+  border-bottom: 2px solid #000;
+}
+
+@media screen and (min-width: 40rem) {
+  .header .logo {
+    margin-bottom: 0;
+  }
+  .header {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .menu {
+    margin-right: -.75rem;
+  }
+}
+
+
+main {
+  min-height: calc(100vh - 10rem);
+}
+
+.intro {
+  padding: 10vh 0;
+  text-align: center;
+}
+
+.intro h1 {
+  position: relative;
+  margin-bottom: 1rem;
+  font-weight: 900;
+  font-size: calc(1vw + 2rem);
+  z-index: 1;
+}
+
+.tags {
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.075em;
+  font-size: .75rem;
+  font-weight: 600;
+}
+
+.text {
+  line-height: 1.5em;
+}
+.text p,
+.text figure,
+.text ul,
+.text ol {
+  margin-bottom: 1.5em;
+}
+.text h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 3rem;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+.text > *:first-child {
+  margin-top: 0;
+}
+.text a {
+  position: relative;
+  white-space: nowrap;
+  font-weight: 500;
+  z-index: 1;
+  display: inline-block;
+  border-bottom: 2px solid #000;
+}
+.text figure {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+.text img {
+  width: 100%;
+}
+
+.footer {
+  padding: 1.5rem 5vw 10vh;
+  text-align: center;
+  max-width: var(--content-width);
+  margin: 0 auto;
+  line-height: 1.5em;
+}
+.footer a {
+  display: inline-block;
+  font-size: .875rem;
+}
+.footer > a {
+  margin-bottom: 1.5rem;
+  border-top: 2px solid #000;
+  width: 16.5rem;
+  padding-top: .5rem;
+}
+
+.social a {
+  margin: 0 .75rem;
+  padding: .5rem 1rem;
+  border: 2px solid #000;
+  width: 7.5rem;
+}
+.social a:hover {
+  background: #000;
+  color: #fff;
+}

assets/css/templates/about.css

@@ -0,0 +1,19 @@
+.layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 3rem;
+}
+
+@media screen and (min-width: 45rem) {
+  .layout {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+.layout aside section {
+  margin-bottom: 3rem;
+}
+
+.layout aside h2 {
+  margin-bottom: .75rem;
+}

assets/css/templates/album.css

@@ -0,0 +1,57 @@
+.album-cover {
+  position: relative;
+  line-height: 0;
+  margin-bottom: 6rem;
+  background: #000;
+  padding-bottom: 75%;
+}
+.album-cover figcaption {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  background: rgba(0,0,0, .5);
+  text-align: center;
+  color: #fff;
+  line-height: 1;
+  padding: 1.5rem;
+}
+.album-cover img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.album-cover h1 {
+  font-size: 3rem;
+}
+.album-text {
+  max-width: 40rem;
+  margin: 0 auto 6rem;
+  text-align: center;
+}
+.album-gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  align-items: center;
+  margin: 0 auto;
+  grid-gap: 1rem;
+  max-width: calc(var(--content-width) - 15rem);
+  justify-content: center;
+}
+.album-gallery[data-even] {
+  grid-template-columns: repeat(4, 1fr);
+}
+.album-gallery[data-count="1"] {
+  grid-template-columns: 1fr;
+}
+.album-gallery[data-count="2"] {
+  grid-template-columns: 1fr 1fr;
+}

assets/css/templates/default.css

@@ -0,0 +1,4 @@
+.text {
+  max-width: 35rem;
+  margin: 0 auto;
+}

assets/css/templates/home.css

@@ -0,0 +1,76 @@
+.grid {
+  display: grid;
+  list-style: none;
+  grid-gap: 1rem;
+  line-height: 0;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-flow: dense;
+}
+.grid li {
+  position: relative;
+  --cols: 1;
+  --rows: 1;
+
+  overflow: hidden;
+  background: #000;
+  line-height: 0;
+}
+.grid li:first-child {
+  --cols: 2;
+  --rows: 2;
+}
+.grid li:nth-child(5) {
+  --cols: 2;
+}
+.grid li:nth-child(6) {
+  --rows: 2;
+}
+.grid li:nth-child(7) {
+  --cols: 2;
+}
+.grid a {
+  display: block;
+  height: 10rem;
+}
+.grid img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all .3s;
+}
+.grid figcaption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  color: #fff;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  line-height: 1;
+  text-align: center;
+  background: rgba(0,0,0, .5);
+  text-transform: uppercase;
+  font-size: .875rem;
+  letter-spacing: .125em;
+  font-weight: 600;
+}
+
+@media screen and (min-width: 45em) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .grid li {
+    grid-column-start: span var(--cols);
+    grid-row-start: span var(--rows);
+  }
+  .grid a {
+    padding-bottom: 52.65%;
+  }
+}

assets/css/templates/note.css

@@ -0,0 +1,33 @@
+.note {
+  max-width: 35rem;
+  margin: 0 auto;
+}
+.note-header {
+  text-align: center;
+}
+.note-date {
+  margin-bottom: .5rem;
+  display: block;
+}
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  grid-gap: 1.5rem;
+  margin-bottom: 1.5rem;
+  padding: 3rem 0;
+}
+.gallery figure a {
+  border: 0;
+}
+.gallery figure {
+  margin: 0;
+  padding: 0;
+}
+
+@media screen and (min-width: 45rem) {
+  .gallery {
+    margin-left: -3rem;
+    margin-right: -3rem;
+  }
+}

assets/css/templates/notes.css

@@ -0,0 +1,20 @@
+.notes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+  grid-gap: 1.5rem;
+  grid-auto-rows: 1fr;
+}
+.note {
+  border: 2px solid #000;
+}
+.note a {
+  display: block;
+  padding: 1rem;
+  line-height: 1.25em;
+}
+.note h2 {
+  font-size: 1rem;
+}
+.note time {
+  font-size: .75rem;
+}

assets/css/templates/photography.css

@@ -0,0 +1,62 @@
+.albums {
+  display: grid;
+  list-style: none;
+  grid-gap: 1rem;
+  line-height: 0;
+}
+
+@media screen and (min-width: 30em) {
+  .albums {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 60em) {
+  .albums {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .albums[data-even] {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+
+.albums li {
+  overflow: hidden;
+  background: #000;
+}
+.albums figure {
+  position: relative;
+  padding-bottom: 125%;
+}
+.albums figcaption {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  color: #fff;
+  background: rgba(0,0,0, .5);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  line-height: 1.5em;
+  padding: 1rem;
+  font-size: .875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .125em;
+}
+.albums img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all .3s;
+}
+.albums img:hover {
+  opacity: .2;
+}