websӘFacebook ite
This commit is contained in:
parent
f233d9e64f
commit
76543fd220
GPG key ID:
DAF5EAF6665839FD
20 changed files with 1051 additions and 96 deletions
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
116
public/styles/main.css
Normal file
116
public/styles/main.css
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
:root {
|
||||
font-family: system-ui;
|
||||
font-size: 1em;
|
||||
line-height: 1.25;
|
||||
|
||||
color: var(--foreground);
|
||||
background-color: var(--background);
|
||||
|
||||
--foreground: #cdd6f4;
|
||||
--foreground-muted: #a6adc8;
|
||||
--background: #1e1e2e;
|
||||
--background-surface: #313244;
|
||||
--shadow: #11111b;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: min-content auto min-content;
|
||||
grid-auto-flow: column;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
margin-top: .8em;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
|
||||
/* this isn't great in terms of accessibility */
|
||||
/* makes sense for most the stuff we got tho */
|
||||
a {
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--foreground-muted);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.light {
|
||||
color: var(--foreground-muted);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--foreground-muted);
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
color: var(--foreground);
|
||||
background-color: var(--background-surface);
|
||||
border: 0;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.5em 1em;
|
||||
box-shadow: 0 0 2em var(--shadow);
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--background-surface);
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
box-shadow: 0 0 2em var(--shadow);
|
||||
}
|
||||
header h1 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--background-surface);
|
||||
padding: 1em;
|
||||
box-shadow: 0 0 2em var(--shadow);
|
||||
}
|
||||
|
||||
.result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 60%;
|
||||
gap: 1em;
|
||||
padding: 1em;
|
||||
background-color: var(--background-surface);
|
||||
box-shadow: 0 0 2em var(--shadow);
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.result-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
}
|
||||
.result-info img {
|
||||
width: 5.5em;
|
||||
height: 5.5em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.result-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.result-text h2 {
|
||||
font-size: 1em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
223
public/styles/normalize.css
vendored
Normal file
223
public/styles/normalize.css
vendored
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
/*
|
||||
Document
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Use a better box model (opinionated).
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
||||
2. Correct the line height in all browsers.
|
||||
3. Prevent adjustments of font size after orientation changes in iOS.
|
||||
4. Use a more readable tab size (opinionated).
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family:
|
||||
system-ui,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji'; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
tab-size: 4; /* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
Sections
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Text-level semantics
|
||||
====================
|
||||
*/
|
||||
|
||||
/**
|
||||
Add the correct font weight in Chrome and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
||||
2. Correct the odd 'em' font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family:
|
||||
ui-monospace,
|
||||
SFMono-Regular,
|
||||
Consolas,
|
||||
'Liberation Mono',
|
||||
Menlo,
|
||||
monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Tabular data
|
||||
============
|
||||
*/
|
||||
|
||||
/**
|
||||
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
*/
|
||||
|
||||
table {
|
||||
border-color: currentcolor;
|
||||
}
|
||||
|
||||
/*
|
||||
Forms
|
||||
=====
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to 'inherit' in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Interactive
|
||||
===========
|
||||
*/
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue