NARRATOR_BOX
Olá! O meu nome é Pedro Henriques. Eu sou um programador.
Eu construo sites de internet e aplicações de desktop dinâmicas.
Atualmente a trabalhar como Arquiteto de Soluções.
Como uma amostra das minhas capacidades, deixe-me construir este site...à sua frente.
Vamos começar!
Primeiro, alguns estilos básicos.
* {
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; }
A seguir, vamos aplicar transições a tudo!
* {
-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;
}
Por fim, vamos aplicar estilos a esta caixa de texto e dar cor ao texto!
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); }
...Deixe-me ajustar-lhe a cor do texto normal.
* { color: white; }
Ah...muito melhor!
Esta caixa de texto está a ficar muito cheia!
Está na altura de criar uma nova caixa para os estilos.
Vamos testá-la.
Antes de avançar para a próxima etapa, vou precisar de uma caixa para escrever código JavaScript.
E alguma cor para o texto de JavaScript.
Está na altura de dar a cada caixa um cabeçalho, para conseguirmos saber que caixa é qual.
E depois alguma funcionalidade para esses cabeçalhos.
Enquanto esta aplicação estiver a correr não poderá expandir ou colapsar as caixas de texto, mas pode parar a qualquer momento!
Já não vai ser preciso aplicar mais estilos, por isso vamos colapsar a caixa de estilos para libertar algum espaço no ecrã.
E para concluir esta apresentação, deixe-me contar-lhe um pouco mais sobre mim.
Obrigado por visitar o meu site!
Espero que tenha gostado tanto como eu gostei de o fazer.
Notas:
- Todo o código usado neste site foi construído por mim de raiz, sem recorrer a libraries, frameworks ou qualquer código feito por outros.
Reconhecimentos:
- A cor do texto CSS e JavaScript é baseado no tema de cores "Monokai Bright" do programa sublime text.
Esteja à vontade para expandir e colapsar as caixas de texto! :)
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
