Browse Source

modified css for tablet and mobile

master
Your Name 3 years ago
parent
commit
710ee2b354
  1. 2
      content/Track 7 - Crossroads/1-recap.md
  2. 2
      content/pages/start.md
  3. 125
      themes/default/static/css/main.css
  4. 2
      themes/default/templates/base.html

2
content/Track 7 - Crossroads/1-recap.md

@ -26,4 +26,4 @@ As they do not require to function within server-side conditions and can be run
Bots are of course not a solution to computationally generated harm, nor are they able to repair infrastructures. Let's take for example the dependency of bots on APIs. While there is possibility to run a bot without using the API of an infrastructure, in order to have access to different functionalities than users, most bots will engage with it. It follows that with a change in an infrastructure's internal policy, the bots can easily be rejected. One example of this is the Twitter bot purge from 2018. Bots are of course not a solution to computationally generated harm, nor are they able to repair infrastructures. Let's take for example the dependency of bots on APIs. While there is possibility to run a bot without using the API of an infrastructure, in order to have access to different functionalities than users, most bots will engage with it. It follows that with a change in an infrastructure's internal policy, the bots can easily be rejected. One example of this is the Twitter bot purge from 2018.
Nonetheless, bots enable certain possibilities to get to know and engage with an infrastructure's material, political and social aspects. Bots are prototypes as arguments, pointing towards ways in which infrastructures could be different. And perhaps this rhetorical quality may lead to a bigger impact. Nonetheless, for the purpose of this module, bots enable certain possibilities to get to know and engage with an infrastructure's material, political and social aspects. Bots may point towards ways in which infrastructures could exist differently, sometimes beyond the intent of the makers. In fact, the nonhuman agency of bots is an aspect that we have not touched upon, yet it is another important point of departure.

2
content/pages/start.md

@ -9,7 +9,7 @@ This module combines theoretical and practical work, bringing the fields of digi
This online module aims to foster what Karin van Es, Maranke Wieringa and Mirko Tobias Schäfer term *tool criticism thinking*[^toolcriticism] (e.g. the skills and practices for critically engaging with the norms and values of our computational tools and infrastructures). The module consists of readings, videos and exercises that help you analyze and reflect on how infrastructural agency, impact or power is shaped, structured and performed. This online module aims to foster what Karin van Es, Maranke Wieringa and Mirko Tobias Schäfer term *tool criticism thinking*[^toolcriticism] (e.g. the skills and practices for critically engaging with the norms and values of our computational tools and infrastructures). The module consists of readings, videos and exercises that help you analyze and reflect on how infrastructural agency, impact or power is shaped, structured and performed.
Through the different tracks we will try to identify some of the norms and values of a digital infrastructures, signal particular tensions that emerge from these norms and values, formulate bots that could potentially address or engage with this hurt, and finally evaluate the implications of bot-making and bot interventions. Through the different tracks we will try to identify some of the norms and values of a digital infrastructures, signal particular tensions that emerge from these norms and values, formulate bots that could potentially address or engage with this hurt, and finally evaluate the implications of bot-making and bot interventions. How do we think with bots?
You can go through this module at your own speed. No subscription is required, you can simply start by clicking on the *start* button in each section and follow the instructions. You can go through this module at your own speed. No subscription is required, you can simply start by clicking on the *start* button in each section and follow the instructions.

125
themes/default/static/css/main.css

@ -1,11 +1,16 @@
@import 'fonts.css'; @import 'fonts.css';
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{ body{
margin:2em auto; margin:2em auto;
min-width: 1080px; /* min-width: 1080px;
max-width: 950px; max-width: 950px; */
font-family: 'Basker'; font-family: 'Basker';
font-size: 14pt; /* font-size: 14pt; */
line-height: 1.7; line-height: 1.7;
letter-spacing: 0.25pt; letter-spacing: 0.25pt;
color: rgba(40,40,40,1); color: rgba(40,40,40,1);
@ -23,21 +28,24 @@ header#banner{
} }
header#banner h1{ header#banner h1{
font-family: 'Syne'; font-family: 'Syne';
font-size: 110px; font-size: 10em;
line-height:1.25; line-height:1.25;
margin: 0.7em 0; margin: 0 auto;
padding-bottom: 0.5em;
width: 70%;
} }
header#banner h1 a{ header#banner h1 a{
text-decoration: none; text-decoration: none;
color: darkgoldenrod !important; color: darkgoldenrod !important;
} }
nav#menu{ nav#menu{
width: calc(100% + 20em); /* width: calc(100% + 20em); */
text-align: center; text-align: center;
margin:0 0 0 -11em; /* margin:0 0 0 -11em; */
} }
nav#menu li{ nav#menu li{
width: 114px; width: 7.7%;
min-width: 114px;
height:10em; height:10em;
margin:1em 0; margin:1em 0;
padding:1em; padding:1em;
@ -61,8 +69,13 @@ nav#menu{
} }
section#content{ section#content{
margin: 4em 1em; margin: 4% 16.5%;
}
section.body {
margin: 0 !important;
} }
article{ article{
margin: 3em 0 2em 0; margin: 3em 0 2em 0;
padding: 2em 3em 0; padding: 2em 3em 0;
@ -123,7 +136,7 @@ ul.navprevnext{
ul.navprevnext li.done, ul.navprevnext li.done,
ul.navprevnext li.none{ ul.navprevnext li.none{
position: relative; position: relative;
width: calc(50% - 17em); width: 20%;
height: 150px; height: 150px;
top:0; top:0;
background-color: #a4e7ff; background-color: #a4e7ff;
@ -155,12 +168,12 @@ ul.navprevnext{
ul.navprevnext li.none, ul.navprevnext li.none,
ul.navprevnext li.prev{ ul.navprevnext li.prev{
float: left; float: left;
left:-9.5em; left:-5.5%;
} }
ul.navprevnext li.next, ul.navprevnext li.next,
ul.navprevnext li.done{ ul.navprevnext li.done{
float: right; float: right;
right: -9.5em; right: -11.5%;
} }
/* you finished this section */ /* you finished this section */
ul.navprevnext li.done{ ul.navprevnext li.done{
@ -228,30 +241,88 @@ p {
word-break: break-word; word-break: break-word;
} }
/* @media (max-width:770px) { #menu ul {
margin: 0;
padding: 0;
}
/* MOBILE */
@media (max-width:812px) {
nav#menu {
width: auto;
text-align: auto;
margin: 0;
}
nav#menu li { nav#menu li {
width: 50vw; width: 80vw;
height: 24vw; height: auto;
font-size: 2em; font-size: 0.8em;
margin: 1em 0.1em; margin: 1em 0.1em;
} }
header#banner h1 { header#banner h1 {
font-size: 10vw; font-size: 2.5em;
}
h1.category {
font-size: 1.3em;
}
ul.navprevnext li.prev, ul.navprevnext li.next, ul.navprevnext li.done, ul.navprevnext li.none {
width: 100%;
height: auto;
}
ul.navprevnext li.next, ul.navprevnext li.done {
/* right: -13%; */
}
ul.navprevnext li.none, ul.navprevnext li.prev {
left: -17%;
margin-bottom: 1em;
} }
body{ section#content {
margin-left: 9.4vw; margin: 1.5em;
} }
} }
@media (max-width:1024px) {
body { /* TABLET */
margin-left: 13vw; @media (min-width:813px and max-width:1024px) {
nav#menu {
width: auto;
text-align: auto;
margin: 0;
}
nav#menu li {
width: 80vw;
height: auto;
font-size: 0.8em;
margin: 1em 0.1em;
}
header#banner h1 {
font-size: 2.5em;
} }
nav#menu li { h1.category {
height: 14vw; font-size: 1.3em;
} }
} */
ul.navprevnext li.prev, ul.navprevnext li.next, ul.navprevnext li.done, ul.navprevnext li.none {
width: 25%;
height: auto;
}
ul.navprevnext li.next, ul.navprevnext li.done {
right: -16%;
}
ul.navprevnext li.none, ul.navprevnext li.prev {
left: -20%;
}
}

2
themes/default/templates/base.html

@ -6,7 +6,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="generator" content="Pelican" /> <meta name="generator" content="Pelican" />
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" /> <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock head %} {% endblock head %}
</head> </head>

Loading…
Cancel
Save