Browse Source

A few more print adjustments

master
Julio Biason 6 years ago
parent
commit
13408f9116
  1. 10
      cv.css
  2. 513
      index.html
  3. 137
      print.css

10
cv.css

@ -167,15 +167,23 @@ a {
min-height: 23em; min-height: 23em;
} }
#projects .columns.header {
min-height: 0px;
}
/* -------------------------------------------------- */ /* -------------------------------------------------- */
/* Projects */ /* Projects */
/* -------------------------------------------------- */ /* -------------------------------------------------- */
.presentations .columns { #presentations .columns {
/* border: 1px dashed gray; */ /* border: 1px dashed gray; */
min-height: 10em; min-height: 10em;
} }
#presentations .columns.header {
min-height: 0px;
}
/* -------------------------------------------------- */ /* -------------------------------------------------- */
/* Generic */ /* Generic */

513
index.html

@ -445,181 +445,184 @@
</div> <!-- skills --> </div> <!-- skills -->
</div> </div>
<div class="row"> <div id="projects">
<div class="columns medium-12"> <div class="row">
<h2> <div class="columns medium-12 header">
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <h2>
Personal Projects <i class="fa fa-angle-right blue" aria-hidden="true"></i>
</h2> Personal Projects
</div> </h2>
</div> </div>
<div class="row" id="projects">
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue"></i>
WorkTime
</h3>
<ul>
<li class="description">Calculate the worked time and time
remaining till completion of a whole day work.</li>
<li>Written in Clojure.</li>
<li>Managed to do the most basic operations.</li>
<li>Broke in a mid-refactor when changing companies (when
the rules for work time changed.)</li>
</ul>
</div> </div>
<div class="columns small-12 medium-6 large-4"> <div class="row">
<h3> <div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <h3>
Mitter <i class="fa fa-angle-right blue"></i>
</h3> WorkTime
</h3>
<ul> <ul>
<li class="description">Twitter Desktop Client.</li> <li class="description">Calculate the worked time and time
<li>Written in Python.</li> remaining till completion of a whole day work.</li>
<li>Designed to support multiple interfaces (currently, <li>Written in Clojure.</li>
PyGTK and TTY/Console).</li> <li>Managed to do the most basic operations.</li>
<li>Designed to support multiple networks. (currently <li>Broke in a mid-refactor when changing companies (when
Twitter, Identica and Facebook were planned.)</li> the rules for work time changed.)</li>
<li>Support ended when Twitter used OAuth in its APIs.</li> </ul>
</ul> </div>
</div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<h3> <h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <i class="fa fa-angle-right blue" aria-hidden="true"></i>
Sectoid Mitter
</h3> </h3>
<ul> <ul>
<li class="description">Blogging app.</li> <li class="description">Twitter Desktop Client.</li>
<li>Written in PHP.</li> <li>Written in Python.</li>
<li>No templating system.</li> <li>Designed to support multiple interfaces (currently,
<li>Option to display pages in sections and subsections PyGTK and TTY/Console).</li>
(hence the name).</li> <li>Designed to support multiple networks. (currently
<li>Code lost when my personal HD and the server HD managed Twitter, Identica and Facebook were planned.)</li>
to crash almost simultaneously.</li> <li>Support ended when Twitter used OAuth in its APIs.</li>
</ul> </ul>
</div> </div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<h3> <h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <i class="fa fa-angle-right blue" aria-hidden="true"></i>
MMM - Move My Music Sectoid
</h3> </h3>
<ul>
<li class="description">Rename files based on their MP3 tags.</li>
<li>Written in Python.</li>
<li>Read information directly from the ID3 tags inside MP3s
and OGGs, renaming the files and moving to directories,
if necessary (based on the renaming template).</li>
<li>Used three different ID3 tag-reading libraries, till a
custom library had to be written due crashes with
encodings.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4"> <ul>
<h3> <li class="description">Blogging app.</li>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <li>Written in PHP.</li>
TimeTracker <li>No templating system.</li>
</h3> <li>Option to display pages in sections and subsections
<ul> (hence the name).</li>
<li class="description">Application to track time spent in <li>Code lost when my personal HD and the server HD managed
different projects.</li> <li>Written in Python.</li> to crash almost simultaneously.</li>
<li>Based on TimeKeeper, a Windows application.</li> </ul>
<li>Console application.</li> </div>
</ul>
</div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<h3> <h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <i class="fa fa-angle-right blue" aria-hidden="true"></i>
GUP MMM - Move My Music
</h3> </h3>
<ul> <ul>
<li class="description">Upload pictures to Web Gallery.</li> <li class="description">Rename files based on their MP3 tags.</li>
<li>Written in Python.</li> <li>Written in Python.</li>
<li>Supports only Web Gallery 2.x or later.</li> <li>Read information directly from the ID3 tags inside MP3s
<li>Local cache for album information.</li> and OGGs, renaming the files and moving to directories,
</ul> if necessary (based on the renaming template).</li>
</div> <li>Used three different ID3 tag-reading libraries, till a
custom library had to be written due crashes with
encodings.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<h3> <h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <i class="fa fa-angle-right blue" aria-hidden="true"></i>
ConfigOpt TimeTracker
</h3> </h3>
<ul> <ul>
<li class="description">A small library to Python to manage <li class="description">Application to track time spent in
configurations.</li> different projects.</li> <li>Written in Python.</li>
<li>Written in Python, using OptParser and ConfigParser.</li> <li>Based on TimeKeeper, a Windows application.</li>
<li>Used to have a single point for the application <li>Console application.</li>
options; the options could be loaded from config files </ul>
and be set in the command line at the same time.</li> </div>
<li>Developed for Mitter, but designed to be a standalone library.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<h3> <h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <i class="fa fa-angle-right blue" aria-hidden="true"></i>
LyricsPicker GUP
</h3> </h3>
<ul> <ul>
<li class="description">Web application to display song lyrics.</li> <li class="description">Upload pictures to Web Gallery.</li>
<li>Based on a play with coworkers.</li> <li>Written in Python.</li>
<li>A single database for lyrics and artists, selected randomly.</li> <li>Supports only Web Gallery 2.x or later.</li>
<li>Display the song lyric, but not the artist or the song name.</li> <li>Local cache for album information.</li>
</ul> </ul>
</div> </div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<h3> <h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <i class="fa fa-angle-right blue" aria-hidden="true"></i>
Lunch-O ConfigOpt
</h3> </h3>
<ul> <ul>
<li class="description">A "Where We Are Going to Lunch Today?" app.</li> <li class="description">A small library to Python to manage
<li>Started with NodeJS, but rewritten in Python with Flask and PonyORM.</li> configurations.</li>
<li>Server only, with RESTful APIs</li> <li>Written in Python, using OptParser and ConfigParser.</li>
</ul> <li>Used to have a single point for the application
</div> options; the options could be loaded from config files
and be set in the command line at the same time.</li>
<li>Developed for Mitter, but designed to be a standalone library.</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<h3> <h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <i class="fa fa-angle-right blue" aria-hidden="true"></i>
CV LyricsPicker
</h3> </h3>
<ul> <ul>
<li class="description">This CV</li> <li class="description">Web application to display song lyrics.</li>
<li>Written with HTML and CSS.</li> <li>Based on a play with coworkers.</li>
<li>Using Zurb Foundation for the style.</li> <li>A single database for lyrics and artists, selected randomly.</li>
</ul> <li>Display the song lyric, but not the artist or the song name.</li>
</div> </ul>
</div> </div>
<div class="row"> <div class="columns small-12 medium-6 large-4">
<div class="columns medium-12"> <h3>
<h2> <i class="fa fa-angle-right blue" aria-hidden="true"></i>
<i class="fa fa-angle-right blue" aria-hidden="true"></i> Lunch-O
Presentations </h3>
</h2> <ul>
<li class="description">A "Where We Are Going to Lunch Today?" app.</li>
<li>Started with NodeJS, but rewritten in Python with Flask and PonyORM.</li>
<li>Server only, with RESTful APIs</li>
</ul>
</div>
<div class="columns small-12 medium-6 large-4">
<h3>
<i class="fa fa-angle-right blue" aria-hidden="true"></i>
CV
</h3>
<ul>
<li class="description">This CV</li>
<li>Written with HTML and CSS.</li>
<li>Using Zurb Foundation for the style.</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="row"> <div id="presentations">
<div class="columns small-12"> <div class="row">
<h3> <div class="columns medium-12 header">
<i class="fa fa-angle-right blue" aria-hidden='true'></i> <h2>
2018 <i class="fa fa-angle-right blue" aria-hidden="true"></i>
</h3> Presentations
</h2>
</div>
</div> </div>
</div>
<div class="presentations"> <div class="row">
<div class="columns small-12 header">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2018
</h3>
</div>
</div>
<div class="row"> <div class="row">
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i> <i class="fa fa-angle-right blue"></i>
@ -630,18 +633,16 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="columns small-12"> <div class="columns small-12 header">
<h3> <h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i> <i class="fa fa-angle-right blue" aria-hidden='true'></i>
2017 2017
</h3> </h3>
</div>
</div> </div>
</div>
<div class="presentations">
<div class="row"> <div class="row">
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i> <i class="fa fa-angle-right blue"></i>
@ -693,111 +694,113 @@
</div> </div>
</div> </div>
<div class="row"> <div id="events">
<div class="columns medium-12"> <div class="row">
<h2> <div class="columns medium-12">
<i class="fa fa-angle-right blue" aria-hidden="true"></i> <h2>
Events and Meetups <i class="fa fa-angle-right blue" aria-hidden="true"></i>
</h2> Events and Meetups
</div> </h2>
</div> </div>
<div class="row">
<div class="columns small-12">
<h3>
<i class="fa fa-angle-right blue" aria-hidden='true'></i>
2018
</h3>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12">
<i class="fa fa-angle-right blue"></i> <h3>
<a href="https://pycaxias.org/">PyCaxias 2018</a> <i class="fa fa-angle-right blue" aria-hidden='true'></i>
2018
</h3>
</div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="columns small-12"> <div class="columns small-12 medium-6 large-4">
<h3> <i class="fa fa-angle-right blue"></i>
<i class="fa fa-angle-right blue" aria-hidden='true'></i> <a href="https://pycaxias.org/">PyCaxias 2018</a>
2017 </div>
</h3>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12">
<i class="fa fa-angle-right blue"></i> <h3>
<a href="https://sf-2018.flink-forward.org/">Flink Forward 2018</a> <i class="fa fa-angle-right blue" aria-hidden='true'></i>
2017
</h3>
</div>
</div> </div>
<div class="columns small-12 medium-6 large-4"> <div class="row">
<i class="fa fa-angle-right blue"></i> <div class="columns small-12 medium-6 large-4">
<a href="http://poa.devopsdays.com.br/#home">DevOpsDays Porto Alegre 2017</a> <i class="fa fa-angle-right blue"></i>
</div> <a href="https://sf-2018.flink-forward.org/">Flink Forward 2018</a>
</div> </div>
<div class="row"> <div class="columns small-12 medium-6 large-4">
<div class="columns small-12"> <i class="fa fa-angle-right blue"></i>
<h3> <a href="http://poa.devopsdays.com.br/#home">DevOpsDays Porto Alegre 2017</a>
<i class="fa fa-angle-right blue" aria-hidden='true'></i> </div>
2016
</h3>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12">
<i class="fa fa-angle-right blue"></i> <h3>
<a href="http://2016.pythonbrasil.org.br/" target="_blank">PythonBrasil</a> <i class="fa fa-angle-right blue" aria-hidden='true'></i>
</div> 2016
<div class="columns small-12 medium-6 large-4"> </h3>
<i class="fa fa-angle-right blue"></i> </div>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-design-thinking" target="_blank">#TheDevConf - Design Thinking</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-arquitetura" target="_blank">#TheDevConf - Arquitetura</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-bigdata" target="_blank">#TheDevConf - Big Data</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-data-science" target="_blank">#TheDevConf - Data Science</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://braziljs.org/conf" target="_blank">BrazilJS</a>
</div> </div>
<div class="columns small-12 medium-6 large-4"> <div class="row">
<i class="fa fa-angle-right blue"></i> <div class="columns small-12 medium-6 large-4">
<a href="http://softwarelivre.org/fisl17" target="_blank">FISL 17</a> <i class="fa fa-angle-right blue"></i>
</div> <a href="http://2016.pythonbrasil.org.br/" target="_blank">PythonBrasil</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-design-thinking" target="_blank">#TheDevConf - Design Thinking</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-arquitetura" target="_blank">#TheDevConf - Arquitetura</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-bigdata" target="_blank">#TheDevConf - Big Data</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="http://www.thedevelopersconference.com.br/tdc/2016/portoalegre/trilha-data-science" target="_blank">#TheDevConf - Data Science</a>
</div>
<div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i>
<a href="https://braziljs.org/conf" target="_blank">BrazilJS</a>
</div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i> <i class="fa fa-angle-right blue"></i>
<a href="http://www.cnqs.com.br/" target="_blank">Congresso Nacional de Qualidade de Software</a> <a href="http://softwarelivre.org/fisl17" target="_blank">FISL 17</a>
</div> </div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i> <i class="fa fa-angle-right blue"></i>
<a href="https://www.devopsdays.org/events/2016-portoalegre/welcome/" target="_blank">DevOpsDays Porto Alegre</a> <a href="http://www.cnqs.com.br/" target="_blank">Congresso Nacional de Qualidade de Software</a>
</div> </div>
<div class="columns small-12 medium-6 large-4"> <div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i> <i class="fa fa-angle-right blue"></i>
<a href="http://poa.tchelinux.org/" target="_blank">TcheLinux 2016</a> <a href="https://www.devopsdays.org/events/2016-portoalegre/welcome/" target="_blank">DevOpsDays Porto Alegre</a>
</div> </div>
<div class="columns small-12 medium-6 large-4 end"> <div class="columns small-12 medium-6 large-4">
<i class="fa fa-angle-right blue"></i> <i class="fa fa-angle-right blue"></i>
<a href="http://rsjs.org/2016/" target="_blank">RSJS 2016</a> <a href="http://poa.tchelinux.org/" target="_blank">TcheLinux 2016</a>
</div>
<div class="columns small-12 medium-6 large-4 end">
<i class="fa fa-angle-right blue"></i>
<a href="http://rsjs.org/2016/" target="_blank">RSJS 2016</a>
</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

137
print.css

@ -1,73 +1,88 @@
@media print { .large-1,
.large-1, .medium-1,
.medium-1, .small-1 {
.small-1 { width: 8.33333%;
width: 8.33333%; }
}
.large-2, .large-2,
.medium-2, .medium-2,
.small-2 { .small-2 {
width: 16.66667%; width: 16.66667%;
} }
.large-3, .large-3,
.medium-3, .medium-3,
.small-3 { .small-3 {
width: 25%; width: 25%;
} }
.large-4, .large-4,
.medium-4, .medium-4,
.small-4 { .small-4 {
width: 33.33333%; width: 33.33333%;
} }
.large-5, .large-5,
.medium-5, .medium-5,
.small-5 { .small-5 {
width: 41.66667%; width: 41.66667%;
} }
.large-6, .large-6,
.medium-6, .medium-6,
.small-6 { .small-6 {
width: 50%; width: 50%;
} }
.large-7, .large-7,
.medium-7, .medium-7,
.small-7 { .small-7 {
width: 58.33333%; width: 58.33333%;
} }
.large-8, .large-8,
.medium-8, .medium-8,
.small-8 { .small-8 {
width: 66.66667%; width: 66.66667%;
} }
.large-9, .large-9,
.medium-9, .medium-9,
.small-9 { .small-9 {
width: 75%; width: 75%;
} }
.large-10, .large-10,
.medium-10, .medium-10,
.small-10 { .small-10 {
width: 83.33333%; width: 83.33333%;
} }
.large-11, .large-11,
.medium-11, .medium-11,
.small-11 { .small-11 {
width: 91.66667%; width: 91.66667%;
} }
.large-12,
.medium-12,
.small-12 {
width: 100%;
}
#projects {
display: none; /* hiding till I figure out how to print them properly */
}
#events {
display: none; /* same as above */
}
body {
font-weight: 100 !important;
font-size: 0.8em;
}
.large-12, #skills {
.medium-12, font-size: 0.8em;
.small-12 {
width: 100%;
}
} }

Loading…
Cancel
Save