Simple landing page
Araozu
parent
a4f347f350
commit
d7bddfd549
|
|
@ -1 +1,3 @@
|
|||
node_modules
|
||||
tailwind/output.css
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,60 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="/tailwind/output.css" rel="stylesheet">
|
||||
|
||||
<link href="/styles/global.css" rel="stylesheet" />
|
||||
<title>Misti</title>
|
||||
|
||||
<!-- Google fonts - Inter -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--js-color: #FFE70B;
|
||||
--dark-color: #0f0f0f;
|
||||
}
|
||||
|
||||
body ::selection {
|
||||
background-color: var(--js-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body ::selection {
|
||||
color: var(--js-color);
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="text-3xl font-bold underline">
|
||||
Hello world!
|
||||
</h1>
|
||||
<div class="text-center">
|
||||
<div class="py-12 flex justify-center">
|
||||
<img src="/svg/logo_color.svg" alt="Misti logo" height="200" />
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl px-2">
|
||||
<b>A type-safe, consistent, compiled language for JS</b>
|
||||
</h2>
|
||||
|
||||
<!-- Demo code -->
|
||||
|
||||
<div class="px-4">
|
||||
<!-- TODO: add colors from variables -->
|
||||
<a class="inline-block py-1 px-4 my-1 mx-2 border-js-color bg-bg-color text-main-color hover:text-dark-color hover:bg-js-color border-2 rounded-full cursor-pointer select-none">
|
||||
Learn
|
||||
</a>
|
||||
|
||||
<a class="inline-block py-1 px-4 my-1 mx-2 border-js-color bg-bg-color text-main-color hover:text-dark-color hover:bg-js-color border-2 rounded-full cursor-pointer select-none">
|
||||
API
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@
|
|||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"watch": "concurrently -k \"tailwindcss -i ./tailwind/input.css -o ./tailwind/output.css --watch\" \"serve . -p 3333\""
|
||||
"watch": "concurrently -k \"tailwindcss -i ./tailwind/input.css -o ./tailwind/output.css --watch\" \"live-server . --port=3333\""
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"concurrently": "^7.6.0",
|
||||
"live-server": "^1.2.2",
|
||||
"serve": "^14.2.0",
|
||||
"tailwindcss": "^3.2.7"
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,312 @@
|
|||
body ::selection {
|
||||
background-color: var(--js-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
:root {
|
||||
--js-color: #FFE70B;
|
||||
--dark-color: #0f0f0f;
|
||||
--light-color: white;
|
||||
--error-color: #ff3b3b;
|
||||
--error-text-color: #410002;
|
||||
--error-bg-color: #ffdad6;
|
||||
|
||||
--c1: #e7b711;
|
||||
--c2: #038dce;
|
||||
--c3: #ffaed7;
|
||||
--c4: #f44336;
|
||||
--c5: #39b487;
|
||||
--c3-transparent: #772957; /* rgba(252, 168, 209, 0.35); */
|
||||
|
||||
--bg-color: var(--dark-color);
|
||||
--color: #dedede;
|
||||
--code-bg-color: #151515;
|
||||
--code-color: #bababa;
|
||||
--border-color: #72787e;
|
||||
|
||||
/* C1 Material Colors */
|
||||
--c1-primary: #f1c01f;
|
||||
|
||||
/* C2 Material Colors */
|
||||
--c2-primary: #90ccff;
|
||||
|
||||
/* C3 Material Colors */
|
||||
--c3-primary: #ffaed7;
|
||||
--c3-on-primary: #5b113f;
|
||||
--c3-primary-container: #782957;
|
||||
--c3-on-primary-container: #ffd8e9;
|
||||
|
||||
/* C4 Material Colors */
|
||||
--c4-primary: #ffb4a8;
|
||||
|
||||
|
||||
/* C5 Material Colors */
|
||||
--c5-primary: #66dcac;
|
||||
--c5-on-primary: #003825;
|
||||
--c5-primary-container: #005137;
|
||||
--c5-on-primary-container: #83f9c7;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--c2: #038dce;
|
||||
|
||||
--bg-color: #fffdfc;
|
||||
--color: #202020;
|
||||
--code-bg-color: #fdf6e3;
|
||||
--code-color: #073642;
|
||||
--border-color: rgba(64, 64, 64, 0.25);
|
||||
|
||||
--c3-transparent: #ffd8ea;
|
||||
|
||||
/* C1 Material Colors */
|
||||
--c1-primary: #765b00;
|
||||
|
||||
/* C2 Material Colors */
|
||||
--c2-primary: #006397;
|
||||
|
||||
/* C3 Material Colors */
|
||||
--c3-primary: #954170;
|
||||
--c3-on-primary: #ffffff;
|
||||
--c3-primary-container: #ffd8e9;
|
||||
--c3-on-primary-container: #3c0027;
|
||||
|
||||
/* C4 Material Colors */
|
||||
--c4-primary: #bc1714;
|
||||
|
||||
/* C5 Material Colors */
|
||||
--c5-primary: #006c4b;
|
||||
--c5-on-primary: #ffffff;
|
||||
--c5-primary-container: #83f9c7;
|
||||
--c5-on-primary-container: #002114;
|
||||
|
||||
}
|
||||
|
||||
body ::selection {
|
||||
color: var(--js-color);
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.hide-on-small {}
|
||||
|
||||
.padded {
|
||||
padding-left: 2rem;
|
||||
border-left: solid 1px var(--border-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
svg.railroad-diagram {
|
||||
background-color: rgba(0,0,0,0) !important;
|
||||
}
|
||||
|
||||
svg.railroad-diagram path {
|
||||
stroke: var(--c1) !important;
|
||||
}
|
||||
|
||||
svg.railroad-diagram rect {
|
||||
stroke: var(--c2) !important;
|
||||
fill: var(--c2) !important;
|
||||
}
|
||||
|
||||
svg.railroad-diagram g.non-terminal rect {
|
||||
stroke: var(--c4) !important;
|
||||
fill: var(--c4) !important;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text {
|
||||
font-family: Inter, sans-serif !important;
|
||||
font-weight: normal !important;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
g.terminal text {
|
||||
font-family: Iosevka, sans-serif !important;
|
||||
}
|
||||
|
||||
.railroad-code {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.railroad-code svg {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin: 0 auto;
|
||||
max-width: 1400px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.rainbow-separator {
|
||||
background-color: var(--js-color);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
code {
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
border: solid 1px rgba(150, 150, 150, 0.5);
|
||||
}
|
||||
|
||||
code, pre {
|
||||
font-family: "SF Mono", Iosevka, "Source Code Pro", monospace !important;
|
||||
font-variant-ligatures: discretionary-ligatures;
|
||||
}
|
||||
|
||||
.marked pre {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.marked p {
|
||||
line-height: 1.5rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.marked h1 {
|
||||
font-weight: 600;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.marked h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 500;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.marked h2:target {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--c5);
|
||||
}
|
||||
|
||||
.marked h3, .marked h4, .marked h5 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.marked table {
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.marked table, th, td {
|
||||
border: solid 1px rgba(150, 150, 150, 1);
|
||||
}
|
||||
|
||||
.marked table td, th {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.md-modifier {
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.md-modifier > div {
|
||||
padding-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.md-info {
|
||||
border: solid 2px var(--js-color);
|
||||
}
|
||||
|
||||
.md-info > div {
|
||||
color: var(--js-color);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.md-info {
|
||||
background-color: var(--js-color);
|
||||
}
|
||||
|
||||
.md-info > div {
|
||||
color: var(--dark-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.md-warning {
|
||||
border: solid 3px var(--c4);
|
||||
}
|
||||
|
||||
.md-warning > div {
|
||||
color: var(--c4);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.md-warning {
|
||||
background-color: var(--error-bg-color);
|
||||
color: var(--error-text-color);
|
||||
}
|
||||
|
||||
.md-warning > div {
|
||||
color: var(--c4);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.md-implemented {
|
||||
border: solid 3px var(--c2-primary);
|
||||
}
|
||||
|
||||
.md-implemented > div {
|
||||
color: var(--c2-primary);
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.marked p {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.marked h1 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.marked h2 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.railroad-code svg {
|
||||
display: none;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="184.0pt" height="72.0pt" viewBox="0 0 184.000000 72.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,72.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path d="M520 680 c-41 -41 -13 -112 45 -112 58 0 86 71 45 112 -11 11 -31 20 -45 20 -14 0 -34 -9 -45 -20z"/> <path d="M40 683 c0 -5 7 -17 15 -27 22 -29 22 -413 0 -442 -8 -10 -15 -22 -15 -26 0 -5 41 -8 92 -8 87 0 90 1 75 18 -26 29 -24 232 2 232 4 0 34 -55 67 -122 l59 -123 157 -3 c87 -1 158 -1 158 2 0 2 -7 17 -15 32 -11 22 -15 66 -15 183 l0 153 -22 -5 c-13 -3 -44 -9 -70 -12 -52 -8 -56 -14 -32 -50 13 -19 15 -47 12 -144 -5 -183 -28 -186 -108 -16 -46 98 -89 155 -116 155 -28 0 -12 24 80 116 l94 94 -63 0 c-60 0 -62 -1 -58 -24 4 -18 -11 -41 -68 -104 -41 -45 -75 -79 -78 -77 -2 3 -3 41 -3 86 1 62 5 86 18 100 17 18 15 19 -74 19 -51 0 -92 -3 -92 -7z"/> <path d="M1132 678 c-41 -9 -42 -10 -27 -31 22 -32 22 -412 -1 -445 l-15 -22 90 0 c50 0 91 3 91 8 0 4 -7 16 -15 26 -16 21 -22 156 -7 156 5 0 21 -33 37 -72 45 -118 44 -118 125 -118 73 0 84 6 50 28 -11 6 -33 40 -48 75 -26 56 -79 117 -103 117 -23 0 -3 22 71 76 44 32 80 63 80 67 0 4 -26 7 -57 5 -53 -3 -58 -5 -58 -27 0 -16 -17 -38 -52 -68 l-53 -46 0 142 0 141 -32 -1 c-18 -1 -52 -5 -76 -11z"/> <path d="M1728 559 c-21 -12 -24 -62 -5 -77 6 -5 21 -12 32 -14 17 -3 20 -10 17 -53 -7 -109 -51 -185 -109 -185 -35 0 -43 34 -43 186 l0 134 -75 0 c-75 0 -86 -5 -62 -28 8 -9 14 -59 17 -142 6 -147 18 -174 85 -199 33 -13 43 -13 81 1 43 15 43 15 32 -6 -27 -52 -96 -116 -125 -116 -8 0 -10 11 -6 35 7 43 -9 65 -48 65 -70 0 -83 -92 -18 -125 75 -39 164 5 230 115 119 196 116 479 -3 409z"/> <path d="M728 538 c-60 -11 -67 -20 -43 -52 21 -28 21 -244 0 -272 -8 -10 -15 -22 -15 -26 0 -5 38 -8 85 -8 47 0 85 2 85 4 0 2 -7 17 -15 32 -18 35 -20 185 -4 233 18 51 56 64 89 31 18 -18 20 -33 20 -140 0 -117 1 -122 26 -147 21 -21 32 -24 61 -20 36 6 63 23 63 38 0 5 -7 9 -15 9 -12 0 -15 19 -15 115 0 128 -12 173 -54 200 -35 23 -113 16 -155 -14 l-31 -22 0 25 c0 15 -5 25 -12 25 -7 -1 -39 -6 -70 -11z"/> </g> </svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 172 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 172 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="300pt" height="100pt"
|
||||
viewBox="0 0 300.000000 100.000000" preserveAspectRatio="xMidYMid meet">
|
||||
<g transform="translate(-30.000000,140.000000) scale(0.100000,-0.100000)" fill="#ffffff" stroke="none">
|
||||
<path d="M310 1300 c0 -79 0 -80 25 -80 l25 0 0 -215 0 -215 -25 0 c-25 0 -25 -1 -25 -80 l0 -80 190 0 190 0 0 80 0 80 -30 0 -30 0 0 80 c0 79 0 80 26 80 28 0 65 -16 76 -34 4 -6 8 -73 8 -148 l0 -138 155 0 155 0 0 80 c0 79 0 80 -25 80 -24 0 -25 3 -25 54 0 73 -13 103 -54 122 l-34 17 38 36 c78 74 81 222 6 297 -56 56 -106 64 -393 64 l-253 0 0 -80z m414 -96 c18 -18 21 -85 6 -115 -8 -14 -21 -19 -55 -19 l-45 0 0 75 0 75 39 0 c23 0 46 -7 55 -16z"/>
|
||||
<path d="M2310 1256 c0 -46 -18 -76 -50 -82 l-30 -6 0 -79 c0 -78 0 -79 25 -79 l25 0 0 -128 c0 -113 3 -133 23 -172 33 -67 72 -85 182 -85 50 0 107 6 128 13 l38 14 -3 71 -3 72 -51 -3 c-75 -5 -84 7 -84 124 l0 94 65 0 65 0 0 80 0 80 -65 0 -65 0 0 55 0 55 -100 0 c-99 0 -100 0 -100 -24z"/>
|
||||
<path d="M1905 1183 c-105 -14 -165 -58 -185 -134 -17 -61 -3 -108 44 -154 42 -41 73 -54 179 -75 46 -9 57 -15 55 -28 -3 -15 -19 -17 -131 -15 l-127 1 0 -64 0 -63 38 -11 c62 -18 222 -24 281 -11 62 13 114 48 136 91 24 46 20 140 -8 181 -28 43 -93 76 -165 84 -32 3 -68 11 -81 16 -20 8 -21 12 -10 26 12 14 30 15 131 9 l118 -6 0 64 0 65 -52 10 c-66 12 -183 20 -223 14z"/>
|
||||
<path d="M1050 1090 c0 -72 2 -80 19 -80 17 0 19 -11 23 -127 3 -108 7 -136 27 -175 29 -61 72 -88 139 -88 62 0 98 13 135 48 l27 26 0 -32 0 -32 135 0 135 0 0 80 c0 79 0 80 -25 80 l-25 0 0 190 0 190 -135 0 -135 0 0 -80 c0 -79 0 -80 25 -80 25 0 25 0 25 -98 0 -106 -7 -122 -49 -122 -54 0 -56 5 -59 200 l-3 180 -130 0 -129 0 0 -80z"/>
|
||||
<path d="M2670 1090 c0 -72 2 -80 19 -80 17 0 19 -11 23 -127 6 -183 36 -241 134 -263 49 -11 128 10 165 46 l29 28 0 -41 c0 -49 -17 -70 -66 -79 -34 -6 -176 2 -221 13 -22 5 -23 3 -23 -75 l0 -81 58 -12 c31 -7 109 -13 172 -14 108 0 119 2 175 30 64 32 97 71 115 134 5 20 10 160 10 319 l0 282 -135 0 -135 0 0 -80 c0 -79 0 -80 25 -80 25 0 25 0 25 -98 0 -106 -7 -122 -49 -122 -54 0 -56 5 -59 200 l-3 180 -130 0 -129 0 0 -80z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -2,6 +2,39 @@
|
|||
module.exports = {
|
||||
content: ["./**/*.html"],
|
||||
theme: {
|
||||
colors: {
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor',
|
||||
|
||||
"js-color": "var(--js-color)",
|
||||
"dark-color": "var(--dark-color)",
|
||||
"light-color": "var(--light-color)",
|
||||
"error-color": "var(--error-color)",
|
||||
"error-text-color": "var(--error-text-color)",
|
||||
"error-bg-color": "var(--error-bg-color)",
|
||||
"c1": "var(--c1)",
|
||||
"c2": "var(--c2)",
|
||||
"c3": "var(--c3)",
|
||||
"c4": "var(--c4)",
|
||||
"c5": "var(--c5)",
|
||||
"c3-transparent": "var(--c3-transparent)",
|
||||
"main-color": "var(--color)",
|
||||
"code-bg-color": "var(--code-bg-color)",
|
||||
"code-color": "var(--code-color)",
|
||||
"border-color": "var(--border-color)",
|
||||
"c1-primary": "var(--c1-primary)",
|
||||
"c2-primary": "var(--c2-primary)",
|
||||
"c3-primary": "var(--c3-primary)",
|
||||
"c3-on-primary": "var(--c3-on-primary)",
|
||||
"c3-primary-container": "var(--c3-primary-container)",
|
||||
"c3-on-primary-container": "var(--c3-on-primary-container)",
|
||||
"c4-primary": "var(--c4-primary)",
|
||||
"c5-primary": "var(--c5-primary)",
|
||||
"c5-on-primary": "var(--c5-on-primary)",
|
||||
"c5-primary-container": "var(--c5-primary-container)",
|
||||
"c5-on-primary-container": "var(--c5-on-primary-container)",
|
||||
"bg-color": "var(--bg-color)",
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
|
|
|
|||
|
|
@ -1,532 +0,0 @@
|
|||
/*
|
||||
! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
border-width: 0;
|
||||
/* 2 */
|
||||
border-style: solid;
|
||||
/* 2 */
|
||||
border-color: #e5e7eb;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
--tw-content: '';
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use a consistent sensible line-height in all browsers.
|
||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
3. Use a more readable tab size.
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.5;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
-moz-tab-size: 4;
|
||||
/* 3 */
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
/* 3 */
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
/* 4 */
|
||||
font-feature-settings: normal;
|
||||
/* 5 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove the margin in all browsers.
|
||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/* 1 */
|
||||
line-height: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
3. Ensure horizontal rules are visible by default.
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
border-top-width: 1px;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset links to optimize for opt-in styling instead of opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font weight in Edge and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font family by default.
|
||||
2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
3. Remove gaps between table borders by default.
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0;
|
||||
/* 1 */
|
||||
border-color: inherit;
|
||||
/* 2 */
|
||||
border-collapse: collapse;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
3. Remove default padding in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
font-weight: inherit;
|
||||
/* 1 */
|
||||
line-height: inherit;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Remove default button styles.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
background-color: transparent;
|
||||
/* 2 */
|
||||
background-image: none;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Use the modern Firefox focus style for all focusable elements.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
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 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
Removes the default spacing and border for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent resizing textareas horizontally by default.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||
*/
|
||||
|
||||
input::-moz-placeholder, textarea::-moz-placeholder {
|
||||
opacity: 1;
|
||||
/* 1 */
|
||||
color: #9ca3af;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1;
|
||||
/* 1 */
|
||||
color: #9ca3af;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Set the default cursor for buttons.
|
||||
*/
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
Make sure disabled buttons don't get the pointer cursor.
|
||||
*/
|
||||
|
||||
:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block;
|
||||
/* 1 */
|
||||
vertical-align: middle;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
*/
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Make elements with the HTML hidden attribute stay hidden by default */
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
.bg-gray-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
Loading…
Reference in New Issue