NARRATOR_BOX
Hello! My name is Pedro Henriques. I'm an IT professional.
I build tools, platforms, dynamic websites and desktop applications.
As a showcase of my skills let me build this website...in front of you.
Lets start!
First, some basic styles.
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: 'Roboto', Arial, sans-serif;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html { font-size: 18px; }
@media (max-width: 950px) {
html { font-size: 15px; }
}
@media (max-width: 800px), (max-height: 450px) {
html { font-size: 13px; }
}
@media (max-width: 680px) {
html { font-size: 12px; }
}
@media (max-width: 625px) {
html { font-size: 11px; }
}
@media (max-width: 350px) {
html { font-size: 10px; }
}
body {
font-size: 1rem;
background-color: rgba(0, 0, 0, 0.05);
}
#work_area { padding: 0.5rem; }
Next, lets give everything some transitions!
* {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Finally, lets style this text box and color code the text!
div.flex_item {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
div.content {
width: 22%;
border: 0.1rem solid black;
background-color: rgb(39,40,34);
}
.css_selector { color: rgb(230,159,15); }
.css_property { color: rgb(102,217,239); }
.css_value { color: rgb(190,132,242); }
.css_units { color: rgb(249,38,114); }
.css_keyword { color: rgb(249,38,114); }
...Let me adjust the normal text color for you.
* { color: white; }
There...much better!
This text box is becoming very crowded!
Time to create a new box for the styles.
Lets test it.
Before I do the next step, I'll need a box to write JavaScript code.
And some color coding for the JavaScript text.
Time to give each box a header, so we can keep track of which box is which.
And then some functionality to those headers.
While the application is running you can't expand or collapse the text boxes, but you can pause at any time using the speed controls in the bottom left!
We are done styling, so let's collapse the style box to clear some space on the screen.
And to conclude this presentation let me tell you a little bit more about myself.
Thank you for visiting my website!
Hope you enjoyed it as much as I enjoyed making it.
Notes:
- All the code used on this website was built by me from scratch, without the use of any libraries, frameworks or other third party code.
Acknowledgements:
- CSS and Javascript text color coding based on sublime text's "Monokai Bright" color scheme.
Feel free to expand and collapse the text boxes as you see fit! :)
STYLE_BOX
div#style_box div.text { white-space: pre; }
div.content {
margin-right: 0.5rem;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
div.text { padding: 0.5rem; }
.js_mathoperator,
.js_logicoperator,
.js_keyword { color: rgb(249, 38, 114); }
.js_func_word,
.js_object,
.js_method { color: rgb(102, 217, 239); }
.js_func_name { color: rgb(166, 226, 42); }
.js_func_param { color: rgb(253, 151, 31); }
.js_value { color: rgb(174, 129, 255); }
.js_regexp,
.js_string { color: rgb(230, 219, 116); }
div#script_box div.text {
font-size: 0.86rem;
white-space: pre;
}
div.header {
width: 100%;
height: 2.3rem;
overflow: hidden;
padding: 0rem 0.5rem;
font-size: 1.2rem;
font-weight: bold;
border: 0.1rem solid white;
}
div.header_expanded { position: relative; }
div.header_collapsed {
position: absolute;
top: 0;
}
div.header_text {
position: absolute;
top: 0.5rem;
color: rgb(230, 159, 15);
line-height: 1;
}
div.header_button { line-height: 1; }
div.header_button:hover { cursor: pointer; }
div.hb_expanded,
div.hb_collapsed {
position: absolute;
right: 0.5rem;
top: 0.5rem;
}
div.hb_expanded:after { content: '↥'; }
div.hb_collapsed:after { content: '↧'; }
div.content_collapsed {
height: 2.4rem;
overflow: hidden;
}
#work_area.work_area_collapsed { padding-top: 3rem; }
div.text_collapsed {
position: absolute;
height: 0;
padding: 0;
top: 2.3rem;
}
div.text_expanded {
position: relative;
height: 100%;
}
SCRIPT_BOX
function addHeaders(id) {
if (id == undefined || id.length == 0) {
var elems = document.querySelectorAll("div.content");
}else{
var elems = [document.getElementById(id)];
}
for (var i = 0; i < elems.length; i++) {
if (elems[i].childNodes[0].classList.contains("header")) {
continue;
}
var header_div = document.createElement("div");
header_div.className = "header header_expanded";
var text_div = document.createElement("div");
text_div.className = "header_text";
text_div.innerHTML = elems[i].id.toUpperCase();
header_div.appendChild(text_div);
var buttons_div = document.createElement("div");
buttons_div.className = "header_button hb_expanded";
header_div.appendChild(buttons_div);
elems[i].insertBefore(header_div, elems[i].childNodes[0]);
if (typeof addHeaderClickEvent == "function") {
addHeaderClickEvent(elems[i].id);
}
}
engine_obj_.scrollBoxesToBottom();
}
addHeaders();
function positionCollapsedTextboxes() {
var collapsed_elems = document.querySelectorAll("div.content_collapsed");
if (collapsed_elems.length == 0) { return; }
var root_font_size = parseFloat(window.getComputedStyle(document.getElementsByTagName("html")[0], null).fontSize);
var sum_left = 0;
var left_value = 0;
for (var i = 0; i < collapsed_elems.length; i++) {
collapsed_elems[i].style.top = 0;
left_value = sum_left + 0.5*root_font_size;
sum_left = left_value + parseFloat(window.getComputedStyle(collapsed_elems[i], null).width);
collapsed_elems[i].style.left = left_value/root_font_size + "rem";
};
}
function textboxExpandCollapse(id, only_expand) {
var textbox_elem = engine_obj_.text_box_objs[id].textbox_elem;
var header_elem = textbox_elem.firstElementChild;
var header_button_elem = header_elem.lastElementChild;
var text_elem = textbox_elem.lastElementChild;
var textbox_elem_classes = textbox_elem.classList;
var header_elem_classes = header_elem.classList;
var header_button_classes = header_button_elem.classList;
var work_area_classes = div_work_area_.classList;
var text_elem_classes = text_elem.classList;
if (css_transition_dur_ === null) { getTransitionDuration(); }
if (!only_expand && header_button_classes.contains("hb_expanded")) {
work_area_classes.add("work_area_collapsed");
header_button_classes.add("hb_collapsed");
header_button_classes.remove("hb_expanded");
text_elem_classes.add("text_collapsed");
text_elem_classes.remove("text_expanded");
textbox_elem_classes.add("content_collapsed");
header_elem_classes.add("header_collapsed");
header_elem_classes.remove("header_expanded");
engine_obj_.setTextboxState(id, false);
window.setTimeout(function() {
var textbox_rect = textbox_elem.getBoundingClientRect();
textbox_elem.style.position = "absolute";
textbox_elem.style.left = textbox_rect.left + "px";
textbox_elem.style.top = textbox_rect.top + "px";
positionCollapsedTextboxes();
}, css_transition_dur_);
}else if (header_button_classes.contains("hb_collapsed")) {
textbox_elem_classes.remove("content_collapsed");
textbox_elem.style.position = "";
textbox_elem.style.left = "";
textbox_elem.style.top = "";
header_elem_classes.add("header_expanded");
header_elem_classes.remove("header_collapsed");
text_elem_classes.add("text_expanded");
text_elem_classes.remove("text_collapsed");
header_button_classes.add("hb_expanded");
header_button_classes.remove("hb_collapsed");
if (document.querySelectorAll("div.hb_collapsed").length == 0) {
work_area_classes.remove("work_area_collapsed");
}
engine_obj_.setTextboxState(id, true);
positionCollapsedTextboxes();
window.setTimeout(function() {
engine_obj_.scrollBoxesToBottom([id]);
}, css_transition_dur_);
}
}
function headerEventHandler(e) {
if (e == null) { return; }
textboxExpandCollapse(e.target.parentElement.parentElement.id, false);
}
function addHeaderClickEvent(id) {
if (id == undefined || id.length == 0) {
var elems = document.querySelectorAll("div.header_button");
}else{
var elems = [document.getElementById(id).querySelector("div.header_button")];
}
for (var i = 0; i < elems.length; i++) {
if (elems[i].addEventListener) {
elems[i].addEventListener("click", function(e) { headerEventHandler(e); }, false);
}else if (elems[i].attachEvent){
elems[i].attachEvent("onclick", function(e) { headerEventHandler(e); });
}
}
}
addHeaderClickEvent();
textboxExpandCollapse("style_box", false);
textboxExpandCollapse("script_box", false);
ABOUT_BOX
