Cyclocrust
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

recreate main layout

Browse Source
main
lambda 1 week ago
parent 83c839195a
commit b8262e550e
4 changed files with 67 additions and 45 deletions
Show Stats Download Patch File Download Diff File

41
index.html
Unescape View File

@ -1,22 +1,25 @@
<!doctype html> <!doctype html>
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="stylesheet" href="static/css/bundle.css"> <link rel="stylesheet" href="static/css/bundle.css">
<title>cyclocrust</title> <title>cyclocrust</title>
</head> </head>
<body> <body>
<div class="main"> <div class="head"> <div class="logo">
<img class="hero" src="static/images/hero.jpg" width="auto" height="auto" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.29378 184.2236">
<div class="logo"> <path d="M-9.29472 45.1525c-4.66648-4.43316-22.63243-20.2992-52.26458-20.2992-44.79821 0-80.7301 35.46525-80.7301 80.26346 0 43.39826 34.53195 80.03013 81.19675 80.03013 16.79933 0 35.9319-5.36645 51.79793-19.36589v-13.53279c-15.86603 17.26597-36.63187 23.56572-52.26458 23.56572-31.49874 0-69.9972-24.03237-69.9972-70.23052 0-39.43176 29.86547-71.39715 69.76388-71.39715 20.06586 0 39.19843 8.86631 52.4979 24.49902z" transform="rotate(-90 -17.0739 7.7792)"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.29378 184.2236"> <path d="M193.51833-164.8475c-4.66648-4.43316-22.63243-20.29919-52.26458-20.29919-44.7982 0-80.7301 35.46525-80.7301 80.26346 0 43.39826 34.53195 80.03013 81.19675 80.03013 16.79933 0 35.9319-5.36645 51.79793-19.36589v-13.5328c-15.86603 17.26598-36.63187 23.56573-52.26458 23.56573-31.49874 0-69.9972-24.03237-69.9972-70.23052 0-39.43176 29.86547-71.39715 69.76388-71.39715 20.06586 0 39.19843 8.86631 52.4979 24.49902z" transform="rotate(90 -7.7792 -17.0739)"/>
<path d="M-9.29472 45.1525c-4.66648-4.43316-22.63243-20.2992-52.26458-20.2992-44.79821 0-80.7301 35.46525-80.7301 80.26346 0 43.39826 34.53195 80.03013 81.19675 80.03013 16.79933 0 35.9319-5.36645 51.79793-19.36589v-13.53279c-15.86603 17.26597-36.63187 23.56572-52.26458 23.56572-31.49874 0-69.9972-24.03237-69.9972-70.23052 0-39.43176 29.86547-71.39715 69.76388-71.39715 20.06586 0 39.19843 8.86631 52.4979 24.49902z" transform="rotate(-90 -17.0739 7.7792)"/> <path d="M113.26131 101.40652a7.61095 7.99795 0 0 1-7.61096 7.99795 7.61095 7.99795 0 0 1-7.61095-7.99795 7.61095 7.99795 0 0 1 7.61095-7.99795 7.61095 7.99795 0 0 1 7.61096 7.99795" transform="translate(-24.85311 -9.2947)"/>
<path d="M193.51833-164.8475c-4.66648-4.43316-22.63243-20.29919-52.26458-20.29919-44.7982 0-80.7301 35.46525-80.7301 80.26346 0 43.39826 34.53195 80.03013 81.19675 80.03013 16.79933 0 35.9319-5.36645 51.79793-19.36589v-13.5328c-15.86603 17.26598-36.63187 23.56573-52.26458 23.56573-31.49874 0-69.9972-24.03237-69.9972-70.23052 0-39.43176 29.86547-71.39715 69.76388-71.39715 20.06586 0 39.19843 8.86631 52.4979 24.49902z" transform="rotate(90 -7.7792 -17.0739)"/> </svg>
<path d="M113.26131 101.40652a7.61095 7.99795 0 0 1-7.61096 7.99795 7.61095 7.99795 0 0 1-7.61095-7.99795 7.61095 7.99795 0 0 1 7.61095-7.99795 7.61095 7.99795 0 0 1 7.61096 7.99795" transform="translate(-24.85311 -9.2947)"/> </div>
<path d="M296.90096 121.92112h-12.954l-4.3688 14.3764c1.4732-.9144 3.1496-1.4732 5.2832-1.4732 5.6388 0 9.5504 4.0132 9.5504 9.7536 0 5.6896-4.064 9.7536-9.652 9.7536-3.4036 0-6.35-1.5748-8.2296-4.3688l-1.9812.8128c2.4384 4.2164 6.604 5.588 10.16 5.588 6.604 0 12.0396-4.5212 12.0396-11.8364 0-6.7564-4.572-11.7348-11.7856-11.7348-.8128 0-1.4732.1016-2.286.3048l2.8448-9.144h11.3792zm12.09044 33.8836h2.2352v-33.8836h-6.5024l-1.016 2.032h5.2832z" transform="translate(-216.85311 -117.88819)"/> <h1>cyclocrust 51</h1>
</svg> <ul class="links">
</div> <li><a href="links">контакты</a></li>
<h1>cyclocrust</h1> </ul>
</div> </div>
</body> <div class="main">
main content
</div>
</body>
</html> </html>

3
package-lock.json generated
Unescape View File

@ -409,7 +409,6 @@
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"anymatch": "~3.1.2", "anymatch": "~3.1.2",
"braces": "~3.0.2", "braces": "~3.0.2",
@ -1257,7 +1256,6 @@
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
@ -1279,7 +1277,6 @@
"resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz", "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
"integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==", "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"posthtml-parser": "^0.11.0", "posthtml-parser": "^0.11.0",
"posthtml-render": "^3.0.0" "posthtml-render": "^3.0.0"

64
static/css/base.css
Unescape View File

@ -1,35 +1,53 @@
body { 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 { .head, .main {
display: grid; display: grid;
grid-template-columns: repeat(8, 1fr); grid-template-rows: subgrid;
grid-template-rows: repeat(8, 1fr); grid-column: 2/8;
height: 100vh;
} }
.main h1 { .head {
grid-column: 3/7; grid-row: 1/2;
grid-row: 2/3; grid-template-columns: min-content max-content auto;
color: white; padding-top: 2em;
font-size: clamp(100%, 1rem + 8vw, 200px); gap: 1em;
align-items: center;
}
.head > .logo > svg {
display: block;
fill: white;
height: auto;
width: 100px;
} }
.hero { .head > .logo {
grid-column: 1/-1; grid-column: 1/2;
grid-row: 1/-1;
width: 100%;
height: 100%;
object-fit: cover;
} }
.logo { .head > h1 {
fill: white; color: white;
grid-column: 3/7; grid-column: 2/3;
grid-row: 3/-1;
} }
.logo > svg { .head > ul {
display: block; grid-column: 3/4;
list-style: "";
justify-self: end;
} }
.head .links a {
color: white;
}
.main {
grid-row: 2/-1;
}

4
static/css/reset.css
Unescape View File

@ -13,3 +13,7 @@ p {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
text-wrap: balance; text-wrap: balance;
} }
ul {
padding: 0;
}

Write Preview
Loading…
Cancel
Save