navigation, navigation theme
This commit is contained in:
parent
dc54f5dd70
commit
04c001dba1
5
package-lock.json
generated
5
package-lock.json
generated
@ -1354,6 +1354,11 @@
|
||||
"supports-color": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
"test": "run-p --race dev cy:run"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
"compression": "^1.7.4",
|
||||
"date-fns": "^2.8.1",
|
||||
"front-matter": "^3.0.2",
|
||||
|
||||
@ -20,8 +20,6 @@
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
background: #2d3935;
|
||||
color: #eae9be;
|
||||
font-size: 0.8em;
|
||||
padding: 0.4em;
|
||||
box-shadow: 1px 3px #959595;
|
||||
@ -42,11 +40,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
/* color: #f2ee12; */
|
||||
color: #eae9be;
|
||||
}
|
||||
|
||||
.lists ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@ -113,6 +106,10 @@
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.latest-posts li a:visited:not(:hover) {
|
||||
color: #a7a574;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 900px) {
|
||||
.lists {
|
||||
flex-direction: row;
|
||||
@ -132,7 +129,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<footer class="site-footer">
|
||||
<footer class="site-footer navigation-theme">
|
||||
<div class="lists">
|
||||
<section class="site-map">
|
||||
<ul>
|
||||
|
||||
@ -1,56 +1,13 @@
|
||||
<script>
|
||||
// export let segment;
|
||||
import classNames from 'classnames'
|
||||
|
||||
export let segment
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* nav {
|
||||
border-bottom: 1px solid rgba(255,62,0,0.1);
|
||||
font-weight: 300;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
/* ul::after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.selected {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.selected::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: calc(100% - 1em);
|
||||
height: 2px;
|
||||
background-color: rgb(255,62,0);
|
||||
display: block;
|
||||
bottom: -1px;
|
||||
} */
|
||||
|
||||
/* a {
|
||||
text-decoration: none;
|
||||
padding: 1em 0.5em;
|
||||
display: block;
|
||||
} */
|
||||
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #f2f6f6;
|
||||
z-index: 1;
|
||||
padding: 0.5em;
|
||||
box-shadow: 0px 1px 3px #959595;
|
||||
@ -59,23 +16,75 @@
|
||||
nav a {
|
||||
padding: 0.4em 0.5em;
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo-section,
|
||||
.logo-section img {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.logo-section img {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-main > ul {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
a.selected {
|
||||
text-shadow: 0px 0px 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav>
|
||||
<!-- <ul> -->
|
||||
<!-- <li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li> -->
|
||||
<!-- <li><a class='{segment === "portfolio" ? "selected" : ""}' href='portfolio'>portfolio</a></li> -->
|
||||
|
||||
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
|
||||
<nav class="navigation-theme">
|
||||
<section class="nav-main">
|
||||
<ul>
|
||||
<li>
|
||||
<a class={classNames({ selected: segment === undefined })} href=".">
|
||||
Introduction
|
||||
</a>
|
||||
</li>
|
||||
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
|
||||
the blog data when we hover over the link or tap it on a touchscreen -->
|
||||
<!-- <li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li> -->
|
||||
<!-- </ul> -->
|
||||
<li>
|
||||
<a
|
||||
rel="prefetch"
|
||||
class={classNames({ selected: segment === 'blog' })}
|
||||
href="/blog">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class={classNames({ selected: segment === 'portfolio' })}
|
||||
href="/portfolio">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="page-navigation">
|
||||
<aside class="logo-section">
|
||||
<a class="logo" href=".">
|
||||
<img src="/images/m-logo.png" alt="m logo" />
|
||||
</a>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<!-- <div class="page-navigation">
|
||||
<a href="portfolio#personal-information">About</a>
|
||||
<a href="portfolio#skills">Skills</a>
|
||||
<a href="portfolio#work-history">Work History</a>
|
||||
<a href="portfolio#projects">Projects</a>
|
||||
<a href="portfolio#education">Education</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</nav>
|
||||
|
||||
@ -94,6 +94,19 @@ p {
|
||||
background: #0dd0d0;
|
||||
}
|
||||
|
||||
.navigation-theme {
|
||||
background: #2d3935;
|
||||
color: #eae9be;
|
||||
}
|
||||
|
||||
.navigation-theme a {
|
||||
color: #eae9be;
|
||||
}
|
||||
|
||||
.navigation-theme a:hover {
|
||||
color: #faf9d6;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 400px) {
|
||||
body {
|
||||
font-size: 18px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user