You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

432 lines
6.3 KiB
CSS

/*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;
}
}