uuupah/11ty_neocities
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement a super basic visual layout

Browse Source
This commit is contained in:
jonathan
2023-02-24 19:08:47 +10:30
parent 7c955e9809
commit f433710c3a
8 changed files with 144 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/_includes/layout/base.njk
View File

@ -17,16 +17,14 @@
</head> </head>
<body> <body>
<main> <main>
<header>{% include 'partials/header.njk' %} <header>{% include 'partials/header.njk' %}</header>
<nav>{% include 'partials/navigation.njk' %}</nav>
</header>
<article> <article>
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
{{ content | safe }} {{ content | safe }}
</article> </article>
<footer>{% include 'partials/footer.njk' %}</footer> <footer>{% include 'partials/footer.njk' %}</footer>
</main> </main>
<div class="aside">{% include 'partials/sidebar.njk' %}</div> <aside>{% include 'partials/sidebar.njk' %}</aside>
</div> </div>
</div> </div>
</body> </body>

2
src/_includes/partials/header.njk
View File

@ -1 +1 @@
<h1>Welcome to my Homepage</h1> <h1>welcome to my sick twisted mind</h1>

13
src/_includes/partials/navigation.njk
View File

@ -1,7 +1,8 @@
<a href="/">Home</a> <nav>
<a href="/about/">About</a> <a href="/">Home</a><br/>
<a href="/links/">Links</a> <a href="/blog/">Blog</a><br/>
<a href="/blog/">Blog</a> <a href="/about/">About</a><br/>
<a href="/contact/">Contact</a> <a href="/links/">Links</a><br/>
<a href="/contact/">Contact</a>
</nav>
{#INFO: It's important to stucture your links with the slashes / on either side of the href /about/ to ensure the links are always from the root of the site.#} {#INFO: It's important to stucture your links with the slashes / on either side of the href /about/ to ensure the links are always from the root of the site.#}

5
src/_includes/partials/sidebar.njk
View File

@ -1,3 +1,4 @@
<div> <img class="profile-img" src="/img/cropped.png"/>
sidebar <div class="sidebar-contents">
{% include 'partials/navigation.njk' %}
</div> </div>

48
src/css/reset.css Normal file
View File

@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

193
src/css/styles.css
View File

@ -4,54 +4,9 @@
// Bootstrap // Bootstrap
// @import './vendor/bootstrap'; */ // @import './vendor/bootstrap'; */
/* http://meyerweb.com/eric/tools/css/reset/ @import './reset.css';
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, /* / */
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Global variables. */ /* Global variables. */
:root { :root {
@ -60,54 +15,69 @@ table {
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif; "Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
/* Default (light) theme */ /* Default (light) theme */
--bg: #fff; --bg: #FFEF82;
--accent-bg: #f5f7ff; --accent-bg: #EFD345;
--text: #82945b; --text: #82945b;
--text-light: #585858; /* --text-light: #585858; */
--border: #d8dae1; --border: #82954B;
--accent: #0d47a1; --accent: #1976D2;
} }
/* Dark theme */
/*// @media (prefers-color-scheme: dark) {
// :root {
// --bg: #212121;
// --accent-bg: #2b2b2b;
// --text: #dcdcdc;
// --text-light: #ababab;
// --border: #666;
// --accent: #ffb300;
// }
// }
// * {
// box-sizing: border-box;
// } */
html { html {
/* Set the font globally */ /* Set the font globally */
font-family: var(--sans-font); font-family: var(--sans-font);
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Make the body a nice central block */
/* Format headers */
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
margin-top: 3rem;
}
/* Format links */
a,
a:visited {
color: var(--accent);
}
a:hover {
text-decoration: none;
}
body { body {
color: var(--text); color: var(--text);
background: var(--bg); background: var(--bg);
font-size: 1.15rem; background-image: url("/img/l_ash02_big.jpg");
line-height: 1.5; background-size: cover;
/* padding: 0 1em; */ line-height: 1.3;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px;
margin: 20px;
/* padding: 0 1em; */
/* font-size: 1.15rem; */
/* align-items: flex-start; */ /* align-items: flex-start; */
} }
main { main {
/* // margin: 0 auto; */ /* // margin: 0 auto; */
background: var(--bg);
width: 750px; width: 750px;
padding: 15px;
height: min-content;
/* border: 2px solid var(--border); */
border-radius: 15px;
box-sizing: border-box;
} }
@media all and (max-width: 1000px) { @media all and (max-width: 1000px) {
@ -116,6 +86,46 @@ main {
} }
} }
aside {
position: sticky;
height: min-content;
top: 20px;
width: 200px;
margin-top: 30px;
display:flex;
flex-direction: column;
align-items: center;
/* border: 2px solid var(--border); */
}
.profile-img {
width: 100px;
border-radius: 50px;
/* top: -70px; */
z-index: 1;
position: relative;
}
.sidebar-contents {
padding: 65px 15px 15px 15px;
border-radius: 15px;
background: var(--bg);
box-sizing: border-box;
height: min-content;
width: 100%;
top: -50px;
position: relative;
}
/* body > footer {
margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem;
color: var(--text-light);
font-size: 0.9rem;
text-align: center;
border-top: 1px solid var(--border);
} */
/* // body > header { /* // body > header {
// text-align: center; // text-align: center;
// padding: 0 0.5rem 2rem 0.5rem; // padding: 0 0.5rem 2rem 0.5rem;
@ -170,33 +180,6 @@ main {
// padding-top: 1.5rem; // padding-top: 1.5rem;
// } */ // } */
body > footer {
margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem;
color: var(--text-light);
font-size: 0.9rem;
text-align: center;
border-top: 1px solid var(--border);
}
/* Format headers */
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.6rem;
margin-top: 3rem;
}
.aside {
position: sticky;
height: min-content;
top: 20px;
width: 200px;
}
/* Reduce header size on mobile */ /* Reduce header size on mobile */
/* // @media only screen and (max-width: 720px) { /* // @media only screen and (max-width: 720px) {
// h1 { // h1 {
@ -207,13 +190,3 @@ h2 {
// font-size: 2.1rem; // font-size: 2.1rem;
// } // }
// } */ // } */
/* Format links */
a,
a:visited {
color: var(--accent);
}
a:hover {
text-decoration: none;
}

BIN
src/img/cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
src/img/l_ash02_big.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB