diff --git a/nuxt.config.ts b/nuxt.config.ts index 0f772ca..f131bde 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -2,6 +2,8 @@ export default defineNuxtConfig({ css: [ "~/src/css/style.css", + "~/src/css/basics.css", "~/src/css/fonts.css" - ] -}) + ], + modules: ['nuxt-icon'] +}); \ No newline at end of file diff --git a/package.json b/package.json index 21dce18..b5524ff 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "postinstall": "nuxt prepare" }, "devDependencies": { - "nuxt": "^3.3.1" + "nuxt": "^3.3.1", + "nuxt-icon": "^0.3.3" } } diff --git a/pages/index.vue b/pages/index.vue index 8b3716d..45cd07c 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -4,7 +4,7 @@
-

Používej
Linux
.

+

{{ actions[random_action] }}
Linux
.

Svobodný a volně dostupný operační systém.

@@ -14,10 +14,47 @@
-
- +
+
+
+ +
{{ f.title }}
+
+
+ {{ f.text }} +
+
- \ No newline at end of file + + + \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aa82d73..e57b30c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,9 +2,11 @@ lockfileVersion: 5.4 specifiers: nuxt: ^3.3.1 + nuxt-icon: ^0.3.3 devDependencies: nuxt: 3.3.1 + nuxt-icon: 0.3.3 packages: @@ -719,6 +721,18 @@ packages: dev: true optional: true + /@iconify/types/2.0.0: + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + dev: true + + /@iconify/vue/4.1.0: + resolution: {integrity: sha512-rBQVxNoSDooqgWkQg2MqkIHkH/huNuvXGqui5wijc1zLnU7TKzbBHW9VGmbnV4asNTmIHmqV4Nvt0M2rZ/9nHA==} + peerDependencies: + vue: '>=3' + dependencies: + '@iconify/types': 2.0.0 + dev: true + /@ioredis/commands/1.2.0: resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==} dev: true @@ -1669,6 +1683,23 @@ packages: engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} dev: true + /changelogen/0.4.1: + resolution: {integrity: sha512-p1dJO1Z995odIxdypzAykHIaUu+XnEvwYPSTyKJsbpL82o99sxN1G24tbecoMxTsV4PI+ZId82GJXRL2hhOeJA==} + hasBin: true + dependencies: + c12: 1.2.0 + consola: 2.15.3 + convert-gitmoji: 0.1.3 + execa: 6.1.0 + mri: 1.2.0 + node-fetch-native: 1.0.2 + pkg-types: 1.0.2 + scule: 1.0.0 + semver: 7.3.8 + transitivePeerDependencies: + - supports-color + dev: true + /chardet/0.7.0: resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==} dev: true @@ -1821,6 +1852,10 @@ packages: resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==} dev: true + /convert-gitmoji/0.1.3: + resolution: {integrity: sha512-t5yxPyI8h8KPvRwrS/sRrfIpT2gJbmBAY0TFokyUBy3PM44RuFRpZwHdACz+GTSPLRLo3s4qsscOMLjHiXBwzw==} + dev: true + /convert-source-map/1.9.0: resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} dev: true @@ -2270,6 +2305,21 @@ packages: strip-final-newline: 2.0.0 dev: true + /execa/6.1.0: + resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + cross-spawn: 7.0.3 + get-stream: 6.0.1 + human-signals: 3.0.1 + is-stream: 3.0.0 + merge-stream: 2.0.0 + npm-run-path: 5.1.0 + onetime: 6.0.0 + signal-exit: 3.0.7 + strip-final-newline: 3.0.0 + dev: true + /external-editor/3.1.0: resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==} engines: {node: '>=4'} @@ -2619,6 +2669,11 @@ packages: engines: {node: '>=10.17.0'} dev: true + /human-signals/3.0.1: + resolution: {integrity: sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==} + engines: {node: '>=12.20.0'} + dev: true + /iconv-lite/0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -2786,6 +2841,11 @@ packages: engines: {node: '>=8'} dev: true + /is-stream/3.0.0: + resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dev: true + /is-unicode-supported/1.3.0: resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==} engines: {node: '>=12'} @@ -3044,6 +3104,11 @@ packages: engines: {node: '>=6'} dev: true + /mimic-fn/4.0.0: + resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==} + engines: {node: '>=12'} + dev: true + /minimatch/3.0.8: resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==} dependencies: @@ -3282,6 +3347,13 @@ packages: path-key: 3.1.1 dev: true + /npm-run-path/5.1.0: + resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + path-key: 4.0.0 + dev: true + /npmlog/5.0.1: resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==} dependencies: @@ -3305,6 +3377,32 @@ packages: fsevents: 2.3.2 dev: true + /nuxt-config-schema/0.4.5: + resolution: {integrity: sha512-Y5anu5puDfMJfDP7IYjXsn6Dvj262HtjZqa73jCBbFRCc5jnjrs+BEpJJmtPG32ZsqzO2+RL4oTNb3H6IfKZLQ==} + dependencies: + '@nuxt/kit': 3.3.1 + changelogen: 0.4.1 + defu: 6.1.2 + jiti: 1.18.2 + pathe: 1.1.0 + untyped: 1.2.2 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + + /nuxt-icon/0.3.3: + resolution: {integrity: sha512-KdhJAigBGTP8/YIFZ3orwetk40AgLq6VQ5HRYuDLmv5hiDptor9Ro+WIdZggHw7nciRxZvDdQkEwi9B5G/jrkQ==} + dependencies: + '@iconify/vue': 4.1.0 + '@nuxt/kit': 3.3.1 + nuxt-config-schema: 0.4.5 + transitivePeerDependencies: + - rollup + - supports-color + - vue + dev: true + /nuxt/3.3.1: resolution: {integrity: sha512-1DTFXEr+FlZO/hyw765cb9a/AiGysHIGLNl8NGJtURwUWC4gd+Z3y5DnL04PE5fVJ08yB/KJwc0t6StijbL8wQ==} engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0} @@ -3418,6 +3516,13 @@ packages: mimic-fn: 2.1.0 dev: true + /onetime/6.0.0: + resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==} + engines: {node: '>=12'} + dependencies: + mimic-fn: 4.0.0 + dev: true + /open/8.4.2: resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==} engines: {node: '>=12'} @@ -3482,6 +3587,11 @@ packages: engines: {node: '>=8'} dev: true + /path-key/4.0.0: + resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==} + engines: {node: '>=12'} + dev: true + /path-parse/1.0.7: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} dev: true @@ -4244,6 +4354,11 @@ packages: engines: {node: '>=6'} dev: true + /strip-final-newline/3.0.0: + resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==} + engines: {node: '>=12'} + dev: true + /strip-literal/1.0.1: resolution: {integrity: sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==} dependencies: diff --git a/src/css/basics.css b/src/css/basics.css new file mode 100644 index 0000000..98e7cd3 --- /dev/null +++ b/src/css/basics.css @@ -0,0 +1,114 @@ +body {font-size: 16px;} + +h1, h2, h3, h4, h5, h6, p {margin: .75em 0;} + +h1 {font-size: 1.70em;} +h2 {font-size: 1.50em;} +h3 {font-size: 1.35em;} +h4 {font-size: 1.20em;} +h5 {font-size: 1.10em;} +h6 {font-size: 1.00em;} + +.m-1 {margin: 0.25rem !important;} +.m-2 {margin: 0.5rem !important;} +.m-3 {margin: 1rem !important;} +.m-4 {margin: 1.5rem !important;} +.m-5 {margin: 3rem !important;} +.m-auto {margin: auto !important;} + +.mx-0 {margin-right: 0 !important; margin-left: 0 !important;} +.mx-1 {margin-right: 0.25rem !important; margin-left: 0.25rem !important;} +.mx-2 {margin-right: 0.5rem !important; margin-left: 0.5rem !important;} +.mx-3 {margin-right: 1rem !important; margin-left: 1rem !important;} +.mx-4 {margin-right: 1.5rem !important; margin-left: 1.5rem !important;} +.mx-5 {margin-right: 3rem !important; margin-left: 3rem !important;} +.mx-auto {margin-right: auto !important; margin-left: auto !important;} + +.my-0 {margin-top: 0 !important; margin-bottom: 0 !important;} +.my-1 {margin-top: 0.25rem !important; margin-bottom: 0.25rem !important;} +.my-2 {margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;} +.my-3 {margin-top: 1rem !important; margin-bottom: 1rem !important;} +.my-4 {margin-top: 1.5rem !important; margin-bottom: 1.5rem !important;} +.my-5 {margin-top: 3rem !important; margin-bottom: 3rem !important;} +.my-auto {margin-top: auto !important; margin-bottom: auto !important;} + +.mt-0 {margin-top: 0 !important;} +.mt-1 {margin-top: 0.25rem !important;} +.mt-2 {margin-top: 0.5rem !important;} +.mt-3 {margin-top: 1rem !important;} +.mt-4 {margin-top: 1.5rem !important;} +.mt-5 {margin-top: 3rem !important;} +.mt-auto {margin-top: auto !important;} + +.mr-0 {margin-right: 0 !important;} +.mr-1 {margin-right: 0.25rem !important;} +.mr-2 {margin-right: 0.5rem !important;} +.mr-3 {margin-right: 1rem !important;} +.mr-4 {margin-right: 1.5rem !important;} +.mr-5 {margin-right: 3rem !important;} +.mr-auto {margin-right: auto !important;} + +.mb-0 {margin-bottom: 0 !important;} +.mb-1 {margin-bottom: 0.25rem !important;} +.mb-2 {margin-bottom: 0.5rem !important;} +.mb-3 {margin-bottom: 1rem !important;} +.mb-4 {margin-bottom: 1.5rem !important;} +.mb-5 {margin-bottom: 3rem !important;} +.mb-auto {margin-bottom: auto !important;} + +.ml-0 {margin-left: 0 !important;} +.ml-1 {margin-left: 0.25rem !important;} +.ml-2 {margin-left: 0.5rem !important;} +.ml-3 {margin-left: 1rem !important;} +.ml-4 {margin-left: 1.5rem !important;} +.ml-5 {margin-left: 3rem !important;} +.ml-auto {margin-left: auto !important;} + +.p-0 {padding: 0 !important;} +.p-1 {padding: 0.25rem !important;} +.p-2 {padding: 0.5rem !important;} +.p-3 {padding: 1rem !important;} +.p-4 {padding: 1.5rem !important;} +.p-5 {padding: 3rem !important;} + +.px-0 {padding-right: 0 !important; padding-left: 0 !important;} +.px-1 {padding-right: 0.25rem !important; padding-left: 0.25rem !important;} +.px-2 {padding-right: 0.5rem !important; padding-left: 0.5rem !important;} +.px-3 {padding-right: 1rem !important; padding-left: 1rem !important;} +.px-4 {padding-right: 1.5rem !important; padding-left: 1.5rem !important;} +.px-5 {padding-right: 3rem !important; padding-left: 3rem !important;} + +.py-0 {padding-top: 0 !important; padding-bottom: 0 !important;} +.py-1 {padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;} +.py-2 {padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;} +.py-3 {padding-top: 1rem !important; padding-bottom: 1rem !important;} +.py-4 {padding-top: 1.5rem !important; padding-bottom: 1.5rem !important;} +.py-5 {padding-top: 3rem !important; padding-bottom: 3rem !important;} + +.pt-0 {padding-top: 0 !important;} +.pt-1 {padding-top: 0.25rem !important;} +.pt-2 {padding-top: 0.5rem !important;} +.pt-3 {padding-top: 1rem !important;} +.pt-4 {padding-top: 1.5rem !important;} +.pt-5 {padding-top: 3rem !important;} + +.pe-0 {padding-right: 0 !important;} +.pe-1 {padding-right: 0.25rem !important;} +.pe-2 {padding-right: 0.5rem !important;} +.pe-3 {padding-right: 1rem !important;} +.pe-4 {padding-right: 1.5rem !important;} +.pe-5 {padding-right: 3rem !important;} + +.pb-0 {padding-bottom: 0 !important;} +.pb-1 {padding-bottom: 0.25rem !important;} +.pb-2 {padding-bottom: 0.5rem !important;} +.pb-3 {padding-bottom: 1rem !important;} +.pb-4 {padding-bottom: 1.5rem !important;} +.pb-5 {padding-bottom: 3rem !important;} + +.ps-0 {padding-left: 0 !important;} +.ps-1 {padding-left: 0.25rem !important;} +.ps-2 {padding-left: 0.5rem !important;} +.ps-3 {padding-left: 1rem !important;} +.ps-4 {padding-left: 1.5rem !important;} +.ps-5 {padding-left: 3rem !important;} \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index 783607c..d6529a0 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -8,12 +8,17 @@ body { --border-shadow: inset 0 -1px 0 0 #0001; + --brand-color: 255, 98, 4; + --brand-color-1: 255, 41, 4; + --brand-color-2: 255, 167, 4; + } +* {box-sizing: border-box;} -body {font-family: Cantarell, sans-serif; font-size: 16px; color: var(--text-color); margin: 0;} +body {font-family: Cantarell, sans-serif; color: var(--text-color); margin: 0;} -nav {position: fixed; top: 0; left: 0; width: 100%; background-color: #fffb; backdrop-filter: blur(10px); box-shadow: var(--border-shadow);} +nav {position: fixed; z-index: 100; top: 0; left: 0; width: 100%; background-color: #fffb; backdrop-filter: blur(10px); box-shadow: var(--border-shadow);} nav > .inner {max-width: var(--site-width); padding: 0px var(--site-padding); margin: auto; height: var(--nav-height); line-height: var(--nav-height);} nav .logo {font-weight: 700; font-size: 18px;} @@ -28,13 +33,10 @@ section:is(.header, .first) .inner {padding-top: 30px;} section .inner.no-padding {padding: 0 var(--site-padding);} -h1, h2, h3, h4, p {margin: .75em 0} - - section.hero {font-size: 1.7rem;} -section.hero .inner {padding: 90px var(--site-padding);} +section.hero .inner {padding: 90px var(--site-padding) 50px;} -section.hero .alt {background: linear-gradient(45deg, #ff2904, #ffa704); display: inline-block; font-weight: 900; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} +section.hero .alt {background: linear-gradient(45deg, rgb(var(--brand-color-1)), rgb(var(--brand-color-2))); display: inline-block; font-weight: 900; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .hero-grid {display: grid; align-items: center; grid-template-columns: 1fr max-content; gap: 40px;} .hero-grid img {height: 240px;} @@ -43,4 +45,21 @@ section.hero .alt {background: linear-gradient(45deg, #ff2904, #ffa704); display @media screen and (max-width: 700px) { .hero-grid {grid-template-columns: 1fr;} .hero-grid > :nth-child(2) {display: none;} +} + + +.features {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;} +.features > * {display: grid; grid-template-rows: max-content 1fr; position: relative; border-radius: 5px; background: linear-gradient(45deg, rgb(var(--brand-color-1), .5), rgb(var(--brand-color-2), .5)); color: #fff;} +.features > *::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border-radius: 5px; background: rgb(var(--brand-color));} +.features .head {display: flex; flex-direction: row; padding: 15px 20px 10px; justify-content: center; align-items: center; gap: 15px;} +.features .text {background-color: #fffd; margin: 5px; border-radius: 3px; padding: 15px; color: #000;} +.features .icon {font-size: 34px;} +.features .title {font-weight: 700; font-size: 18px;} + +@media screen and (max-width: 1200px) { + .features {grid-template-columns: 1fr 1fr;} +} + +@media screen and (max-width: 700px) { + .features {grid-template-columns: 1fr;} } \ No newline at end of file