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: #242930;
  22    --bgColorMidDark: #353b43;
  23    --bgColorLightDark: #4f5864;
  24    --bgColorLight: #D2D2D2;
  25    --navbarHoverColor: #111;
  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 aside {
  83    grid-area: aside;
  84    display: none;
  85    flex-flow: column nowrap;
  86    align-items: flex-start;
  87    justify-content: flex-start;
  88    width: 100%;
  89    padding: 0 1rem;
  90    background-color: var(--bgColorDark);
  91 }
  92
  93 aside .item {
  94    display: flex;
  95    flex-flow: row nowrap;
  96    align-items: center;
  97    justify-content: space-between;
  98    font-size: 1.5rem;
  99    width: 100%;
 100    padding: 1rem 0;
 101 }
 102
 103 nav {
 104    grid-area: navbar;
 105    background-color: var(--bgColorLightDark);
 106    width: 100%;
 107 }
 108
 109 nav ul {
 110    display: flex;
 111    flex-flow: row nowrap;
 112    align-items: center;
 113    justify-content: flex-start;
 114    list-style-type: none;
 115    width: 100%;
 116    height: 100%;
 117    margin: 0;
 118    padding: 0;
 119    overflow: hidden;
 120 }
 121
 122 nav li {
 123    display: flex;
 124    align-items: center;
 125    height: 100%;
 126  }
 127
 128 nav a {
 129    display: block;
 130    color: white;
 131    text-align: center;
 132    padding: 1rem 1.5rem;
 133    text-decoration: none;
 134  }
 135
 136 nav li:hover {
 137    background-color: var(--navbarHoverColor);
 138 }
 139
 140 main {
 141    grid-area: main;
 142    padding: 2rem;
 143    background-color: var(--bgColorMidDark);
 144    background-image: url('../images/salamandra_margin.svg');
 145    background-size: 10rem;
 146    background-position-x: right;
 147    background-position-y: bottom;
 148    background-repeat: no-repeat;
 149 }
 150
 151 /* Regla que aplica solo a firefox */
 152 @-moz-document url-prefix() {
 153    main {
 154       background-image: url('../images/salamandra.svg');
 155       background-position-x: right 1rem;
 156       background-position-y: bottom 1rem;
 157    }
 158 }
 159
 160 main hr {
 161    width: 100%;
 162 }
 163
 164 .articles {
 165    display: flex;
 166    flex-flow: row wrap;
 167    align-items: flex-start;
 168    justify-content: space-between;
 169 }
 170
 171 .articles article {
 172    width: 30rem;
 173    border: 1px solid;
 174    border-radius: 0.5rem;
 175    padding: 1rem;
 176    margin: 1rem;
 177 }
 178
 179 .content table {
 180    padding-top: 2rem;
 181    margin: 0 auto;
 182 }
 183
 184 .content table img {
 185    width: 3rem;
 186 }
 187
 188 .content table td {
 189    padding: 0 0.3rem;
 190 }
 191
 192 .content .highlight code {
 193    white-space: pre-wrap;
 194    overflow-x: auto;
 195 }
 196
 197 footer {
 198    grid-area: footer;
 199    display: flex;
 200    align-items: center;
 201    width: 100%;
 202    padding: 0 2rem;
 203    background-color: var(--bgColorLightDark);
 204 }
 205
 206 .greetings {
 207    width: 80%;
 208    height: 80%;
 209    margin: 0 auto;
 210 }
 211
 212 @media screen and (min-width: 780px) {
 213    :root {
 214       --globalScale: 1.5;
 215    }
 216
 217    body {
 218       grid-template-columns: 11rem 1fr;
 219       grid-template-areas: /* Tabletas se muestra el aside */
 220          "navbar navbar"
 221          "aside main"
 222          "footer footer";
 223    }
 224
 225    aside {
 226       display: flex;
 227    }
 228 }
 229
 230 @media screen and (min-width: 1280px) {
 231    :root {
 232       --globalScale: 2;
 233    }
 234 }
 235