XPUB
/
issue.xpub.nl
71
3
Fork 0
Code Issues Pull Requests Releases Wiki Activity

styling

Browse Source
master
Your Name 5 years ago
parent eb16ef51ef
commit e129c9d462
2 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File

25
10/index.html
Unescape Escape View File

@ -27,7 +27,7 @@
<marquee class="maintitle" behavior="scroll" direction="left" height="250px"><embed class="output" src="img/inpout.gif" /></marquee> <marquee class="maintitle" behavior="scroll" direction="left" height="250px"><embed class="output" src="img/inpout.gif" /></marquee>
</h1> </h1>
<a href="#damla_module"><div id="damla_T"><h1 class="name_T">Carbon</h1></div></a> <a href="#damla_module"><div id="damla_T"><h1 class="name_T" padding-top="10vh">Carbon</h1></div></a>
<h2 class="student">by Damlanur Bilgin</h2> <h2 class="student">by Damlanur Bilgin</h2>
<p class= "p-style">Carbon is a device that translates graphite markings on paper into signals that manipulate sound and visuals. Carbon’s interface is pencil, paper, and an LED screen that reflects the user's marks on paper and translates signals from other modules into light and color. <p class= "p-style">Carbon is a device that translates graphite markings on paper into signals that manipulate sound and visuals. Carbon’s interface is pencil, paper, and an LED screen that reflects the user's marks on paper and translates signals from other modules into light and color.
<br>A synthesizer features knobs, sliders and buttons that allow the user to manipulate sound. The opposite ends of a knob or a slider represent two ends of an axis such as slow and fast or low pitch and high pitch, or, in case of buttons, on and off or play and pause. Each of these elements, controlling singular values, combine to form an interface between the musician and sound. <br>A synthesizer features knobs, sliders and buttons that allow the user to manipulate sound. The opposite ends of a knob or a slider represent two ends of an axis such as slow and fast or low pitch and high pitch, or, in case of buttons, on and off or play and pause. Each of these elements, controlling singular values, combine to form an interface between the musician and sound.
@ -37,7 +37,6 @@
<button type="button" class="collapsible">Read More >></button> <button type="button" class="collapsible">Read More >></button>
<div class="extended"> <div class="extended">
<p class= "p-style">The knowledge of how to use pencil and paper is much more widespread than the knowledge of playing an instrument. Replacing the interface of a synth with a sheet of paper and a pencil opens this device up to people who wouldn’t know how to interact with a musical instrument. The user can make decisions based on the way they want to move their hand or the shape of marks they want to leave on the paper. In a way, Carbon is also a translator between audio and visual. A musician can use the sound output of the synth to guide their drawing in the same way an illustrator can use shapes on paper to control sound. <p class= "p-style">The knowledge of how to use pencil and paper is much more widespread than the knowledge of playing an instrument. Replacing the interface of a synth with a sheet of paper and a pencil opens this device up to people who wouldn’t know how to interact with a musical instrument. The user can make decisions based on the way they want to move their hand or the shape of marks they want to leave on the paper. In a way, Carbon is also a translator between audio and visual. A musician can use the sound output of the synth to guide their drawing in the same way an illustrator can use shapes on paper to control sound.
</p>
<br>Carbon is born out of a desire to interface with a medium one is unfamiliar with. The lack of technical knowledge in music that started out as an insecurity ended up guiding me through this project in exploring how I can interact with the unfamiliar through the familiar.</p> <br>Carbon is born out of a desire to interface with a medium one is unfamiliar with. The lack of technical knowledge in music that started out as an insecurity ended up guiding me through this project in exploring how I can interact with the unfamiliar through the familiar.</p>
</div> </div>
<div class="links"> <div class="links">
@ -492,7 +491,7 @@
<div id="right"> <div id="right">
<div id="maingif"> <div id="maingif">
<embed src="img/gifmain.gif"/> <embed src="img/gifmain.gif"/ class="maingif">
</div> </div>
<div id="SPIX"> SPECIAL ISSUE X</div> <div id="SPIX"> SPECIAL ISSUE X</div>
@ -572,7 +571,7 @@
<img src="img/pcb_damla.png"/> <img src="img/pcb_damla.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -586,7 +585,7 @@
<img class="moduleimg" id="mark" src="img/pcb_mark.png"/> <img class="moduleimg" id="mark" src="img/pcb_mark.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -599,7 +598,7 @@
<img src="img/pcb_avital.png"/> <img src="img/pcb_avital.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -612,7 +611,7 @@
<img src="img/pcb_max.png"/> <img src="img/pcb_max.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -625,7 +624,7 @@
<img src="img/pcb_ioana.png"/> <img src="img/pcb_ioana.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -638,7 +637,7 @@
<img src="img/pcb_clara.png"/> <img src="img/pcb_clara.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -651,7 +650,7 @@
<img src="img/pcb_sandra.png"/> <img src="img/pcb_sandra.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -673,7 +672,7 @@
<img src="img/pcb_mika.png"/> <img src="img/pcb_mika.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -686,7 +685,7 @@
<img src="img/pcb_anna.png"/> <img src="img/pcb_anna.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);
@ -699,7 +698,7 @@
<img src="img/pcb_tisa.png"/> <img src="img/pcb_tisa.png"/>
</a> </a>
</a> </a>
<br><marquee class="code" behavior="scroll" direction="right">{ <br><marquee class="code" behavior="scroll" direction="left">{
Serial.begin(9600); Serial.begin(9600);
TV.begin(PAL); TV.begin(PAL);
TV.select_font(font4x6); TV.select_font(font4x6);

15
10/style.css
Unescape Escape View File

@ -212,22 +212,20 @@ div#subtitle {
color: black; color: black;
} }
div #maingif{ div #maingif{
max-width: 120%; max-width: 100%;
display: block;
margin-top: 0px; margin-top: 0px;
margin-bottom: 10%; margin-bottom: 10%;
margin-right: 0px; margin-right: 0px;
margin-left: 0px; margin-left: 0px;
padding:0px;
} }
.maingif{ .maingif{
width: 100%; width: 100%;
display: block; display: block;
margin-top: 0px; padding:0px;
margin-bottom: 10%;
margin-right: 0px;
margin-left: -20px;
} }
div#define { div#define {
@ -318,12 +316,13 @@ div#bigpcb{
} }
.code { .code {
max-width: 90%; max-width: 80%;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: transparent; background-color: transparent;
border: 0.1em solid grey; border: 0.1em solid;
border-color: rgba(255, 255, 255, 0.3);
margin-bottom: white; margin-bottom: white;
color: white; color: white;
font-family: "OCRAStd"; font-family: "OCRAStd";

Write Preview
Loading…
Cancel
Save