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
 189    background-image: url('../images/menu.png');
 190    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. */
 191    background-position: top left;
 192    background-repeat: no-repeat;
 193    background-size: cover;
 194
 195    border: none;
 196    cursor: pointer;
 197
 198    transition: background-image ease 0.2s;
 199
 200 }
 201
 202 nav button[data-visible="true"] {
 203    background-image: url('../images/menu-abierto.png');
 204 }
 205
 206 main {
 207    grid-area: main;
 208    padding: 2rem;
 209    background-color: var(--bgColorMidDark);
 210    background-image: url('../images/salamandra_margin.svg');
 211    background-size: 10rem;
 212    background-position-x: right;
 213    background-position-y: bottom;
 214    background-repeat: no-repeat;
 215    overflow-y: auto;
 216 }
 217
 218 /* Regla que aplica solo a firefox */
 219 @-moz-document url-prefix() {
 220    main {
 221       background-image: url('../images/salamandra.svg');
 222       background-position-x: right 1rem;
 223       background-position-y: bottom 1rem;
 224    }
 225 }
 226
 227 main hr {
 228    width: 100%;
 229 }
 230
 231 main div {
 232    display: flex;
 233    flex-flow: row wrap;
 234    align-items: flex-start;
 235    justify-content: space-between;
 236 }
 237
 238 main div > article {
 239    display: inline-block;
 240    width: calc(50% - 2rem);
 241    margin: 1rem;
 242    border-radius: 0.5rem;
 243
 244    max-height: 20rem;
 245    min-height: 20rem;
 246
 247    background-color: var(--bgColorLightDark);
 248    box-shadow: 0 4px 1px 0.2px var(--bgColorDark);
 249
 250    overflow-y: auto;
 251 }
 252
 253 main div > article img {
 254    width: 100%;
 255    min-height: 12rem;
 256    max-height: 12rem;
 257    background-color: var(--bgColorLight);
 258 }
 259
 260 main div > article span {
 261    padding: 0 1rem;
 262    word-break: break-all;
 263    display: block;
 264 }
 265
 266 .content table {
 267    padding-top: 2rem;
 268    margin: 0 auto;
 269 }
 270
 271 .content table img {
 272    width: 3rem;
 273 }
 274
 275 .content table td {
 276    padding: 0 0.3rem;
 277 }
 278
 279 .content .highlight code {
 280    white-space: pre-wrap;
 281    overflow-x: auto;
 282 }
 283
 284 footer {
 285    grid-area: footer;
 286    display: flex;
 287    align-items: center;
 288    width: 100%;
 289    padding: 0 2rem;
 290    background-color: var(--bgColorLightDark);
 291 }
 292
 293 .greetings {
 294    width: 80%;
 295    height: 80%;
 296    margin: 0 auto;
 297 }
 298
 299 @media screen and (min-width: 780px) {
 300    :root {
 301       --globalScale: 1.5;
 302    }
 303
 304    body {
 305       grid-template-columns: 13rem 1fr;
 306       grid-template-areas: /* Tabletas se muestra el aside */
 307          "navbar navbar"
 308          "main main"
 309          "footer footer";
 310    }
 311
 312    nav ul {
 313       display: flex;
 314    }
 315
 316    aside {
 317       display: none !important;
 318    }
 319
 320    nav button, aside li a {
 321       display: none;
 322    }
 323
 324 }
 325
 326 @media screen and (min-width: 1280px) {
 327    :root {
 328       --globalScale: 2;
 329    }
 330 }
 331