git.stevedylan.dev

chore: style updates b57637fd

Steve · 2026-04-18 15:29 5 file(s) · +163 −110

apps/sipp/static/styles.css +124 −65

html {
	background: #121113;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.6;
}

a {
	color: #ffffff;
	text-decoration: none;
}

a:hover {
	opacity: 0.7;
}

html::-webkit-scrollbar {

	min-height: 100vh;
	max-width: 700px;
	margin: auto;
	padding: 0 1rem 4rem;
}

.header {
	display: flex;
	text-decoration: none;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 2rem;
}

.nav {
.logo {
	text-decoration: none !important;
}

.links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 2rem;
	gap: 0.75rem;
	font-size: 12px;
	text-decoration: none;
}

.links .inline-form {
	display: inline;
	margin: 0;
	padding: 0;
}

.links .link-button {
	font-size: 12px;
}

.icon {

	width: 100%;
}

#snippetForm input {
input, textarea, select {
	background: #121113;
	color: #ffffff;
	border: 1px solid white;
	padding: 4px;
}

#authForm input {
	background: #121113;
	color: #ffffff;
	border: 1px solid white;
	padding: 4px;
	padding: 0.4rem 0.75rem;
	font-size: 16px;
	width: 100%;
	border-radius: 0;
}

textarea {
	background: #121113;
	color: #ffffff;
	width: 100%;
	min-height: 400px;
	padding: 6px;
	border: 1px solid white;
	resize: vertical;
}

.code-container {

	line-height: 1.4;
}

button {
button, .btn {
	background: #121113;
	color: #ffffff;
	padding: 6px;
	padding: 0.4rem 0.75rem;
	border: 1px solid white;
	cursor: pointer;
	width: fit-content;
	font-size: 14px;
	border-radius: 0;
	text-decoration: none;
	display: inline-block;
}

a {
	background: #121113;
	color: #ffffff;
button:hover, .btn:hover {
	opacity: 0.7;
}

@media (max-width: 480px) {

	}
}

#snippetList {
.empty {
	opacity: 0.5;
	font-size: 12px;
}

.admin-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.snippet-item {
.admin-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px;
	border: 1px solid white;
	margin-top: -1px;
	text-decoration: none;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #333;
	gap: 1rem;
}

.snippet-item:hover {
	background: #1e1d1f;
}

.snippet-link {
.admin-list-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	text-decoration: none;
	gap: 8px;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.snippet-id {
	color: #878787;
	font-size: 13px;
.admin-list-title {
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-link {
	color: #878787;
	text-decoration: none;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: inherit;
	font-family: inherit;
	padding: 0;
.admin-list-meta {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.nav-link:hover {
	color: white;
.admin-list-date {
	font-size: 11px;
	opacity: 0.4;
}

.nav-form {
	display: inline;
	margin: 0;
	padding: 0;
.admin-list-actions {
	display: flex;
	gap: 1rem;
	font-size: 12px;
	flex-shrink: 0;
}

.inline-form {

}

.link-button {
	background: transparent;
	background: none;
	border: none;
	color: #878787;
	color: #ffffff;
	cursor: pointer;
	font-size: 12px;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
}

.link-button:hover {
	color: #ff6b6b;
	opacity: 0.7;
}

.link-button.danger {
	opacity: 0.5;
}

.link-button.danger:hover {
	opacity: 0.3;
}

@media (max-width: 480px) {
	.admin-list-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

main {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

label {
	font-size: 12px;
	opacity: 0.7;
}

.error {
	color: #ff6b6b;
	color: #ffffff;
	border-left: 2px solid #ffffff;
	padding-left: 0.5rem;
	font-size: 13px;
	opacity: 0.8;
}

@font-face {

apps/sipp/templates/admin.html +21 −22

  </head>
  <body>

    <div class="nav">
      <a href="/" class="header">
        <h1>SIPP</h1>
      </a>

      <form method="POST" action="/admin/logout" class="nav-form">
        <button type="submit" class="nav-link">logout</button>
      </form>
    <div class="header">
      <a href="/" class="logo"><h1>SIPP</h1></a>
    </div>

    <div id="snippetList">
      {% if snippets.is_empty() %}
        <p>No snippets found.</p>
      {% else %}
    {% if snippets.is_empty() %}
      <p class="empty">no snippets yet</p>
    {% else %}
      <div class="admin-list">
        {% for s in snippets %}
          <div class="snippet-item">
            <a class="snippet-link" href="/s/{{ s.short_id }}">
              <span class="snippet-name">{{ s.name }}</span>
              <span class="snippet-id">/s/{{ s.short_id }}</span>
            </a>
            <form method="POST" action="/admin/snippets/{{ s.short_id }}/delete" class="inline-form" onsubmit="return confirm('delete this snippet?')">
              <button type="submit" class="link-button">delete</button>
            </form>
          <div class="admin-list-item">
            <div class="admin-list-info">
              <a href="/s/{{ s.short_id }}" class="admin-list-title">{{ s.name }}</a>
              <div class="admin-list-meta">
                <span class="admin-list-date">/s/{{ s.short_id }}</span>
              </div>
            </div>
            <div class="admin-list-actions">
              <a href="/s/{{ s.short_id }}">view</a>
              <form method="POST" action="/admin/snippets/{{ s.short_id }}/delete" class="inline-form" onsubmit="return confirm('delete this snippet?')">
                <button type="submit" class="link-button danger">delete</button>
              </form>
            </div>
          </div>
        {% endfor %}
      {% endif %}
    </div>
      </div>
    {% endif %}
  </body>
</html>

apps/sipp/templates/index.html +5 −6

  </head>
  <body>

    <div class="nav">
      <a href="/" class="header">
        <h1>SIPP</h1>
      </a>

      <a class="nav-link" href="/admin">admin</a>
    <div class="header">
      <a href="/" class="logo"><h1>SIPP</h1></a>
      <nav class="links">
        <a href="/admin">admin</a>
      </nav>
    </div>



apps/sipp/templates/login.html +13 −15

  </head>
  <body>

    <div class="nav">
      <a href="/" class="header">
        <h1>SIPP</h1>
      </a>
    </div>

    {% if let Some(error) = error %}
      <p class="error">{{ error }}</p>
    {% endif %}
    <header class="header">
      <a href="/" class="logo"><h1>SIPP</h1></a>
    </header>
    <main>
      {% if let Some(error) = error %}
        <p class="error">{{ error }}</p>
      {% endif %}

    <form id="loginForm" method="POST" action="/admin/login{% if let Some(next) = next %}?next={{ next }}{% endif %}">
      <div>
        <input placeholder="API Key" type="password" id="api_key" name="api_key" autofocus required>
      </div>
      <button type="submit">Login</button>
    </form>
      <form method="POST" action="/admin/login{% if let Some(next) = next %}?next={{ next }}{% endif %}" class="form">
        <label for="api_key">api key</label>
        <input type="password" id="api_key" name="api_key" autofocus required>
        <button type="submit">login</button>
      </form>
    </main>
  </body>
</html>

apps/sipp/templates/snippet.html +0 −2

      <a href="/" class="header">
        <h1>SIPP</h1>
      </a>

      <a class="nav-link" href="/admin">admin</a>
    </div>

    <div id="snippetForm">

31	31		<a href="/" class="header">
32	32		<h1>SIPP</h1>
33	33		</a>
34		-
35		-	<a class="nav-link" href="/admin">admin</a>
36	34		</div>
37	35
38	36		<div id="snippetForm">

10	10		html {
11	11		background: #121113;
12	12		color: #ffffff;
	13	+	font-size: 14px;
	14	+	line-height: 1.6;
	15	+	}
	16	+
	17	+	a {
	18	+	color: #ffffff;
	19	+	text-decoration: none;
	20	+	}
	21	+
	22	+	a:hover {
	23	+	opacity: 0.7;
13	24		}
14	25
15	26		html::-webkit-scrollbar {

25	36		min-height: 100vh;
26	37		max-width: 700px;
27	38		margin: auto;
	39	+	padding: 0 1rem 4rem;
28	40		}
29	41
30	42		.header {
31	43		display: flex;
32		-	text-decoration: none;
	44	+	flex-direction: column;
	45	+	gap: 0.5rem;
	46	+	margin-top: 2rem;
33	47		}
34	48
35		-	.nav {
	49	+	.logo {
	50	+	text-decoration: none !important;
	51	+	}
	52	+
	53	+	.links {
36	54		display: flex;
37	55		align-items: center;
38		-	justify-content: space-between;
39		-	width: 100%;
40		-	margin-top: 2rem;
	56	+	gap: 0.75rem;
	57	+	font-size: 12px;
	58	+	text-decoration: none;
	59	+	}
	60	+
	61	+	.links .inline-form {
	62	+	display: inline;
	63	+	margin: 0;
	64	+	padding: 0;
	65	+	}
	66	+
	67	+	.links .link-button {
	68	+	font-size: 12px;
41	69		}
42	70
43	71		.icon {

69	97		width: 100%;
70	98		}
71	99
72		-	#snippetForm input {
	100	+	input, textarea, select {
73	101		background: #121113;
74	102		color: #ffffff;
75	103		border: 1px solid white;
76		-	padding: 4px;
77		-	}
78		-
79		-	#authForm input {
80		-	background: #121113;
81		-	color: #ffffff;
82		-	border: 1px solid white;
83		-	padding: 4px;
	104	+	padding: 0.4rem 0.75rem;
	105	+	font-size: 16px;
	106	+	width: 100%;
	107	+	border-radius: 0;
84	108		}
85	109
86	110		textarea {
87		-	background: #121113;
88		-	color: #ffffff;
89		-	width: 100%;
90	111		min-height: 400px;
91		-	padding: 6px;
92		-	border: 1px solid white;
	112	+	resize: vertical;
93	113		}
94	114
95	115		.code-container {

107	127		line-height: 1.4;
108	128		}
109	129
110		-	button {
	130	+	button, .btn {
111	131		background: #121113;
112	132		color: #ffffff;
113		-	padding: 6px;
	133	+	padding: 0.4rem 0.75rem;
114	134		border: 1px solid white;
115	135		cursor: pointer;
116	136		width: fit-content;
	137	+	font-size: 14px;
	138	+	border-radius: 0;
	139	+	text-decoration: none;
	140	+	display: inline-block;
117	141		}
118	142
119		-	a {
120		-	background: #121113;
121		-	color: #ffffff;
	143	+	button:hover, .btn:hover {
	144	+	opacity: 0.7;
122	145		}
123	146
124	147		@media (max-width: 480px) {

128	151		}
129	152		}
130	153
131		-	#snippetList {
	154	+	.empty {
	155	+	opacity: 0.5;
	156	+	font-size: 12px;
	157	+	}
	158	+
	159	+	.admin-list {
	160	+	display: flex;
132	161		flex-direction: column;
133		-	gap: 0;
	162	+	width: 100%;
134	163		}
135	164
136		-	.snippet-item {
	165	+	.admin-list-item {
137	166		display: flex;
138	167		justify-content: space-between;
139	168		align-items: center;
140		-	padding: 8px;
141		-	border: 1px solid white;
142		-	margin-top: -1px;
143		-	text-decoration: none;
144		-	gap: 8px;
	169	+	padding: 8px 0;
	170	+	border-bottom: 1px solid #333;
	171	+	gap: 1rem;
145	172		}
146	173
147		-	.snippet-item:hover {
148		-	background: #1e1d1f;
149		-	}
150		-
151		-	.snippet-link {
	174	+	.admin-list-info {
152	175		display: flex;
153		-	justify-content: space-between;
154		-	align-items: center;
155		-	flex: 1;
156		-	text-decoration: none;
157		-	gap: 8px;
	176	+	flex-direction: column;
	177	+	gap: 0.2rem;
	178	+	min-width: 0;
158	179		}
159	180
160		-	.snippet-id {
161		-	color: #878787;
162		-	font-size: 13px;
	181	+	.admin-list-title {
	182	+	font-size: 15px;
	183	+	white-space: nowrap;
	184	+	overflow: hidden;
	185	+	text-overflow: ellipsis;
163	186		}
164	187
165		-	.nav-link {
166		-	color: #878787;
167		-	text-decoration: none;
168		-	background: transparent;
169		-	border: none;
170		-	cursor: pointer;
171		-	font-size: inherit;
172		-	font-family: inherit;
173		-	padding: 0;
	188	+	.admin-list-meta {
	189	+	display: flex;
	190	+	gap: 0.75rem;
	191	+	align-items: center;
174	192		}
175	193
176		-	.nav-link:hover {
177		-	color: white;
	194	+	.admin-list-date {
	195	+	font-size: 11px;
	196	+	opacity: 0.4;
178	197		}
179	198
180		-	.nav-form {
181		-	display: inline;
182		-	margin: 0;
183		-	padding: 0;
	199	+	.admin-list-actions {
	200	+	display: flex;
	201	+	gap: 1rem;
	202	+	font-size: 12px;
	203	+	flex-shrink: 0;
184	204		}
185	205
186	206		.inline-form {

190	210		}
191	211
192	212		.link-button {
193		-	background: transparent;
	213	+	background: none;
194	214		border: none;
195		-	color: #878787;
	215	+	color: #ffffff;
196	216		cursor: pointer;
	217	+	font-size: 12px;
197	218		padding: 0;
198	219		font-family: inherit;
199		-	font-size: 13px;
200	220		}
201	221
202	222		.link-button:hover {
203		-	color: #ff6b6b;
	223	+	opacity: 0.7;
	224	+	}
	225	+
	226	+	.link-button.danger {
	227	+	opacity: 0.5;
	228	+	}
	229	+
	230	+	.link-button.danger:hover {
	231	+	opacity: 0.3;
	232	+	}
	233	+
	234	+	@media (max-width: 480px) {
	235	+	.admin-list-item {
	236	+	flex-direction: column;
	237	+	align-items: flex-start;
	238	+	gap: 0.5rem;
	239	+	}
	240	+	}
	241	+
	242	+	main {
	243	+	width: 100%;
	244	+	display: flex;
	245	+	flex-direction: column;
	246	+	gap: 1rem;
	247	+	}
	248	+
	249	+	.form {
	250	+	display: flex;
	251	+	flex-direction: column;
	252	+	gap: 0.5rem;
	253	+	width: 100%;
	254	+	}
	255	+
	256	+	label {
	257	+	font-size: 12px;
	258	+	opacity: 0.7;
204	259		}
205	260
206	261		.error {
207		-	color: #ff6b6b;
	262	+	color: #ffffff;
	263	+	border-left: 2px solid #ffffff;
	264	+	padding-left: 0.5rem;
	265	+	font-size: 13px;
	266	+	opacity: 0.8;
208	267		}
209	268
210	269		@font-face {

27	27		</head>
28	28		<body>
29	29
30		-	<div class="nav">
31		-	<a href="/" class="header">
32		-	<h1>SIPP</h1>
33		-	</a>
34		-
35		-	<form method="POST" action="/admin/logout" class="nav-form">
36		-	<button type="submit" class="nav-link">logout</button>
37		-	</form>
	30	+	<div class="header">
	31	+	<a href="/" class="logo"><h1>SIPP</h1></a>
38	32		</div>
39	33
40		-	<div id="snippetList">
41		-	{% if snippets.is_empty() %}
42		-	<p>No snippets found.</p>
43		-	{% else %}
	34	+	{% if snippets.is_empty() %}
	35	+	<p class="empty">no snippets yet</p>
	36	+	{% else %}
	37	+	<div class="admin-list">
44	38		{% for s in snippets %}
45		-	<div class="snippet-item">
46		-	<a class="snippet-link" href="/s/{{ s.short_id }}">
47		-	<span class="snippet-name">{{ s.name }}</span>
48		-	<span class="snippet-id">/s/{{ s.short_id }}</span>
49		-	</a>
50		-	<form method="POST" action="/admin/snippets/{{ s.short_id }}/delete" class="inline-form" onsubmit="return confirm('delete this snippet?')">
51		-	<button type="submit" class="link-button">delete</button>
52		-	</form>
	39	+	<div class="admin-list-item">
	40	+	<div class="admin-list-info">
	41	+	<a href="/s/{{ s.short_id }}" class="admin-list-title">{{ s.name }}</a>
	42	+	<div class="admin-list-meta">
	43	+	<span class="admin-list-date">/s/{{ s.short_id }}</span>
	44	+	</div>
	45	+	</div>
	46	+	<div class="admin-list-actions">
	47	+	<a href="/s/{{ s.short_id }}">view</a>
	48	+	<form method="POST" action="/admin/snippets/{{ s.short_id }}/delete" class="inline-form" onsubmit="return confirm('delete this snippet?')">
	49	+	<button type="submit" class="link-button danger">delete</button>
	50	+	</form>
	51	+	</div>
53	52		</div>
54	53		{% endfor %}
55		-	{% endif %}
56		-	</div>
	54	+	</div>
	55	+	{% endif %}
57	56		</body>
58	57		</html>