text.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. body{/* ____ Configuração para a animação*/
  2. scroll-behavior: smooth;
  3. }
  4. @font-face {/* Fonte livre */
  5. font-family: 'OpenSansEmoji';
  6. font-style: regular;
  7. src: url("OpenSansEmoji.ttf")
  8. }
  9. @font-face {/* Fonte privados */
  10. font-family: 'Segoe UI Emoji';
  11. font-style: normal;
  12. src: url("seguiemj.ttf")
  13. }
  14. .emoj{/* Font mozilla ❤ */
  15. font-family:"EmojiOne Mozilla";
  16. }
  17. *{/* Aplicando a mesma coisa em todas as páginas */
  18. text-rendering: optimizespeed;
  19. /*font-family: medium-content-sans-serif-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue", sans-serif;*/
  20. transition-duration:0.8s;
  21. }
  22. p{
  23. font-family: medium-content-sans-serif-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue", sans-serif;
  24. text-align:justify;
  25. margin:20px;
  26. font-size: 20px;
  27. color:#444;
  28. font-weight: 400;
  29. line-height: 1.58;
  30. max-width:95%;
  31. min-width:60%
  32. }
  33. h1, h2{
  34. color:#333;
  35. text-align:center;
  36. font-weight: 600;
  37. line-height: 1.58;
  38. font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  39. }
  40. h1{
  41. font-size:40px;
  42. border-bottom:2px solid #EAECEF;
  43. }
  44. /* Suporte a tag <figure> */
  45. figure{
  46. /* Configure a ação que deja */
  47. }/* E essa outra tem que ficar dentro da tag figure, aqui dentro fica a descrição da imagem(importantissimo)*/
  48. figure>img{
  49. min-width:90px;
  50. max-width:90%;
  51. }
  52. figcaption{
  53. color:#000;
  54. font-size:14px;
  55. font-weight: bold;
  56. text-align:center;
  57. }
  58. /* Tag code, onde fica o código */
  59. code{
  60. font-family: 'Source Code Pro', monospace;
  61. border-radius:3px;
  62. background:#eee;
  63. padding:5px;
  64. color: #bf616a;
  65. }/* Blockquote, para falar frase ou citações */
  66. blockquote{
  67. border-left:3px solid #000;
  68. margin-left:10%;
  69. padding:0 15px;
  70. font-weight:400;
  71. font-style: italic;
  72. text-align:left;
  73. }
  74. hr{
  75. height:0px;
  76. margin-top:52px;
  77. margin-bottom:42px;
  78. border:0;
  79. text-align:center;
  80. font-weight:bold;
  81. font-size:30px;
  82. }/* aqueles três pontinhos lekais . . . */
  83. hr:before{
  84. content: '...';
  85. display: inline-block;
  86. margin-left: .6em;
  87. letter-spacing: .6em;
  88. color: rgba(0,0,0,.68);
  89. position: relative;
  90. top: -30px;
  91. }
  92. .pre{
  93. font-style:italic;
  94. color:#000;
  95. }
  96. a{
  97. color:#1bd;
  98. text-decoration:none;
  99. }
  100. a:hover{
  101. color:#0ac;
  102. }
  103. /* Para o topo, botão */
  104. .tutop{ /* Este é para o padrão, não queremos que nosso botão apareça para uma pessoa que já est no topo né?! */
  105. display:none;
  106. }/* Este, já é a instrução para quando o sueito descer */
  107. .totop, .totop img{
  108. width:60px;
  109. height:60px;
  110. bottom:40px;
  111. right:40px;
  112. z-index:3;
  113. opacity:.9;
  114. position:fixed;
  115. }/* Leve efeito para identificar que o botão não é objeto do texto */
  116. .totop:hover{
  117. opacity:1
  118. }/* Animação, ver arquivo Ecmascript/scroll-*, onde faz referencia a essa animação */
  119. @keyframes totop{
  120. 0%{
  121. opacity:0
  122. }100%{
  123. opacity:.9
  124. }
  125. }/* mesmo comentário da linha 18 */
  126. @keyframes tutop{
  127. 0%{
  128. opacity:.9
  129. }100%{
  130. opacity:0
  131. }
  132. }