Přidání vlastností linuxu na úvodní stránce
This commit is contained in:
parent
ba015e0816
commit
670a49d62b
|
|
@ -2,6 +2,8 @@
|
|||
export default defineNuxtConfig({
|
||||
css: [
|
||||
"~/src/css/style.css",
|
||||
"~/src/css/basics.css",
|
||||
"~/src/css/fonts.css"
|
||||
]
|
||||
})
|
||||
],
|
||||
modules: ['nuxt-icon']
|
||||
});
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nuxt": "^3.3.1"
|
||||
"nuxt": "^3.3.1",
|
||||
"nuxt-icon": "^0.3.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<section class="header hero">
|
||||
<div class="inner hero-grid">
|
||||
<div>
|
||||
<h1>Používej <div class="alt">Linux</div>.</h1>
|
||||
<h1>{{ actions[random_action] }} <div class="alt">Linux</div>.</h1>
|
||||
<p>Svobodný a volně dostupný operační systém.</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -14,10 +14,47 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class="inner">
|
||||
|
||||
<div class="inner features">
|
||||
<div v-for="f in features">
|
||||
<div class="head">
|
||||
<Icon :name="f.icon" />
|
||||
<div class="title">{{ f.title }}</div>
|
||||
</div>
|
||||
<div class="text">
|
||||
{{ f.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
actions: [
|
||||
"Používej", "Zapni", "Přejdi na", "Vyzkoušej", "Zažij", "Přepni na", "Získej", "Užij si"
|
||||
],
|
||||
random_action: 0,
|
||||
features: [
|
||||
{icon: "ic:baseline-rocket-launch", title: "Rychlost", text: "Linux má velmi nízké nároky na hardware a dobře optimalizovaný kód, je proto velmi rychlý i na starších počítačích."},
|
||||
{icon: "mdi:shield-check", title: "Bezpečnost", text: "Linux má většinou menší počet bezpečnostních hrozeb než Windows, protože je open-source a zabezpečení je v rukou aktivní komunity."},
|
||||
{icon: "material-symbols:settings-suggest-rounded", title: "Spolehlivost", text: "Linux je znám pro svou výbornou stabilitu a méně častá selhání, což z něj dělá ideální volbu nejen pro servery a kritické aplikace."},
|
||||
{icon: "material-symbols:lock-person", title: "Soukromí", text: "Linux nabízí uživatelům větší kontrolu nad jejich daty a soukromím, a to i díky velkému množství open-source nástrojů a aplikací."},
|
||||
{icon: "material-symbols:deceased", title: "Snadné používání", text: "Je k dispozici mnoho uživatelsky přívětivých distribucí, které mají snadné uživatelské rozhraní a přehledné ovládání."},
|
||||
{icon: "gridicons:customize", title: "Přizpůsobitelnost", text: "Díky velké míře přizpůsobitelnosti Linux umožňuje uživatelům upravit si systém podle svých představ, aby vyhovoval každému."}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
change_action() {
|
||||
this.random_action = Math.floor(Math.random() * this.actions.length);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.change_action();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
115
pnpm-lock.yaml
115
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:
|
||||
|
|
|
|||
114
src/css/basics.css
Normal file
114
src/css/basics.css
Normal file
|
|
@ -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;}
|
||||
|
|
@ -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;}
|
||||
}
|
||||
Loading…
Reference in a new issue