From 3ccfb63188900bb38627bddc5fbf39a3a9174997 Mon Sep 17 00:00:00 2001 From: Shelby Kay Date: Tue, 12 Oct 2021 22:41:09 +0200 Subject: [PATCH] Create Subscribe page Create issue css component for past newsletter --- src/routes/subscribe.svelte | 97 +++++++++++++++++++++++++++++++- src/style/_typography.scss | 6 +- src/style/molecules/_issue.scss | 36 ++++++++++++ src/style/pages/_subscribe.scss | 49 ++++++++++++++++ src/style/style.scss | 2 + static/images/issue-1.jpg | Bin 0 -> 9595 bytes 6 files changed, 188 insertions(+), 2 deletions(-) create mode 100644 src/style/molecules/_issue.scss create mode 100644 src/style/pages/_subscribe.scss create mode 100644 static/images/issue-1.jpg 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 0000000000000000000000000000000000000000..92b1581ec31a30b4da983df3a78c3558d1a95534 GIT binary patch literal 9595 zcmbuFc{JNw*zfh|$Wg6%Xsf3+)O@I!^0qywI0=FvrfN+|8fu<7r!8u35!#qaL_`cl zVu-0V9uy^piZL-16%s?F#@D&;UGH7%{&m-V_iz3F+Iu~FeV*T1`}cgG?>_l^2dT#rs4u9GRQhg@g=hvVNM|HBYx&YXPWx_XgIhs%=t%vG*muAbq(dgi2) zONxu@%(?%H&Go;>nP0fio;!cx;w2v5(*>j}T)&**=Kkd@_qlUt&z`Q1I-Tb_d-a^a zZ)*3?3tG8dxaB9L{`cF$i?<(Ce-;K0Go|l7@qclNM?_RiTtY@x?vA{IhNhObj;`Lr zKa5RGADIEHZEPWS_72de?jD|A-Y|GTU{G*KXju5mSFv&NuM-l}Gcr+G+3((?i!jC5 z5?m?1tfrPos;h5kB)4~Tc6Ims)7v*f866v+_%=zU(H9n%mcOs8uCcbZcXru(oS*yu za-HGg{_m9i7uf&Bb((}TznneGefGk?TxWg>IeodWo;~-Q+IfNdRu|m-1aGPTeNpJa z+rsM4mu}w$Glie{5A%pfYtUp^|Dydbvi~=*7yn;m{|)wkxTsvea-TW{wcA(n04?d zO8K#U;oF6J<40|oaOU1s&mh8rnt1eG;nxJ+@jQ42IJbDVhFnfvMm%!vlZOridUl!v zax;`M@$EEL13)a?GDQ<`bt%!xQF^tQfoomQ8D}\zgA{WW(b`j$6Zu6-ym`o@@{ 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 literal 0 HcmV?d00001