Initial commit

assets/css/templates/about.css

@@ -0,0 +1,7 @@
+.contact {
+  padding: 3rem;
+  border: 2px solid #000;
+}
+.contact .h1 {
+  margin-bottom: 1.5rem;
+}

assets/css/templates/album.css

@@ -0,0 +1,15 @@
+.album-gallery {
+  line-height: 0;
+  columns: 1;
+  column-gap: 1.5rem;
+}
+.album-gallery li {
+  display: block;
+  margin-bottom: 1.5rem;
+  break-inside: avoid;
+}
+@media screen and (min-width: 60rem) {
+  .album-gallery {
+    columns: 2;
+  }
+}

assets/css/templates/home.css

@@ -0,0 +1,72 @@
+.home-grid {
+  display: grid;
+  list-style: none;
+  grid-gap: 1.5rem;
+  line-height: 0;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-flow: dense;
+}
+.home-grid li {
+  position: relative;
+  --cols: 1;
+  --rows: 1;
+
+  overflow: hidden;
+  background: #000;
+  line-height: 0;
+}
+.home-grid li:first-child {
+  --cols: 2;
+  --rows: 2;
+}
+.home-grid li:nth-child(5) {
+  --cols: 2;
+}
+.home-grid li:nth-child(6) {
+  --rows: 2;
+}
+.home-grid li:nth-child(7) {
+  --cols: 2;
+}
+.home-grid a {
+  display: block;
+  height: 10rem;
+}
+.home-grid img {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all .3s;
+}
+.home-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);
+}
+
+@media screen and (min-width: 45em) {
+  .home-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .home-grid li {
+    grid-column-start: span var(--cols);
+    grid-row-start: span var(--rows);
+  }
+  .home-grid a {
+    padding-bottom: 52.65%;
+  }
+}

assets/css/templates/note.css

@@ -0,0 +1,30 @@
+.note {
+  max-width: 35rem;
+  margin: 0 auto;
+}
+.note-header {
+  padding-top: 3rem;
+  margin-bottom: 3rem;
+}
+.note-footer {
+  padding: 6rem 0;
+}
+.note-date {
+  color: var(--color-text-grey);
+}
+.note-tags {
+  display: flex;
+  margin-bottom: 1.5rem;
+}
+.note-tags li {
+  margin-right: .5rem;
+}
+.note-tags a {
+  padding: .5rem 1rem;
+  display: block;
+  background: var(--color-light);
+}
+.note-tags a:hover {
+  background: var(--color-black);
+  color: var(--color-white);
+}