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 }
  17
  18 :root {
  19    --bgColorDark: #242930;
  20    --bgColorMidDark: #353b43;
  21    --bgColorLightDark: #4f5864;
  22    --bgColorLight: #D2D2D2;
  23    --globalScale: 1;
  24
  25 }
  26
  27 h1 {
  28    font-size: 6rem;
  29 }
  30
  31 h2 {
  32    font-size: 4rem;
  33 }
  34
  35 h3 {
  36    font-size: 3rem;
  37 }
  38
  39 h4 {
  40    font-size: 2rem;
  41 }
  42
  43 p {
  44    font-size: 1.5rem;
  45 }
  46
  47 h1, h2, h3, h4, p {
  48    padding: 0.5rem 0;
  49    margin: 0;
  50 }
  51
  52 a:link,
  53 a:visited,
  54 a:hover,
  55 a:active {
  56    text-decoration: none;
  57    font-size: 1.5rem;
  58 }
  59
  60 html {
  61    font-size: calc(62.5% * var(--globalScale));
  62    background-color: var(--bgColorLight);
  63    height: 100%;
  64 }
  65
  66 /* REGLAS DEL HOME */
  67
  68 body {
  69    display: grid;
  70    grid-template-columns: 1fr;
  71    grid-template-rows: 5rem 1fr 5rem;
  72    grid-template-areas: /* No mostramos el aside en móbiles */
  73       "navbar"
  74       "main"
  75       "footer";
  76    height: 100%;
  77    margin: 0;
  78 }
  79
  80 aside {
  81    grid-area: aside;
  82    display: none;
  83    flex-flow: column nowrap;
  84    align-items: flex-start;
  85    justify-content: flex-start;
  86    width: 100%;
  87    padding: 0 1rem;
  88    background-color: var(--bgColorDark);
  89 }
  90
  91 aside .item {
  92    display: flex;
  93    flex-flow: row nowrap;
  94    align-items: center;
  95    justify-content: space-between;
  96    font-size: 1.5rem;
  97    width: 100%;
  98    padding: 1rem 0;
  99 }
 100
 101 nav {
 102    grid-area: navbar;
 103    background-color: var(--bgColorLightDark);
 104    width: 100%;
 105 }
 106
 107 nav ul {
 108    display: flex;
 109    flex-flow: row nowrap;
 110    align-items: center;
 111    justify-content: flex-start;
 112    list-style-type: none;
 113    width: 100%;
 114    height: 100%;
 115    margin: 0;
 116    padding: 0;
 117    overflow: hidden;
 118    background-color: #333;
 119 }
 120
 121 nav li {
 122    display: flex;
 123    align-items: center;
 124    height: 100%;
 125  }
 126
 127 nav a {
 128    display: block;
 129    color: white;
 130    text-align: center;
 131    padding: 14px 16px;
 132    text-decoration: none;
 133  }
 134
 135  nav li:hover {
 136    background-color: #111;
 137  }
 138
 139 main {
 140    grid-area: main;
 141    padding: 2rem;
 142    background-color: var(--bgColorMidDark);
 143    background-image: url('../images/salamandra.svg');
 144    background-size: 10rem;
 145    background-position-x: right;
 146    background-position-y: bottom;
 147    background-repeat: no-repeat;
 148 }
 149
 150 main hr {
 151    width: 100%;
 152 }
 153
 154 .articles {
 155    display: flex;
 156    flex-flow: row wrap;
 157    align-items: flex-start;
 158    justify-content: space-between;
 159 }
 160
 161 .articles article {
 162    width: 30rem;
 163    border: 1px solid;
 164    border-radius: 0.5rem;
 165    padding: 1rem;
 166    margin: 1rem;
 167 }
 168
 169 .content table {
 170    padding-top: 2rem;
 171    margin: 0 auto;
 172 }
 173
 174 .content table img {
 175    width: 3rem;
 176 }
 177
 178 .content table td {
 179    padding: 0 0.3rem;
 180 }
 181
 182 footer {
 183    grid-area: footer;
 184    display: flex;
 185    align-items: center;
 186    width: 100%;
 187    padding: 0 2rem;
 188    background-color: var(--bgColorLightDark);
 189 }
 190
 191 .greetings {
 192    width: 80%;
 193    height: 80%;
 194    margin: 0 auto;
 195 }
 196
 197 @media screen and (min-width: 780px) {
 198    :root {
 199       --globalScale: 1.5;
 200    }
 201
 202    body {
 203       grid-template-columns: 11rem 1fr;
 204       grid-template-areas: /* Tabletas se muestra el aside */
 205          "navbar navbar"
 206          "aside main"
 207          "footer footer";
 208    }
 209
 210    aside {
 211       display: flex;
 212    }
 213 }
 214
 215 @media screen and (min-width: 1280px) {
 216    :root {
 217       --globalScale: 2;
 218    }
 219 }
 220