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    --bgColorBlue: #1b6694;
  26    --bgColorSalamandra: rgb(236, 162, 143);
  27    --globalScale: 1;
  28
  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 .item {
 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 .hover {
 155    --c:linear-gradient(#1482c8 0 0); /* update the color here */
 156
 157    padding-bottom: .15em;
 158    background: var(--c), var(--c);
 159    background-size: .3em .1em;
 160    background-position:50% 100%;
 161    background-repeat: no-repeat;
 162    transition: .3s linear, background-size .3s .2s linear;
 163 }
 164
 165 .hover:hover {
 166    background-size: 50% .1em;
 167    background-position: 10% 100%, 90% 100%;
 168 }
 169
 170 nav li {
 171    display: flex;
 172    align-items: center;
 173    height: 100%;
 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
 191    background-image: url('../images/menu.png');
 192    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. */
 193    background-position: top left;
 194    background-repeat: no-repeat;
 195    background-size: cover;
 196
 197    border: none;
 198    cursor: pointer;
 199
 200    transition: background-image ease 0.2s;
 201
 202 }
 203
 204 nav button[data-visible="true"] {
 205    background-image: url('../images/menu-abierto.png');
 206 }
 207
 208 main {
 209    grid-area: main;
 210    padding: 2rem;
 211    background-color: var(--bgColorMidDark);
 212    background-image: url('../images/salamandra_margin.svg');
 213    background-size: 10rem;
 214    background-position-x: right;
 215    background-position-y: bottom;
 216    background-repeat: no-repeat;
 217 }
 218
 219 /* Regla que aplica solo a firefox */
 220 @-moz-document url-prefix() {
 221    main {
 222       background-image: url('../images/salamandra.svg');
 223       background-position-x: right 1rem;
 224       background-position-y: bottom 1rem;
 225    }
 226 }
 227
 228 main hr {
 229    width: 100%;
 230 }
 231
 232 .articles {
 233    display: flex;
 234    flex-flow: row wrap;
 235    align-items: flex-start;
 236    justify-content: space-between;
 237 }
 238
 239 .articles article {
 240    width: 30rem;
 241    border: 1px solid;
 242    border-radius: 0.5rem;
 243    padding: 1rem;
 244    margin: 1rem;
 245 }
 246
 247 .content table {
 248    padding-top: 2rem;
 249    margin: 0 auto;
 250 }
 251
 252 .content table img {
 253    width: 3rem;
 254 }
 255
 256 .content table td {
 257    padding: 0 0.3rem;
 258 }
 259
 260 .content .highlight code {
 261    white-space: pre-wrap;
 262    overflow-x: auto;
 263 }
 264
 265 footer {
 266    grid-area: footer;
 267    display: flex;
 268    align-items: center;
 269    width: 100%;
 270    padding: 0 2rem;
 271    background-color: var(--bgColorLightDark);
 272 }
 273
 274 .greetings {
 275    width: 80%;
 276    height: 80%;
 277    margin: 0 auto;
 278 }
 279
 280 @media screen and (min-width: 780px) {
 281    :root {
 282       --globalScale: 1.5;
 283    }
 284
 285    body {
 286       grid-template-columns: 13rem 1fr;
 287       grid-template-areas: /* Tabletas se muestra el aside */
 288          "navbar navbar"
 289          "main main"
 290          "footer footer";
 291    }
 292
 293    nav ul {
 294       display: flex;
 295    }
 296
 297    aside {
 298       display: none;
 299    }
 300
 301    nav button, aside li a {
 302       display: none;
 303    }
 304
 305 }
 306
 307 @media screen and (min-width: 1280px) {
 308    :root {
 309       --globalScale: 2;
 310    }
 311 }
 312