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