Commit 6a5175ae authored by julientaq's avatar julientaq
Browse files

add fonts and new layout for the whole site

parent 9414af16
......@@ -34,7 +34,7 @@ talkyardScriptUrl = "https://c1.ty-cdn.net/-/talkyard-comments.min.js"
[[menu.main]]
identifier = "about"
name = "About"
url = "/about"
url = "/about/"
weight= 1
[[menu.main]]
......
---
title: "About Paged.js"
title: "About"
date: 2019-11-02T00:08:22+01:00
draft: false
class: "about"
......
......@@ -7,6 +7,7 @@ tags:
- pagedjs
- update
- friends
author: Julien Taquet
---
......
---
title: "This Is Where Our Spirit Go"
date: 2020-01-30T09:35:13+01:00
draft: true
---
# This is the first test
How is it going?
Ex laboris consequat mollit Lorem ex enim ea sint anim. Ex laboris consequat mollit Lorem ex enim ea sint anim.Ex laboris consequat mollit Lorem ex enim ea sint anim.Ex laboris consequat mollit Lorem ex enim ea sint anim.Ex laboris consequat mollit Lorem ex enim ea sint anim.Ex laboris consequat mollit Lorem ex enim ea sint anim.Ex laboris consequat mollit Lorem ex enim ea sint anim.
\ No newline at end of file
---
title: "Welcome to our blog roll!"
title: "The Printer’s Times"
subtitle:
class: "blog-index"
---
......
{"Target":"css/main.min.19e3f8eb3807fc01ac78908e6351a275.css","MediaType":"text/css","Data":{"Integrity":"md5-GeP46zgH/AGseJCOY1GidQ=="}}
\ No newline at end of file
{"Target":"css/main.min.7e3d0da33b03acc621cefa3ebe335891.css","MediaType":"text/css","Data":{"Integrity":"md5-fj0NozsDrMYhzvo+vjNYkQ=="}}
\ No newline at end of file
publish_mode: editorial_workflow
media_folder: "static/uploads" # Media files will be stored in the repo under images/uploads
public_folder: "uploads/images/" # The src attribute for uploaded media will begin with /images/uploads
backend:
name: git-gateway
branch: master # Branch to update (optional; defaults to master)
# publish_mode: editorial_workflow
media_folder: "static/uploads" # Media files will be stored in the repo under images/uploads
public_folder: "uploads/images/" # The src attribute for uploaded media will begin with /images/uploads
collections:
- name: "posts" # Used in routes, e.g., /admin/collections/blog
label: "Journal" # Used in the UI
folder: "posts/" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- {label: "draft", name: "draft", widget: "boolean"}
- {label: "Title", name: "title", widget: "string"}
- {label: "class", name: "class", widget: "string", default: "journal"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Featured Image", name: "image", widget: "image"}
- {label: "Featured Image", name: "cover", widget: "image"}
- {label: "weight", name: "weight", widget: "string"}
- {label: "intro", name: "intro", widget: "markdown"}
- {label: "Body", name: "body", widget: "markdown"}
- name: "documentation" # Used in routes, e.g., /admin/collections/blog
label: "documentation" # Used in the UI
folder: "documentation/" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "draft", name: "draft", widget: "boolean"}
- {label: "Title", name: "title", widget: "string"}
- {label: "class", name: "class", widget: "string", default: "journal"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Featured Image", name: "image", widget: "image"}
- {label: "weight", name: "weight", widget: "string"}
- {label: "tags", name: "tags", widget: "list"}
- {label: "intro", name: "intro", widget: "markdown"}
- {label: "Body", name: "body", widget: "markdown"}
\ No newline at end of file
......@@ -75,4 +75,18 @@
font-family:"Victor Mono";
src:url("../fonts/VictorMono-Regular.woff2") format("woff2"),url("../fonts/VictorMono-Regular.woff") format("woff"),url("../fonts/VictorMono-Regular.otf") format("opentype");
font-style:normal;font-weight:400;
}
\ No newline at end of file
}
@font-face {
font-family:"Fanwood Text";
src:url("../fonts/FanwoodText-Regular.woff2") format("woff2"),url("../fonts/FanwoodText-Regular.woff") format("woff"),url("../fonts/FanwoodText-Regular.otf") format("opentype");
font-style:normal;font-weight:400;
}
@font-face {
font-family:"Fanwood Text";
src:url("../fonts/FanwoodText-Italic.woff2") format("woff2"),url("../fonts/FanwoodText-Italic.woff") format("woff"),url("../fonts/FanwoodText-Italic.otf") format("opentype");
font-style:italic;font-weight:400;
}
\ No newline at end of file
footer {
margin: 0 auto;
margin-top: 2em;
margin-right: 4em;
font-size: 0.9em;
grid-column: start;
/* --tint: calc(360 - 220);
--light: 20%;
--saturation: 50%; */
/* --color-primary: hsl(var(--tint), var(--light), var(--saturation)); */
/* --color-light: hsl(var(--tint), 80%, 80%); */
--color-accent: var(--color-primary);
margin: 0;
margin: 7em -3em -5em;
padding: 2em 3em 4em;
background: var(--color-light);
color: var(--color-primary);
/* margin-top: 2em; */
/* margin-right: 4em; */
font-size: 0.8em;
grid-column: left/end;
font-family: var(--font-sans);
display: flex;
flex-direction: column;
align-items: center;
&.show {
left: 10%;
......@@ -18,26 +32,23 @@ footer {
a {
color: var(--color-primary);
margin-left: .6em;
background: transparent;
margin-top: 2em;
}
svg {
transform: rotate(-2deg);
/* max-width: 300px; */
max-height: 120px;
max-height: 100px;
display: block;
path {
fill: var(--color-primary);
;
}
&:hover {
&:hover {
/* background: rgba(200, 120, 84, 0.2); */
path {
fill: var(--color-accent);
}
}
}
......
......@@ -15,32 +15,13 @@ body {
}
box-sizing: border-box;
display: grid;
grid-template-columns: [sidebar] 22vw [start] 65vw [end];
grid-gap: 3vw;
padding: 2em;
grid-template-columns: [sidebar] 15vw [start] 70vw [end] 5vw;
grid-gap: 0vw;
padding: 0em;
background: var(--color-background);
margin: 0;
}
.menu {
position: fixed;
grid-column-start: sidebar;
height: calc(100vh - 4em);
width: 15vw;
max-width: 190px;
display: flex;
flex-direction: column;
margin-bottom: 3em;
justify-content: flex-end;
/* top: 0; */
button {
justify-self: flex-start;
}
z-index: 4;
}
main {
&::before {
/* shadow for the main article */
......@@ -50,7 +31,7 @@ main {
right: -2em;
bottom: -2em;
background: var(--color-paper, white);
box-shadow: var(--shadow);
box-shadow: var(--shadow-paper);
content: " ";
z-index: -2;
}
......@@ -59,8 +40,8 @@ main {
grid-column-end: end;
width: 90%;
justify-self: center;
margin-top: auto;
margin-top: 5em;
margin: 10em auto;
position: relative;
header {
......@@ -82,6 +63,24 @@ article {
position: relative;
padding: 2.5em;
padding-bottom: 4em;
header {
grid-column: left/end;
#title {
position: relative;
&::after {
content: " ";
width: 100%;
height: 1em;
display: block;
position: absolute;
border-bottom: 5px dotted var(--color-primary);
opacity: 0.3;
bottom: 0;
}
}
}
}
.crop-marks {
......@@ -91,6 +90,8 @@ article {
right: 0;
bottom: 0;
z-index: -1;
}
......@@ -119,24 +120,11 @@ article {
border-width: 1px 0;
}
main article .menu {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 3em;
a {
font-family: var(--font-sans);
/* color: red; */
}
}
/* mobile */
@media screen and (max-width: 780px) {
@media screen and (max-width: 1000px) {
body {
display: block;
......@@ -149,6 +137,7 @@ main article .menu {
margin-bottom: 2em;
padding: 0;
margin-top: 3em;
article {
padding: 0;
}
......@@ -181,10 +170,8 @@ main article .menu {
svg path {
/* fill: white; */
}
position:fixed;
position: fixed;
/* box-shadow: -5px 5px 5px 0 rgba(100,100,100,0.5); */
}
.menu {
......@@ -215,11 +202,14 @@ main article .menu {
&.both {
justify-content: space-between;
}
a {
font-style: normal;
background: white;
}
.previous, .next {
.previous,
.next {
&::before {
content: "Previously ";
display: block;
......@@ -229,13 +219,11 @@ main article .menu {
letter-spacing: 0.2ch;
margin-bottom: 1em;
}
}
.next::before {
content: "Next";
text-align: right;
}
}
.menu::before {
/* add a small bar to the left */
/* content: " "; */
position: absolute;
top: -3em;
left: -15ch;
bottom: -5em;
right: -5ch;
background: white;
z-index: -2;
transform: rotate(3deg);
box-shadow: var(--shadow-paper);
background: var(--color-paper, white);
}
.menu {
transition: left 2s;
svg {
path {
fill: var(--color-primary);
}
}
.baseline {
margin-top: 0.3em;
font-size: 1em;
text-transform: uppercase;
font-family: var(--font-sans);
color: var(--color-primary);
}
}
button.menuToggle {
position: fixed;
top: 2em;
z-index: 99;
border-radius: 0;
border-bottom-right-radius: 30%;
height: 160px;
width: 160px;
display: flex;
border: 0;
box-shadow: 0;
background: transparent;
svg {
path {
fill: var(--color-primary);
}
/* width: 60%; */
/* margin: 0 auto; */
}
}
nav[role="main"] {
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: var(--font-sans);
/* margin-left: 1em; */
li {
line-height: 1.1;
margin-bottom: 1.2em;
font-size: 0.9em;
}
a {
text-decoration: none;
font-size: 1.3em;
/* color: white; */
}
}
}
.menu-logos {
margin-bottom: 2em;
}
.active::before {
content: " → ";
}
.sub {
/* position: absolute; */
/* display: none; */
position: relative;
&::before {
content: " ";
position: absolute;
top: -3em;
left: -15ch;
bottom: -5em;
right: -5ch;
background: white;
z-index: -2;
transform: rotate(3deg);
box-shadow: var(--shadow-paper);
background: red;
}
}
\ No newline at end of file
.menu {
position: fixed;
/* grid-column: end; */
left: 10vw;
font-family: var(--font-sans);
/* margin-top: 20em; */
z-index: -2;
top: 11vh;
}
.menu nav ul {
/* display: flex;
flex-direction: column; */
list-style-type: none;
li a {
box-shadow: var(--shadow-paper);
writing-mode: vertical-rl;
background: white;
padding: 2em 1em;
padding-right: 5em;
display: block;
margin-bottom: 2em;
&:nth-of-type(1) {
transform: rotate(4deg);
}
&:nth-of-type(2) {
transform: rotate(2deg);
}&:nth-of-type(3) {
transform: rotate(-3deg);
}&:nth-of-type(4) {
transform: rotate(-5deg);
}&:nth-of-type(5) {
transform: rotate(1deg);
}
}
}
\ No newline at end of file
.menu::before {
/* add a small bar to the left */
/* content: " "; */
position: absolute;
top: -3em;
left: -15ch;
bottom: -5em;
right: -5ch;
.running-head {
grid-column: left/end;
border-bottom: 1px solid var(--color-primary);
display: flex;
justify-content: space-between;
position: sticky;
top: -4em;
background: white;
z-index: -2;
transform: rotate(3deg);
box-shadow: var(--shadow);
background: var(--color-paper, white);
}
.menu {
transition: left 2s;
svg {
path {
fill: var(--color-primary);
}
}
z-index: 9999999;
align-items: flex-end;
.baseline {
margin-top: 0.3em;
font-size: 1em;
text-transform: uppercase;
line-height: 1;
position: relative;
font-family: var(--font-sans);
color: var(--color-primary);
font-size: .8em;
font-variant: all-small-caps;
top: 5px;
margin-left: 1ch;
}
}
button.menuToggle {
position: fixed;
top: 2em;
z-index: 99;
border-radius: 0;
border-bottom-right-radius: 30%;
height: 160px;
width: 160px;
display: flex;
border: 0;
box-shadow: 0;
background: transparent;
svg {
a.back-home {
width: 20ch;
background: var(--color-primary);
padding: 4em 2ch .5em 7ch;
position: relative;
top: 1em;
margin-left: -5ch;
}
#paged-logo {
/* width: 15ch;
background: var(--color-primary);
fill: white;
padding: 4em 2ch 0.5em;
margin-top: -5.5em;
position: relative;
top: 1em; */
path {
fill: var(--color-primary);
fill: white;
}
/* width: 60%; */
/* margin: 0 auto; */
}
}
nav[role="main"] {
.menu {
grid-column: left/end;
margin: 0;
font-family: var(--font-sans);
text-transform: uppercase;
font-variant: all-small-caps;
font-size: 1em;
ul {
width: 100%;
list-style-type: none;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
font-family: var(--font-sans);
/* margin-left: 1em; */
li {
line-height: 1.1;
margin-bottom: 1.2em;
font-size: 0.9em;
}
a {
text-decoration: none;
font-size: 1.3em;
/* color: white; */
}
}
}
flex-wrap: wrap;