getatopic · geminic · Mar 27, 2021 · Mar 28, 2021 · Mar 28, 2021 · Mar 28, 2021
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,9 @@
+# Поддерживаемые браузеры (для Autoprefixer и Babel)
+
+chrome >= 87
+ff >= 83
+safari >= 13
+edge >= 87
+android >= 7
+ios >= 14.0
+ie 11
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+.vercel
+.DS_Store
+.cache
+dist
+node_modules
diff --git a/favicon.ico b/favicon.ico
diff --git a/img/favicon.png b/img/favicon.png
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+    "name": "getatopic",
+    "version": "1.0.0",
+    "main": "index.html",
+    "repository": "https://github.com/lsvs/getatopic.git",
+    "author": "Sergey Kozlov (https://sergeykozlov.me) & Sergey Lisovskiy <lisovskiyserj@gmail.com>",
+    "license": "MIT",
+    "devDependencies": {
+        "parcel-bundler": "^1.12.5",
+        "rimraf": "^3.0.2"
+    },
+    "scripts": {
+        "dev": "rimraf dist && parcel src/index.html",
+        "build": "rimraf dist && parcel build src/index.html --no-source-maps"
+    }
+}
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/font/Sporting_Grotesque-Bold_web.woff b/src/font/Sporting_Grotesque-Bold_web.woff
diff --git a/src/img/favicon.png b/src/img/favicon.png
diff --git a/src/img/og.png b/src/img/og.png
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
+        <title>Get a topic</title>
+        <meta property="og:title" content="Get a topic" />
+        <meta property="og:description" content="Random topics to duscuss in English." />
+        <meta property="og:image" content="./img/og.png" />
+        <meta property="og:url" content="/" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <link rel="icon" type="image/png" href="./img/favicon.png" />
+        <link rel="stylesheet" href="./styles.css">
+    </head>
+
+    <body>
+        <div class="menu text">
+            <a href="/" class="active">Get a Topic</a>
+            <a href="/taboo.html">Taboo</a>
+        </div>
+        <div class="container aic js-random">
+            <div class="topic js-topic">
+                <span class="mask">
+                    <span class="word" style="line-height: 1.25em; transition-delay: 0.2s">Hi</span>
+                </span>
+                <span class="mask">
+                    <span class="word" style="line-height: 1.25em; transition-delay: 0.25s">✌️</span>
+                </span>
+            </div>
+
+            <div class="helper text">
+                <span class="click">Click</span> <span>anywhere for the next random topic</span>
+            </div>
+        </div>
+
+        <script src='./topic.js'></script>
+    </body>
+</html>
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,235 @@
+@font-face {
+    font-family: "Sporting Grotesque";
+    src: url("./font/Sporting_Grotesque-Bold_web.woff") format("woff");
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    color: #111;
+    background: #fff;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+}
+
+.text {
+    font-family: sans-serif;
+    font-size: 13px;
+    text-transform: uppercase;
+}
+
+.menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    display: flex;
+    padding: 1vh;
+}
+
+.menu::after {
+    content: "•••";
+    display: block;
+    padding: 0 3vh 0 1.5vh;
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.menu:hover a {
+    opacity: 1;
+    visibility: visible;
+    transform: translate3d(0, 0, 0);
+}
+
+.menu a {
+    color: #111;
+    padding: 3vh 1.5vh;
+    background-color: #fff;
+    transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;
+    opacity: 0;
+    visibility: hidden;
+    transform: translate3d(10px, 0, 0);
+    text-decoration: none;
+    position: relative;
+}
+
+.menu a:nth-child(2) {
+    transition-delay: 0.05s;
+}
+
+.menu a::after {
+    content: "";
+    position: absolute;
+    bottom: 2vh;
+    left: 0;
+    right: 0;
+    top: 2vh;
+    background-color: #111;
+    opacity: 0;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform: scale(0.9);
+    border-radius: 100px;
+}
+
+.menu a:hover {
+    transition: transform 0.3s ease-in, opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.menu a:hover::after,
+.menu a.active::after {
+    transform: scale(1);
+    opacity: 0.05;
+}
+
+.container {
+    height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.aic {
+    align-items: center;
+}
+
+.topic {
+    width: 75vw;
+    font-size: 4.5vw;
+    font-family: "Sporting Grotesque", serif;
+    line-height: 1.15em;
+    letter-spacing: -0.02em;
+}
+
+.helper {
+    text-align: center;
+    position: fixed;
+    bottom: 4vh;
+    left: 5vw;
+    width: 90vw;
+}
+
+.helper span {
+    display: inline-block;
+    position: relative;
+    transform: scale(1);
+}
+
+.click {
+    transition: transform 0.5s ease;
+}
+
+.mask {
+    overflow: hidden;
+}
+
+span.mask {
+    display: inline-flex;
+}
+
+.word {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    display: inline-flex;
+}
+
+._is-animated .word {
+    transform: translate3d(0, 250%, 0) rotate(15deg);
+}
+
+.container:active .click {
+    transform: scale(0.8);
+    transition-duration: 0.1s;
+}
+
+/** taboo **/
+
+.taboo {
+    width: 75vw;
+    font-size: 6.5vw;
+    font-family: "Sporting Grotesque", serif;
+    line-height: 1.15em;
+    letter-spacing: -0.02em;
+    margin-top: 1em;
+}
+
+.card__word {
+    margin-bottom: 0.5em;
+    text-transform: capitalize;
+}
+
+.card__list {
+    list-style: none;
+    font-size: 0.3em;
+    margin: 0;
+    padding: 0;
+    line-height: 1.75em;
+}
+
+.card__list .word {
+    position: relative;
+}
+
+.card__list .word::after {
+    content: "";
+    position: absolute;
+    top: 47%;
+    left: -0.75vw;
+    right: -0.75vw;
+    height: 1px;
+    background: #000;
+    transform-origin: left;
+    transform: scalex(1);
+    transition: transform 0.3s ease;
+    opacity: 0.5;
+}
+.card__list .mask:nth-child(1) .word::after {
+    transition-delay: 0.8s;
+}
+.card__list .mask:nth-child(2) .word::after {
+    transition-delay: 0.9s;
+}
+.card__list .mask:nth-child(3) .word::after {
+    transition-delay: 1s;
+}
+.card__list .mask:nth-child(4) .word::after {
+    transition-delay: 1.1s;
+}
+.card__list .mask:nth-child(5) .word::after {
+    transition-delay: 1.2s;
+}
+.card__list .mask:nth-child(6) .word::after {
+    transition-delay: 1.3s;
+}
+.card__list .mask:nth-child(7) .word::after {
+    transition-delay: 1.4s;
+}
+.card__list .mask:nth-child(8) .word::after {
+    transition-delay: 1.5s;
+}
+.card__list .mask:nth-child(9) .word::after {
+    transition-delay: 1.6s;
+}
+
+._is-animated .card__list .word::after {
+    transform: scalex(0);
+}
+
+@media (max-width: 767px) {
+    .topic {
+        width: 90vw;
+        font-size: 8vw;
+    }
+
+    .helper {
+        font-size: 11px;
+    }
+}