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    position: absolute;
  83    inset: 0 50%;
  84    grid-area: aside;
  85    display: none;
  86    flex-flow: column nowrap;
  87    align-items: flex-start;
  88    justify-content: flex-start;
  89    width: 50%;
  90    padding: 0 1rem;
  91    background-color: var(--bgColorDark);
  92 }
  93
  94 aside .item {
  95    display: flex;
  96    flex-flow: column nowrap;
  97    align-items: center;
  98    justify-content: space-between;
  99    font-size: 1.5rem;
 100    width: 100%;
 101    padding: 1rem 0;
 102 }
 103
 104 nav {
 105    display: flex;
 106    justify-content: space-between;
 107    align-items: center;
 108    grid-area: navbar;
 109    background-color: var(--bgColorDark);
 110    width: 100%;
 111 }
 112
 113 nav div:first-child {
 114    display: flex;
 115    flex-flow: row nowrap;
 116    align-items: center;
 117    justify-content: flex-start;
 118    width: 100%;
 119    margin-left: 1rem;
 120 }
 121
 122 nav div img:first-child {
 123    width: 3rem;
 124 }
 125
 126 nav ul {
 127    display: none;
 128    flex-flow: row nowrap;
 129    align-items: center;
 130    justify-content: flex-end;
 131    list-style-type: none;
 132    width: 100%;
 133    height: 100%;
 134    margin: 0;
 135    padding: 0;
 136    overflow: hidden;
 137 }
 138
 139 .hover {
 140    --c:linear-gradient(#1482c8 0 0); /* update the color here */
 141
 142    padding-bottom: .15em;
 143    background: var(--c), var(--c);
 144    background-size: .3em .1em;
 145    background-position:50% 100%;
 146    background-repeat: no-repeat;
 147    transition: .3s linear, background-size .3s .2s linear;
 148 }
 149
 150 .hover:hover {
 151    background-size: 50% .1em;
 152    background-position: 10% 100%, 90% 100%;
 153 }
 154
 155 nav li {
 156    display: flex;
 157    align-items: center;
 158    height: 100%;
 159  }
 160
 161 nav a {
 162    display: block;
 163    color: white;
 164    text-align: center;
 165    padding: 1rem 1.5rem;
 166    text-decoration: none;
 167  }
 168
 169 nav button {
 170    display: flex;
 171    position: absolute;
 172    width: 4rem;
 173    height: 4rem;
 174    right: 0.4rem;
 175
 176    background-image: url('../images/menu.png');
 177    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. */
 178    background-position: top left;
 179    background-repeat: no-repeat;
 180    background-size: cover;
 181
 182    border: none;
 183
 184    transition: background-image ease 0.2s;
 185
 186 }
 187
 188 nav button[data-visible="true"] {
 189    background-image: url('../images/menu-abierto.png');
 190 }
 191
 192 main {
 193    grid-area: main;
 194    padding: 2rem;
 195    background-color: var(--bgColorMidDark);
 196    background-image: url('../images/salamandra_margin.svg');
 197    background-size: 10rem;
 198    background-position-x: right;
 199    background-position-y: bottom;
 200    background-repeat: no-repeat;
 201 }
 202
 203 /* Regla que aplica solo a firefox */
 204 @-moz-document url-prefix() {
 205    main {
 206       background-image: url('../images/salamandra.svg');
 207       background-position-x: right 1rem;
 208       background-position-y: bottom 1rem;
 209    }
 210 }
 211
 212 main hr {
 213    width: 100%;
 214 }
 215
 216 .articles {
 217    display: flex;
 218    flex-flow: row wrap;
 219    align-items: flex-start;
 220    justify-content: space-between;
 221 }
 222
 223 .articles article {
 224    width: 30rem;
 225    border: 1px solid;
 226    border-radius: 0.5rem;
 227    padding: 1rem;
 228    margin: 1rem;
 229 }
 230
 231 .content table {
 232    padding-top: 2rem;
 233    margin: 0 auto;
 234 }
 235
 236 .content table img {
 237    width: 3rem;
 238 }
 239
 240 .content table td {
 241    padding: 0 0.3rem;
 242 }
 243
 244 .content .highlight code {
 245    white-space: pre-wrap;
 246    overflow-x: auto;
 247 }
 248
 249 footer {
 250    grid-area: footer;
 251    display: flex;
 252    align-items: center;
 253    width: 100%;
 254    padding: 0 2rem;
 255    background-color: var(--bgColorLightDark);
 256 }
 257
 258 .greetings {
 259    width: 80%;
 260    height: 80%;
 261    margin: 0 auto;
 262 }
 263
 264 @media screen and (min-width: 780px) {
 265    :root {
 266       --globalScale: 1.5;
 267    }
 268
 269    body {
 270       grid-template-columns: 11rem 1fr;
 271       grid-template-areas: /* Tabletas se muestra el aside */
 272          "navbar navbar"
 273          "aside main"
 274          "footer footer";
 275    }
 276
 277    nav ul {
 278       display: flex;
 279    }
 280
 281    aside {
 282       display: flex;
 283       position: relative;
 284       width: 100%;
 285       inset: 0;
 286    }
 287
 288    nav button, aside li a {
 289       display: none;
 290    }
 291
 292 }
 293
 294 @media screen and (min-width: 1280px) {
 295    :root {
 296       --globalScale: 2;
 297    }
 298 }
 299