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: #292e35;
  23    --bgColorLightDark: #373d46;
  24    --bgColorLight: #D2D2D2;
  25    --bgColorBlue: #1b6694;
  26    --bgColorSalamandra: rgb(236, 162, 143);
  27    --backgroundImageSize: 10rem;
  28    --globalScale: 1;
  29    --navLinkColor: linear-gradient(#1482c8 0 0);
  30 }
  31
  32 h1 {
  33    font-size: 6rem;
  34 }
  35
  36 h2 {
  37    font-size: 4rem;
  38 }
  39
  40 h3 {
  41    font-size: 3rem;
  42 }
  43
  44 h4 {
  45    font-size: 2rem;
  46 }
  47
  48 p {
  49    font-size: 1.5rem;
  50 }
  51
  52 h1, h2, h3, h4, p {
  53    padding: 0.5rem 0;
  54    margin: 0;
  55 }
  56
  57 a:link,
  58 a:visited,
  59 a:hover,
  60 a:active {
  61    text-decoration: none;
  62    font-size: 1.5rem;
  63    color: var(--bgColorSalamandra);
  64 }
  65
  66 html {
  67    font-size: calc(62.5% * var(--globalScale));
  68    background-color: var(--bgColorLight);
  69    height: 100%;
  70 }
  71
  72 /* REGLAS DEL HOME */
  73
  74 body {
  75    display: grid;
  76    grid-template-columns: 1fr;
  77    grid-template-rows: 5rem 1fr 5rem;
  78    grid-template-areas: /* No mostramos el aside en móviles */
  79       "navbar"
  80       "main"
  81       "footer";
  82    height: 100%;
  83 }
  84
  85 ::-webkit-scrollbar {
  86    width: 0.35rem;
  87 }
  88
  89 ::-webkit-scrollbar-thumb {
  90    background-color: var(--bgColorBlue);
  91 }
  92
  93 aside {
  94    position: fixed;
  95    inset: 0 calc(100% - 18rem);
  96    grid-area: aside;
  97    display: none;
  98    flex-flow: column nowrap;
  99    align-items: flex-start;
 100    justify-content: flex-start;
 101    width: 18rem;
 102    height: calc(100% - 5rem);
 103    margin-top: 5rem;
 104    padding: 2rem 1rem;
 105    background-color: var(--bgColorDark);
 106    overflow: auto;
 107 }
 108
 109 aside > div, li {
 110    color: var(--bgColorLight);
 111    display: flex;
 112    flex-flow: column nowrap;
 113    align-items: center;
 114    justify-content: space-between;
 115    font-size: 1.5rem;
 116    width: 100%;
 117    padding: 1rem 0;
 118 }
 119
 120 nav {
 121    display: flex;
 122    justify-content: space-between;
 123    align-items: center;
 124    grid-area: navbar;
 125    background-color: var(--bgColorDark);
 126    width: 100%;
 127 }
 128
 129 nav div:first-child {
 130    display: flex;
 131    flex-flow: row nowrap;
 132    align-items: center;
 133    justify-content: flex-start;
 134    width: 100%;
 135    margin-left: 1rem;
 136 }
 137
 138 nav div img:first-child {
 139    width: 3rem;
 140 }
 141
 142 nav ul {
 143    display: none;
 144    flex-flow: row nowrap;
 145    align-items: center;
 146    justify-content: flex-end;
 147    list-style-type: none;
 148    width: 100%;
 149    height: 100%;
 150    margin: 0;
 151    padding: 0;
 152    overflow: hidden;
 153 }
 154
 155 .nav-items {
 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;
 162 }
 163
 164 .nav-items:hover {
 165    background-size: 50% .1em;
 166    background-position: 10% 100%, 90% 100%;
 167 }
 168
 169 nav li {
 170    display: flex;
 171    align-items: center;
 172    height: 100%;
 173    width: fit-content;
 174  }
 175
 176 nav a {
 177    display: block;
 178    color: white;
 179    text-align: center;
 180    padding: 1rem 1.5rem;
 181    text-decoration: none;
 182  }
 183
 184 nav button {
 185    display: flex;
 186    position: absolute;
 187    width: 4rem;
 188    height: 4rem;
 189    right: 0.4rem;
 190    border-radius: 20px;
 191
 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;
 197
 198    border: none;
 199    cursor: pointer;
 200    user-select: none;
 201 }
 202
 203 nav button:hover{
 204    background-color: var(--bgColorMidDark);
 205 }
 206
 207 nav button[data-visible="true"] {
 208    background-image: url('../images/menu-abierto.png');
 209 }
 210
 211 main {
 212    grid-area: main;
 213    padding: 2rem;
 214    background-color: var(--bgColorMidDark);
 215    background-image: url('../images/salamandra_margin.svg');
 216    background-size: 10rem;
 217    background-position-x: right;
 218    background-position-y: bottom;
 219    background-repeat: no-repeat;
 220    overflow-y: auto;
 221 }
 222
 223 /* Regla que aplica solo a firefox */
 224 @-moz-document url-prefix() {
 225    main {
 226       background-image: url('../images/salamandra.svg');
 227       background-position-x: right 1rem;
 228       background-position-y: bottom 1rem;
 229    }
 230 }
 231
 232 main hr {
 233    width: 100%;
 234 }
 235
 236 main div {
 237    display: flex;
 238    flex-flow: row wrap;
 239    align-items: center;
 240    justify-content: space-between;
 241    color: var(--bgColorLight);
 242 }
 243
 244 main div > article {
 245    display: inline-block;
 246    width: calc(50% - 2rem);
 247    margin: 1rem;
 248    border-radius: 0.5rem;
 249
 250    max-height: 25rem;
 251    min-height: 25rem;
 252    min-width: 20rem;
 253
 254    background-color: var(--bgColorLightDark);
 255    box-shadow: 0 4px 1px 0.2px var(--bgColorDark);
 256
 257    overflow-y: auto;
 258 }
 259
 260 main div > article img {
 261    display: block;
 262    margin: 1rem auto;
 263    min-height: 12rem;
 264    max-height: 12rem;
 265 }
 266
 267 main div > article span {
 268    padding: 0 1rem;
 269    word-break: normal;
 270    overflow-wrap: break-word;
 271    display: block;
 272 }
 273
 274 main span table {
 275    padding-top: 2rem;
 276    margin: 0 auto;
 277 }
 278
 279 main span table img {
 280    width: 3rem;
 281 }
 282
 283 main span table td {
 284    padding: 0 0.3rem;
 285 }
 286
 287 main span .highlight code {
 288    white-space: pre-wrap;
 289    overflow-x: auto;
 290 }
 291
 292 main iframe {
 293    display: block;
 294    margin: 0 auto;
 295    width: 100%;
 296    height: 100%;
 297    max-width: 100vh;
 298 }
 299
 300 footer {
 301    grid-area: footer;
 302    display: flex;
 303    align-items: center;
 304    width: 100%;
 305    padding: 0 2rem;
 306    background-color: var(--bgColorLightDark);
 307 }
 308
 309 .greetings {
 310    width: 80%;
 311    height: 80%;
 312    margin: 0 auto;
 313 }
 314
 315 .index {
 316    background-color: var(--bgColorMidDark);
 317    background-image: url('../images/salamandra_margin.svg');
 318    background-position-x: center;
 319    background-position-y: 2rem;
 320    background-repeat: no-repeat;
 321    background-size: var(--backgroundImageSize);
 322 }
 323
 324 @media screen and (max-width: 480px) {
 325    body {
 326       min-width: 25rem;
 327    }
 328    main div > article {
 329       min-width: calc(100% - 2rem);
 330    }
 331 }
 332
 333 @media screen and (min-width: 840px) {
 334    :root {
 335       --globalScale: 1.5;
 336    }
 337
 338    body {
 339       grid-template-columns: 13rem 1fr;
 340       grid-template-areas: /* Tabletas se muestra el aside */
 341          "navbar navbar"
 342          "main main"
 343          "footer footer";
 344    }
 345
 346    nav ul {
 347       display: flex;
 348    }
 349
 350    aside {
 351       display: none !important;
 352    }
 353
 354    nav button, aside li a {
 355       display: none;
 356    }
 357
 358    main div {
 359       justify-content: space-evenly;
 360    }
 361
 362    main div > article {
 363       max-width: 30rem;
 364    }
 365
 366 }
 367
 368 @media screen and (min-width: 1280px) {
 369    :root {
 370       --globalScale: 2;
 371    }
 372
 373    main div > article img {
 374       min-height: 5rem;
 375       max-height: 5rem;
 376    }
 377
 378
 379    main div article {
 380       width: calc(30% - 2rem);
 381
 382       max-height: 15rem;
 383       min-height: 15rem;
 384       min-width: 10rem;
 385
 386    }
 387
 388    main div article p, a{
 389       font-size: 1rem;
 390    }
 391 }
 392