První verze stránek

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

README.md

@@ -0,0 +1,3 @@
+# UseLinux.cz
+
+Zdrojové kódy webové stránky UseLinux.cz

app.vue

@@ -0,0 +1,5 @@
+<template>
+	<div>
+		<NuxtLayout />
+	</div>
+</template>

layouts/default.vue

@@ -0,0 +1,10 @@
+<template>
+	<div>
+		<nav>
+			<div class="inner">
+				<div class="logo">Use Linux</div>
+			</div>
+		</nav>
+		<NuxtPage />
+	</div>
+</template>

nuxt.config.ts

@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+	css: [
+		"~/src/css/style.css",
+		"~/src/css/fonts.css"
+	]
+})

package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "nuxt": "^3.3.1"
+  }
+}

pages/index.vue

@@ -0,0 +1,23 @@
+<template>
+	<div>
+
+		<section class="header hero">
+			<div class="inner hero-grid">
+				<div>
+					<h1>Používej <div class="alt">Linux</div>.</h1>
+					<p>Svobodný a volně dostupný operační systém.</p>
+				</div>
+				<div>
+					<img src="~/assets/linux.svg">
+				</div>
+			</div>
+		</section>
+
+		<section>
+			<div class="inner">
+
+			</div>
+		</section>
+
+	</div>
+</template>

src/css/fonts.css

@@ -0,0 +1,8 @@
+@font-face {
+	font-family: "Cantarell";
+	src: url("~/src/fonts/Cantarell.woff2") format("woff2"),
+		url("~/src/fonts/Cantarell.otf") format("opentype");
+	font-weight: 100 900;
+	font-display: swap;
+	font-style: normal;
+}

src/css/style.css

@@ -0,0 +1,46 @@
+body {
+
+	--site-width: 1200px;
+	--site-padding: 20px;
+	--nav-height: 50px;
+
+	--text-color: #000a;
+
+	--border-shadow: inset 0 -1px 0 0 #0001;
+
+}
+
+
+body {font-family: Cantarell, sans-serif; font-size: 16px; 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 > .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;}
+
+
+section .inner {max-width: var(--site-width); padding: 40px var(--site-padding); margin: auto;}
+
+section.header {box-shadow: var(--box-shadow), var(--border-shadow);}
+
+section:is(.header, .first) {padding-top: var(--nav-height);}
+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 .alt {background: linear-gradient(45deg, #ff2904, #ffa704); 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;}
+.hero-grid > :nth-child(2) {text-align: right;}
+
+@media screen and (max-width: 700px) {
+	.hero-grid {grid-template-columns: 1fr;}
+	.hero-grid > :nth-child(2) {display: none;}
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}