flem
/
How_to_make_a_notebook_that
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup

Browse Source
main
flem 1 year ago
parent fafcab5f02
commit 0df2b88af9
7 changed files with 1394 additions and 1398 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape Escape View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style_index.css">
<link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>

396
intro-texts.html
Unescape Escape View File

@ -1,396 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>intro-texts.md</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
body {
font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
font-size: var(--vscode-markdown-font-size, 14px);
padding: 0 26px;
line-height: var(--vscode-markdown-line-height, 22px);
word-wrap: break-word;
}
#code-csp-warning {
position: fixed;
top: 0;
right: 0;
color: white;
margin: 16px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
background-color:#444444;
cursor: pointer;
padding: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
#code-csp-warning:hover {
text-decoration: none;
background-color:#007acc;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}
body.scrollBeyondLastLine {
margin-bottom: calc(100vh - 22px);
}
body.showEditorSelection .code-line {
position: relative;
}
body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -12px;
height: 100%;
}
body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
left: -30px;
}
.vscode-light.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
.vscode-light.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
.vscode-light.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-dark.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
.vscode-dark.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 255, 255, 0.60);
}
.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-high-contrast.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 160, 0, 0.7);
}
.vscode-high-contrast.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 160, 0, 1);
}
.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
img {
max-width: 100%;
max-height: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
hr {
border: 0;
height: 2px;
border-bottom: 2px solid;
}
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}
h1, h2, h3 {
font-weight: normal;
}
table {
border-collapse: collapse;
}
table > thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}
table > tbody > tr + tr > td {
border-top: 1px solid;
}
blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 1em;
line-height: 1.357em;
}
body.wordWrap pre {
white-space: pre-wrap;
}
pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}
pre code {
color: var(--vscode-editor-foreground);
tab-size: 4;
}
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}
</style>
<style>
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
color: #8e908c;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #c82829;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #f5871f;
}
/* Tomorrow Yellow */
.hljs-attribute {
color: #eab700;
}
/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #718c00;
}
/* Tomorrow Blue */
.hljs-title,
.hljs-section {
color: #4271ae;
}
/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #8959a8;
}
.hljs {
display: block;
overflow-x: auto;
color: #4d4d4c;
padding: 0.5em;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
</style>
<style>
/*
* Markdown PDF CSS
*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
padding: 0 12px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre:not(.hljs) {
padding: 23px;
line-height: 19px;
}
blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}
.emoji {
height: 1.4em;
}
code {
font-size: 14px;
line-height: 19px;
}
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
/* Page Break : use <div class="page"/> to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
</style>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<script>
mermaid.initialize({
startOnLoad: true,
theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
? 'dark'
: 'default'
});
</script>
<h1 id="a-sort-of-intro-letter">A SORT OF INTRO LETTER</h1>
<p>Dear soon-to-be-maker,
I welcome you into the world of notebooks. The object you are now holding in your hands is the final result of a year-long research. I am Emma, a student of the Experimental Publishing Master course at Piet Zwart Institute in Rotterdam. During the second year of our studies, we are asked to work on a research project and to make it public in this specific context.
The result of my research is a kick-starter kit, or a game, or a (note-)book, to start questioning and experimenting with the creation of notebooks.
My aim was to create an object that could be used, and not only consumed. Thus, I would like you, my reader, my user, to become a maker through the use of this kit. I hope you will enjoy the journey through my texts, my prototypes, my questions and my answers. I hope you will find your way in the practice of making notebooks and you will explore the feelings of creating your own tool.
I made many different choices in the creation of this work, and I would like to share them with you. Therefore, if you are interested in knowing more, go on reading!</p>
<h1 id="why-did-i-do-this">WHY DID I DO THIS?</h1>
<p>One of the main reasons I feel the urgency to discuss this topic is based on both my personal experience and the experiences of others during their growth. It revolves around the standardization of abilities, desires, and ways of living. Throughout our lives, we are expected to meet certain standards and conform to generalisations. However, these structures may be comfortable for some individuals while making others feel completely out of place.
In general, in society, I don’t like that we are expected or used to be all the same, that expressing who we are is not part of daily life, but many times it’s a shaming process that has a lot of impact on growth and development of self. I believe that the rise of consumerism has contributed to this phenomenon. We have become accustomed to the idea that we can simply buy objects, disregarding whether they are tailored specifically for us or if they are designed in the same way for everyone else in the world.
I would like this research to be a sort of manifesto for a general context but using the notebook as a metaphor: Who are you? How does your brain work? How do your ideas come along? What are your needs from a tool that society provides in a standardised form?
It is not only about making a notebook, it is how making a notebook will put you in the position of questioning who you are and the objects you use, why you use them and how something made by you for you could look and feel like.
How the (note-)book is made
Initially, the goal was to create a kit for making notebooks that could be read, but also used to practically make notebooks. To do so, I used my existing collection of texts, conversations, images, thoughts. Making a multitude of prototypes throughout the research process helped shape the material concept of this (note-)book, intertwining practical prompts and inspirations with theoretical texts. I made these prototypes to be able to analyse them and write about them; on the other side, I needed the right notebooks to take notes and develop this project, supporting my thinking and learning needs.
The first prototype worth mentioning is “the first notebook kit: An adjustable and editable notebook with included tape and papers for continuation” (find the analysis in the cards!). This notebook is directly inspired by the concept of index cards: they are cards used to store a small amount of content. Reading about them in history, I discovered that they are mainly used for two reasons: as a memory aid and to create new connections. I divided the texts into smaller cards, making editing choices and ensuring each card can stand alone. This prevents overwhelming the reader and allows for creating connections between the cards. In the moment the concept of modularity found me and grasped my interest, I created another prototype: the triad notebook. This prototype is composed of 3 rows (as the one you’re holding has 4), that can be browsed in different ways, helping to recreate connections between the different sections.
Next to modularity, customizability was another essential aspect, as the core concept of the entire project. I want to acknowledge our individuality and the desire to interact with objects in our own way. To achieve this, the chosen spine lets you, the user, to take possession of the object and participate in its use and creation. The spine allows a 360 degrees rotation so that all the content in the rows can reconnect to the other rows. In addition, it enables experimenting with different notebooks structures; you could mix your own pages with the provided ones; you could get rid of all the pages I provided, and fill it in with yours. Or you could make new notebooks. In addition, the pages can become cards and can be used without the spine. Would they still be a (note-)book then?
Defining when a notebook ceases to be a notebook has been a question throughout this process. While this publication is printed, I hope that through these different considerations, at least for some, this could still be defined as a notebook.
The content originates from my own reflections and the notes I took, both digital and handwritten. The latter were notes and now, after printing them out I wonder, are they still?
Last but not least, to minimize paper waste the publication is printed on an A4 layout. Further information about paper size is provided inside this spread.</p>
<h1 id="how-the-note-book-is-designed">How the (note-)book is designed</h1>
<p>Through these last two years in the course, one of the main things we have been taught is to use alternative ways and tools to produce our publications. This is one of the reasons why I chose to develop a Python script for the purpose. But it doesn’t stop here. The script generates a different positioning for each card every time it is run. This deliberate randomness in the placement of the cards allows for a user-centric experience, where the order and arrangement are not predetermined. The script enables the generation of different PDFs for printing with each reload, ensuring that users encounter a distinct arrangement of cards every time the content is printed. This approach embraces modularity again, as the connections between cards can vary based on their specific positions. Whether one reads card A next to card B or card A next to card C, the experience will differ. The intention behind this is to offer an individual experience to each user, encouraging them to create their own unique connections.</p>
<h1 id="why-a-material-printed-publication-is-important">Why a material printed publication is important?</h1>
<p>Apart from everything described above, for example the possibility to edit the order of the cards, or to manipulate the spine and transform the basic structure of the object, there are other reasons why a printed publication is necessary at this point.
First, the choice() method, one of the Python functions used in the main script, selects a random element from a list. You know that it is choosing from a list of options, but what happens in the back, it’s not given to you. So, I wondered: what happens when you mirror digital interactions into a physical movement? When this concept is applied to the (note-)book in your hands, you become the one determining how you navigate through the rows of cards. You have control over the changes, appearances, and disappearances of content. While the specific content behind each card remains unknown, you can physically perceive the anticipation and surprise.
Secondly, the act of turning the pages, the feeling of the paper are essential features that add a lot to the experience. Through this research, I have discovered the significance of reading and taking notes in physical form. What I found the most interesting is the impact and importance of the physical act of turning pages and the spatial layout of text: readers engage more, understand and remember more; the spatiality of a physical object facilitates a deeper interaction and comprehension of the materials. For further insights, refer to the excerpts from my thesis.</p>
<h1 id="the-methods-used">THE METHODS USED</h1>
<p>The methods I used to feed this publication are multiple experiments and approaches I worked with between March 2022 and April 2023. The first one is my personal notebook process that consists in the creation of different prototypes to analyse and question my use of notebooks and to discover how to modify them to adjust them to my needs. The second method consists in having discussion groups to collect opinions through conversation and questions. The third one involves gathering and analysing the work of other users to understand how they approach the same process. The last method is the Collaborative Explorative Sessions (C.E.S.): the C.E.S. are a collaborative playground to experiment with a collection of exercises together with the workshop participants. I created the C.E.S. through the knowledge acquired in the process and specifically thanks to the first three methods included in the research, as well as inspired by Generative Design Research, which includes the end user in the design process (Sanders and Stappers, 2014). All these methods will not be discussed inside this publication, but related thoughts and opinions will be presented in some of the cards. In addition, the results of the research are published in my thesis, “Paper Notebooks: From an Industrial Model to a Tool of Expression” (2023), produced in the context of the graduation research from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</p>
</body>
</html>

30
intro-texts.md
Unescape Escape View File

@ -1,30 +0,0 @@
# A SORT OF INTRO LETTER
Dear soon-to-be-maker,
I welcome you into the world of notebooks. The object you are now holding in your hands is the final result of a year-long research. I am Emma, a student of the Experimental Publishing Master course at Piet Zwart Institute in Rotterdam. During the second year of our studies, we are asked to work on a research project and to make it public in this specific context.
The result of my research is a kick-starter kit, or a game, or a (note-)book, to start questioning and experimenting with the creation of notebooks.
My aim was to create an object that could be used, and not only consumed. Thus, I would like you, my reader, my user, to become a maker through the use of this kit. I hope you will enjoy the journey through my texts, my prototypes, my questions and my answers. I hope you will find your way in the practice of making notebooks and you will explore the feelings of creating your own tool.
I made many different choices in the creation of this work, and I would like to share them with you. Therefore, if you are interested in knowing more, go on reading!
# WHY DID I DO THIS?
One of the main reasons I feel the urgency to discuss this topic is based on both my personal experience and the experiences of others during their growth. It revolves around the standardization of abilities, desires, and ways of living. Throughout our lives, we are expected to meet certain standards and conform to generalisations. However, these structures may be comfortable for some individuals while making others feel completely out of place.
In general, in society, I don’t like that we are expected or used to be all the same, that expressing who we are is not part of daily life, but many times it’s a shaming process that has a lot of impact on growth and development of self. I believe that the rise of consumerism has contributed to this phenomenon. We have become accustomed to the idea that we can simply buy objects, disregarding whether they are tailored specifically for us or if they are designed in the same way for everyone else in the world.
I would like this research to be a sort of manifesto for a general context but using the notebook as a metaphor: Who are you? How does your brain work? How do your ideas come along? What are your needs from a tool that society provides in a standardised form?
It is not only about making a notebook, it is how making a notebook will put you in the position of questioning who you are and the objects you use, why you use them and how something made by you for you could look and feel like.
How the (note-)book is made
Initially, the goal was to create a kit for making notebooks that could be read, but also used to practically make notebooks. To do so, I used my existing collection of texts, conversations, images, thoughts. Making a multitude of prototypes throughout the research process helped shape the material concept of this (note-)book, intertwining practical prompts and inspirations with theoretical texts. I made these prototypes to be able to analyse them and write about them; on the other side, I needed the right notebooks to take notes and develop this project, supporting my thinking and learning needs.
The first prototype worth mentioning is “the first notebook kit: An adjustable and editable notebook with included tape and papers for continuation” (find the analysis in the cards!). This notebook is directly inspired by the concept of index cards: they are cards used to store a small amount of content. Reading about them in history, I discovered that they are mainly used for two reasons: as a memory aid and to create new connections. I divided the texts into smaller cards, making editing choices and ensuring each card can stand alone. This prevents overwhelming the reader and allows for creating connections between the cards. In the moment the concept of modularity found me and grasped my interest, I created another prototype: the triad notebook. This prototype is composed of 3 rows (as the one you’re holding has 4), that can be browsed in different ways, helping to recreate connections between the different sections.
Next to modularity, customizability was another essential aspect, as the core concept of the entire project. I want to acknowledge our individuality and the desire to interact with objects in our own way. To achieve this, the chosen spine lets you, the user, to take possession of the object and participate in its use and creation. The spine allows a 360 degrees rotation so that all the content in the rows can reconnect to the other rows. In addition, it enables experimenting with different notebooks structures; you could mix your own pages with the provided ones; you could get rid of all the pages I provided, and fill it in with yours. Or you could make new notebooks. In addition, the pages can become cards and can be used without the spine. Would they still be a (note-)book then?
Defining when a notebook ceases to be a notebook has been a question throughout this process. While this publication is printed, I hope that through these different considerations, at least for some, this could still be defined as a notebook.
The content originates from my own reflections and the notes I took, both digital and handwritten. The latter were notes and now, after printing them out I wonder, are they still?
Last but not least, to minimize paper waste the publication is printed on an A4 layout. Further information about paper size is provided inside this spread.
# How the (note-)book is designed
Through these last two years in the course, one of the main things we have been taught is to use alternative ways and tools to produce our publications. This is one of the reasons why I chose to develop a Python script for the purpose. But it doesn’t stop here. The script generates a different positioning for each card every time it is run. This deliberate randomness in the placement of the cards allows for a user-centric experience, where the order and arrangement are not predetermined. The script enables the generation of different PDFs for printing with each reload, ensuring that users encounter a distinct arrangement of cards every time the content is printed. This approach embraces modularity again, as the connections between cards can vary based on their specific positions. Whether one reads card A next to card B or card A next to card C, the experience will differ. The intention behind this is to offer an individual experience to each user, encouraging them to create their own unique connections.
# Why a material printed publication is important?
Apart from everything described above, for example the possibility to edit the order of the cards, or to manipulate the spine and transform the basic structure of the object, there are other reasons why a printed publication is necessary at this point.
First, the choice() method, one of the Python functions used in the main script, selects a random element from a list. You know that it is choosing from a list of options, but what happens in the back, it’s not given to you. So, I wondered: what happens when you mirror digital interactions into a physical movement? When this concept is applied to the (note-)book in your hands, you become the one determining how you navigate through the rows of cards. You have control over the changes, appearances, and disappearances of content. While the specific content behind each card remains unknown, you can physically perceive the anticipation and surprise.
Secondly, the act of turning the pages, the feeling of the paper are essential features that add a lot to the experience. Through this research, I have discovered the significance of reading and taking notes in physical form. What I found the most interesting is the impact and importance of the physical act of turning pages and the spatial layout of text: readers engage more, understand and remember more; the spatiality of a physical object facilitates a deeper interaction and comprehension of the materials. For further insights, refer to the excerpts from my thesis.
# THE METHODS USED
The methods I used to feed this publication are multiple experiments and approaches I worked with between March 2022 and April 2023. The first one is my personal notebook process that consists in the creation of different prototypes to analyse and question my use of notebooks and to discover how to modify them to adjust them to my needs. The second method consists in having discussion groups to collect opinions through conversation and questions. The third one involves gathering and analysing the work of other users to understand how they approach the same process. The last method is the Collaborative Explorative Sessions (C.E.S.): the C.E.S. are a collaborative playground to experiment with a collection of exercises together with the workshop participants. I created the C.E.S. through the knowledge acquired in the process and specifically thanks to the first three methods included in the research, as well as inspired by Generative Design Research, which includes the end user in the design process (Sanders and Stappers, 2014). All these methods will not be discussed inside this publication, but related thoughts and opinions will be presented in some of the cards. In addition, the results of the research are published in my thesis, “Paper Notebooks: From an Industrial Model to a Tool of Expression” (2023), produced in the context of the graduation research from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.

1874
notebooks.html
View File

File diff suppressed because it is too large Load Diff

164
script.py
Unescape Escape View File

@ -0,0 +1,164 @@
import os
import markdown
from random import choice
# Get the directory path of the script
script_dir = os.path.dirname(os.path.abspath(__file__))
materials = ['1_situation', '2_binding', '3_paperformat', '4_add_ons']
cards = {
'1_situation' : {
'content' : [],
'make-a-notebook-that' : []
},
'2_binding' : {
'content' : [],
'make-a-notebook-that' : []
},
'3_paperformat' : {
'content' : [],
'make-a-notebook-that' : []
},
'4_add_ons' : {
'content' : [],
'make-a-notebook-that' : []
}
}
for folder in materials:
material_folder_path = os.path.join(script_dir, folder)
card_folders = os.listdir(material_folder_path)
#print(material_folder_path)
for card_folder in card_folders:
card_folder_path = os.path.join(material_folder_path, card_folder)
#print(card_folder_path) #these are content and make a notebook that folders paths
my_files = os.listdir(card_folder_path)
#print(my_files)
for my_file in my_files:
file_path = os.path.join(card_folder_path, my_file)
relative_file_path = os.path.relpath(file_path, os.path.dirname(__file__))
#image_path =
#print(file_path)
#print(relative_file_path)
if my_file.endswith(('.md', '.markdown')):
with open(file_path, 'r') as file:
md = file.read()
card = markdown.markdown(md)
#print(card) # the print of all the md files
card = f'<div class="card text">{ card }</div>'
card = f'<div class="card text">{ card }</div>'
cards[folder][card_folder].append(card)
elif my_file.endswith(('.jpg', '.jpeg', '.png')):
if 'prototype_' in my_file:
my_file= my_file.replace('.jpg', '').replace('.jpeg', '').replace('.png', '').replace('prototype_', '').replace('_', ' ').replace('1','').replace('2','').replace('3',' ')
image_html = f"<div class='image_titles'>{my_file}</div>"
else:
image_html = f''
mycard = f'<div class="card img" style="background-image: url(\'{relative_file_path}\'); background-size:cover; ">{image_html}</div> '
cards[folder][card_folder].append(mycard)
# print(mycard)
#print(card_folder)
#print(file_path)
number_pages = 32
pages = []
for page in range(number_pages):
card_1= choice(cards["1_situation"]["content"])
cards["1_situation"]["content"].remove(card_1)
card_2= choice(cards["1_situation"]["make-a-notebook-that"])
cards["1_situation"]["make-a-notebook-that"].remove(card_2)
card_3= choice(cards["2_binding"]["content"])
cards["2_binding"]["content"].remove(card_3)
card_4= choice(cards["2_binding"]["make-a-notebook-that"])
cards["2_binding"]["make-a-notebook-that"].remove(card_4)
card_5= choice(cards["3_paperformat"]["content"])
cards["3_paperformat"]["content"].remove(card_5)
card_6= choice(cards["3_paperformat"]["make-a-notebook-that"])
cards["3_paperformat"]["make-a-notebook-that"].remove(card_6)
card_7= choice(cards["4_add_ons"]["content"])
cards["4_add_ons"]["content"].remove(card_7)
card_8= choice(cards["4_add_ons"]["make-a-notebook-that"])
cards["4_add_ons"]["make-a-notebook-that"].remove(card_8)
page_html = f'''
<div class="page">
{card_1}
{card_2}
{card_3}
{card_4}
{card_5}
{card_6}
{card_7}
{card_8}
{card_1}
{card_2}
{card_3}
{card_4}
{card_5}
{card_6}
{card_7}
{card_8}
</div>
'''
pages.append(page_html)
#print(page_html)
#print(pages)
pages_string = "\n".join(pages)
html_template = f'''
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.cdnfonts.com/css/fjord" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/notcouriersans" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'>
</head>
<body>
<nav><button href='gradproject/index.html' class="btn infobutton">intro</button>
<button class="btn print" onclick="window.print()">print</button>
<button class="btn mynotebooks"> my notebooks</button>
<button class="btn generator">online notebooks generator</button>
</nav>
{pages_string}
</body>
</html>
'''
#print(html_template)
with open('notebooks.html', 'w') as out:
out.write(html_template)

52
style.css
Unescape Escape View File

@ -5,6 +5,17 @@ body{
}
.page {
height: 287mm;
width: 200mm;
margin: 0 auto;
padding: 5mm;
overflow: hidden;
}
.card {
float: left;
width: calc(200mm / 2 ); /* Adjusted width to fit 2 cards per row with margins */
@ -29,7 +40,6 @@ body{
box-sizing: border-box; /* Includes the border in the width and height calculation */
overflow: hidden;
background-color: white;
}
@ -189,39 +199,13 @@ p{
}
@media screen {
.body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(200mm / 2), 1fr));
grid-gap: 5mm;
height: 287mm;
width: 200mm;
margin: 0 auto;
padding: 5mm;
overflow: hidden;
}
.card {
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
transition: transform .2s;
}
/*change the number below to scale to the appropriate size*/
.card:hover {
transform: scale(2);
.page{
border: 1px solid #9594c4;
margin-bottom: 5px;
}
nav {
position: absolute;
top: 0;
@ -260,6 +244,14 @@ p{
}
#textbox {
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 50px;
}

266
style_index.css
Unescape Escape View File

@ -0,0 +1,266 @@
body{
margin: 0;
display: block;
}
.card {
float: left;
width: calc(200mm / 2 ); /* Adjusted width to fit 2 cards per row with margins */
height: calc(287mm / 4 ) ; /* Adjusted height to fit 4 rows per page with margins */
/*border: 1px solid black;*/
box-sizing: border-box; /* Includes the border in the width and height calculation */
overflow: hidden;
}
.card.image{
width: calc(200mm / 2); /* Adjusted width to fit 2 cards per row with margins */
height: calc(287mm / 4);
padding: 0;
margin: 0;
box-sizing: border-box; /* Includes the border in the width and height calculation */
overflow: hidden;
}
.card.text{
padding: 5mm;
box-sizing: border-box; /* Includes the border in the width and height calculation */
overflow: hidden;
background-color: white;
}
/*game */
h1{
font-size: 12pt;
font-family: 'NotCourierSans Bold', Courier, monospace;
color: #c4007a;
font-weight: 600;
padding-left: 5mm;
padding-right: 5mm;
text-align: center;
padding-top: 50px;
overflow: hidden;
margin: 0mm;
margin-bottom: 5pt;
line-height: 14pt;
overflow-wrap: break-word;
}
/* thesis quotes */
h2{
font-family: 'Catamaran Bold', sans-serif;
font-weight: 1000;
font-size: 12pt;
color: #a6dbf0;
margin: 0mm;
margin-bottom: 5pt;
line-height: 14pt;
padding: 0mm 5mm 0mm 5mm;
}
/* alternative materials*/
h3 {
font-family: 'Catamaran Bold', sans-serif;
font-weight: 1000;
font-size: 12pt;
color: #E2C044;
margin: 0mm;
margin-bottom: 5pt;
line-height: 14pt;
padding: 0mm 5mm 0mm 5mm;
}
/* wiki*/
h4{
font-family: 'NotCourierSans Bold',Courier, sans-serif;
font-weight: 800;
font-size: 12pt;
color: #9594C4;
line-height:normal;
padding-left: 10mm;
margin: 1mm;
padding: 0mm 5mm 0mm 5mm;
}
.h4::after {
content: ":";
white-space: pre;
}
.a4::after {
content: "\A";
white-space: pre;
}
p{
margin: 0mm;
line-height: 10.5pt;
font-family: 'Catamaran Medium', sans-serif;
font-weight: 400;
font-size: 10pt;
color: #393E41;
padding: 0mm 5mm 0mm 5mm;
}
.tensteps{
font-family: 'Catamaran Bold', sans-serif;
font-weight: 800;
font-size: 12pt;
color: #b4d194;
line-height: 16pt;
padding-top: 100px;
padding-left: 5mm;
text-align: center;
display: inline-block;
align-self: flex-end;
}
.image_titles {
/*width: 105mm;*/
text-align: center;
margin-top: 63mm;
margin-left: 9mm;
font-family: 'NotCourierSans', Courier, sans-serif;
font-size: 12pt;
/*text-shadow: -1px 2px #393e41;*/
color:black;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #9594c49e;
}
.game{
object-fit:cover;
width: 95mm;
}
@media print {
.body{
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */ /* Firefox 48 – 96 */
print-color-adjust: exact !important;
}
.page{
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
print-color-adjust: exact !important;
}
.overflowing-element {
overflow: hidden;
}
nav{
display: none !important;
}
}
@media screen {
.body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(200mm / 2), 1fr));
grid-gap: 5mm;
height: 287mm;
width: 200mm;
margin: 0 auto;
padding: 5mm;
overflow: hidden;
}
.card {
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
transition: transform .2s;
}
/*change the number below to scale to the appropriate size*/
.card:hover {
transform: scale(2);
}
nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 24px;
text-align: right;
position: fixed;
top: 0;
}
.btn {
background: white;
display: inline-block;
min-width: 50px;
height: 50px;
border-radius: 24px;
padding: 0 4px;
border: 1px solid currentColor;
color: #9594c4;
transition-duration: 0.7s;
cursor: pointer;
}
.btn:hover {
background-color: #9594c4;
}
}
Write Preview
Loading…
Cancel
Save