Merge pull request #304 from jpa-perl/add-2024-hakodate

Add 2024 hakodate

2024hakodate/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+*.log
+.parcel-cache/

2024hakodate/.parcelrc

@@ -0,0 +1,13 @@
+	{
+		"extends": [
+			"@parcel/config-default"
+		],
+		"transformers": {
+			"*.ejs": [
+				"parcel-transformer-ejs"
+			],
+			"url:*": [
+				"@parcel/transformer-raw"
+			]
+		}
+	}

2024hakodate/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "tailwindcss": {}
+  }
+}

2024hakodate/README.md

@@ -0,0 +1,27 @@
+#YAPC HAKODATE 2024
+
+## セットアップ
+
+```
+yarn install
+```
+
+で、必要な node modules をインストールします。
+
+主に、EJS と Tailwind CSS を Parcel をつかってビルドしています。
+
+## HTML コーディング
+
+```
+yarn run start
+```
+
+で開発サーバが立ち上がります
+
+## ビルド
+
+```
+yarn run build
+```
+
+で `../docs/` に必要なファイルがビルドされます

2024hakodate/package.json

@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "parcel src/*.* --no-cache --public-url /2024hakodate/",
+    "build": "run-s build:clean build:parcel build:copy",
+    "build:clean": "rimraf dist && rm -rf .parcel-cache",
+    "build:parcel": "parcel build src/*.ejs --no-source-maps --dist-dir dist --public-url /2024hakodate/",
+    "build:copy": "rimraf ../docs/2024hakodate && cp -a ./dist/ ../docs/2024hakodate"
+  },
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "parcel": "^2.9.3",
+    "parcel-transformer-ejs": "^1.0.1",
+    "postcss": "^8.4.28",
+    "rimraf": "^5.0.1",
+    "tailwindcss": "^3.3.3"
+  },
+  "dependencies": {
+    "lottie-web": "^5.12.2",
+    "shuffle-text": "^0.4.0"
+  }
+}

2024hakodate/src/css/style.css

@@ -0,0 +1,269 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-display {
+    font-family: "Chakra Petch", sans-serif;
+    font-weight: 700;
+    font-style: italic;
+  }
+  .text-display-medium {
+    font-family: "Chakra Petch", sans-serif;
+    font-weight: 500;
+    font-style: italic;
+  }
+  .text-mono {
+    font-family: "IBM Plex Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  .tri-left,
+  .tri-right {
+    position: relative;
+  }
+
+  .tri-left::before,
+  .tri-right::after {
+    content: "";
+    position: absolute;
+    height: 100%;
+    display: block;
+    aspect-ratio: 1;
+    background: url("../images/tri_right.svg") no-repeat;
+    background-size: cover;
+  }
+
+  .tri-right::after {
+    right: 0;
+    transform: translateX(100%);
+    background-image: url("../images/tri_right.svg");
+  }
+
+  .tri-left::before {
+    left: 0;
+    transform: translateX(-100%);
+    background-image: url("../images/tri_left.svg");
+  }
+}
+
+@layer base {
+  a {
+    @apply underline;
+  }
+}
+
+.hero {
+  @apply relative text-display  h-5/6;
+
+  &:before {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    width: 100%;
+    height: 5%;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 1) 100%
+    );
+  }
+}
+
+.heroBgAnim {
+  filter: brightness(0) blur(2px);
+  animation: blurIn 1s;
+  animation-fill-mode: forwards;
+}
+
+#heroBanner {
+  @apply absolute bottom-0 right-0 text-nowrap z-10;
+  translate: 150%;
+  transition: translate 0.2s ease-out;
+  will-change: translate;
+}
+
+#heroBanner.anim {
+  translate: 0%;
+}
+
+#heroLogo {
+  @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full sm:w-auto;
+}
+
+.sectionHeader {
+  @apply text-center;
+  h2 {
+    @apply text-3xl sm:text-5xl md:text-6xl font-bold text-display;
+  }
+
+  position: relative;
+  display: grid;
+  grid-template-columns: auto max-content auto;
+  gap: 0.3em;
+
+  &::before,
+  &::after {
+    @apply bg-key;
+    content: "";
+    background-repeat: no-repeat;
+    background-size: contain;
+    transition: scale 0.2s ease-out;
+    scale: 0 1;
+  }
+
+  &::before {
+    left: 0;
+    background-image: url("../images/tri_right_black.svg");
+    background-position: right;
+    transform-origin: left;
+  }
+
+  &::after {
+    background-image: url("../images/tri_left_black.svg");
+    right: 0;
+    transform-origin: right;
+  }
+
+  &.inView::before,
+  &.inView::after {
+    scale: 1 1;
+  }
+}
+
+.topText {
+  @apply opacity-0 container mx-auto;
+
+  .heroAnimDone & {
+    animation: fadeIn 0.5s ease-in-out;
+    animation-fill-mode: forwards;
+  }
+}
+
+.messageMain {
+  @apply text-3xl sm:text-5xl my-5;
+  opacity: 0;
+
+  &.inView {
+    animation: messageMain 0.5s cubic-bezier(0.82, 0, 0.67, 1.55);
+    animation-fill-mode: forwards;
+  }
+}
+
+.messageSkewedBg {
+  @apply inline-block relative py-4 px-3;
+
+  &:after {
+    @apply bg-key;
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: skewX(-45deg);
+    z-index: -1;
+  }
+}
+
+.uline {
+  @apply relative;
+  display: inline-block;
+
+  &::before {
+    @apply bg-key;
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0.2em;
+  }
+}
+
+.fadeIn {
+  opacity: 0;
+  &.inView {
+    animation: fadeIn 0.3s ease-in;
+    animation-delay: 0.1s;
+    animation-fill-mode: forwards;
+  }
+}
+
+.announcement {
+  @apply my-10 mx-auto p-6 text-xl sm:text-3xl lg:w-3/4 font-bold leading-relaxed text-display;
+
+  & > div {
+    @apply py-2 mb-2;
+
+    dt {
+      @apply text-mono text-lg block p-2;
+      background: #121212;
+    }
+
+    dd {
+      @apply p-2;
+      background: #191919;
+
+      a {
+        @apply no-underline relative;
+
+        &:before {
+          @apply absolute bottom-0 left-0 w-full h-[0.1em] bg-key;
+          content: "";
+          transform: scaleX(0);
+          transform-origin: left;
+          transition: transform 0.1s ease-out;
+        }
+
+        &:hover:before {
+          transform: scaleX(1);
+        }
+
+        &[href^="http"] {
+          &:after {
+            @apply not-italic;
+            font-size: 0.8em;
+            line-height: 1;
+            -webkit-font-feature-settings: "liga";
+            font-family: "Material Symbols Outlined";
+            content: "\e89e";
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes blurIn {
+  0% {
+    opacity: 0;
+    filter: blur(4px);
+    scale: 1.3;
+  }
+  100% {
+    opacity: 0.8;
+    filter: blur(0px);
+    scale: 1;
+  }
+}
+
+@keyframes messageMain {
+  0% {
+    translate: -20%;
+    rotate: 0deg;
+  }
+  100% {
+    opacity: 1;
+    translate: 0;
+    rotate: -2deg;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}