https://mataroa.blog/accounts/login/

1
2
3<!DOCTYPE html>
4<html>
5    <head>
6        <meta charset="utf-8">
7        <title>Log in</title>
8
9        
10        <meta name="description" content="Blogging platform for minimalists.">
11        <meta name="keywords" content="blog, blogging, platform, fast, simple, minimal">
12        
13
14        
15<meta name="viewport" content="width=device-width, user-scalable=no">
16
17
18        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEwSURBVHgB7ZVBTsMwEEX/2GolQEjkBrkBPQI5ATlKd12SLrtr78EinACOkBuQG7QSEiClzuBpWYFUTxxY1W8ZfWe+7fEfIJFInDuEgbwtyjsQlUTm3q/Oj1+58b9qOueW2apuMQC1ge28vJlcmQcwzU8KmdfdR7/M1vUOf2XgUPzSPHv5DCq46d77QmPCQMFh5+riAs0mF7JGoQwJtosyn1j7igjYUXG9enw5pQmegDW2QizkypAkaMAYvkUkZPxLGWvAd/2Au/9FHhKomvA/0RhoEQtLQI00wOifEAvReANwtkYkEs0hTdCAvGMGNhgI99ho5oKqCfdTVx0Hjrp8s/+UNWFUBrKq3nXTvtCchOxcOweEweNYolnS0ZAE1HdGMFpm36xs61D0JhKJxE++AMI7Z3YRUW4wAAAAAElFTkSuQmCC">
19
20        
21        
22
23        <style>
24            /* variables */
25:root {
26    
27    font-family: sans-serif;
28    line-height: 1.5;
29
30    color-scheme: light dark;
31
32    /* this colour is only used in dark mode */
33    --dark-mode-color: #212529;
34
35    --link-color: #1175e2;
36    --ascent-color: #006cdf;
37    --dark-grey-color: #757575;
38    --light-grey-color: #eff1f5;
39    --airy-grey-color: #fafafa;
40    --green-color: #26bd60;
41    --red-color: #ff0000;
42    --purple-color: #cd1ecd;
43}
44
45@media (max-width: 34rem) {
46    :root {
47        /* mobile base font size remains 16px whether zialucia on or off */
48        font-size: 16px;
49    }
50}
51
52/* dark mode
53 * create a new color (dark-mode-color)
54 * override existing colors */
55@media (prefers-color-scheme: dark) {
56    :root {
57        color: #fff;
58        background: var(--dark-mode-color);
59
60        --link-color: #70b3ff;
61        --dark-grey-color: #b1b6bb;
62        --light-grey-color: #353535;
63        --airy-grey-color: #2b2b2b;
64        --purple-color: #dd47ec;
65    }
66}
67
68/* general */
69html {
70    line-height: 1.15;
71    /* prevent adjustments of font size after orientation changes in iOS */
72    -webkit-text-size-adjust: 100%;
73}
74
75body {
76    margin: 0;
77}
78
79a {
80    text-decoration: none;
81    color: var(--link-color);
82}
83
84a:hover {
85    text-decoration: underline;
86}
87
88a.btn {
89    display: inline-block;
90    cursor: pointer;
91    background: var(--link-color);
92    color: #fff;
93    border: 1px solid var(--ascent-color);
94    padding: 8px 24px;
95}
96
97a.btn:hover,
98a.btn:active {
99    background: var(--ascent-color);
100    text-decoration: none;
101}
102
103a.btn:disabled {
104    pointer-events: none;
105    background: var(--ascent-color);
106}
107
108h1 {
109    font-size: 1.8rem;
110    font-weight: 500;
111    padding-bottom: 4px;
112    border-bottom: 2px solid var(--light-grey-color);
113    margin: 16px 0;
114}
115
116h2,
117h3 {
118    font-weight: 500;
119    margin: 16px 0;
120}
121
122main {
123    max-width: 34rem;
124    margin-bottom: 16px;
125    margin-left: auto;
126    margin-right: auto;
127    padding-left: 8px;
128    padding-right: 8px;
129}
130@media print {
131    main {
132        max-width: unset;
133    }
134}
135
136@media print {
137    article {
138        page-break-before: always;
139    }
140}
141
142aside {
143    max-width: 34rem;
144    border: 1px dashed #000;
145    padding: 2px 6px;
146    margin-top: 8px;
147    margin-left: auto;
148    margin-right: auto;
149    box-sizing: border-box;
150}
151@media (max-width: 34rem) {
152    aside {
153        margin-left: 8px;
154        margin-right: 8px;
155    }
156}
157
158.alert-error {
159    color: var(--red-color);
160}
161
162section {
163    max-width: 34rem;
164    margin-bottom: 16px;
165    margin-left: auto;
166    margin-right: auto;
167    padding-left: 8px;
168    padding-right: 8px;
169}
170
171nav {
172    max-width: 34rem;
173    margin-top: 16px;
174    margin-left: auto;
175    margin-right: auto;
176    padding-left: 8px;
177    padding-right: 8px;
178}
179@media print {
180    nav {
181        display: none;
182    }
183}
184
185small {
186    /* fix font size in all browsers */
187    font-size: 80%;
188}
189
190/* prevent sub and sup from affecting the line height in all browsers */
191sub,
192sup {
193    font-size: 75%;
194    line-height: 0;
195    position: relative;
196    vertical-align: baseline;
197}
198sub {
199    bottom: -0.25em;
200}
201sup {
202    top: -0.5em;
203}
204
205ol,
206ul {
207    padding-left: 24px;
208}
209
210blockquote {
211    border-left: 4px solid var(--light-grey-color);
212    padding-left: 16px;
213    margin-left: 0;
214    color: var(--dark-grey-color);
215}
216
217figure {
218    border: 1px var(--light-grey-color) solid;
219    margin: auto;
220    color: var(--dark-grey-color);
221}
222
223figcaption {
224    font-size: 12px;
225    text-align: center;
226}
227
228dt {
229    font-weight: 700;
230}
231
232dd {
233    margin-left: 0;
234}
235
236table {
237    /* remove text indentation from table contents in Chrome and Safari */
238    text-indent: 0;
239
240    /* fix table border color inheritance in Chrome and Safari */
241    border-color: inherit;
242
243    border-collapse: collapse;
244    border: 1px solid var(--light-grey-color);
245    width: 100%;
246    box-sizing: border-box;
247}
248
249thead:nth-child(odd),
250tr:nth-child(even) {
251    background: var(--light-grey-color);
252}
253
254th,
255td {
256    padding: 4px;
257}
258
259pre {
260    background: var(--airy-grey-color);
261    overflow-x: auto;
262}
263
264code {
265    background: var(--airy-grey-color);
266    padding: 2px;
267}
268
269hr {
270    border-top: 1px solid var(--light-grey-color);
271    border-bottom: none;
272    border-left: none;

273    border-right: none;
274}
275
276details {
277    border: 1px solid var(--light-grey-color);
278    margin-bottom: 8px;
279}
280
281details > div {
282    padding: 16px 24px;
283}
284
285details > div > p {
286    margin: 0;
287}
288
289details > div > p + p {
290    margin-top: 16px;
291}
292
293summary {
294    cursor: pointer;
295    user-select: none;
296    background-color: var(--light-grey-color);
297    padding: 8px;
298}
299
300footer {
301    max-width: 34rem;
302    margin-left: auto;
303    margin-right: auto;
304    margin-top: 56px;
305    margin-bottom: 16px;
306    padding-left: 8px;
307    padding-right: 8px;
308    color: var(--dark-grey-color);
309}
310
311.footer-comment {
312    margin-bottom: 8px;
313}
314
315.help {
316    cursor: help;
317    text-decoration: dotted underline;
318}
319
320/* mods
321 * they override specific classes with specific styles */
322.type-approve {
323    color: var(--green-color) !important;
324}
325
326.type-delete {
327    color: var(--red-color) !important;
328}
329
330.type-danger {
331    background: var(--red-color) !important;
332    border-color: var(--red-color) !important;
333}
334
335/* form */
336label {
337    display: block;
338    margin-top: 16px;
339}
340
341button,
342input,
343optgroup,
344select,
345textarea {
346    /* fix font styles in all browsers */
347    font-family: inherit;
348    font-size: 100%;
349    line-height: 1.15;
350    /* remove margin in Firefox and Safari */
351    margin: 0;
352}
353
354button,
355select {
356    /* remove inheritance of text transform in Edge and Firefox */
357    text-transform: none;
358}
359
360button,
361[type='button'],
362[type='reset'],
363[type='submit'] {
364    /* fix inability to style clickable types in iOS and Safari */
365    -webkit-appearance: button;
366}
367
368input[type="text"],
369input[type="url"],
370input[type="email"],
371input[type="password"],
372textarea {
373    display: block;
374    border: 2px solid var(--light-grey-color);
375    box-sizing: border-box;
376    width: 34rem;
377}
378@media (max-width: 34rem) {
379    input[type="text"],
380    input[type="url"],
381    input[type="email"],
382    input[type="password"],
383    textarea {
384        width: 100%;
385    }
386}
387@media (prefers-color-scheme: dark) {
388    input[type="text"],
389    input[type="url"],
390    input[type="email"],
391    input[type="password"],
392    textarea {
393        color: #fff;
394        background: var(--light-grey-color);
395    }
396}
397
398input[type="submit"] {
399    cursor: pointer;
400    background: var(--link-color);
401    color: #fff;
402    border: 1px solid var(--ascent-color);
403    padding: 8px 24px;
404}
405
406input[type="submit"]:hover,
407input[type="submit"]:active {
408    background: var(--ascent-color);
409}
410
411input[type="submit"]:disabled {
412    pointer-events: none;
413    background: var(--ascent-color);
414}
415
416form .helptext {
417    color: var(--dark-grey-color);
418}
419
420.form-error {
421    color: var(--red-color);
422}
423
424.form-inline {
425    display: inline-block;
426}
427
428.form-inline input[type="submit"] {
429    border: none;
430    background: unset;
431    color: var(--link-color);
432    padding: 0;
433}
434
435.form-inline input[type="submit"]:hover {
436    text-decoration: underline;
437}
438
439/* landing */
440.lead {
441    max-width: 34rem;
442    border: 1px dashed #000;
443    padding-top: 8px;
444    padding-bottom: 8px;
445}
446@media (prefers-color-scheme: dark) {
447    .lead {
448        border-color: #fff;
449    }
450}
451
452.cta {
453    margin-top: 32px;
454    margin-bottom: 32px;
455}
456
457.cta-link {
458    font-size: 20px;
459}
460
461/* comparisons */
462.comparisons {
463    max-width: 1000px;
464}
465
466.comparisons h1,
467.comparisons p,
468.comparisons ol,
469.comparisons ul {
470    max-width: 34rem;
471    margin-left: auto;
472    margin-right: auto;
473}
474
475.comparisons-matrix {
476    overflow: auto;
477}
478
479.comparisons table {
480    min-width: 800px;
481    white-space: nowrap;
482}
483
484.comparisons thead > tr > th:not(:first-child),
485.comparisons tbody > tr > td:not(:first-child) {
486    text-align: center;
487}
488
489.comparisons th {
490    text-align: left;
491}
492
493.comparisons tr {
494    min-width: 300px;
495}
496
497/* blog index */
498.blog a:hover {
499    text-decoration: underline;
500}
501
502.blog a:visited {
503    color: var(--purple-color);
504}
505
506.blog a:active {
507    color: var(--red-color);
508}
509
510.drafts {
511    border: 1px solid var(--light-grey-color);
512    padding: 16px 16px 0;
513    margin-bottom: 24px;
514}
515
516.posts {
517    list-style: none;
518    padding-left: 0;
519}
520
521.posts li {
522    margin-bottom: 24px;
523}
524
525.posts small {
526    white-space: nowrap;
527    color: var(--dark-grey-color);
528}
529
530.posts time {
531    white-space: nowrap;
532}
533
534.byline {
535    color: var(--dark-grey-color);
536    margin: 16px 0 24px;
537}
538
539.byline img {
540  width: 100%;
541}
542
543.webring {
544    margin-top: 64px;
545    display: flex;
546    justify-content: space-between;
547}
548
549.webring-name {
550    color: #000;
551}
552@media (prefers-color-scheme: dark) {
553    .webring-name {
554        color: #fff;
555    }
556}
557
558/* post detail */
559.posts-item-brand {
560    display: block;
561    margin-top: 16px;
562    margin-bottom: 16px;
563    color: var(--dark-grey-color);
564}
565
566.posts-item-brand:hover {
567    text-decoration: none;
568}
569
570.posts-item-brand::before {
571    content: "« ";
572}
573
574.posts-item-title {
575    margin-bottom: 8px;
576}
577
578.posts-item-byline {
579    color: var(--dark-grey-color);
580    margin-bottom: 8px;
581}
582
583.posts-item-notice {
584    border: 1px solid var(--dark-grey-color);
585    padding: 8px 16px;
586    margin-top: 16px;
587}
588
589.posts-item-body p {
590    
591    font-family: serif;
592    font-size: 1.1rem;
593    
594}
595
596.posts-item-body li {
597    
598    font-family: serif;
599    font-size: 1.1rem;
600    
601}
602
603.posts-item-body img {
604    max-width: 100%;
605    display: block;
606    margin-left: auto;
607    margin-right: auto;
608}
609
610/* comments */
611.comments {
612    margin-top: 64px;
613}
614
615.comments-title {
616    font-size: 1.2rem;
617    margin-top: 32px;
618    padding-bottom: 4px;
619    border-bottom: 2px solid var(--light-grey-color);
620}
621
622.comments-body {
623    margin-bottom: 16px;
624}
625
626.comments-body p {
627    margin-top: 4px;
628}
629
630/* page detail */
631.pages-item-brand {
632    display: block;
633    margin-top: 16px;
634    margin-bottom: 16px;
635    color: var(--dark-grey-color);
636}
637
638.pages-item-brand:hover {
639    text-decoration: none;
640}
641
642.pages-item-brand::before {
643    content: "« ";
644}
645
646.pages-item-title {
647    margin-bottom: 8px;
648}
649
650.pages-item-byline {
651    color: var(--dark-grey-color);
652    margin-bottom: 8px;
653}
654
655.pages-item-body p {
656    
657    font-family: serif;
658    font-size: 1.1rem;
659    
660}
661
662.pages-item-body li {
663    
664    font-family: serif;
665    font-size: 1.1rem;
666    
667}
668
669.pages-item-body img {
670    max-width: 100%;
671}
672
673.pages-generic-grid {
674    display: grid;
675    grid-template-columns: 1fr 1fr 1fr;
676    column-gap: 16px;
677    row-gap: 16px;
678    margin-top: 16px;
679}
680@media (max-width: 490px) {
681  .pages-generic-grid {
682    grid-template-columns: 1fr 1fr;
683  }
684}
685@media (max-width: 340px) {
686  .pages-generic-grid {
687    grid-template-columns: 1fr;
688  }
689}
690
691/* dashboard */
692.dashboard-cta {
693    font-size: 1.1rem;
694}
695
696.dashboard-list {
697    margin: 1rem 0;
698    line-height: 1.6;
699}
700
701/* images */
702.images-grid {
703    max-width: 100%;
704    margin-top: 32px;
705    display: grid;
706    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
707    grid-template-rows: 302px;
708}
709
710.images-grid-item {
711    display: flex;
712    justify-content: center;
713    border: 1px solid var(--light-grey-color);
714}
715
716.images-grid-item img {
717    max-width: 300px;
718    max-height: 300px;
719    object-fit: contain;
720}
721
722/* image detail */
723.images-item {
724    max-width: 100%;
725    margin-top: 32px;
726    margin-bottom: 32px;
727    text-align: center;
728}
729
730.images-item img {
731    max-width: 100%;
732    max-height: 100vh;
733}
734
735.images-item-byline {
736    color: var(--dark-grey-color);
737}
738
739/* analytics */
740.analytics-chart {
741    background: var(--light-grey-color);
742    line-height: 0;
743}
744
745svg .analytics-chart-bar {
746    fill: var(--link-color);
747}
748
749svg .analytics-chart-bar:hover {
750    fill: var(--ascent-color);
751}
752
753svg .analytics-chart-text {
754    font-family: monospace;
755    font-size: 10px;
756}
757
758/* billing stripe */
759#subscription-form input[type="submit"] {
760    margin-top: 8px;
761}
762
763#card-element {
764    border: 1px solid var(--light-grey-color);
765    padding: 4px 8px;
766}
767
768#card-element-errors {
769    margin-top: 8px;
770    color: var(--red-color);
771}
772
773            
774        </style>
775    </head>
776
777    <body>
778        
779
780        
781        
782        <nav>
783            <a href="/">Home</a>
784            | <a href="/accounts/create/">Sign up</a>
785            | <a href="/accounts/login/">Log in</a>
786        </nav>
787        
788        
789
790        
791
792        
793<main>
794    
795
796    <h1>Log in</h1>
797
798    <form method="post">
799        
800
801        <p>
802            <label for="id_username">Username</label>
803            
804            <input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username">

805            <span class="helptext">This is your blog subdomain.</span>
806        </p>
807
808        <p>
809            <label for="id_password">Password</label>
810            
811            <input type="password" name="password" autocomplete="current-password" required id="id_password">
812            <span class="helptext"></span>
813        </p>
814
815        <input type="hidden" name="csrfmiddlewaretoken" value="hIB4XR1RHLTFAw0UisYKUGa0uwZmB0apFnpN9Gps2w9hsuGauCEn1RJa7cypDlpb">
816
817        <input type="submit" value="Login">
818    </form>
819
820    <p>
821        <a href="/accounts/password_reset/">Forgot password?</a>
822    </p>
823</main>
824
825
826        
827        
828    </body>
829</html>