New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update blog layout to mimic Dracula UI #12

Closed

64J0 opened this issue May 1, 2021 · 6 comments

Assignees

Labels

Owner

64J0 commented May 1, 2021

Some references:

64J0 self-assigned this

64J0 added the enhancement label

64J0 pinned this issue

Owner Author

64J0 commented May 1, 2021

The commits to implement this feature will be stored in the v2-dracula-ui branch.

64J0 changed the title ~~1 - Update blog layout to mimic Dracula UI~~ Update blog layout to mimic Dracula UI

Owner Author

64J0 commented May 1, 2021 •

edited

Loading

Enhance the 404 page because it is much ugly;
Update the Github chart feature because it's broken;

Owner Author

64J0 commented May 5, 2021

Example of css property:

background-image: linear-gradient(var(--gradientDegree),var(--cyan),var(--green));

64J0 added a commit that referenced this issue


          feat: starting implementation,

a430d05

starting to change the blog layout and copy some classes and styles from the dracula theme,
see also: #12

64J0 added a commit that referenced this issue


          feat: fix imports,

47d6bef

fix imports of Layout component because it has changed,
see also: #12

Owner Author

64J0 commented May 8, 2021 •

edited

Loading

Tweet by @FelippeRegazio:

Ta ralando com CSS, aqui vão umas dicas:

Estude B.E.M (ou alguma metodologia pra naming)
Estude especificidade (CSS Specificity)
Divida elementos que mostram conteudo em "head, body e footer", um card por exemplo

.card
.card__head
.card__body
.card__footer

esse do conteúdo vale pra quase qualquer elemento que divida conteudos horizontalmente. ex:

modal?

.modal
.modal__head
.modal__body
.modal__footer

article?

.content
.content__header (titulo aqui + share)
.content__body (notícia)
.content__footer (autor + info)

outra dica importante: sempre crie um holder

veja que em

.card
.card__head
.card__body
.card__footer

o holder é .card. paddings vão em __head, __body, ou __footer. preservando o holder pra ser layoutado sem side effect.

64J0 added a commit that referenced this issue


          feat: update in the first page,

790b8a9

updating the first page style that shows the list of posts,
add images to social media  links in the footer,
see also: #12

64J0 added a commit that referenced this issue


          feat: update HeaderHome component,

0e97cb1

enhance the quality of code used in the scss files,
see also: #12

64J0 added a commit that referenced this issue


          feat: enhance HeaderPost component,

87127cf

enhance the HeaderPost component by adjusting the classname used in the CSS,
see also: #12

64J0 added a commit that referenced this issue


          feat: update Layout component,

232a896

enhance the Layout component to use some more semantic CSS styles,
see also: #12

64J0 added a commit that referenced this issue


          feat: update Contatos page,

334c178

enhancing the readability of the code by using other names to CSS classes,
see also: #12

64J0 added a commit that referenced this issue


          feat: update Cores page,

bb08f24

enhancing the readability through the css classes change,
see also: #12

64J0 added a commit that referenced this issue


          feat: remove unecessary import,

83652a6

see also: #12

64J0 added a commit that referenced this issue


          feat: update Graficos page,

48e5385

enhancing the readability through the changes in CSS class names,
see also: #12

64J0 added a commit that referenced this issue


          feat: update others componentes,

d1d636c

enhance the readability of the code by changing the name of css classes,
add layout.css for global css variables different of colors,
see also: #12

64J0 added a commit that referenced this issue


          feat: update packages,

aabba69

updating some packages to leave problems found,
creating a .nvmrc file to store the Node.js version used in development (NVM config),
see also: #12

Owner Author

64J0 commented May 16, 2021 •

edited

Loading

Heurísticas de Nielsen

Visibilidade do status do sistema,
Correspondência entre o sistema e o mundo real,
Liberdade e controle do usuário,
Consistência e padrões,
Prevenção de erros,
Reconhecer ao invés de lembrar,
Flexibilidade e eficiência,
Estética e design minimalista,
Auxiliar usuários a reconhecer, diagnosticar e recuperar erros,
Ajuda e documentação.

64J0 added a commit that referenced this issue


          feat: mimic dracula ui,

cd11e52

commiting more changes in the project structure,
see also: #12

Owner Author

64J0 commented May 22, 2021

After some time I've decided to not continue the development of this version of the blog because the prototype isn't looking good in my opinion. I'll be continuing with another design.

64J0 closed this as completed

64J0 added a commit that referenced this issue


          feat: starting implementation,

20c5058

starting to change the blog layout and copy some classes and styles from the dracula theme,
see also: #12

64J0 added a commit that referenced this issue


          feat: fix imports,

aaa6b78

fix imports of Layout component because it has changed,
see also: #12

64J0 added a commit that referenced this issue


          feat: update in the first page,

8399a2c

updating the first page style that shows the list of posts,
add images to social media  links in the footer,
see also: #12

64J0 added a commit that referenced this issue


          feat: update HeaderHome component,

c32a067

enhance the quality of code used in the scss files,
see also: #12

64J0 added a commit that referenced this issue


          feat: enhance HeaderPost component,

fb5ea39

enhance the HeaderPost component by adjusting the classname used in the CSS,
see also: #12

64J0 added a commit that referenced this issue


          feat: update Layout component,

2be922a

enhance the Layout component to use some more semantic CSS styles,
see also: #12

64J0 added a commit that referenced this issue


          feat: update Contatos page,

bca4893

enhancing the readability of the code by using other names to CSS classes,
see also: #12

64J0 added a commit that referenced this issue


          feat: update Cores page,

cc5944a

enhancing the readability through the css classes change,
see also: #12

64J0 added a commit that referenced this issue


          feat: remove unecessary import,

cdd39dd

see also: #12

64J0 added a commit that referenced this issue


          feat: update Graficos page,

cb9c309

enhancing the readability through the changes in CSS class names,
see also: #12

64J0 added a commit that referenced this issue


          feat: update others componentes,

enhance the readability of the code by changing the name of css classes,
add layout.css for global css variables different of colors,
see also: #12

64J0 added a commit that referenced this issue


          feat: update packages,

71ca831

updating some packages to leave problems found,
creating a .nvmrc file to store the Node.js version used in development (NVM config),
see also: #12

64J0 added a commit that referenced this issue


          feat: mimic dracula ui,

d615c17

commiting more changes in the project structure,
see also: #12

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment