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%;
179 padding: 1rem 1.5rem;
180 text-decoration: none;
191 background-image: url('../images/menu.png');
192 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. */
193 background-position: top left;
194 background-repeat: no-repeat;
195 background-size: cover;
203 background-color: var(--bgColorMidDark);
206 nav button[data-visible="true"] {
207 background-image: url('../images/menu-abierto.png');
213 background-color: var(--bgColorMidDark);
214 background-image: url('../images/salamandra_margin.svg');
215 background-size: 10rem;
216 background-position-x: right;
217 background-position-y: bottom;
218 background-repeat: no-repeat;
222 /* Regla que aplica solo a firefox */
223 @-moz-document url-prefix() {
225 background-image: url('../images/salamandra.svg');
226 background-position-x: right 1rem;
227 background-position-y: bottom 1rem;
239 justify-content: space-between;
240 color: var(--bgColorLight);
244 display: inline-block;
245 width: calc(50% - 2rem);
247 border-radius: 0.5rem;
253 background-color: var(--bgColorLightDark);
254 box-shadow: 0 4px 1px 0.2px var(--bgColorDark);
259 main div > article img {
266 main div > article span {
269 overflow-wrap: break-word;
278 main span table img {
286 main span .highlight code {
287 white-space: pre-wrap;
305 background-color: var(--bgColorLightDark);
315 background-color: var(--bgColorMidDark);
316 background-image: url('../images/salamandra_margin.svg');
317 background-position-x: center;
318 background-position-y: 2rem;
319 background-repeat: no-repeat;
320 background-size: var(--backgroundImageSize);
323 @media screen and (max-width: 480px) {
328 min-width: calc(100% - 2rem);
332 @media screen and (min-width: 840px) {
338 grid-template-columns: 13rem 1fr;
339 grid-template-areas: /* Tabletas se muestra el aside */
350 display: none !important;
353 nav button, aside li a {
358 justify-content: space-evenly;
367 @media screen and (min-width: 1280px) {
372 main div > article img {
379 width: calc(30% - 2rem);
387 main div article p, a{