commit ee68be761af0b3a6ecb497380a0df24910ea4d4d · dunkirk.sh/unduckified

+3 -3

.prettierrc

···

       1
        
       {

     

       2
       -
         "useTabs": true,

     

       3
       -
         "singleQuote": false,

     

       4
       -
         "tabWidth": 2

     

       5
        
       }

···

       1
        
       {

     

       2
       +
       	"useTabs": true,

     

       3
       +
       	"singleQuote": false,

     

       4
       +
       	"tabWidth": 2

     

       5
        
       }

+1 -2

LICENSE.md

···

       1
       -
       The MIT License (MIT)

     

       2
       -
       =====================

     

       3
        
       

     

       4
        
       Copyright © `2025` `Kieran Klukas`

     

       5

···

       1
       +
       # The MIT License (MIT)

     

       0
        
       
     

       2
        
       

     

       3
        
       Copyright © `2025` `Kieran Klukas`

     

       4

+36 -36

index.html

···

       1
        
       <!doctype html>

     

       2
        
       <html lang="en">

     

       3
       -
           <head>

     

       4
       -
               <meta charset="UTF-8" />

     

       5
       -
               <link rel="icon" type="image/svg+xml" href="/search.svg" />

     

       6
       -
               <link

     

       7
       -
                   rel="preconnect"

     

       8
       -
                   href="https://fonts.googleapis.com"

     

       9
       -
                   crossorigin="anonymous"

     

       10
       -
               />

     

       11
       -
               <link

     

       12
       -
                   rel="preconnect"

     

       13
       -
                   href="https://fonts.gstatic.com"

     

       14
       -
                   crossorigin="anonymous"

     

       15
       -
               />

     

       16
       -
               <link

     

       17
       -
                   rel="preload"

     

       18
       -
                   as="style"

     

       19
       -
                   href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"

     

       20
       -
               />

     

       21
       -
               <link

     

       22
       -
                   rel="stylesheet"

     

       23
       -
                   href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"

     

       24
       -
                   media="print"

     

       25
       -
                   onload="this.media='all'"

     

       26
       -
               />

     

       27
       -
               <link rel="stylesheet" href="/global.css" />

     

       28
       -
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       29
       -
               <title>Unduck</title>

     

       30
       -
               <meta

     

       31
       -
                   name="description"

     

       32
       -
                   content="A better default search engine (with bangs!)"

     

       33
       -
               />

     

       34
       -
           </head>

     

       35
       -
           <body>

     

       36
       -
               <div id="app"></div>

     

       37
       -
               <script type="module" src="/src/main.ts"></script>

     

       38
       -
           </body>

     

       39
        
       </html>

···

       1
        
       <!doctype html>

     

       2
        
       <html lang="en">

     

       3
       +
       	<head>

     

       4
       +
       		<meta charset="UTF-8" />

     

       5
       +
       		<link rel="icon" type="image/svg+xml" href="/search.svg" />

     

       6
       +
       		<link

     

       7
       +
       			rel="preconnect"

     

       8
       +
       			href="https://fonts.googleapis.com"

     

       9
       +
       			crossorigin="anonymous"

     

       10
       +
       		/>

     

       11
       +
       		<link

     

       12
       +
       			rel="preconnect"

     

       13
       +
       			href="https://fonts.gstatic.com"

     

       14
       +
       			crossorigin="anonymous"

     

       15
       +
       		/>

     

       16
       +
       		<link

     

       17
       +
       			rel="preload"

     

       18
       +
       			as="style"

     

       19
       +
       			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"

     

       20
       +
       		/>

     

       21
       +
       		<link

     

       22
       +
       			rel="stylesheet"

     

       23
       +
       			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"

     

       24
       +
       			media="print"

     

       25
       +
       			onload="this.media='all'"

     

       26
       +
       		/>

     

       27
       +
       		<link rel="stylesheet" href="/global.css" />

     

       28
       +
       		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

     

       29
       +
       		<title>Unduck</title>

     

       30
       +
       		<meta

     

       31
       +
       			name="description"

     

       32
       +
       			content="A better default search engine (with bangs!)"

     

       33
       +
       		/>

     

       34
       +
       	</head>

     

       35
       +
       	<body>

     

       36
       +
       		<div id="app"></div>

     

       37
       +
       		<script type="module" src="/src/main.ts"></script>

     

       38
       +
       	</body>

     

       39
        
       </html>

+97 -97

public/global.css

···

       2
        
       

     

       3
        
       /* Font fallback that closely matches Inter metrics */

     

       4
        
       @font-face {

     

       5
       -
           font-family: "Inter Fallback";

     

       6
       -
           size-adjust: 107%;

     

       7
       -
           ascent-override: 90%;

     

       8
       -
           src: local("Arial");

     

       9
        
       }

     

       10
        
       

     

       11
        
       :root {

     

       12
       -
           font-family:

     

       13
       -
               Inter,

     

       14
       -
               "Inter Fallback",

     

       15
       -
               system-ui,

     

       16
       -
               -apple-system,

     

       17
       -
               BlinkMacSystemFont,

     

       18
       -
               "Segoe UI",

     

       19
       -
               Roboto,

     

       20
       -
               Oxygen,

     

       21
       -
               Ubuntu,

     

       22
       -
               Cantarell,

     

       23
       -
               "Open Sans",

     

       24
       -
               "Helvetica Neue",

     

       25
       -
               sans-serif;

     

       26
       -
           font-synthesis: none;

     

       27
       -
           text-rendering: optimizeLegibility;

     

       28
       -
           -webkit-font-smoothing: antialiased;

     

       29
       -
           -moz-osx-font-smoothing: grayscale;

     

       30
        
       

     

       31
       -
           /* Light mode colors */

     

       32
       -
           --text-color: #1a1a1a;

     

       33
       -
           --text-color-secondary: #666;

     

       34
       -
           --text-color-hover: #333;

     

       35
       -
           --bg-color: #fff;

     

       36
       -
           --bg-color-secondary: #f5f5f5;

     

       37
       -
           --bg-color-hover: #f0f0f0;

     

       38
       -
           --bg-color-active: #e5e5e5;

     

       39
       -
           --border-color: #ddd;

     

       40
        
       }

     

       41
        
       

     

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

     

       43
       -
           :root {

     

       44
       -
               --text-color: #e0e0e0;

     

       45
       -
               --text-color-secondary: #999;

     

       46
       -
               --text-color-hover: #fff;

     

       47
       -
               --bg-color: #121212;

     

       48
       -
               --bg-color-secondary: #1e1e1e;

     

       49
       -
               --bg-color-hover: #2a2a2a;

     

       50
       -
               --bg-color-active: #333;

     

       51
       -
               --border-color: #444;

     

       52
       -
           }

     

       53
        
       }

     

       54
        
       

     

       55
        
       * {

     

       56
       -
           margin: 0;

     

       57
       -
           padding: 0;

     

       58
       -
           box-sizing: border-box;

     

       59
        
       }

     

       60
        
       

     

       61
        
       html,

     

       62
        
       body {

     

       63
       -
           height: 100%;

     

       64
       -
           width: 100%;

     

       65
        
       }

     

       66
        
       

     

       67
        
       body {

     

       68
       -
           line-height: 1.5;

     

       69
       -
           font-weight: 400;

     

       70
       -
           font-size: 16px;

     

       71
       -
           color: var(--text-color);

     

       72
       -
           background-color: var(--bg-color);

     

       73
        
       }

     

       74
        
       

     

       75
        
       h1,

     
···

       78
        
       h4,

     

       79
        
       h5,

     

       80
        
       h6 {

     

       81
       -
           font-weight: 600;

     

       82
       -
           line-height: 1.2;

     

       83
       -
           padding: 0.75rem;

     

       84
        
       }

     

       85
        
       

     

       86
        
       a {

     

       87
       -
           color: var(--text-color-secondary);

     

       88
        
       }

     

       89
        
       a:hover {

     

       90
       -
           color: var(--text-color-hover);

     

       91
        
       }

     

       92
        
       

     

       93
        
       button {

     

       94
       -
           font: inherit;

     

       95
       -
           border: none;

     

       96
       -
           background: none;

     

       97
       -
           cursor: pointer;

     

       98
        
       }

     

       99
        
       

     

       100
        
       input,

     

       101
        
       textarea {

     

       102
       -
           font: inherit;

     

       103
        
       }

     

       104
        
       

     

       105
        
       /* Add these new styles */

     

       106
        
       .url-container {

     

       107
       -
           display: flex;

     

       108
       -
           align-items: center;

     

       109
       -
           gap: 8px;

     

       110
       -
           margin-top: 16px;

     

       111
        
       }

     

       112
        
       

     

       113
        
       /* Add this new style */

     

       114
        
       .content-container {

     

       115
       -
           max-width: 37rem;

     

       116
       -
           text-align: center;

     

       117
       -
           padding: 0 8px;

     

       118
        
       }

     

       119
        
       

     

       120
        
       /* Update url-input width to be 100% since container will control max width */

     

       121
        
       .url-input {

     

       122
       -
           padding: 8px 12px;

     

       123
       -
           border: 1px solid var(--border-color);

     

       124
       -
           border-radius: 4px;

     

       125
       -
           width: 100%;

     

       126
       -
           background: var(--bg-color-secondary);

     

       127
       -
           color: var(--text-color);

     

       128
        
       }

     

       129
        
       

     

       130
        
       .copy-button {

     

       131
       -
           padding: 8px;

     

       132
       -
           color: var(--text-color-secondary);

     

       133
       -
           border-radius: 4px;

     

       134
       -
           transition: all 0.2s;

     

       135
       -
           display: flex;

     

       136
       -
           align-items: center;

     

       137
       -
           justify-content: center;

     

       138
        
       }

     

       139
        
       

     

       140
        
       .copy-button:hover {

     

       141
       -
           background: var(--bg-color-hover);

     

       142
        
       }

     

       143
        
       

     

       144
        
       .copy-button:active {

     

       145
       -
           background: var(--bg-color-active);

     

       146
        
       }

     

       147
        
       

     

       148
        
       .copy-button img {

     

       149
       -
           width: 20px;

     

       150
       -
           height: 20px;

     

       151
        
       }

     

       152
        
       

     

       153
        
       .copy-button.copied {

     

       154
       -
           background: #28a745;

     

       155
        
       }

     

       156
        
       

     

       157
        
       /* Add footer styles */

     

       158
        
       .footer {

     

       159
       -
           position: fixed;

     

       160
       -
           bottom: 16px;

     

       161
       -
           left: 0;

     

       162
       -
           right: 0;

     

       163
       -
           text-align: center;

     

       164
       -
           font-size: 14px;

     

       165
       -
           color: var(--text-color-secondary);

     

       166
        
       }

     

       167
        
       

     

       168
        
       .footer a {

     

       169
       -
           color: var(--text-color-secondary);

     

       170
       -
           text-decoration: none;

     

       171
       -
           font-weight: 500;

     

       172
        
       }

     

       173
        
       

     

       174
        
       .footer a:hover {

     

       175
       -
           color: var(--text-color-hover);

     

       176
        
       }

···

       2
        
       

     

       3
        
       /* Font fallback that closely matches Inter metrics */

     

       4
        
       @font-face {

     

       5
       +
       	font-family: "Inter Fallback";

     

       6
       +
       	size-adjust: 107%;

     

       7
       +
       	ascent-override: 90%;

     

       8
       +
       	src: local("Arial");

     

       9
        
       }

     

       10
        
       

     

       11
        
       :root {

     

       12
       +
       	font-family:

     

       13
       +
       		Inter,

     

       14
       +
       		"Inter Fallback",

     

       15
       +
       		system-ui,

     

       16
       +
       		-apple-system,

     

       17
       +
       		BlinkMacSystemFont,

     

       18
       +
       		"Segoe UI",

     

       19
       +
       		Roboto,

     

       20
       +
       		Oxygen,

     

       21
       +
       		Ubuntu,

     

       22
       +
       		Cantarell,

     

       23
       +
       		"Open Sans",

     

       24
       +
       		"Helvetica Neue",

     

       25
       +
       		sans-serif;

     

       26
       +
       	font-synthesis: none;

     

       27
       +
       	text-rendering: optimizeLegibility;

     

       28
       +
       	-webkit-font-smoothing: antialiased;

     

       29
       +
       	-moz-osx-font-smoothing: grayscale;

     

       30
        
       

     

       31
       +
       	/* Light mode colors */

     

       32
       +
       	--text-color: #1a1a1a;

     

       33
       +
       	--text-color-secondary: #666;

     

       34
       +
       	--text-color-hover: #333;

     

       35
       +
       	--bg-color: #fff;

     

       36
       +
       	--bg-color-secondary: #f5f5f5;

     

       37
       +
       	--bg-color-hover: #f0f0f0;

     

       38
       +
       	--bg-color-active: #e5e5e5;

     

       39
       +
       	--border-color: #ddd;

     

       40
        
       }

     

       41
        
       

     

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

     

       43
       +
       	:root {

     

       44
       +
       		--text-color: #e0e0e0;

     

       45
       +
       		--text-color-secondary: #999;

     

       46
       +
       		--text-color-hover: #fff;

     

       47
       +
       		--bg-color: #121212;

     

       48
       +
       		--bg-color-secondary: #1e1e1e;

     

       49
       +
       		--bg-color-hover: #2a2a2a;

     

       50
       +
       		--bg-color-active: #333;

     

       51
       +
       		--border-color: #444;

     

       52
       +
       	}

     

       53
        
       }

     

       54
        
       

     

       55
        
       * {

     

       56
       +
       	margin: 0;

     

       57
       +
       	padding: 0;

     

       58
       +
       	box-sizing: border-box;

     

       59
        
       }

     

       60
        
       

     

       61
        
       html,

     

       62
        
       body {

     

       63
       +
       	height: 100%;

     

       64
       +
       	width: 100%;

     

       65
        
       }

     

       66
        
       

     

       67
        
       body {

     

       68
       +
       	line-height: 1.5;

     

       69
       +
       	font-weight: 400;

     

       70
       +
       	font-size: 16px;

     

       71
       +
       	color: var(--text-color);

     

       72
       +
       	background-color: var(--bg-color);

     

       73
        
       }

     

       74
        
       

     

       75
        
       h1,

     
···

       78
        
       h4,

     

       79
        
       h5,

     

       80
        
       h6 {

     

       81
       +
       	font-weight: 600;

     

       82
       +
       	line-height: 1.2;

     

       83
       +
       	padding: 0.75rem;

     

       84
        
       }

     

       85
        
       

     

       86
        
       a {

     

       87
       +
       	color: var(--text-color-secondary);

     

       88
        
       }

     

       89
        
       a:hover {

     

       90
       +
       	color: var(--text-color-hover);

     

       91
        
       }

     

       92
        
       

     

       93
        
       button {

     

       94
       +
       	font: inherit;

     

       95
       +
       	border: none;

     

       96
       +
       	background: none;

     

       97
       +
       	cursor: pointer;

     

       98
        
       }

     

       99
        
       

     

       100
        
       input,

     

       101
        
       textarea {

     

       102
       +
       	font: inherit;

     

       103
        
       }

     

       104
        
       

     

       105
        
       /* Add these new styles */

     

       106
        
       .url-container {

     

       107
       +
       	display: flex;

     

       108
       +
       	align-items: center;

     

       109
       +
       	gap: 8px;

     

       110
       +
       	margin-top: 16px;

     

       111
        
       }

     

       112
        
       

     

       113
        
       /* Add this new style */

     

       114
        
       .content-container {

     

       115
       +
       	max-width: 37rem;

     

       116
       +
       	text-align: center;

     

       117
       +
       	padding: 0 8px;

     

       118
        
       }

     

       119
        
       

     

       120
        
       /* Update url-input width to be 100% since container will control max width */

     

       121
        
       .url-input {

     

       122
       +
       	padding: 8px 12px;

     

       123
       +
       	border: 1px solid var(--border-color);

     

       124
       +
       	border-radius: 4px;

     

       125
       +
       	width: 100%;

     

       126
       +
       	background: var(--bg-color-secondary);

     

       127
       +
       	color: var(--text-color);

     

       128
        
       }

     

       129
        
       

     

       130
        
       .copy-button {

     

       131
       +
       	padding: 8px;

     

       132
       +
       	color: var(--text-color-secondary);

     

       133
       +
       	border-radius: 4px;

     

       134
       +
       	transition: all 0.2s;

     

       135
       +
       	display: flex;

     

       136
       +
       	align-items: center;

     

       137
       +
       	justify-content: center;

     

       138
        
       }

     

       139
        
       

     

       140
        
       .copy-button:hover {

     

       141
       +
       	background: var(--bg-color-hover);

     

       142
        
       }

     

       143
        
       

     

       144
        
       .copy-button:active {

     

       145
       +
       	background: var(--bg-color-active);

     

       146
        
       }

     

       147
        
       

     

       148
        
       .copy-button img {

     

       149
       +
       	width: 20px;

     

       150
       +
       	height: 20px;

     

       151
        
       }

     

       152
        
       

     

       153
        
       .copy-button.copied {

     

       154
       +
       	background: #28a745;

     

       155
        
       }

     

       156
        
       

     

       157
        
       /* Add footer styles */

     

       158
        
       .footer {

     

       159
       +
       	position: fixed;

     

       160
       +
       	bottom: 16px;

     

       161
       +
       	left: 0;

     

       162
       +
       	right: 0;

     

       163
       +
       	text-align: center;

     

       164
       +
       	font-size: 14px;

     

       165
       +
       	color: var(--text-color-secondary);

     

       166
        
       }

     

       167
        
       

     

       168
        
       .footer a {

     

       169
       +
       	color: var(--text-color-secondary);

     

       170
       +
       	text-decoration: none;

     

       171
       +
       	font-weight: 500;

     

       172
        
       }

     

       173
        
       

     

       174
        
       .footer a:hover {

     

       175
       +
       	color: var(--text-color-hover);

     

       176
        
       }