website

This is my amazing website!
git clone git://shipwreckt.co.uk/website
Log | Files | Refs | README | LICENSE

styles.css.bk (2066B)

      1 /* styles.css */
      2 
      3 
      4 body {
      5   background-color: #272727;
      6   color: #e6e6e6;
      7   font-family: 'FreeSerif', serif;
      8   max-width: 900px;
      9   margin: 0 auto;
     10   padding: 0 20px;
     11 }
     12 
     13 header {
     14   text-align: center;
     15   padding: 20px;
     16 }
     17 
     18 nav ul {
     19   list-style: none;
     20   padding: 0;
     21   text-align: center;
     22 }
     23 
     24 nav ul li {
     25   display: inline-block;
     26   margin-right: 20px;
     27 }
     28 
     29 nav ul li.logo img {
     30   max-height: 70px;
     31 }
     32 
     33 nav ul li a {
     34   color: #716181;
     35   text-decoration: none;
     36 }
     37 
     38 a {
     39   color: #5e4d96;
     40   text-decoration: none;
     41 }
     42 
     43 a:hover {
     44   text-decoration: underline;
     45 }
     46 
     47 main{
     48   margin: 20px auto;
     49   font-size: 18px;
     50   max-width: 90%;
     51   padding: 0 10px;
     52 }
     53 
     54 .tags {
     55   margin: 20px auto;
     56   font-size: 18px;
     57   max-width: 40%;
     58   padding: 0 10px;
     59 }
     60 
     61 .tags2 {
     62   margin: 20px auto;
     63   font-size: 18px;
     64   max-width: 68%;
     65   padding: 0 10px;
     66 }
     67 
     68 .posts {
     69   border-top: 1px solid #C0C0C0;
     70   padding-top: 10px;
     71 }
     72 
     73 .posts h2 {
     74   font-size: 24px;
     75   padding-bottom: 5px;
     76 }
     77 
     78 .posts ul {
     79   list-style: none;
     80   padding: 0;
     81 }
     82 
     83 .posts ul li {
     84   margin-bottom: 10px;
     85 }
     86 
     87 .right-image {
     88   float: right;
     89   margin: 0 0 10px 10px;
     90   height: auto;
     91 }
     92 
     93 .left-image {
     94   float: left;
     95   height: auto;
     96 }
     97 .center {
     98   display: block;
     99   margin-left: auto;
    100   margin-right: auto;
    101   width: 70%;
    102 }
    103 
    104 .code-box {
    105   padding-top: 100px;
    106   background-color: #c8c8c8;
    107   font-family: 'FreeSans', sans-serif;
    108   font-size: 15px;
    109   color: #000000;
    110   border: 2px solid; 
    111   padding: 7px;
    112 }
    113 
    114 /* Media Queries for responsiveness */
    115 @media (max-width: 768px) {
    116   body {
    117     max-width: 100%;
    118     padding: 0 10px;
    119   }
    120 
    121   .title {
    122     font-size: 28px;
    123   }
    124 
    125   nav ul {
    126     display: flex;
    127     flex-direction: column;
    128     align-items: center;
    129   }
    130 
    131   nav ul li {
    132     display: block;
    133     margin: 10px 0;
    134     text-align: center;
    135   }
    136 
    137   nav ul li.logo img {
    138     max-height: 50px;
    139   }
    140 
    141   .description {
    142     font-size: 16px;
    143   }
    144 
    145   .posts h2 {
    146     font-size: 22px;
    147   }
    148 }
    149 
    150 @media (max-width: 480px) {
    151   .title {
    152     font-size: 24px;
    153   }
    154 
    155   .description {
    156     font-size: 14px;
    157   }
    158 
    159   .posts h2 {
    160     font-size: 20px;
    161   }
    162 
    163   nav ul li {
    164     margin: 5px 0;
    165   }
    166 }
    167