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 <<<<<<< HEAD
  85   background-color: #242930;
  86 =======
  87 >>>>>>> 9b5582b (recreando repositorio)
  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 <<<<<<< HEAD
 109     background-color: #4f5864;
 110   }
 111
 112   main {
 113     grid-area: main;
 114     padding: 2rem;
 115     background-color: #353b43;
 116   }
 117
 118   main hr {
 119     width: 100%;
 120   }
 121
 122   .articles {
 123     display: flex;
 124     flex-flow: row wrap;
 125     align-items: flex-start;
 126     justify-content: space-between;
 127   }
 128
 129   .articles article {
 130     width: 30rem;
 131     border: 1px solid;
 132     border-radius: 0.5rem;
 133     padding: 1rem;
 134     margin: 1rem;
 135   }
 136
 137   .content table {
 138     padding-top: 2rem;
 139     margin: 0 auto;
 140   }
 141
 142 =======
 143   }
 144
 145 main {
 146   grid-area: main;
 147   margin: 2rem;
 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 >>>>>>> 9b5582b (recreando repositorio)
 175 .content table img {
 176   width: 3rem;
 177 }
 178
 179 .content table td {
 180   padding: 0 0.3rem;
 181 }
 182
 183 footer {
 184   grid-area: footer;
 185   display: flex;
 186   align-items: center;
 187   width: 100%;
 188   padding: 0 2rem;
 189 <<<<<<< HEAD
 190   background-color: #4f5864;
 191 =======
 192 >>>>>>> 9b5582b (recreando repositorio)
 193 }
 194
 195 .greetings {
 196   background-color: var(--bgColorLight);
 197   width: 80%;
 198 <<<<<<< HEAD
 199   height: 80%;
 200 =======
 201   heigth: 80%;
 202 >>>>>>> 9b5582b (recreando repositorio)
 203   margin: 0 auto;
 204 }
 205
 206 @media screen and (min-width: 780px) {
 207   :root {
 208     --globalScale: 1.5;
 209   }
 210
 211   body {
 212     grid-template-columns: 11rem 1fr;
 213     grid-template-areas: /* Tabletas se muestra el aside */
 214       "navbar navbar"
 215       "aside main"
 216       "footer footer";
 217   }
 218 <<<<<<< HEAD
 219
 220   aside {
 221     display: flex;
 222   }
 223 }
 224
 225 =======
 226
 227   aside {
 228     display: flex;
 229   }
 230
 231 }
 232 >>>>>>> 9b5582b (recreando repositorio)
 233
 234 @media screen and (min-width: 1280px) {
 235   :root {
 236     --globalScale: 2;
 237   }
 238 }
 239 <<<<<<< HEAD
 240
 241
 242 =======
 243 >>>>>>> 9b5582b (recreando repositorio)