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