diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte index b787cf4..c6e86c5 100644 --- a/src/routes/subscribe.svelte +++ b/src/routes/subscribe.svelte @@ -1 +1,96 @@ -

Subscribe

\ No newline at end of file + + + + +
+ + + + +
+
+ + +
+
+
+ + + diff --git a/src/style/_typography.scss b/src/style/_typography.scss index c8f7faf..b4f5019 100644 --- a/src/style/_typography.scss +++ b/src/style/_typography.scss @@ -54,10 +54,14 @@ // Small .title-small { color: $color-secondary; - font-size: rem(28px); + font-size: rem(24px); font-weight: 400; line-height: 1.5; font-family: $font-serif; + + @include bp (sm) { + font-size: rem(28px); + } } diff --git a/src/style/molecules/_issue.scss b/src/style/molecules/_issue.scss new file mode 100644 index 0000000..6d2f2f6 --- /dev/null +++ b/src/style/molecules/_issue.scss @@ -0,0 +1,36 @@ +.issue { + display: flex; + background-color: #fff; + border-radius: 6px; + + a { + display: flex; + padding: 20px; + text-decoration: none; + } + // Image + img { + display: block; + width: 80px; + height: 56px; + margin-right: 16px; + } + // Title + dt { + color: $color-secondary; + font-size: rem(20px); + margin-bottom: 8px; + font-family: $font-serif; + font-weight: 400; + } + // Description + dd { + font-size: rem(16px); + color: $color-gray; + } + // Date + time { + opacity: 0.6; + font-size: rem(12px); + } +} \ No newline at end of file diff --git a/src/style/pages/_subscribe.scss b/src/style/pages/_subscribe.scss new file mode 100644 index 0000000..e232a4c --- /dev/null +++ b/src/style/pages/_subscribe.scss @@ -0,0 +1,49 @@ +// Subscribe Page +.subscribe { + // Modules + .grid-modules { + grid-column: span var(--columns); + margin: 96px 20px 0; + padding-bottom: 40px; + + @include bp (sm) { + grid-column: 2 / span 22; + margin: 200px 0 72px; + } + } + + // Past Issues + &__issues { + margin: 64px auto 0; + padding: 0 20px; + + @include bp (sm) { + max-width: 800px; + padding: 0; + margin-top: 0; + } + + // Title + h2 { + text-align: center; + } + + ul { + margin-top: 32px; + + @include bp (sm) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 16px; + } + } + li { + display: block; + margin-bottom: 16px; + + @include bp (sm) { + margin-bottom: 0; + } + } + } +} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index 0ec6bd7..6ae7ba0 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -24,6 +24,7 @@ @import "pages/photos"; @import "pages/explore"; @import "pages/credits"; +@import "pages/subscribe"; @import "pages/location"; // Modules @@ -45,6 +46,7 @@ @import "molecules/location"; @import "molecules/switcher"; @import "molecules/heading"; +@import "molecules/issue"; // Organisms @import "organisms/locations"; diff --git a/static/images/issue-1.jpg b/static/images/issue-1.jpg new file mode 100644 index 0000000..92b1581 Binary files /dev/null and b/static/images/issue-1.jpg differ