Giters

CoderDojoPotsdam / regex-tutorial

Interactive Tutorial for Regular Expressions | Interaktives Tutorial für Reguläre Ausdrücke

Home Page:https://coderdojopotsdam.github.io/regex-tutorial

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Use Key-Design from Github (CSS)

niccokunzmann opened this issue · comments

commented

If you refresh the issue page often enough, you can see the buttons g and p in a pro tip below.
https://github.com/CoderDojoPotsdam/regex-tutorial/issues

This is a nice design for keyboard keys.
Please improve the design of the key selector to match githubs key in form. The colors should stay.

Hints:

  • Example usage
  • In firefox, you can use right-click on the github key + q to inspect the rules for layouting
commented

Hi, I did what you said and I found the rules for the layout. They are:

display: inline-block;
padding: 3px 5px;
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fcfcfc;
border: solid 1px #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5;

So essentially you want me to change the .key in tutorial.css to have these attributes with the exception of color?

Thanks

commented

@Matt-J-H Yes, exactly. If you could create a pull-request, we can merge it and see the changes life.

commented

I changed out the code except I left the colors. I'm not sure where this code is used in the tutorial so I can't tell if it is working correctly though. I will submit a pull request and you can take a look. If it's not working properly could you tell me where I can see it?
Thanks