From 710ee2b354445b8f1127f13888f21c09dcc9976c Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 21 Feb 2021 10:15:44 +0100 Subject: [PATCH] modified css for tablet and mobile --- content/Track 7 - Crossroads/1-recap.md | 2 +- content/pages/start.md | 2 +- themes/default/static/css/main.css | 125 +++++++++++++++++++----- themes/default/templates/base.html | 2 +- 4 files changed, 101 insertions(+), 30 deletions(-) diff --git a/content/Track 7 - Crossroads/1-recap.md b/content/Track 7 - Crossroads/1-recap.md index 5a76fe3..f5146ec 100644 --- a/content/Track 7 - Crossroads/1-recap.md +++ b/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. -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. diff --git a/content/pages/start.md b/content/pages/start.md index 8c61c64..c664969 100644 --- a/content/pages/start.md +++ b/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. -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. diff --git a/themes/default/static/css/main.css b/themes/default/static/css/main.css index 6bf74db..6162aaa 100644 --- a/themes/default/static/css/main.css +++ b/themes/default/static/css/main.css @@ -1,11 +1,16 @@ @import 'fonts.css'; - +html, body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} body{ margin:2em auto; - min-width: 1080px; - max-width: 950px; + /* min-width: 1080px; + max-width: 950px; */ font-family: 'Basker'; - font-size: 14pt; + /* font-size: 14pt; */ line-height: 1.7; letter-spacing: 0.25pt; color: rgba(40,40,40,1); @@ -23,21 +28,24 @@ header#banner{ } header#banner h1{ font-family: 'Syne'; - font-size: 110px; + font-size: 10em; line-height:1.25; - margin: 0.7em 0; + margin: 0 auto; + padding-bottom: 0.5em; + width: 70%; } header#banner h1 a{ text-decoration: none; color: darkgoldenrod !important; } nav#menu{ - width: calc(100% + 20em); + /* width: calc(100% + 20em); */ text-align: center; - margin:0 0 0 -11em; + /* margin:0 0 0 -11em; */ } nav#menu li{ - width: 114px; + width: 7.7%; + min-width: 114px; height:10em; margin:1em 0; padding:1em; @@ -61,8 +69,13 @@ nav#menu{ } section#content{ - margin: 4em 1em; + margin: 4% 16.5%; +} + +section.body { + margin: 0 !important; } + article{ margin: 3em 0 2em 0; padding: 2em 3em 0; @@ -123,7 +136,7 @@ ul.navprevnext{ ul.navprevnext li.done, ul.navprevnext li.none{ position: relative; - width: calc(50% - 17em); + width: 20%; height: 150px; top:0; background-color: #a4e7ff; @@ -155,12 +168,12 @@ ul.navprevnext{ ul.navprevnext li.none, ul.navprevnext li.prev{ float: left; - left:-9.5em; + left:-5.5%; } ul.navprevnext li.next, ul.navprevnext li.done{ float: right; - right: -9.5em; + right: -11.5%; } /* you finished this section */ ul.navprevnext li.done{ @@ -228,30 +241,88 @@ p { 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 { - width: 50vw; - height: 24vw; - font-size: 2em; + width: 80vw; + height: auto; + font-size: 0.8em; margin: 1em 0.1em; } 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{ - margin-left: 9.4vw; + section#content { + margin: 1.5em; } } -@media (max-width:1024px) { - body { - margin-left: 13vw; + +/* TABLET */ +@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 { - height: 14vw; - } -} */ + h1.category { + 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%; + } +} diff --git a/themes/default/templates/base.html b/themes/default/templates/base.html index 02d1d08..89b6f85 100644 --- a/themes/default/templates/base.html +++ b/themes/default/templates/base.html @@ -6,7 +6,7 @@ - + {% endblock head %}