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