commit - fa8f6cc14f8f49fbee4c61d007f8a36c0c39253f
commit + ddd1846e580ab46048219bf6f2ab758da62320f3
blob - 66da91c7c88488fb7d23c3ff794828d667a0ec95
blob + 6ae78fc13f10baf160cd7571d61db2e27d0b9a4e
--- internal/templates/base.tmpl
+++ internal/templates/base.tmpl
<body>
<header>
- <a href="/login">Login</a>
+ <a class="logo" href="/">
+ <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-rss-fill"
+ viewBox="0 0 16 16">
+ <path
+ d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1 0-2m0 4a6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1 0-2m.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" />
+ </svg>
+ </a>
+ <a class="link holo" href="/sign-up" style="margin-right: .5rem;">Sign up</a>
+ <a class="link" href="/login">Login</a>
</header>
- <main>
- {{ block "content" . }}{{ end }}
- </main>
+ {{ block "content" . }}{{ end }}
<footer>
<a href="https://github.com/StreatCodes/rss">
<svg xmlns="http://www.w3.org/2000/svg" aria-label="Github" width="20" height="20" fill="white"
blob - 7756989b5436336e82e8b6a83d26eaaa449a6393
blob + 0601bf92fc5412aa7d5d0d8361c68f71aa216997
--- internal/templates/home.tmpl
+++ internal/templates/home.tmpl
-{{ define "title" }}Home{{ end }}
-
{{ define "content" }}
-<form>
- <div class="search-box">
- <button type="button" aria-label="Filter">
- <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-filter"
- viewBox="0 0 16 16">
- <path
- d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" />
- </svg>
- </button>
- <input type="search" autofocus name="search" placeholder="Search for a feed!" />
- <button type="submit" aria-label="Send">
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-send"
- viewBox="0 0 16 16">
- <path
- d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576zm6.787-8.201L1.591 6.602l4.339 2.76z" />
- </svg>
- </button>
- </div>
-</form>
+<main class="search-area">
+ <hgroup class="search-animation">
+ <h1>Subscribe to your favourite feed!</h1>
+ <div style="display: flex">
+ <h3>Your </h3>
+ <div class="text-stack">
+ <h3>exciting calendar event</h3>
+ <h3>top blog</h3>
+ <h3>beloved podcast</h3>
+ <h3>number one forum thread</h3>
+ <h3>go-to YouTube channel</h3>
+ </div>
+ </div>
+ </hgroup>
+
+ <form>
+ <div class="search-box">
+ <button type="button" aria-label="Filter">
+ <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-filter"
+ viewBox="0 0 16 16">
+ <path
+ d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" />
+ </svg>
+ </button>
+ <input type="search" autofocus name="search" placeholder="Search for a feed!" />
+ <button type="submit" aria-label="Send">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
+ viewBox="0 0 16 16">
+ <path
+ d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
+ </svg>
+ </button>
+ </div>
+ </form>
+</main>
{{ end }}
\ No newline at end of file
blob - 5d28b006bc0515bf54ae1cbe2a900c7ad8e8dbf0
blob + 39749279091d48abfe5dcdffa92cce61467fd397
--- web/favicon.svg
+++ web/favicon.svg
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 100 100"><rect width="100" height="100" rx="20" fill="#ee8695"></rect><path fill="#fff" d="M12.17 68.20L6.66 68.20L6.66 31.80L18.57 31.80Q22.83 31.80 25.61 33.26Q28.39 34.71 29.77 37.18Q31.15 39.65 31.15 42.77L31.15 42.77Q31.15 46.31 29.36 49.04Q27.56 51.77 23.87 53.02L23.87 53.02L31.51 68.20L25.12 68.20L18.15 53.80L12.17 53.80L12.17 68.20ZM12.17 36.74L12.17 48.80L18.25 48.80Q22.00 48.80 23.74 47.14Q25.48 45.48 25.48 42.77L25.48 42.77Q25.48 40.02 23.77 38.38Q22.05 36.74 18.20 36.74L18.20 36.74L12.17 36.74ZM49.92 68.82L49.92 68.82Q46.07 68.82 43.19 67.42Q40.30 66.02 38.66 63.42Q37.03 60.82 36.97 57.23L36.97 57.23L42.80 57.23Q42.85 59.98 44.70 61.93Q46.54 63.88 49.87 63.88L49.87 63.88Q52.94 63.88 54.65 62.45Q56.37 61.02 56.37 58.74L56.37 58.74Q56.37 56.81 55.36 55.54Q54.34 54.26 52.21 53.25Q50.08 52.24 46.70 51.14L46.70 51.14Q42.17 49.69 40.04 47.11Q37.91 44.54 37.91 40.80L37.91 40.80Q37.91 36.48 41.03 33.83Q44.15 31.18 49.61 31.18L49.61 31.18Q54.91 31.18 58.14 33.91Q61.36 36.64 61.47 41.47L61.47 41.47L55.59 41.47Q55.59 40.17 54.86 38.95Q54.13 37.73 52.78 36.92Q51.43 36.12 49.45 36.12L49.45 36.12Q47.01 36.06 45.35 37.29Q43.68 38.51 43.68 40.59L43.68 40.59Q43.68 43.14 45.71 44.57Q47.74 46.00 52.31 47.50L52.31 47.50Q55.17 48.44 57.38 49.77Q59.59 51.09 60.87 53.15Q62.14 55.20 62.14 58.37L62.14 58.37Q62.14 61.28 60.69 63.65Q59.23 66.02 56.50 67.42Q53.77 68.82 49.92 68.82ZM81.12 68.82L81.12 68.82Q77.27 68.82 74.39 67.42Q71.50 66.02 69.86 63.42Q68.23 60.82 68.17 57.23L68.17 57.23L74.00 57.23Q74.05 59.98 75.90 61.93Q77.74 63.88 81.07 63.88L81.07 63.88Q84.14 63.88 85.85 62.45Q87.57 61.02 87.57 58.74L87.57 58.74Q87.57 56.81 86.56 55.54Q85.54 54.26 83.41 53.25Q81.28 52.24 77.90 51.14L77.90 51.14Q73.37 49.69 71.24 47.11Q69.11 44.54 69.11 40.80L69.11 40.80Q69.11 36.48 72.23 33.83Q75.35 31.18 80.81 31.18L80.81 31.18Q86.11 31.18 89.34 33.91Q92.56 36.64 92.67 41.47L92.67 41.47L86.79 41.47Q86.79 40.17 86.06 38.95Q85.33 37.73 83.98 36.92Q82.63 36.12 80.65 36.12L80.65 36.12Q78.21 36.06 76.55 37.29Q74.88 38.51 74.88 40.59L74.88 40.59Q74.88 43.14 76.91 44.57Q78.94 46.00 83.51 47.50L83.51 47.50Q86.37 48.44 88.58 49.77Q90.79 51.09 92.07 53.15Q93.34 55.20 93.34 58.37L93.34 58.37Q93.34 61.28 91.89 63.65Q90.43 66.02 87.70 67.42Q84.97 68.82 81.12 68.82Z"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="white" viewBox="0 0 16 16">
+ <path
+ d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1 0-2m0 4a6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1 0-2m.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" />
+</svg>
\ No newline at end of file
blob - 438ab5ca5437aa9776fed711062553da4c7ba2fc
blob + 0e3fc5cd71bb2ec1a5d69217b25c73b56989547f
--- web/style.css
+++ web/style.css
--white: #c8c8c8;
--peach: #fbbbad;
--pink: #ee8695;
- --blue: #468fb9;
- --dark-blue: #333f58;
+ --blue: #57c2ff;
+ --dark-blue: #468fb9;
--black: #292831;
}
flex-direction: column;
}
+h1, h2, h3, h4, h5, h6, p {
+ margin-top: 0;
+}
+
a {
text-decoration: none;
cursor: pointer;
color: var(--peach);
}
-a:hover {
- text-decoration: underline;
-}
-
header {
margin: 2rem;
display: flex;
justify-content: end;
+ display: flex;
+ align-items: center;
+
+ a.logo {
+ color: white;
+ line-height: 0;
+ margin-right: auto;
+
+ &:focus, &:hover {
+ color: var(--blue);
+ }
+ }
+
+ a.link {
+ background-color: white;
+ color: var(--black);
+ padding: .3rem .8rem;
+ border-radius: 25px;
+ font-size: 0.9em;
+ border: solid 2px white;
+
+ &:focus, &:hover {
+ background-color: var(--blue);
+ border-color: var(--blue);
+ }
+
+ &.holo {
+ background-color: transparent;
+ color: white;
+
+ &:focus, &:hover {
+ color: var(--blue);
+ border-color: var(--blue);
+ }
+ }
+ }
}
main {
flex: 1;
padding: 1rem;
+
+ &.search-area {
+ margin: 0 auto;
+ width: 100%;
+ max-width: 700px;
+ }
}
footer {
margin: 2rem;
}
+@keyframes rolling-text {
+ 0% {
+ transform-origin: bottom center;
+ transform: rotateX(90deg);
+ opacity: 0;
+ }
+
+ 10% {
+ transform: rotateX(0deg);
+ opacity: 1;
+ }
+
+ 90% {
+ transform-origin: top center;
+ transform: rotateX(0deg);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: rotateX(-90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rolling-text-end {
+ 0% {
+ transform-origin: bottom center;
+ transform: rotateX(90deg);
+ opacity: 0;
+ }
+
+ 10% {
+ transform: rotateX(0deg);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: rotateX(0deg);
+ opacity: 1;
+ }
+}
+
+hgroup.search-animation {
+ transition: height 300ms;
+ overflow-y: hidden;
+ height: 15rem;
+
+ &.results {
+ height: 0;
+ }
+
+ h1 {
+ margin-top: 7rem;
+ color: white;
+ margin-bottom: 1rem;
+ }
+
+ .text-stack {
+ position: relative;
+ width: 100%;
+
+ h3 {
+ margin-bottom: 2rem;
+ display: inline-block;
+ animation: rolling-text 2s ease-out forwards;
+ opacity: 0;
+ position: absolute;
+ left: 0;
+
+ &:nth-child(1) {
+ position: unset;
+ }
+
+ &:nth-child(2) {
+ animation-delay: 2s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 4s;
+ }
+
+ &:nth-child(4) {
+ animation-delay: 6s;
+ }
+
+ &:nth-child(5) {
+ animation-name: rolling-text-end;
+ animation-delay: 8s;
+ animation-range-end: 50%;
+ }
+ }
+
+ }
+
+}
+
.search-box {
background-color: #212024;
border-radius: 100px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
display: flex;
align-items: center;
- max-width: 640px;
- margin: 20vh auto;
- transition: margin 300ms;
- &.results {
- margin: 0 auto;
- }
-
input {
all: unset;
width: 100%;
button {
all: unset;
cursor: pointer;
- color: var(--blue);
+ color: white;
line-height: 0;
padding: 0.6rem;
}
button:focus, button:hover {
- color: white;
+ color: var(--blue);
}
}
\ No newline at end of file
blob - /dev/null
blob + e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 (mode 644)
