lektura

lektura.git
git clone git://git.lenczewski.org/lektura.git
Log | Files | Refs

layout.css (3219B)

      1 main.grid {
      2   grid-template-rows: auto auto auto;
      3   grid-template-columns: 3fr 1fr;
      4 }
      5 
      6 #banner {
      7   /* TODO */
      8 }
      9 
     10 #banner img {
     11   object-fit: cover;
     12   height: 100%;
     13   width: 100%;
     14 }
     15 
     16 #banner .breaking-news {
     17   position: relative;
     18 }
     19 
     20 #banner .breaking-news-title {
     21   position: absolute;
     22   padding: 0 2em 0;
     23   margin: 0;
     24   bottom: 1em;
     25   color: #fff;
     26 }
     27 
     28 .breaking-news-grad-1, .breaking-news-grad-2, .breaking-news-grad-3 {
     29   height: 100%;
     30   width: 100%;
     31 
     32   position: absolute;
     33   top: 0;
     34   left: 0;
     35 
     36   opacity: 0.5;
     37 }
     38 
     39 .breaking-news-grad-1 {
     40   background-image: linear-gradient(135deg, rgb(0,0,0), rgb(255,0,0));
     41 }
     42 
     43 .breaking-news-grad-2 {
     44   background-image: linear-gradient(135deg, rgb(0,0,0), rgb(0,255,0));
     45 }
     46 
     47 .breaking-news-grad-3 {
     48   background-image: linear-gradient(135deg, rgb(0,0,0), rgb(0,0,255));
     49 }
     50 
     51 #banner.grid {
     52   grid-template-rows: auto auto;
     53   grid-template-columns: 2fr 1fr;
     54 
     55   background-color: lightgrey;
     56 }
     57 
     58 #banner > #breaking-news-1 {
     59   grid-row: 1 / span 2;
     60   grid-column: 1;
     61 
     62   background-color: red;
     63 }
     64 
     65 #banner > #breaking-news-2 {
     66   grid-row: 1;
     67   grid-column: 2;
     68 
     69   background-color: magenta;
     70 }
     71 
     72 #banner > #breaking-news-3 {
     73   grid-row: 2;
     74   grid-column: 2;
     75 
     76   background-color: blue;
     77 }
     78 
     79 #content {
     80   background-color: grey;
     81 
     82   margin-left: 2em;
     83   margin-right: 2em;
     84 }
     85 
     86 #sidebar {
     87   background-color: cyan;
     88 
     89   /* TODO */
     90 }
     91 
     92 /* css selector explanation
     93  * --
     94  *  #sidebar a { ... }
     95  * --
     96  *  - given an element with the id `sidebar`
     97  *    - for all its descendants (immediate and nested children) of type <a>
     98  */
     99 
    100 #sidebar ol, #sidebar ul {
    101   list-style: none;
    102 }
    103 
    104 #sidebar li {
    105   padding-top: 1px;
    106   padding-bottom: 1px;
    107 }
    108 
    109 #sidebar a {
    110   text-decoration: none;
    111   padding: 6px 12px;
    112 
    113   position: relative;
    114   display: inline-block;
    115   transition: left 0.2s ease;
    116   left: 0px;
    117 
    118   background: #f8f8f8;
    119   color: #303030;
    120 }
    121 
    122 #sidebar a:before {
    123   content: ">";
    124   margin-right: 5px;
    125 }
    126 
    127 #sidebar a:focus, #sidebar a:hover {
    128   left: 3px;
    129 
    130   background: #303030;
    131   color: #fff;
    132 }
    133 
    134 /* css selector explanation
    135  * --
    136  *  main.grid > #content { ... }
    137  * --
    138  *  - given an element of type `main` with the class `grid`
    139  *    - for its direct child with id `content`
    140  */
    141 
    142 main.grid > #banner {
    143   grid-row: 1 / span 1;
    144   grid-column: 1 / -1;
    145 }
    146 
    147 /* on mobile ... */
    148 @media screen and (max-width:576px) {
    149   /* the sidebar moves to immediately under the banner */
    150   main.grid > #sidebar {
    151     grid-row: 2 / span 1;
    152     grid-column: 1 / span 2;
    153   }
    154 
    155   /* the content comes after the "sidebar" */
    156   main.grid > #content {
    157     grid-row: 3;
    158     grid-column: 1 / span 2;
    159   }
    160 }
    161 
    162 /* on smaller screens ... */
    163 @media screen and (max-width:949px) {
    164   /* the top banner has one less tile (for readability) ... */
    165   #banner > #breaking-news-2 {
    166     grid-column: 2 / span 2;
    167   }
    168 
    169   /* final tile is not displayed */
    170   #banner > #breaking-news-3 {
    171     display: none;
    172   }
    173 }
    174 
    175 /* on desktop ... */
    176 @media screen and (min-width:577px) {
    177   /* the sidebar sits on the right-hand column (25% width) */
    178   main.grid > #sidebar {
    179     grid-row: 2 / span 1;
    180     grid-column: 2 / span 1;
    181   }
    182 
    183   /* the contents sit on the left-hand column (75% width) */
    184   main.grid > #content {
    185     grid-row: 2 / span 2;
    186     grid-column: 1 / span 1;
    187   }
    188 }