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