Template
This commit is contained in:
Ian Hitchman
BIN
dist/favicon.824cf0c5.ico
vendored
Normal file
BIN
dist/favicon.824cf0c5.ico
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
dist/hero.4243088c.jpg
vendored
Normal file
BIN
dist/hero.4243088c.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
61
dist/index.739bf03c.js
vendored
61
dist/index.739bf03c.js
vendored
@@ -999,19 +999,64 @@ var _jsxDevRuntime = require("react/jsx-dev-runtime");
|
||||
var _bootstrap = require("bootstrap");
|
||||
var _reactDom = require("react-dom");
|
||||
var _reactDomDefault = parcelHelpers.interopDefault(_reactDom);
|
||||
document.body.onscroll = function() {
|
||||
let header = document.querySelector("header");
|
||||
let scrollPosition = window.scrollY;
|
||||
if (scrollPosition > 70) header.classList.add("fixed");
|
||||
else header.classList.remove("fixed");
|
||||
};
|
||||
document.querySelector(".nav-burger-btn").onclick = function(e) {
|
||||
let nav = document.querySelector("body nav");
|
||||
let btn = document.querySelector(".nav-burger-btn");
|
||||
nav.classList.toggle("active");
|
||||
btn.classList.toggle("active");
|
||||
return false;
|
||||
};
|
||||
const App = ()=>{
|
||||
return /*#__PURE__*/ _jsxDevRuntime.jsxDEV("h2", {
|
||||
children: "Have a nice day!"
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 7,
|
||||
columnNumber: 10
|
||||
}, undefined);
|
||||
return /*#__PURE__*/ _jsxDevRuntime.jsxDEV(_jsxDevRuntime.Fragment, {
|
||||
children: [
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("h1", {
|
||||
children: "Page title"
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 25,
|
||||
columnNumber: 7
|
||||
}, undefined),
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("h2", {
|
||||
children: "Subheading title"
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 26,
|
||||
columnNumber: 7
|
||||
}, undefined),
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("p", {
|
||||
children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, consequuntur sint similique dolorum consectetur molestiae quo culpa odit, perspiciatis laboriosam iusto. In earum quam repellat autem, maiores tempora ex perferendis."
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 27,
|
||||
columnNumber: 7
|
||||
}, undefined),
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("h2", {
|
||||
children: "Subheading title"
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 33,
|
||||
columnNumber: 7
|
||||
}, undefined),
|
||||
/*#__PURE__*/ _jsxDevRuntime.jsxDEV("p", {
|
||||
children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse officia velit explicabo ratione labore, nesciunt fuga aliquam. Dolore ipsam odio minima laboriosam maiores, blanditiis, eligendi enim aspernatur, tempore minus sequi."
|
||||
}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 34,
|
||||
columnNumber: 7
|
||||
}, undefined)
|
||||
]
|
||||
}, void 0, true);
|
||||
};
|
||||
_c = App;
|
||||
_reactDomDefault.default.render(/*#__PURE__*/ _jsxDevRuntime.jsxDEV(App, {}, void 0, false, {
|
||||
fileName: "src/js/index.js",
|
||||
lineNumber: 10,
|
||||
lineNumber: 44,
|
||||
columnNumber: 17
|
||||
}, undefined), document.getElementById("root"));
|
||||
var _c;
|
||||
|
||||
2
dist/index.739bf03c.js.map
vendored
2
dist/index.739bf03c.js.map
vendored
File diff suppressed because one or more lines are too long
249
dist/index.b10d73a7.css
vendored
249
dist/index.b10d73a7.css
vendored
@@ -11434,8 +11434,253 @@ textarea.form-control-lg {
|
||||
}
|
||||
}
|
||||
|
||||
body h1, body .h1 {
|
||||
color: #0d6efd;
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
display: -ms-grid;
|
||||
background-color: #fff;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-template-columns: auto;
|
||||
grid-template-areas: "header"
|
||||
"main"
|
||||
"footer";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
color: #1186b2;
|
||||
margin-bottom: .5em;
|
||||
font-size: clamp(1.8rem, 3vw, 3rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: clamp(1.4rem, 2vw, 2rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header {
|
||||
display: -ms-grid;
|
||||
grid-template: 9rem / auto;
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header {
|
||||
grid-template: 6rem / auto;
|
||||
}
|
||||
}
|
||||
|
||||
header.hero {
|
||||
height: 100vh;
|
||||
grid-template: 9rem auto / auto;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header.hero {
|
||||
grid-template: 6rem auto / auto;
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top {
|
||||
width: 100%;
|
||||
height: 9rem;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #0000;
|
||||
grid-column: 1;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 2rem 4vw;
|
||||
transition: height .5s ease-out, padding .5s ease-out;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top {
|
||||
height: 6rem;
|
||||
padding: 1rem 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
header .header-top {
|
||||
padding: 2rem calc(50% - 600px);
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top .header-logo {
|
||||
height: 100%;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
header .header-top .header-logo img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
}
|
||||
|
||||
header .header-top .header-nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header .header-top .header-nav a {
|
||||
padding: 0 1rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header .header-top .header-nav a:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top .header-nav {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: 400px;
|
||||
z-index: 100;
|
||||
background: #1186b2;
|
||||
padding: 10vw;
|
||||
transition: transform .1s ease-out;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
header .header-top .header-nav.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
header .header-top .header-nav a {
|
||||
color: #fff;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
opacity: 0;
|
||||
z-index: 101;
|
||||
cursor: pointer;
|
||||
background-color: #e156ab;
|
||||
border-radius: 5px;
|
||||
margin-top: 0;
|
||||
padding: 5px;
|
||||
transition: all .5s ease-out;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -4rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn rect {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
fill: #fff;
|
||||
transition: all .5s ease-out;
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:first-child {
|
||||
transform: translate3d(27px, 3px, 0)rotate(45deg);
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:nth-child(2) {
|
||||
transform-origin: center;
|
||||
transform: translate3d(0, 1px, 0)rotate(-45deg);
|
||||
}
|
||||
|
||||
header .header-top .nav-burger-btn.active rect:last-child {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header .header-top .nav-burger-btn {
|
||||
opacity: 1;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
header.fixed .header-top {
|
||||
height: 5rem;
|
||||
border-color: #0000001a;
|
||||
padding: 1rem 4vw;
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
header.fixed .header-top {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
header.fixed .header-top {
|
||||
padding: 1rem calc(50% - 600px);
|
||||
}
|
||||
}
|
||||
|
||||
header .header-hero {
|
||||
grid-area: 2 / 1 / auto / -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header .header-hero img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
main section {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
padding: 20px 4vw;
|
||||
}
|
||||
|
||||
main section.main-colour {
|
||||
color: #fff;
|
||||
background-color: #1186b2;
|
||||
}
|
||||
|
||||
main section.second-colour {
|
||||
color: #fff;
|
||||
background-color: #b5da3d;
|
||||
}
|
||||
|
||||
main section.hero {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
main section {
|
||||
padding: 2rem calc(50% - 600px);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background: pink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.b10d73a7.css.map */
|
||||
|
||||
2
dist/index.b10d73a7.css.map
vendored
2
dist/index.b10d73a7.css.map
vendored
File diff suppressed because one or more lines are too long
47
dist/index.html
vendored
47
dist/index.html
vendored
@@ -5,16 +5,49 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="icon" href="/favicon.824cf0c5.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/index.b10d73a7.css">
|
||||
<script src="/index.739bf03c.js" defer=""></script>
|
||||
</head>
|
||||
<body class="p-5">
|
||||
<h1>All done</h1>
|
||||
<div id="root">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="header-top">
|
||||
<div class="header-logo">
|
||||
<a href="/"></a><img src="/logo.0d5ec2af.svg" alt="Logo">
|
||||
</div>
|
||||
<nav class="header-nav">
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
<a href="">hello</a>
|
||||
</nav>
|
||||
<svg viewbox="0 0 100 100" class="nav-burger-btn">
|
||||
<rect y="10"></rect>
|
||||
<rect y="43"></rect>
|
||||
<rect y="75"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">Clickety click</button>
|
||||
<div class="header-hero">
|
||||
<img src="/hero.4243088c.jpg" alt="">
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section id="root">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="main-colour">hello</section>
|
||||
<section class="hero">WOW!</section>
|
||||
<section class="second-colour">some text</section>
|
||||
<section>some more text</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div>hello</div>
|
||||
<div>ddf</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
11
dist/logo.0d5ec2af.svg
vendored
Normal file
11
dist/logo.0d5ec2af.svg
vendored
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.0 KiB |
Reference in New Issue
Block a user