123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- body{/* ____ Configuração para a animação*/
- scroll-behavior: smooth;
- }
- @font-face {/* Fonte livre */
- font-family: 'OpenSansEmoji';
- font-style: regular;
- src: url("OpenSansEmoji.ttf")
- }
- @font-face {/* Fonte privados */
- font-family: 'Segoe UI Emoji';
- font-style: normal;
- src: url("seguiemj.ttf")
- }
- .emoj{/* Font mozilla ❤ */
- font-family:"EmojiOne Mozilla";
- }
- *{/* Aplicando a mesma coisa em todas as páginas */
- text-rendering: optimizespeed;
- /*font-family: medium-content-sans-serif-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue", sans-serif;*/
- transition-duration:0.8s;
- }
- p{
- font-family: medium-content-sans-serif-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue", sans-serif;
- text-align:justify;
- margin:20px;
- font-size: 20px;
- color:#444;
- font-weight: 400;
- line-height: 1.58;
- max-width:95%;
- min-width:60%
- }
- h1, h2{
- color:#333;
- text-align:center;
- font-weight: 600;
- line-height: 1.58;
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
- }
- h1{
- font-size:40px;
- border-bottom:2px solid #EAECEF;
- }
- /* Suporte a tag <figure> */
- figure{
- /* Configure a ação que deja */
- }/* E essa outra tem que ficar dentro da tag figure, aqui dentro fica a descrição da imagem(importantissimo)*/
- figure>img{
- min-width:90px;
- max-width:90%;
- }
- figcaption{
- color:#000;
- font-size:14px;
- font-weight: bold;
- text-align:center;
- }
- /* Tag code, onde fica o código */
- code{
- font-family: 'Source Code Pro', monospace;
- border-radius:3px;
- background:#eee;
- padding:5px;
- color: #bf616a;
- }/* Blockquote, para falar frase ou citações */
- blockquote{
- border-left:3px solid #000;
- margin-left:10%;
- padding:0 15px;
- font-weight:400;
- font-style: italic;
- text-align:left;
- }
- hr{
- height:0px;
- margin-top:52px;
- margin-bottom:42px;
- border:0;
- text-align:center;
- font-weight:bold;
- font-size:30px;
- }/* aqueles três pontinhos lekais . . . */
- hr:before{
- content: '...';
- display: inline-block;
- margin-left: .6em;
- letter-spacing: .6em;
- color: rgba(0,0,0,.68);
- position: relative;
- top: -30px;
- }
- .pre{
- font-style:italic;
- color:#000;
- }
- a{
- color:#1bd;
- text-decoration:none;
- }
- a:hover{
- color:#0ac;
- }
- /* Para o topo, botão */
- .tutop{ /* Este é para o padrão, não queremos que nosso botão apareça para uma pessoa que já est no topo né?! */
- display:none;
- }/* Este, já é a instrução para quando o sueito descer */
- .totop, .totop img{
- width:60px;
- height:60px;
- bottom:40px;
- right:40px;
- z-index:3;
- opacity:.9;
- position:fixed;
- }/* Leve efeito para identificar que o botão não é objeto do texto */
- .totop:hover{
- opacity:1
- }/* Animação, ver arquivo Ecmascript/scroll-*, onde faz referencia a essa animação */
- @keyframes totop{
- 0%{
- opacity:0
- }100%{
- opacity:.9
- }
- }/* mesmo comentário da linha 18 */
- @keyframes tutop{
- 0%{
- opacity:.9
- }100%{
- opacity:0
- }
- }
|