diff --git a/index.html b/index.html index 6ec887a..134ec49 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,25 @@ - - - - cyclocrust - - -
- - -

cyclocrust

-
- + + + + cyclocrust + + +
+

cyclocrust 51

+ +
+
+ main content +
+ diff --git a/package-lock.json b/package-lock.json index 8fdf08c..7307fe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -409,7 +409,6 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "license": "MIT", - "peer": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -1257,7 +1256,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -1279,7 +1277,6 @@ "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz", "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==", "license": "MIT", - "peer": true, "dependencies": { "posthtml-parser": "^0.11.0", "posthtml-render": "^3.0.0" diff --git a/static/css/base.css b/static/css/base.css index 0f4913f..95ae0a1 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -1,35 +1,53 @@ body { - background: black; + background: black; + display: grid; + grid-template-columns: minmax(1em, 20%) repeat(6, 1fr) minmax(1em, 20%); + grid-template-rows: max-content auto; + color: white; + gap: 2em 0; } -.main { - display: grid; - grid-template-columns: repeat(8, 1fr); - grid-template-rows: repeat(8, 1fr); - height: 100vh; +.head, .main { + display: grid; + grid-template-rows: subgrid; + grid-column: 2/8; } -.main h1 { - grid-column: 3/7; - grid-row: 2/3; - color: white; - font-size: clamp(100%, 1rem + 8vw, 200px); +.head { + grid-row: 1/2; + grid-template-columns: min-content max-content auto; + padding-top: 2em; + gap: 1em; + align-items: center; +} + +.head > .logo > svg { + display: block; + fill: white; + height: auto; + width: 100px; } -.hero { - grid-column: 1/-1; - grid-row: 1/-1; - width: 100%; - height: 100%; - object-fit: cover; +.head > .logo { + grid-column: 1/2; } -.logo { - fill: white; - grid-column: 3/7; - grid-row: 3/-1; +.head > h1 { + color: white; + grid-column: 2/3; } -.logo > svg { - display: block; +.head > ul { + grid-column: 3/4; + list-style: ""; + justify-self: end; } + +.head .links a { + color: white; +} + +.main { + grid-row: 2/-1; +} + diff --git a/static/css/reset.css b/static/css/reset.css index 6374cb1..c98df43 100644 --- a/static/css/reset.css +++ b/static/css/reset.css @@ -13,3 +13,7 @@ p { h1, h2, h3, h4, h5, h6 { text-wrap: balance; } + +ul { + padding: 0; +}