Commit 56f5c613 authored by Fred Chasen's avatar Fred Chasen

Add base styles

parent 68ab6700
html {
/*html {
box-sizing: border-box;
}
*, *:before, *:after {
}*/
/**, *:before, *:after {
box-sizing: border-box;
}
}*/
:root {
/* --width: 8.5in; */
......@@ -11,12 +11,6 @@ html {
--margin: 1.2in;
}
@page {
size: var(--width) var(--height);
margin: 0;
padding: 0;
}
/* section {
break-before: column;
} */
......@@ -87,8 +81,8 @@ html {
}
.page {
/* border: 1px solid black; */
/*.page {
box-sizing: border-box;
width: var(--width);
height: var(--height);
overflow: hidden;
......@@ -98,6 +92,10 @@ html {
grid-template-rows: [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom);
}
.page * {
box-sizing: border-box;
}
.top {
width: var(--width);
height: var(--margin-top);
......@@ -128,7 +126,6 @@ html {
width: var(--margin-right);
display: flex;
flex-direction: column;
position: absolute;
right: 0;
grid-column: right;
grid-row: page;
......@@ -167,7 +164,6 @@ html {
.left {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-left);
top: var(--margin-top);
display: flex;
flex-direction: column;
grid-column: left;
......@@ -186,24 +182,27 @@ html {
height: 100%;
}
.page .top .top-right {
/* position: relative; */
/* flex: none; */
}
.page {
counter-increment: page;
}
.page .content {
/* width: 100%;
.page .top > div,
.page .bottom > div {
height: 100%;
display: flex;
justify-content: center;
align-items: center; */
align-items: center;
}
.page .left > div,
.page .right > div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}*/
@media screen {
.top .top-left-corner,
......
export default `
.page {
box-sizing: border-box;
width: var(--width);
height: var(--height);
overflow: hidden;
position: relative;
display: grid;
grid-template-columns: [left] var(--margin-left) [center] calc(var(--width) - var(--margin-left) - var(--margin-right)) [right] var(--margin-right);
grid-template-rows: [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom);
}
.page * {
box-sizing: border-box;
}
.top {
width: var(--width);
height: var(--margin-top);
display: flex;
grid-column: left / right;
grid-row: header;
}
.top .top-left-corner {
width: var(--margin-left);
height: var(--margin-top);
flex: none;
}
.top .top-right-corner {
width: var(--margin-right);
height: var(--margin-top);
flex: none;
}
.top > div {
flex-grow: 1;
position: relative;
}
.right {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-right);
display: flex;
flex-direction: column;
right: 0;
grid-column: right;
grid-row: page;
}
.right > div {
flex-grow: 1;
position: relative;
}
.bottom {
width: var(--width);
height: var(--margin-bottom);
display: flex;
grid-column: left / right;
grid-row: footer;
}
.bottom .bottom-left-corner {
width: var(--margin-left);
height: var(--margin-bottom);
flex: none;
}
.bottom .bottom-right-corner {
width: var(--margin-right);
height: var(--margin-bottom);
flex: none;
}
.bottom > div {
flex-grow: 1;
position: relative;
}
.left {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-left);
display: flex;
flex-direction: column;
grid-column: left;
grid-row: page;
}
.left > div {
flex-grow: 1;
position: relative;
}
.page > .area {
grid-column: center;
grid-row: page;
width: 100%;
height: 100%;
}
.page {
counter-increment: page;
}
.page .top > div,
.page .bottom > div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.page .left > div,
.page .right > div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
`;
......@@ -25,6 +25,7 @@ class Sheet {
if ("*" in this.pages) {
this.addRootVars(this.ast, this.pages["*"].width, this.pages["*"].height);
this.addRootPage(this.ast, this.pages["*"].width, this.pages["*"].height);
}
}
......@@ -33,7 +34,6 @@ class Sheet {
// send to csstree
let ast = csstree.parse(text);
// return ast
// console.log(ast);
return ast;
}
......@@ -120,16 +120,6 @@ class Sheet {
this.addPageClasses(pages, ast);
// return collection of pages
/*
{
":" : {},
":left" : {},
":right" : {},
":first" : {},
":black" : {},
"named" : {},
}
*/
return pages;
}
......@@ -348,13 +338,6 @@ class Sheet {
let selectors = new csstree.List();
let name;
// let selector = selectorList.createItem({
// type: 'Selector',
// children: selectors
// });
//
// selectorList.insert(selectors);
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: 'page'
......@@ -368,12 +351,12 @@ class Sheet {
}));
}
if (page.name && page.psuedo) {
selectors.insert(selectors.createItem({
type: 'Combinator',
name: " "
}));
}
// if (page.name && page.psuedo) {
// selectors.insert(selectors.createItem({
// type: 'Combinator',
// name: " "
// }));
// }
// PsuedoSelector
if (page.psuedo) {
......@@ -485,8 +468,8 @@ class Sheet {
}
addMarginalia(page, list, item) {
for (let name in page.marginalia) {
let item = page.marginalia[name];
for (let loc in page.marginalia) {
let item = page.marginalia[loc];
let selectorList = new csstree.List();
let selectors = new csstree.List();
......@@ -526,7 +509,7 @@ class Sheet {
selectors.insert(selectors.createItem({
type: 'ClassSelector',
name: name
name: loc
}));
selectors.insert(selectors.createItem({
......@@ -620,6 +603,87 @@ class Sheet {
ast.children.append(rule);
}
addRootPage(ast, width, height) {
/*
@page {
size: var(--width) var(--height);
margin: 0;
padding: 0;
}
*/
let children = new csstree.List();
let dimensions = new csstree.List();
dimensions.append(dimensions.createItem({
type: 'Dimension',
unit: width.unit,
value: width.value
}));
dimensions.append(dimensions.createItem({
type: 'WhiteSpace',
value: " "
}));
dimensions.append(dimensions.createItem({
type: 'Dimension',
unit: height.unit,
value: height.value
}));
children.append(children.createItem({
type: 'Declaration',
property: "size",
loc: null,
value: {
type: "Value",
children: dimensions
}
}));
children.append(children.createItem({
type: 'Declaration',
property: "margin",
loc: null,
value: {
type: "Value",
children: [{
type: 'Dimension',
unit: 'px',
value: 0
}]
}
}));
children.append(children.createItem({
type: 'Declaration',
property: "padding",
loc: null,
value: {
type: "Value",
children: [{
type: 'Dimension',
unit: 'px',
value: 0
}]
}
}));
let rule = ast.children.createItem({
type: 'Atrule',
prelude: null,
name: "page",
block: {
type: 'Block',
loc: null,
children: children
}
});
ast.children.append(rule);
}
addScope(ast, id) {
// Get all selector lists
// add an id
......
import Sheet from './sheet.js';
import baseStyles from './base.js';
class Styler {
constructor() {
this.sheets = [];
this.addBase();
}
async add() {
......@@ -16,7 +18,7 @@ class Styler {
return await Promise.all(fetched)
.then((originals) => {
let text;
let text = "";
let pageBreaks = {};
originals.forEach((original, index) => {
......@@ -38,8 +40,8 @@ class Styler {
});
}
root() {
addBase() {
this.insert(baseStyles);
}
mergeBreaks(pageBreaks, newBreaks) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment