git.stevedylan.dev

chore: moved styles to separate file for site 758b8fd5

Steve · 2025-09-20 11:53 2 file(s) · +156 −159

site/index.html +1 −159

    <link rel="icon" type="image/png" sizes="32x32" href="https://norns.so/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://norns.so/favicon-16x16.png">
    <link rel="manifest" href="https://norns.so/site.webmanifest">
    <link rel="stylesheet" href="styles.css" />
    <meta name="theme-color" content="#121113">
    <meta name="description" content="Interoperable web components for decentralized apps">


    <meta name="twitter:title" content="Norns">
    <meta name="twitter:description" content="Interoperable web components for decentralized apps">
    <meta name="twitter:image" content="/og.png">

  <style>

    html {
      background: #121113;
    }

    body {
      color: white;
      font-family: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
      min-height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      padding: 0;
      margin: 0;
    }

    main {
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 2rem 0 0 0;
    }

    .container {
      border: 1px solid white;
      border-radius: 5px;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .component-showcase {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 1rem;
    }

    .component-label {
      font-size: 1.2rem;
      color: #ccc;
    }

    .code-snippet {
      background: #1e1e1e;
      border: 1px solid #333;
      border-radius: 3px;
      padding: 0.5rem;
      font-size: 0.8rem;
      color: #888;
      margin-top: 0.5rem;
      text-align: center;
    }

    .header {
      text-align: center;
      margin-bottom: 2rem;
      max-width: 300px;
    }

    .header h1 {
      font-size: 48px;
      margin-bottom: -10px;
    }

    .header img {
      width: 150px;
      height: 150px;
      margin-bottom: -35px;
    }

    .header p {
      font-size: 14px;
    }

    .github-button {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: #1E1E1E;
      color: white;
      text-decoration: none;
      padding: 0.75rem 1.25rem;
      border-radius: 5px;
      font-size: 0.9rem;
      margin-top: 1rem;
      transition: background 0.2s;
    }

    .github-button:hover {
      background: #444;
    }

    .github-icon {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    @media (max-width: 768px) {
          .container {
            width: 300px;
            height: 300px;
          }

          .header h1 {
            font-size: 42px;
          }

          .header img {
            width: 120px;
            height: 120px;
            margin-bottom: -30px;
          }

          .header p {
            font-size: 12px;
          }

          .component-label {
            font-size: 1rem;
          }
        }

        @media (max-width: 480px) {
          .container {
            width: 300px;
            height: 300px;
          }

          .header {
            max-width: 250px;
          }

          .header h1 {
            margin-bottom: -5px;
          }

          .header img {
            margin-bottom: -25px;
          }

          .component-label {
            font-size: 0.9rem;
          }

          .code-snippet {
            font-size: 0.7rem;
          }

        }

  </style>
</head>
<body>
  <main>

site/styles.css (added) +155 −0

1	+	html {
2	+	background: #121113;
3	+	}
4	+
5	+	body {
6	+	color: white;
7	+	font-family:
8	+	ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
9	+	"Courier New", monospace;
10	+	min-height: 100vh;
11	+	width: 100%;
12	+	display: flex;
13	+	flex-direction: column;
14	+	align-items: center;
15	+	justify-content: start;
16	+	padding: 0;
17	+	margin: 0;
18	+	}
19	+
20	+	main {
21	+	display: flex;
22	+	align-items: center;
23	+	flex-direction: column;
24	+	padding: 2rem 0 0 0;
25	+	}
26	+
27	+	.container {
28	+	border: 1px solid white;
29	+	border-radius: 5px;
30	+	width: 400px;
31	+	height: 400px;
32	+	display: flex;
33	+	align-items: center;
34	+	justify-content: center;
35	+	}
36	+
37	+	.component-showcase {
38	+	display: flex;
39	+	flex-direction: column;
40	+	align-items: start;
41	+	gap: 1rem;
42	+	}
43	+
44	+	.component-label {
45	+	font-size: 1.2rem;
46	+	color: #ccc;
47	+	}
48	+
49	+	.code-snippet {
50	+	background: #1e1e1e;
51	+	border: 1px solid #333;
52	+	border-radius: 3px;
53	+	padding: 0.5rem;
54	+	font-size: 0.8rem;
55	+	color: #888;
56	+	margin-top: 0.5rem;
57	+	text-align: center;
58	+	}
59	+
60	+	.header {
61	+	text-align: center;
62	+	margin-bottom: 2rem;
63	+	max-width: 300px;
64	+	}
65	+
66	+	.header h1 {
67	+	font-size: 48px;
68	+	margin-bottom: -10px;
69	+	}
70	+
71	+	.header img {
72	+	width: 150px;
73	+	height: 150px;
74	+	margin-bottom: -35px;
75	+	}
76	+
77	+	.header p {
78	+	font-size: 14px;
79	+	}
80	+
81	+	.github-button {
82	+	display: inline-flex;
83	+	align-items: center;
84	+	gap: 0.5rem;
85	+	background: #1e1e1e;
86	+	color: white;
87	+	text-decoration: none;
88	+	padding: 0.75rem 1.25rem;
89	+	border-radius: 5px;
90	+	font-size: 0.9rem;
91	+	margin-top: 1rem;
92	+	transition: background 0.2s;
93	+	}
94	+
95	+	.github-button:hover {
96	+	background: #444;
97	+	}
98	+
99	+	.github-icon {
100	+	width: 16px;
101	+	height: 16px;
102	+	fill: currentColor;
103	+	}
104	+
105	+	@media (max-width: 768px) {
106	+	.container {
107	+	width: 300px;
108	+	height: 300px;
109	+	}
110	+
111	+	.header h1 {
112	+	font-size: 42px;
113	+	}
114	+
115	+	.header img {
116	+	width: 120px;
117	+	height: 120px;
118	+	margin-bottom: -30px;
119	+	}
120	+
121	+	.header p {
122	+	font-size: 12px;
123	+	}
124	+
125	+	.component-label {
126	+	font-size: 1rem;
127	+	}
128	+	}
129	+
130	+	@media (max-width: 480px) {
131	+	.container {
132	+	width: 300px;
133	+	height: 300px;
134	+	}
135	+
136	+	.header {
137	+	max-width: 250px;
138	+	}
139	+
140	+	.header h1 {
141	+	margin-bottom: -5px;
142	+	}
143	+
144	+	.header img {
145	+	margin-bottom: -25px;
146	+	}
147	+
148	+	.component-label {
149	+	font-size: 0.9rem;
150	+	}
151	+
152	+	.code-snippet {
153	+	font-size: 0.7rem;
154	+	}
155	+	}

8	8		<link rel="icon" type="image/png" sizes="32x32" href="https://norns.so/favicon-32x32.png">
9	9		<link rel="icon" type="image/png" sizes="16x16" href="https://norns.so/favicon-16x16.png">
10	10		<link rel="manifest" href="https://norns.so/site.webmanifest">
	11	+	<link rel="stylesheet" href="styles.css" />
11	12		<meta name="theme-color" content="#121113">
12	13		<meta name="description" content="Interoperable web components for decentralized apps">
13	14

25	26		<meta name="twitter:title" content="Norns">
26	27		<meta name="twitter:description" content="Interoperable web components for decentralized apps">
27	28		<meta name="twitter:image" content="/og.png">
28		-
29		-	<style>
30		-
31		-	html {
32		-	background: #121113;
33		-	}
34		-
35		-	body {
36		-	color: white;
37		-	font-family: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
38		-	min-height: 100vh;
39		-	width: 100%;
40		-	display: flex;
41		-	flex-direction: column;
42		-	align-items: center;
43		-	justify-content: start;
44		-	padding: 0;
45		-	margin: 0;
46		-	}
47		-
48		-	main {
49		-	display: flex;
50		-	align-items: center;
51		-	flex-direction: column;
52		-	padding: 2rem 0 0 0;
53		-	}
54		-
55		-	.container {
56		-	border: 1px solid white;
57		-	border-radius: 5px;
58		-	width: 400px;
59		-	height: 400px;
60		-	display: flex;
61		-	align-items: center;
62		-	justify-content: center;
63		-	}
64		-
65		-	.component-showcase {
66		-	display: flex;
67		-	flex-direction: column;
68		-	align-items: start;
69		-	gap: 1rem;
70		-	}
71		-
72		-	.component-label {
73		-	font-size: 1.2rem;
74		-	color: #ccc;
75		-	}
76		-
77		-	.code-snippet {
78		-	background: #1e1e1e;
79		-	border: 1px solid #333;
80		-	border-radius: 3px;
81		-	padding: 0.5rem;
82		-	font-size: 0.8rem;
83		-	color: #888;
84		-	margin-top: 0.5rem;
85		-	text-align: center;
86		-	}
87		-
88		-	.header {
89		-	text-align: center;
90		-	margin-bottom: 2rem;
91		-	max-width: 300px;
92		-	}
93		-
94		-	.header h1 {
95		-	font-size: 48px;
96		-	margin-bottom: -10px;
97		-	}
98		-
99		-	.header img {
100		-	width: 150px;
101		-	height: 150px;
102		-	margin-bottom: -35px;
103		-	}
104		-
105		-	.header p {
106		-	font-size: 14px;
107		-	}
108		-
109		-	.github-button {
110		-	display: inline-flex;
111		-	align-items: center;
112		-	gap: 0.5rem;
113		-	background: #1E1E1E;
114		-	color: white;
115		-	text-decoration: none;
116		-	padding: 0.75rem 1.25rem;
117		-	border-radius: 5px;
118		-	font-size: 0.9rem;
119		-	margin-top: 1rem;
120		-	transition: background 0.2s;
121		-	}
122		-
123		-	.github-button:hover {
124		-	background: #444;
125		-	}
126		-
127		-	.github-icon {
128		-	width: 16px;
129		-	height: 16px;
130		-	fill: currentColor;
131		-	}
132		-
133		-	@media (max-width: 768px) {
134		-	.container {
135		-	width: 300px;
136		-	height: 300px;
137		-	}
138		-
139		-	.header h1 {
140		-	font-size: 42px;
141		-	}
142		-
143		-	.header img {
144		-	width: 120px;
145		-	height: 120px;
146		-	margin-bottom: -30px;
147		-	}
148		-
149		-	.header p {
150		-	font-size: 12px;
151		-	}
152		-
153		-	.component-label {
154		-	font-size: 1rem;
155		-	}
156		-	}
157		-
158		-	@media (max-width: 480px) {
159		-	.container {
160		-	width: 300px;
161		-	height: 300px;
162		-	}
163		-
164		-	.header {
165		-	max-width: 250px;
166		-	}
167		-
168		-	.header h1 {
169		-	margin-bottom: -5px;
170		-	}
171		-
172		-	.header img {
173		-	margin-bottom: -25px;
174		-	}
175		-
176		-	.component-label {
177		-	font-size: 0.9rem;
178		-	}
179		-
180		-	.code-snippet {
181		-	font-size: 0.7rem;
182		-	}
183		-
184		-	}
185		-
186		-	</style>
187	29		</head>
188	30		<body>
189	31		<main>