Design for ancillary pages implemented
This commit is contained in:
ポール ウェッブ
parent
c29ab9f0a9
commit
d8ebb6b049
10 changed files with 183 additions and 57 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a v-bind:href="githubUrl" target="_blank">Edit this page on Github</a>
|
||||
<a v-bind:href="githubUrl" target="_blank" title="Edit this page on GitHub">Edit this page on GitHub</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
BIN
.vuepress/media/images/background-a.jpg
Normal file
BIN
.vuepress/media/images/background-a.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 445 KiB |
BIN
.vuepress/media/images/grid.png
Normal file
BIN
.vuepress/media/images/grid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -8,11 +8,10 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
|
||||
color: $black;
|
||||
@include font-sans;
|
||||
color: $black;
|
||||
font-size: 12px;
|
||||
min-width: 320px;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
|
@ -54,43 +53,3 @@ h1, h2, h3, h4, h5 {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.__message {
|
||||
bottom: 4rem; left: 10%;
|
||||
|
||||
animation: close-message linear;
|
||||
animation-delay: 2s;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.33;
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
z-index: 2;
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&[type="error"] {
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&[type="warning"] {
|
||||
background-color: $yellow;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
.ancillary {
|
||||
}
|
||||
|
|
@ -4,15 +4,21 @@
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%; height: 1px;
|
||||
|
||||
|
|
|
|||
153
.vuepress/scss/pages/_page.scss
Normal file
153
.vuepress/scss/pages/_page.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.page__header-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page__header {
|
||||
@include center;
|
||||
width: 100%; height: 100px;
|
||||
|
||||
background-image: url("../media/images/background-a.jpg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: $white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page__header__title {
|
||||
font-size: 3rem;
|
||||
font-weight: 300;
|
||||
line-height: 6.5rem;
|
||||
text-shadow: 1px 1px 2px rgba($black, 0.3);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.page__content {
|
||||
background-image: url("../media/images/grid.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 32px;
|
||||
flex: 1;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
+ h2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.05rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p, ol, ul {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
|
||||
code {
|
||||
background-color: $black;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
font-size: 60%;
|
||||
letter-spacing: 0.05rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
img {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: mix($black, $teal, 15%);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
width: 100%; height: 1px;
|
||||
|
||||
background-color: currentColor;
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
&:not(:hover)::after {
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
bottom: 3px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: 2rem; padding: 2rem;
|
||||
|
||||
background-color: $black;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
line-height: 1.33;
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: $white;
|
||||
border: 1px solid rgba($gray, 0.3);
|
||||
margin-bottom: 2rem;
|
||||
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid rgba($gray, 0.3);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr:not(:last-of-type) td {
|
||||
border-bottom: 1px solid rgba($gray, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.footer {
|
||||
background-color: $black;
|
||||
color: rgba($white, 0.3);
|
||||
color: rgba($white, 0.15);
|
||||
font-size: 1rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: $teal;
|
||||
color: mix($black, $teal, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
&::after {
|
||||
width: 100%; height: 3px;
|
||||
|
||||
background-color: $teal;
|
||||
background-color: mix($black, $teal, 15%);
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -109,12 +109,22 @@
|
|||
|
||||
<template v-else>
|
||||
<div>
|
||||
<section class="ancillary">
|
||||
<div class="inner-wrap">
|
||||
{{ $page.title }}
|
||||
<Content custom></Content>
|
||||
</div>
|
||||
</section>
|
||||
<article class="page" itemtype="http://schema.org/BlogPosting">
|
||||
|
||||
<header class="page__header">
|
||||
<div class="page__header-wrap">
|
||||
<div class="inner-wrap">
|
||||
<h2 class="page__header__title" itemprop="name headline">{{ $page.title }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="page__content" itemprop="articleBody">
|
||||
<div class="inner-wrap">
|
||||
<Content></Content>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -122,7 +132,7 @@
|
|||
<div class="inner-wrap">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">← LBRY.io</a> |
|
||||
<a href="//lbry.io" title="Rediscover content freedom">← LBRY.io</a> |
|
||||
<edit-link :path="this.$page.path"></edit-link>
|
||||
</li>
|
||||
|
||||
|
|
@ -210,7 +220,7 @@ function updateMetaTags (meta, current) {
|
|||
@import "../scss/init/mixins";
|
||||
@import "../scss/layout";
|
||||
@import "../scss/pages/home";
|
||||
@import "../scss/pages/ancillary";
|
||||
@import "../scss/pages/page";
|
||||
@import "../scss/partials/navigation";
|
||||
@import "../scss/partials/footer";
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue