1 /* ESTILOS CSS PARA EL SITIO WEB DE SALAMANDRADEVS */
4 Puedes copiar, modificar y usar este software bajo los términos de la licencia general de uso público reducida de GNU.
5 Encontrarás una copia de la licencia aquí https://www.gnu.org/licenses/lgpl-3.0.html */
7 /* Metodología mobile first o pantallas pequeñas primero.
8 Primero se escriben las reglas para el ancho de portview
9 más pequeño a considerar */
11 /* VARIABLES Y REGLAS GENERALES */
15 box-sizing: border-box;
21 --bgColorDark: #0e0e0e;
22 --bgColorMidDark: #292e35;
23 --bgColorLightDark: #373d46;
24 --bgColorLight: #D2D2D2;
25 --bgColorBlue: #1b6694;
26 --bgColorSalamandra: rgb(236, 162, 143);
27 --backgroundImageSize: 10rem;
29 --navLinkColor: linear-gradient(#1482c8 0 0);
61 text-decoration: none;
63 color: var(--bgColorSalamandra);
67 font-size: calc(62.5% * var(--globalScale));
68 background-color: var(--bgColorLight);
76 grid-template-columns: 1fr;
77 grid-template-rows: 5rem 1fr 5rem;
78 grid-template-areas: /* No mostramos el aside en móviles */
89 ::-webkit-scrollbar-thumb {
90 background-color: var(--bgColorBlue);
95 inset: 0 calc(100% - 18rem);
98 flex-flow: column nowrap;
99 align-items: flex-start;
100 justify-content: flex-start;
102 height: calc(100% - 5rem);
105 background-color: var(--bgColorDark);
110 color: var(--bgColorLight);
112 flex-flow: column nowrap;
114 justify-content: space-between;
122 justify-content: space-between;
125 background-color: var(--bgColorDark);
129 nav div:first-child {
131 flex-flow: row nowrap;
133 justify-content: flex-start;
138 nav div img:first-child {
144 flex-flow: row nowrap;
146 justify-content: flex-end;
147 list-style-type: none;
156 padding-bottom: .15em;
157 background: var(--navLinkColor), var(--navLinkColor);
158 background-size: .3em .1em;
159 background-position:50% 100%;
160 background-repeat: no-repeat;
161 transition: .3s linear, background-size .3s .2s linear;
165 background-size: 50% .1em;
166 background-position: 10% 100%, 90% 100%;
180 padding: 1rem 1.5rem;
181 text-decoration: none;
192 background-image: url('../images/menu.png');
193 background-color: transparent; /* Cuando usamos background-image se pone el background-color en blanco por default por eso le indicamos que sea transparente para que se pueda ver la imagen. */
194 background-position: top left;
195 background-repeat: no-repeat;
196 background-size: cover;
204 background-color: var(--bgColorMidDark);
207 nav button[data-visible="true"] {
208 background-image: url('../images/menu-abierto.png');
214 background-color: var(--bgColorMidDark);
217 /* Regla que aplica solo a firefox */
218 @-moz-document url-prefix() {
220 background-image: url('../images/salamandra.svg');
221 background-position-x: right 1rem;
222 background-position-y: bottom 1rem;
234 justify-content: space-between;
235 color: var(--bgColorLight);
239 display: inline-block;
240 width: calc(50% - 2rem);
242 border-radius: 0.5rem;
248 background-color: var(--bgColorLightDark);
249 box-shadow: 0 4px 1px 0.2px var(--bgColorDark);
254 main div > article img {
261 main div > article span {
264 overflow-wrap: break-word;
273 main span table img {
281 main span .highlight code {
282 white-space: pre-wrap;
300 background-color: var(--bgColorLightDark);
318 @media screen and (max-width: 480px) {
323 min-width: calc(100% - 2rem);
327 /* Los media query aplican a partir de este temaño hacia arriba.
328 Recordemos que estamos aplicando filosofía de móviles primero */
329 @media screen and (min-width: 840px) {
335 grid-template-columns: 13rem 1fr;
336 grid-template-areas: /* Tabletas se muestra el aside */
347 display: none !important;
350 nav button, aside li a {
355 justify-content: space-evenly;
368 @media screen and (min-width: 1280px) {
373 main div > article img {
380 width: calc(30% - 2rem);
388 main div article p, a{