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: #353b43;
23 --bgColorLightDark: #4f5864;
24 --bgColorLight: #D2D2D2;
58 text-decoration: none;
63 font-size: calc(62.5% * var(--globalScale));
64 background-color: var(--bgColorLight);
72 grid-template-columns: 1fr;
73 grid-template-rows: 5rem 1fr 5rem;
74 grid-template-areas: /* No mostramos el aside en móbiles */
84 flex-flow: column nowrap;
85 align-items: flex-start;
86 justify-content: flex-start;
89 background-color: var(--bgColorDark);
94 flex-flow: row nowrap;
96 justify-content: space-between;
104 justify-content: space-between;
107 background-color: var(--bgColorDark);
111 nav div:first-child {
113 flex-flow: row nowrap;
115 justify-content: flex-start;
120 nav div img:first-child {
126 flex-flow: row nowrap;
128 justify-content: flex-end;
129 list-style-type: none;
138 --c:linear-gradient(#1482c8 0 0); /* update the color here */
140 padding-bottom: .15em;
141 background: var(--c), var(--c);
142 background-size: .3em .1em;
143 background-position:50% 100%;
144 background-repeat: no-repeat;
145 transition: .3s linear, background-size .3s .2s linear;
149 background-size: 50% .1em;
150 background-position: 10% 100%, 90% 100%;
163 padding: 1rem 1.5rem;
164 text-decoration: none;
170 background-color: var(--bgColorMidDark);
171 background-image: url('../images/salamandra_margin.svg');
172 background-size: 10rem;
173 background-position-x: right;
174 background-position-y: bottom;
175 background-repeat: no-repeat;
178 /* Regla que aplica solo a firefox */
179 @-moz-document url-prefix() {
181 background-image: url('../images/salamandra.svg');
182 background-position-x: right 1rem;
183 background-position-y: bottom 1rem;
194 align-items: flex-start;
195 justify-content: space-between;
201 border-radius: 0.5rem;
219 .content .highlight code {
220 white-space: pre-wrap;
230 background-color: var(--bgColorLightDark);
239 @media screen and (min-width: 780px) {
245 grid-template-columns: 11rem 1fr;
246 grid-template-areas: /* Tabletas se muestra el aside */
257 @media screen and (min-width: 1280px) {