Added nav, changed header, styling changes
All checks were successful
/ weblog.lol (push) Successful in 14s
All checks were successful
/ weblog.lol (push) Successful in 14s
This commit is contained in:
parent
bf81a92097
commit
c2b35ba7a5
3 changed files with 82 additions and 42 deletions
|
|
@ -16,7 +16,7 @@ Landing page template: Landing Page Template
|
|||
|
||||
Separator: ·
|
||||
// Navigation: about, another-page, <a href="https://example.com">Example</a>, [Example](https://example.com)
|
||||
Navigation: <a href="https://death.id.au/">Home</a>, <a href="https://death.id.au/now">Now</a>, <a href="https://deathau.weblog.lol/">Blog</a>, <a href="https://death.id.au/CV">CV</a>
|
||||
Navigation: <a href="https://death.id.au/">Home</a>, <a href="https://death.id.au/now">Now</a>, <a href="https://deathau.weblog.lol/">Blog</a>, <a href="https://death.id.au/cv/">CV</a>
|
||||
Files path: /files/
|
||||
Landing page post count: 8
|
||||
Landing page post length: 100 words
|
||||
|
|
|
|||
|
|
@ -9,10 +9,13 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1 class="weblog-title"><a href="{base-path}">{weblog-title}</a></h1>
|
||||
{navigation}
|
||||
</header>
|
||||
<div class="header">
|
||||
<header>
|
||||
<img class="avatar" src="https://cdn.some.pics/deathau/663da4619fdb6.svg" alt="My avatar — A pixelated self-portrait in the style of the 'bitizens' in the mobile game Tiny Tower" />
|
||||
<h1 class="weblog-title"><a href="{base-path}">{weblog-title}</a></h1>
|
||||
{navigation}
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main class="weblog">
|
||||
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ Location: /styles.css
|
|||
@import url('https://static.omg.lol/profiles/icons/omg.lol-icons.css');
|
||||
|
||||
:root {
|
||||
--foreground: #f9f8fa;
|
||||
--foreground: #e2dae9;
|
||||
--background: #242129;
|
||||
--card-bg: #242129;
|
||||
--link: #aa55fe;
|
||||
--link: #8000ff;
|
||||
--accent: #845e9e;
|
||||
|
||||
--font-main: 'Rubik', sans-serif, 'Noto Color Emoji';
|
||||
|
|
@ -54,6 +54,8 @@ body {
|
|||
font-size: 120%;
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
article,
|
||||
|
|
@ -93,6 +95,7 @@ main.page {
|
|||
|
||||
.post-info>a {
|
||||
margin-left: 1em;
|
||||
background: none;
|
||||
}
|
||||
|
||||
article p {
|
||||
|
|
@ -181,6 +184,68 @@ iframe {
|
|||
display: none;
|
||||
}
|
||||
|
||||
header,
|
||||
main,
|
||||
footer {
|
||||
max-width: 60em;
|
||||
margin: 2em auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
header>.avatar {
|
||||
max-width: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin: 0 0 2em 0;
|
||||
background-color: #000;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
header {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: end;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
header>h1 {
|
||||
margin:0 2rem;
|
||||
}
|
||||
|
||||
header>nav {
|
||||
margin-left: auto;
|
||||
font-family: var(--font-code);
|
||||
font-weight: var(--font-code-weight);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(to bottom, var(--accent) 0%, var(--accent) 100%);
|
||||
background-position: 0 100%;
|
||||
background-repeat: repeat-x;
|
||||
background-size: 5px 5px;
|
||||
transition: 250ms ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-size: 5px 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 a {
|
||||
background: none
|
||||
}
|
||||
|
||||
.weblog-title a {
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -198,7 +263,8 @@ header nav li {
|
|||
header nav li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-right: 1em;
|
||||
margin-right: 0.5em;
|
||||
padding: 0 .3em;
|
||||
}
|
||||
|
||||
p,
|
||||
|
|
@ -206,43 +272,15 @@ li {
|
|||
line-height: 160%;
|
||||
}
|
||||
|
||||
header,
|
||||
main,
|
||||
footer {
|
||||
max-width: 60em;
|
||||
margin: 2em auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-top: 5em;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--accent);
|
||||
color: var(--background) !important;
|
||||
color: var(--background);
|
||||
padding: .3em .4em;
|
||||
margin: .8em 0 0 .4em;
|
||||
border-radius: .5em;
|
||||
|
|
@ -250,6 +288,10 @@ a:active {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
|
|
@ -294,8 +336,3 @@ th {
|
|||
text-align: left;
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.weblog-title a {
|
||||
text-decoration: none;
|
||||
color: var(--foreground);
|
||||
}
|
||||
Loading…
Reference in a new issue