commit 3264b36f03093c37bef56acc81c3ad628c6e5849 · knotbin.com/blog

.gitignore

···

       9
       9
        
       _fresh/

     

       10
       10
        
       # npm dependencies

     

       11
       11
        
       node_modules/

     

       12
       12
       +
       **/.DS_Store

+2 -9

deno.json

···

       9
       9
        
           "preview": "deno run -A main.ts",

     

       10
       10
        
           "update": "deno run -A -r https://fresh.deno.dev/update ."

     

       11
       11
        
         },

     

       12
       12
       -
         "lint": {

     

       13
       13
       -
           "rules": {

     

       14
       14
       -
             "tags": ["fresh", "recommended"]

     

       15
       15
       -
           }

     

       16
       16
       -
         },

     

       12
       12
       +
         "lint": { "rules": { "tags": ["fresh", "recommended"] } },

     

       17
       13
        
         "exclude": ["**/_fresh/*"],

     

       18
       14
        
         "imports": {

     

       19
       15
        
           "$fresh/": "https://deno.land/x/fresh@1.7.3/",

     
···

       34
       30
        
           "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",

     

       35
       31
        
           "$std/": "https://deno.land/std@0.216.0/"

     

       36
       32
        
         },

     

       37
       37
       -
         "compilerOptions": {

     

       38
       38
       -
           "jsx": "react-jsx",

     

       39
       39
       -
           "jsxImportSource": "preact"

     

       40
       40
       -
         },

     

       33
       33
       +
         "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },

     

       41
       34
        
         "nodeModulesDir": "auto"

     

       42
       35
        
       }

+99 -99

static/styles.css

···

       1
       1
       -
       @import url("https://api.fonts.coollabs.io/css2?family=Inter:wght@400;700&display=swap");

     

       2
       2
       -
       @import url("https://api.fonts.coollabs.io/css2?family=Libre+Bodoni:ital,wght@0,400;0,700;1,400&display=swap");

     

       1
       1
       +
       @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

     

       2
       2
       +
       @import url("https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap");

     

       3
       3
        
       @font-face {

     

       4
       4
       -
         font-family: "Berkeley Mono";

     

       5
       5
       -
         src:

     

       6
       6
       -
           url("/path/to/local/fonts/BerkeleyMono-Regular.woff2") format("woff2"),

     

       7
       7
       -
           url("/path/to/local/fonts/BerkeleyMono-Regular.woff") format("woff");

     

       8
       8
       -
         font-weight: 400;

     

       9
       9
       -
         font-style: normal;

     

       4
       4
       +
           font-family: "Berkeley Mono";

     

       5
       5
       +
           src:

     

       6
       6
       +
               url("/path/to/local/fonts/BerkeleyMono-Regular.woff2") format("woff2"),

     

       7
       7
       +
               url("/path/to/local/fonts/BerkeleyMono-Regular.woff") format("woff");

     

       8
       8
       +
           font-weight: 400;

     

       9
       9
       +
           font-style: normal;

     

       10
       10
        
       }

     

       11
       11
        
       

     

       12
       12
        
       @tailwind base;

     
···

       14
       14
        
       @tailwind utilities;

     

       15
       15
        
       

     

       16
       16
        
       @theme inline {

     

       17
       17
       -
         --color-background: var(--background);

     

       18
       18
       -
         --color-foreground: var(--foreground);

     

       17
       17
       +
           --color-background: var(--background);

     

       18
       18
       +
           --color-foreground: var(--foreground);

     

       19
       19
        
       }

     

       20
       20
        
       

     

       21
       21
        
       :root {

     

       22
       22
       -
         --font-sans: "Inter", sans-serif;

     

       23
       23
       -
         --font-serif: "Libre Bodoni", serif;

     

       24
       24
       -
         --font-mono: "Berkeley Mono", monospace;

     

       22
       22
       +
           --font-sans: "Inter", sans-serif;

     

       23
       23
       +
           --font-serif: "Libre Bodoni", serif;

     

       24
       24
       +
           --font-mono: "Berkeley Mono", monospace;

     

       25
       25
        
       }

     

       26
       26
        
       

     

       27
       27
        
       .font-sans {

     

       28
       28
       -
         font-family: var(--font-sans);

     

       28
       28
       +
           font-family: var(--font-sans);

     

       29
       29
        
       }

     

       30
       30
        
       .font-serif {

     

       31
       31
       -
         font-family: var(--font-serif);

     

       31
       31
       +
           font-family: var(--font-serif);

     

       32
       32
        
       }

     

       33
       33
        
       .font-mono {

     

       34
       34
       -
         font-family: var(--font-mono);

     

       34
       34
       +
           font-family: var(--font-mono);

     

       35
       35
        
       }

     

       36
       36
        
       .font-serif-italic {

     

       37
       37
       -
         font-family: var(--font-serif);

     

       38
       38
       -
         font-style: italic;

     

       37
       37
       +
           font-family: var(--font-serif);

     

       38
       38
       +
           font-style: italic;

     

       39
       39
        
       }

     

       40
       40
        
       

     

       41
       41
        
       /*

     
···

       47
       47
        
         color utility to any element that depends on these defaults.

     

       48
       48
        
       */

     

       49
       49
        
       @layer base {

     

       50
       50
       -
         *,

     

       51
       51
       -
         ::after,

     

       52
       52
       -
         ::before,

     

       53
       53
       -
         ::backdrop,

     

       54
       54
       -
         ::file-selector-button {

     

       55
       55
       -
           border-color: var(--color-gray-200, currentColor);

     

       56
       56
       -
         }

     

       50
       50
       +
           *,

     

       51
       51
       +
           ::after,

     

       52
       52
       +
           ::before,

     

       53
       53
       +
           ::backdrop,

     

       54
       54
       +
           ::file-selector-button {

     

       55
       55
       +
               border-color: var(--color-gray-200, currentColor);

     

       56
       56
       +
           }

     

       57
       57
        
       }

     

       58
       58
        
       

     

       59
       59
        
       @utility text-balance {

     

       60
       60
       -
         text-wrap: balance;

     

       60
       60
       +
           text-wrap: balance;

     

       61
       61
        
       }

     

       62
       62
        
       

     

       63
       63
        
       @layer utilities {

     

       64
       64
       -
         :root {

     

       65
       65
       -
           --background: #ffffff;

     

       66
       66
       -
           --foreground: #171717;

     

       67
       67
       -
         }

     

       68
       68
       -
       

     

       69
       69
       -
         @media (prefers-color-scheme: dark) {

     

       70
       64
        
           :root {

     

       71
       71
       -
             --background: #0a0a0a;

     

       72
       72
       -
             --foreground: #ededed;

     

       65
       65
       +
               --background: #ffffff;

     

       66
       66
       +
               --foreground: #171717;

     

       73
       67
        
           }

     

       74
       74
       -
         }

     

       75
       68
        
       

     

       76
       76
       -
         body {

     

       77
       77
       -
           color: var(--foreground);

     

       78
       78
       -
           background: var(--background);

     

       79
       79
       -
           font-family: var(--font-sans);

     

       80
       80
       -
         }

     

       69
       69
       +
           @media (prefers-color-scheme: dark) {

     

       70
       70
       +
               :root {

     

       71
       71
       +
                   --background: #0a0a0a;

     

       72
       72
       +
                   --foreground: #ededed;

     

       73
       73
       +
               }

     

       74
       74
       +
           }

     

       81
       75
        
       

     

       82
       82
       -
         @keyframes marquee {

     

       83
       83
       -
           0% {

     

       84
       84
       -
             opacity: 0;

     

       85
       85
       -
             transform: translateX(0px);

     

       86
       86
       -
           }

     

       87
       87
       -
           2% {

     

       88
       88
       -
             opacity: 0.075;

     

       89
       89
       -
           }

     

       90
       90
       -
           98% {

     

       91
       91
       -
             opacity: 0.075;

     

       92
       92
       -
           }

     

       93
       93
       -
           100% {

     

       94
       94
       -
             opacity: 0;

     

       95
       95
       -
             transform: translateX(-4000px);

     

       76
       76
       +
           body {

     

       77
       77
       +
               color: var(--foreground);

     

       78
       78
       +
               background: var(--background);

     

       79
       79
       +
               font-family: var(--font-sans);

     

       96
       80
        
           }

     

       97
       97
       -
         }

     

       98
       81
        
       

     

       99
       99
       -
         @keyframes fadeIn {

     

       100
       100
       -
           0% {

     

       101
       101
       -
             opacity: 0;

     

       102
       102
       -
           }

     

       103
       103
       -
           100% {

     

       104
       104
       -
             opacity: 1;

     

       82
       82
       +
           @keyframes marquee {

     

       83
       83
       +
               0% {

     

       84
       84
       +
                   opacity: 0;

     

       85
       85
       +
                   transform: translateX(0px);

     

       86
       86
       +
               }

     

       87
       87
       +
               2% {

     

       88
       88
       +
                   opacity: 0.075;

     

       89
       89
       +
               }

     

       90
       90
       +
               98% {

     

       91
       91
       +
                   opacity: 0.075;

     

       92
       92
       +
               }

     

       93
       93
       +
               100% {

     

       94
       94
       +
                   opacity: 0;

     

       95
       95
       +
                   transform: translateX(-4000px);

     

       96
       96
       +
               }

     

       105
       97
        
           }

     

       106
       106
       -
         }

     

       107
       98
        
       

     

       108
       108
       -
         @keyframes fadeOut {

     

       109
       109
       -
           0% {

     

       110
       110
       -
             opacity: 1;

     

       99
       99
       +
           @keyframes fadeIn {

     

       100
       100
       +
               0% {

     

       101
       101
       +
                   opacity: 0;

     

       102
       102
       +
               }

     

       103
       103
       +
               100% {

     

       104
       104
       +
                   opacity: 1;

     

       105
       105
       +
               }

     

       111
       106
        
           }

     

       112
       112
       -
           100% {

     

       113
       113
       -
             opacity: 0;

     

       107
       107
       +
       

     

       108
       108
       +
           @keyframes fadeOut {

     

       109
       109
       +
               0% {

     

       110
       110
       +
                   opacity: 1;

     

       111
       111
       +
               }

     

       112
       112
       +
               100% {

     

       113
       113
       +
                   opacity: 0;

     

       114
       114
       +
               }

     

       114
       115
        
           }

     

       115
       115
       -
         }

     

       116
       116
        
       

     

       117
       117
       -
         .animate-marquee {

     

       118
       118
       -
           animation: marquee 30s linear infinite;

     

       119
       119
       -
           font-size: 100vh;

     

       120
       120
       -
           line-height: 0.8;

     

       121
       121
       -
           height: 100vh;

     

       122
       122
       -
           display: flex;

     

       123
       123
       -
           align-items: center;

     

       124
       124
       -
         }

     

       117
       117
       +
           .animate-marquee {

     

       118
       118
       +
               animation: marquee 30s linear infinite;

     

       119
       119
       +
               font-size: 100vh;

     

       120
       120
       +
               line-height: 0.8;

     

       121
       121
       +
               height: 100vh;

     

       122
       122
       +
               display: flex;

     

       123
       123
       +
               align-items: center;

     

       124
       124
       +
           }

     

       125
       125
        
       

     

       126
       126
       -
         .animate-fade-in {

     

       127
       127
       -
           animation: fadeIn 0.3s ease-in-out forwards;

     

       128
       128
       -
         }

     

       126
       126
       +
           .animate-fade-in {

     

       127
       127
       +
               animation: fadeIn 0.3s ease-in-out forwards;

     

       128
       128
       +
           }

     

       129
       129
        
       

     

       130
       130
       -
         .animate-fade-out {

     

       131
       131
       -
           animation: fadeOut 0.3s ease-in-out forwards;

     

       132
       132
       -
         }

     

       130
       130
       +
           .animate-fade-out {

     

       131
       131
       +
               animation: fadeOut 0.3s ease-in-out forwards;

     

       132
       132
       +
           }

     

       133
       133
        
       }

     

       134
       134
        
       

     

       135
       135
        
       .diagonal-pattern {

     

       136
       136
       -
         background-color: transparent;

     

       137
       137
       -
         background: repeating-linear-gradient(

     

       138
       138
       -
           -45deg,

     

       139
       139
       -
           #000000,

     

       140
       140
       -
           #000000 4px,

     

       141
       141
       -
           transparent 4px,

     

       142
       142
       -
           transparent 10px

     

       143
       143
       -
         );

     

       136
       136
       +
           background-color: transparent;

     

       137
       137
       +
           background: repeating-linear-gradient(

     

       138
       138
       +
               -45deg,

     

       139
       139
       +
               #000000,

     

       140
       140
       +
               #000000 4px,

     

       141
       141
       +
               transparent 4px,

     

       142
       142
       +
               transparent 10px

     

       143
       143
       +
           );

     

       144
       144
        
       }

     

       145
       145
        
       

     

       146
       146
        
       @media (prefers-color-scheme: dark) {

     

       147
       147
       -
         .diagonal-pattern {

     

       148
       148
       -
           background: repeating-linear-gradient(

     

       149
       149
       -
             -45deg,

     

       150
       150
       -
             #ffffff,

     

       151
       151
       -
             #ffffff 4px,

     

       152
       152
       -
             transparent 4px,

     

       153
       153
       -
             transparent 10px

     

       154
       154
       -
           );

     

       155
       155
       -
         }

     

       147
       147
       +
           .diagonal-pattern {

     

       148
       148
       +
               background: repeating-linear-gradient(

     

       149
       149
       +
                   -45deg,

     

       150
       150
       +
                   #ffffff,

     

       151
       151
       +
                   #ffffff 4px,

     

       152
       152
       +
                   transparent 4px,

     

       153
       153
       +
                   transparent 10px

     

       154
       154
       +
               );

     

       155
       155
       +
           }

     

       156
       156
        
       }