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    --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 .hover {
 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 .hover: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 }
 216
 217 /* Regla que aplica solo a firefox */
 218 @-moz-document url-prefix() {
 219    main {
 220       background-image: url('../images/salamandra.svg');
 221       background-position-x: right 1rem;
 222       background-position-y: bottom 1rem;
 223    }
 224 }
 225
 226 main hr {
 227    width: 100%;
 228 }
 229
 230 .articles {
 231    display: flex;
 232    flex-flow: row wrap;
 233    align-items: flex-start;
 234    justify-content: space-between;
 235 }
 236
 237 .articles article {
 238    width: 30rem;
 239    border: 1px solid;
 240    border-radius: 0.5rem;
 241    padding: 1rem;
 242    margin: 1rem;
 243 }
 244
 245 .content table {
 246    padding-top: 2rem;
 247    margin: 0 auto;
 248 }
 249
 250 .content table img {
 251    width: 3rem;
 252 }
 253
 254 .content table td {
 255    padding: 0 0.3rem;
 256 }
 257
 258 .content .highlight code {
 259    white-space: pre-wrap;
 260    overflow-x: auto;
 261 }
 262
 263 footer {
 264    grid-area: footer;
 265    display: flex;
 266    align-items: center;
 267    width: 100%;
 268    padding: 0 2rem;
 269    background-color: var(--bgColorLightDark);
 270 }
 271
 272 .greetings {
 273    width: 80%;
 274    height: 80%;
 275    margin: 0 auto;
 276 }
 277
 278 @media screen and (min-width: 780px) {
 279    :root {
 280       --globalScale: 1.5;
 281    }
 282
 283    body {
 284       grid-template-columns: 13rem 1fr;
 285       grid-template-areas: /* Tabletas se muestra el aside */
 286          "navbar navbar"
 287          "main main"
 288          "footer footer";
 289    }
 290
 291    nav ul {
 292       display: flex;
 293    }
 294
 295    aside {
 296       display: none;
 297    }
 298
 299    nav button, aside li a {
 300       display: none;
 301    }
 302
 303 }
 304
 305 @media screen and (min-width: 1280px) {
 306    :root {
 307       --globalScale: 2;
 308    }
 309 }
 310