themes/droda/assets/css/main.css

   1 /* ESTILOS CSS PARA EL SITIO WEB DE SALAMANDRADEVS */
   2
   3 /* Copyright GNU LGPL.
   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 */
   6
   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 */
  10
  11 /* VARIABLES Y REGLAS GENERALES */
  12 @charset "UTF-8";
  13
  14 * {
  15    box-sizing: border-box;
  16    margin: 0;
  17    padding: 0;
  18 }
  19
  20 :root {
  21    --bgColorDark: #0e0e0e;
  22    --bgColorMidDark: #353b43;
  23    --bgColorLightDark: #4f5864;
  24    --bgColorLight: #D2D2D2;
  25    --globalScale: 1;
  26
  27 }
  28
  29 h1 {
  30    font-size: 6rem;
  31 }
  32
  33 h2 {
  34    font-size: 4rem;
  35 }
  36
  37 h3 {
  38    font-size: 3rem;
  39 }
  40
  41 h4 {
  42    font-size: 2rem;
  43 }
  44
  45 p {
  46    font-size: 1.5rem;
  47 }
  48
  49 h1, h2, h3, h4, p {
  50    padding: 0.5rem 0;
  51    margin: 0;
  52 }
  53
  54 a:link,
  55 a:visited,
  56 a:hover,
  57 a:active {
  58    text-decoration: none;
  59    font-size: 1.5rem;
  60 }
  61
  62 html {
  63    font-size: calc(62.5% * var(--globalScale));
  64    background-color: var(--bgColorLight);
  65    height: 100%;
  66 }
  67
  68 /* REGLAS DEL HOME */
  69
  70 body {
  71    display: grid;
  72    grid-template-columns: 1fr;
  73    grid-template-rows: 5rem 1fr 5rem;
  74    grid-template-areas: /* No mostramos el aside en móbiles */
  75       "navbar"
  76       "main"
  77       "footer";
  78    height: 100%;
  79 }
  80
  81 aside {
  82    grid-area: aside;
  83    display: none;
  84    flex-flow: column nowrap;
  85    align-items: flex-start;
  86    justify-content: flex-start;
  87    width: 100%;
  88    padding: 0 1rem;
  89    background-color: var(--bgColorDark);
  90 }
  91
  92 aside .item {
  93    display: flex;
  94    flex-flow: row nowrap;
  95    align-items: center;
  96    justify-content: space-between;
  97    font-size: 1.5rem;
  98    width: 100%;
  99    padding: 1rem 0;
 100 }
 101
 102 nav {
 103    display: flex;
 104    justify-content: space-between;
 105    align-items: center;
 106    grid-area: navbar;
 107    background-color: var(--bgColorDark);
 108    width: 100%;
 109 }
 110
 111 nav div:first-child {
 112    display: flex;
 113    flex-flow: row nowrap;
 114    align-items: center;
 115    justify-content: flex-start;
 116    width: 100%;
 117    margin-left: 1rem;
 118 }
 119
 120 nav div img:first-child {
 121    width: 3rem;
 122 }
 123
 124 nav ul {
 125    display: flex;
 126    flex-flow: row nowrap;
 127    align-items: center;
 128    justify-content: flex-end;
 129    list-style-type: none;
 130    width: 100%;
 131    height: 100%;
 132    margin: 0;
 133    padding: 0;
 134    overflow: hidden;
 135 }
 136
 137 .hover {
 138    --c:linear-gradient(#1482c8 0 0); /* update the color here */
 139
 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;
 146 }
 147
 148 .hover:hover {
 149    background-size: 50% .1em;
 150    background-position: 10% 100%, 90% 100%;
 151 }
 152
 153 nav li {
 154    display: flex;
 155    align-items: center;
 156    height: 100%;
 157  }
 158
 159 nav a {
 160    display: block;
 161    color: white;
 162    text-align: center;
 163    padding: 1rem 1.5rem;
 164    text-decoration: none;
 165  }
 166
 167 main {
 168    grid-area: main;
 169    padding: 2rem;
 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;
 176 }
 177
 178 /* Regla que aplica solo a firefox */
 179 @-moz-document url-prefix() {
 180    main {
 181       background-image: url('../images/salamandra.svg');
 182       background-position-x: right 1rem;
 183       background-position-y: bottom 1rem;
 184    }
 185 }
 186
 187 main hr {
 188    width: 100%;
 189 }
 190
 191 .articles {
 192    display: flex;
 193    flex-flow: row wrap;
 194    align-items: flex-start;
 195    justify-content: space-between;
 196 }
 197
 198 .articles article {
 199    width: 30rem;
 200    border: 1px solid;
 201    border-radius: 0.5rem;
 202    padding: 1rem;
 203    margin: 1rem;
 204 }
 205
 206 .content table {
 207    padding-top: 2rem;
 208    margin: 0 auto;
 209 }
 210
 211 .content table img {
 212    width: 3rem;
 213 }
 214
 215 .content table td {
 216    padding: 0 0.3rem;
 217 }
 218
 219 .content .highlight code {
 220    white-space: pre-wrap;
 221    overflow-x: auto;
 222 }
 223
 224 footer {
 225    grid-area: footer;
 226    display: flex;
 227    align-items: center;
 228    width: 100%;
 229    padding: 0 2rem;
 230    background-color: var(--bgColorLightDark);
 231 }
 232
 233 .greetings {
 234    width: 80%;
 235    height: 80%;
 236    margin: 0 auto;
 237 }
 238
 239 .boton-movil {
 240    display: flex;
 241    position: relative;
 242    width: 4rem;
 243    height: 4rem;
 244    right: 0.4rem;
 245
 246    background-image: url('../images/menu.png');
 247    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. */
 248    background-position: top left;
 249    background-repeat: no-repeat;
 250    background-size: cover;
 251
 252    border: none;
 253
 254    transition: background-image ease 0.2s;
 255
 256 }
 257
 258 .boton-movil[data-visible="true"] {
 259    background-image: url('../images/menu-abierto.png');
 260 }
 261
 262 @media screen and (min-width: 780px) {
 263    :root {
 264       --globalScale: 1.5;
 265    }
 266
 267    body {
 268       grid-template-columns: 11rem 1fr;
 269       grid-template-areas: /* Tabletas se muestra el aside */
 270          "navbar navbar"
 271          "aside main"
 272          "footer footer";
 273    }
 274
 275    aside {
 276       display: flex;
 277    }
 278
 279    .boton-movil {
 280       display: none;
 281    }
 282
 283 }
 284
 285 @media screen and (min-width: 1280px) {
 286    :root {
 287       --globalScale: 2;
 288    }
 289 }
 290