From 5879c96fd129160c6c0f9ef4b3281544ac4e3c3d Mon Sep 17 00:00:00 2001
From: rita <rita@xpub.nl>
Date: Mon, 17 Aug 2020 23:25:54 +0200
Subject: [PATCH] Upload files to 'How_to_publish_a_network'

---
 How_to_publish_a_network/reset.css  |  48 ++++
 How_to_publish_a_network/style.css  | 431 ++++++++++++++++++++++++++++
 How_to_publish_a_network/style2.css |  65 +++++
 3 files changed, 544 insertions(+)
 create mode 100644 How_to_publish_a_network/reset.css
 create mode 100644 How_to_publish_a_network/style.css
 create mode 100644 How_to_publish_a_network/style2.css

diff --git a/How_to_publish_a_network/reset.css b/How_to_publish_a_network/reset.css
new file mode 100644
index 0000000..ed11813
--- /dev/null
+++ b/How_to_publish_a_network/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/How_to_publish_a_network/style.css b/How_to_publish_a_network/style.css
new file mode 100644
index 0000000..1290491
--- /dev/null
+++ b/How_to_publish_a_network/style.css
@@ -0,0 +1,431 @@
+/*font by https://github.com/Fromager*/
+@font-face {
+  font-family: "junicode";
+  src: url("font/junicode.ttf");
+  font-weight: 600;
+  font-style: normal;
+}
+
+body {
+    font-size: calc(9px + 0.3vw);
+    font-family: helvetica, sans-serif;
+    overflow-x: hidden;
+}
+
+/*fixed content*/
+.static {
+  position: fixed;
+  top: 7%;
+  overflow: hidden;
+}
+
+/*h1 and h2*/
+header {
+  width: 73%;
+  clear:right;
+  display: inline-block;
+  margin-left: 2%;
+}
+
+/*header links*/
+header a:hover {
+  color: black;
+}
+
+/*"Alive, fully in motion,..."*/
+h1 {
+  font-size: calc(16px + 0.4vw);
+  margin-bottom: -0.4%;
+  line-height: 110%;
+}
+
+/*"How to publish a network"*/
+h2 {
+  font-weight: bold;
+  font-family: "junicode", serif;
+  font-size: calc(16px + 1.1vw);
+}
+
+/*"More to read"*/
+h3 {
+  width: 37.5%;
+  margin-left: 12.5%;
+  margin-right: 50%;
+  margin-bottom: 6%;
+  font-family: "junicode", serif;
+  font-size: calc(12px + 0.7vw);
+}
+
+/*Small explanation of project*/
+aside {
+  width: 23%;
+  float: right;
+  vertical-align: top;
+  line-height: 115%;
+  margin-right: 2%;
+}
+
+/*Who is we, What is this*/
+.questions {
+  margin-top: 3%;
+  color: pink;
+}
+
+span{
+  font-style: italic;
+}
+
+/*Lifespan, Documentation, Tools*/
+.menu {
+  width: 37.5%;
+  margin-left: 12.5%;
+  margin-right: 50%;
+  margin-top: 20%;
+  padding-top: 1%;
+  font-family: "junicode", serif;
+  font-size: calc(12px + 0.7vw);
+}
+
+/*January, March, April*/
+.menu_2{
+  width: 50%;
+  margin-left: 25%;
+  padding-top: 1%;
+  margin-right: 25%;
+  font-size: calc(12px + 0.2vw);
+}
+
+.menus {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: white;
+  padding-bottom: 1%;
+  margin-bottom: 4%;
+}
+
+/*Content that scrolls up*/
+.move {
+  position: relative;
+  height: 100%;
+  background-color: white;
+  margin-bottom: 4%;
+}
+
+/*References numbers in Documentation*/
+sup {
+    vertical-align: super;
+    font-size: calc(8px + 0.2vw);
+    line-height: 0;
+}
+
+a:link{
+  text-decoration: none;
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: grey;
+}
+
+a:active {
+  color: black;
+}
+
+.grey a{
+  color: grey;
+}
+
+.lifespan{
+  font-size: calc(10px + 0.15vw);
+  line-height: 150%;
+  column-count: 3;
+  line-height: 160%;
+  margin-right: 25%;
+  background-color: white;
+  margin: 2%;
+}
+
+.lifespan a {
+  display: inline-block;
+  max-width: 80%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lifespan img {
+  width: calc(25px + 0.07%);
+  padding-left: 1%;
+  position: absolute;
+}
+
+.documentation {
+  width: 50%;
+  font-size: calc(11px + 0.4vw);
+  line-height: 140%;
+  background-color: white;
+  max-width: 70ch;
+  margin: 2%;
+}
+
+.documentation p {
+  margin-top: 2%;
+}
+
+/*Notes of Documentation text*/
+.notes {
+  font-size: calc(9px + 0.3vw);
+  line-height: 120%;
+  width: 75%;
+  margin-left: 25%;
+}
+
+/*Image in Documentation*/
+#infrastructour {
+  width: 20%;
+  position: absolute;
+  left: 62.5%;
+  top: 10%;
+  -ms-transform: rotate(2.5deg); /* IE 9 */
+  -webkit-transform: rotate(2.5deg); /* Safari 3-8 */
+  transform: rotate(2.5deg);
+}
+
+/*Image in Documentation*/
+#router {
+  width: 20%;
+  position: absolute;
+  left: 62.5%;
+  top: 45%;
+}
+
+/*Content of "More to Read"*/
+.documentation_right{
+  width: 50%;
+  margin-left: 50%;
+  margin-top: 5%;
+  font-size: calc(11px + 0.4vw);
+  line-height: 140%;
+}
+
+.documentation_right p{
+  margin-bottom: 1%;
+}
+
+.tools p{
+  background-color: white;
+  width: 50%;
+  font-size: calc(11px + 0.4vw);
+  line-height: 140%;
+  margin-bottom: 1%;
+  max-width: 70ch;
+  margin: 2%;
+}
+
+.tools img {
+  width: 35%;
+  vertical-align: top;
+  margin-top: 5%;
+}
+
+footer{
+  text-transform: uppercase;
+  line-height: 130%;
+  margin: 2%;
+  background-color: white;
+}
+
+#grey, #grey2 {
+  color: grey;
+}
+
+@media only screen and (max-width: 550px){
+
+  .static{
+    top: 12%;
+  }
+  aside {
+    float: none;
+    width: 90%;
+    overflow: hidden;
+    color: grey;
+    margin: 2%;
+    margin-top: 8%;
+    font-size: calc(12px + 0.4vw);
+  }
+
+  .move {
+    margin-top: 90%;
+    width: 100%;
+    margin-right: 0;
+    background-color: white;
+  }
+
+  .lifespan{
+    column-count: 1;
+    margin-right: 0;
+    font-size: calc(14px + 0.4vw);
+    line-height: 140%;
+  }
+
+  .lifespan a {
+    display: inline-block;
+    max-width: 70%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .menu, h3 {
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+    font-size: calc(14px + 0.7vw);
+  }
+
+  .menu_2{
+    margin-left: 0;
+    width: 96%;
+    text-align: right;
+    font-size: calc(15px + 0.3vw);
+  }
+
+  .menus{
+    width: 100%;
+    margin-bottom: 10%;
+    margin-left: 2%;
+  }
+
+  header{
+    width: 96%;
+  }
+
+  .documentation, .tools p, .tools img, .documentation_right, .notes{
+    width: 94%;
+    margin: 2%;
+  }
+
+  .documentation{
+    font-size: calc(15px + 0.3vw);
+  }
+
+/*Changing images position*/
+  #infrastructour, #router {
+    position: relative;
+    left: 0%;
+    margin-top: 5%;
+    margin-bottom: 10%;
+    width: 96%;
+  }
+}
+
+@media only screen and (min-width:550px) and (max-width: 961px){
+
+  aside {
+    float: none;
+    width: 60%;
+    overflow: hidden;
+    color: grey;
+    margin: 2%;
+  }
+
+  .static{
+    top: 12%;
+  }
+
+  .move {
+    margin-top: 40%;
+    width: 100%;
+    margin-right: 0;
+    background-color: white;
+  }
+
+/*Reducing columns to 2*/
+  .lifespan{
+    column-count: 2;
+    margin-right: 0;
+  }
+
+  .lifespan a {
+    display: inline-block;
+    max-width: 70%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .menu, h3,.menu_2, .menus, header {
+    width: 96%;
+  }
+}
+
+/*For really big screens*/
+@media only screen and (min-width:2500px) {
+  /*columns to 4*/
+  .lifespan{
+    column-count: 4;
+    font-size: calc(12px + 0.5vw);
+  }
+
+  .lifespan img{
+    width: 1.5%;
+  }
+
+  .menu_2, .documentation, .tools p{
+    font-size: calc(12px + 0.8vw);
+  }
+
+  h1{
+    font-size: calc(12px + 1vw);
+  }
+
+  aside {
+    font-size: calc(12px + 0.5vw);
+  }
+
+  .menu{
+    font-size: calc(15px + 1vw);
+  }
+}
+
+/*for weasyprint experiences*/
+@page {
+  width: 128mm;
+  height: 210mm;
+  margin-top: 8mm;
+  margin-left: 8mm;
+  margin-bottom: 24mm;
+  margin-right: 16mm;
+  marks: crop;
+}
+
+@media print {
+  body {
+    background-color: white;
+  }
+  .documentation {
+    font-size: 9pt;
+    width: 87.5%;
+  }
+  .menus, header, aside, footer{
+    display: none;
+  }
+  .notes{
+    margin-right: 0;
+  }
+  .tools img {
+    width: 60%;
+  }
+  .page_break{
+    page-break-after: always;
+  }
+  .tools {
+    font-size: 9pt;
+  }
+}
diff --git a/How_to_publish_a_network/style2.css b/How_to_publish_a_network/style2.css
new file mode 100644
index 0000000..1101e34
--- /dev/null
+++ b/How_to_publish_a_network/style2.css
@@ -0,0 +1,65 @@
+/* Push the body down with margin-top*/
+body {
+	margin-top: 40px;
+	/*background-color: pink;*/
+}
+
+/* CNN styling */
+#cnn{
+	position: fixed;
+	width: calc(100% - 10px);
+	min-width: 420px;
+	height: 30px;
+	top:0;
+	left:0;
+	right: 0;
+	vertical-align: top;
+	padding: 5px;
+	font-size: 14px;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(yellow), to(gold));
+}
+#cnn .button_container {
+	display: inline-block;
+	width: calc(50% - 20px);
+}
+button {
+	width:auto;
+	margin-right: 10px;
+
+}
+
+button:hover{
+	cursor: pointer;
+}
+#sitemap button{
+	position: absolute;
+	top:0;
+	right:0;
+	margin:5px;
+	padding:0;
+	color:blue;
+}
+
+@media screen and (orientation: portrait){
+	body {
+		margin-top: 80px;
+		/*background-color: yellow;*/
+	}
+	#cnn {
+		width: calc(100% - 10px);
+		height: 65px;
+		font-size: 12px;
+	}
+	#cnn .button_container {
+		width: calc(100% - 100px);
+	}
+	button {
+		width: 100%;
+		margin-bottom: 5px;
+	}
+	#sitemap button {
+		width: 100%;
+		margin-bottom: 10px;
+
+	}
+}