-
Notifications
You must be signed in to change notification settings - Fork 0
/
log.txt
executable file
·105 lines (89 loc) · 8.35 KB
/
log.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
Dia 30/10
Comandos usados:
npm install gulp --save-dev
npm install gulp-pug --save-dev
npm install gulp-less --save-dev
npm install --global gulp-cli - Instalar o gulp globalmente, para que eu pudesse executá-lo via comando. Ele não está abrindo.
Tive problemas com o Git rodando em XP. Eu precisei voltar uma versão anterior.
Instalei o gulp, criei um arquivo de teste e executei. Deu o erro na sintaze do pug (explicar onde estão os erros).
Explicar :
- Detalhes de cada comanndo '|'-pipe e a importância da indentação.
Depois de corrigido, executei a task. Ela gerou o arquivo HTML.
Entrei no site do Google Fonts, peguei o link para a fonte Fjalla One
Fiz um erro na tag de link. Gerou um erro no pug. Corrigir o erro.
Criei a página:
Criei uma classe para os links, para que sejam como posição absoluta
(Explicar o que é absolute e explicar que para funcionar, ele precisa estar dentro de um elemento do tipo 'relative'
Criei uma classe para todos os links, informando a posição de cada um deles
(Explicar como é programado o div dentro do pug)
Criei uma página básica.
Formatei o link.
Dia 31/10
Criar as setas, redefinir o tamanho das fontes
Usar o PageRuler para definir o tamanho dos elementos
Decidi organizar os links por listas, já que fica fácil de posicioná-los quando eles estão em uma ordem.
Utilizar ícones do font awesome
Dia 02/11
Recebi o email do Font Awesome
O servidor do Font Awesome caiu um pouco. Eu tenho que avisar que temporáriamente, estou baixando os fontes do site Font Awesome. A queda do servidor alerta que eu não posso depender de outros servidores.
Consegui implantar o ícone na página. Eu preciso
Centralizar e aumentar o tamanho do ícone
Tirar o espaço da lista
Tirar as bolinhas marcadoras da lista
Vou tirar o espaço de todas as listas.
Para conferir o tipo de espaço que existe em algum elemento, eu posso entrar no Chrome, e passar o mouse em cima de um elemento no HTML, ou usar a ferramenta de seleção de elementos e selecionar o elemento desejado
Eu tive um problema ao definir o tamanho da font. A classe fa já tem uma definição de fonte. para equilibrar o tamanho da fonte com algum texto ao lado dela, a definição do tamanho é inherit, ou seja, ele pegará o tamanho do elemento pai. É possível burlar esta regra de definição, mas acho justo aproveitarmos esta definição que a font awesome deixou para nós. Eu deixo a definição de tamanho para o item da lista <li>
Para quem nunca perguntou o que é a tag i, antigamente, ela criava um texto itálico dentro dela. Hoje, ele define um conjunto de caracteres à parte do programado no restante da´página, permitindo a inclusão de caracteres especiais (como as fontes do font awesome;)
Tentando limpar o espaçamento do ícone, há duas coisa que preciso fazer.
- Ao passar o mouse sobre o li, não vejo nenhuma margem ou espaço. Este espaço é o espaço da linha- line-height. É possível ajustar este espaço na tag, deixando este valor como zero. Não se esqueça, o ícone, na verdade, é um caractere, e deve ser tratado como se fosse texto.
- O elemento body possui uma margem, como padrão. Esta margem é de 8px. Nós podemos eliminar este espaço no arquivo de estilos.
Dia 17/12
Preparei a pasta do projeto para SSH
Para deixar o gulp rodando como automático, renomeei a tarefa como 'default'. Agora, só preciso rodar o comando gulp.
Estou tentando organizar os elementos, sem precisar complicar o códiog (remover as listas)
"Como eu sempre digo, deixe as listas para serem usadas em listas"
Removendo as listas, eu deixo os elementos organizados dentro de um link, em que eu defino o posicionamento, e crio um elemento espan, um para o ícone, e outro para o texto.
Para os links About e Blog, que devem ser organizados verticameklmten, eu defino a regra de estilo desta maneira:
A classe conteúdo (que é o texto), eu defico a propriedade display como block, e assim, elemento vai agir como um bloco, como se fosse uma div. Isto permite que ele ocupe o espaço total do elemento.
Para o ícone da classe about, eu informo a propriedade float: left, para que ele 'flutue' à esquerda, e fique nesta posição.
Nos elementos hoorixzontaus, os links portfolio e gallery, eu defini assim:
- No link, eu configuei o display como flex. (conteudo flexivel.)
- No link, atribui a propriedade align-items como center;, em objetos flex, esta propriedade alinha todos os elementos, a partir da altuira dos elementos. Eu tive este resultado <imagem>
Porém, estes 2 links ainda precisam de ajustes. Falta um espaço entre eles, e o flex não alinhou eles 100%. Isto por que o ícone que eu USO do Font Awesome tem um espaço. Veja <imagem>
Preciso compensar este espaço. Veja como eu faço:
margin: 8px 5px 0 5px; (8 pixel de margem no topo, 4 à direita, 0 à esquerda, e 5 a esquerda)
Eu seleciono os seletores
#link-portfolio .conteudo,
#link-gallery .conteudo, que são apenas os elementos de portfolio e galeria que quero mexer.
Tive o resultado <imagem>
Hoje eu consegui finalizar a parte estática do site, No proximo texto, eu vou começar a criar a animação dentro da home.
Referencias
23/12 - Terça
Vou começar a fazer o paragrafo
Se algum bloco, ou página vai ficar muito dificil de fazer, planejo antes o que precisa fazer.
- Vai ser uma div no meio da tela
- Dentro da div, estarão 2 parágrafos, alinhados à esquerda.
- Paragrafo de baixo só aparece quando a resolução da tela for menor que 400px.
- Dentro desta div, haverá uma div. Ela será os caracteres verdes de comentários. Como o tipo de comentário será aleatório, a posição desta div mudará de acordo com o comentário.
- Junto com esta div, eu criarei 4 classes, que serão configuradas de acordo com o comentário. A seleção do conteúdo do comebntario será definida via programação. A posição de cada comenrátio será definida pela classe de estilo.
- Eu vou definir 2 classes e 1 ID para este conteúdo
- O ID '#codeCommentContainer' vai ser usado para referênciado no código .
- A classe 'code-comment' é usada para formataçaõ geral de todos os códigos (apesar deles serem diferentes, eles terão algumas características que compartilham entre eles, como as cores e o tamanho. Como o CSS permite mais queu uma classe por elemento, posso criar uma classe em comum para eles.)
- A classe 'comment-position-?' será definida para cada elemento, na hora que a tela for carregada. Ela definirá a posição de cada ipo de comentário. NEs caso, a classe é 'comment-position-visual-basic', que configura a posição desta classe
- Mostrar as definições do PUG. Eu posso definir os elementos resumidamente. Como definir a DIV e outros elementos.
- Ao codificar o CSS, me preocupo em organizar a classe em 'hierarquia', isto é, todas as classes internas dentro da classe pai, o 'codeCommentContainer'. Caso haja uma outra classe com o nome 'name', ela não pegará os dados desta classe.
- Para definir a ocultação em telas pequenas, eu oculto o parágrafo, usando:
'display: none'
- Para definir a regra, eu crio um bloco, chamado media rule. A ideia é simples: Tudo o que está neste bloco functionaŕa apenas de a condição de código for atingida. Veja:
'@media screen and(max-width: 400px) {'
}'
Aqui, eu informo que, o código será executado se a página estiver em telas convencvionais (screen), e caso a largura minimarseja de 400px (Pixels)
- Para centralizar #page-title, horizontalmente, primeiramente, defino um tamanho máximo para este bloco.
- max-width: 500px; A diferença de width é que este bloco pode ficar menor, caso a dela fique menor que ele. É um grande recurso, para páginas responsivas.
- margin: auto, ou margin: 0: auto - o HTML calcula e define o espaço das márgens lateriais automaticamente. O segundo código permite que eu configure a margem para o topo e a base do bloco, case necessario.
Lembre-se, para functionar, eu preciso cokocar width ou marx-witdh
margin 0 auto;
para centralizar verticalmente, não existe uma propriedade especifica. Há algumas soluções na internet, entre elas, esta aqui que eu escolhi:
transform: translateY(50%);
Esta propriedade, na verdade, faz parte de diversas transformações possiveis, presentes na vesão 3 do CSS> Esta transformação moverá o bloco em 50% de seu eixo vertical, para biaxo.
- Como eu compartilho as definições de classe,