programmeerles-ouderen

Teach programming to seniors
Log | Files | Refs

main.css (2201B)

      1 body {
      2   background: #fafafa;
      3   color: #333333;
      4   margin-top: 5rem;
      5 }
      6 
      7 h1, h2, h3, h4, h5, h6 {
      8   color: #444444;
      9 }
     10 
     11 .bg-steel {
     12   background-color: #33bc85;
     13 }
     14 
     15 .site-header .navbar-nav .nav-link {
     16   color: #eeeeee;
     17 }
     18 
     19 .site-header .navbar-nav .nav-link:hover {
     20   color: #ffffff;
     21   text-decoration: underline;
     22 }
     23 
     24 .site-header .navbar-nav .nav-link.active {
     25   font-weight: 500;
     26 }
     27 
     28 .content-section {
     29   background: #ffffff;
     30   padding: 10px 20px;
     31   border: 1px solid #dddddd;
     32   border-radius: 3px;
     33   margin-bottom: 20px;
     34 }
     35 
     36 .article-title {
     37   color: #444444;
     38 }
     39 
     40 a.article-title:hover {
     41   color: #428bca;
     42   text-decoration: none;
     43 }
     44 
     45 .article-content {
     46   white-space: pre-line;
     47 }
     48 
     49 .article-img {
     50   height: 65px;
     51   width: 65px;
     52   margin-right: 16px;
     53 }
     54 
     55 .article-metadata {
     56   padding-bottom: 1px;
     57   margin-bottom: 4px;
     58   border-bottom: 1px solid #e3e3e3
     59 }
     60 
     61 .article-metadata a:hover {
     62   color: #333;
     63   text-decoration: none;
     64 }
     65 
     66 .article-svg {
     67   width: 25px;
     68   height: 25px;
     69   vertical-align: middle;
     70 }
     71 
     72 .account-img {
     73   height: 125px;
     74   width: 125px;
     75   margin-right: 20px;
     76   margin-bottom: 16px;
     77 }
     78 
     79 .account-heading {
     80   font-size: 2.5rem;
     81 }
     82 
     83 .calendar {
     84   background-color: #fafafa;
     85   width: 100%;
     86   color: #818182;
     87   border: #dddddd solid 1px;
     88 }
     89 
     90 .calendar .weekend {
     91   background-color: #eee;
     92 }
     93 
     94 .calendar th {
     95   border-bottom: #ddd solid 1px;
     96 }
     97 
     98 .calendar th, td {
     99   /*border: #333 solid 1px;*/
    100   text-align: center;
    101   width: 100px;
    102   position: relative;
    103 }
    104 
    105 .calendar .course {
    106   background: rgb(84, 230, 84);
    107   border: #444 solid 1px;
    108   color: #444
    109 }
    110 
    111 .calendar td .hover-day {
    112   visibility: hidden;
    113   background-color: #444;
    114   color: #eee;
    115   text-align: center;
    116   border-radius: 6px;
    117   padding: 5px 0;
    118 
    119   width: 120px;
    120   bottom: 100%;
    121   left: 50%;
    122   margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    123   padding: 5px 0;
    124   
    125 
    126   /* Position the tooltip */
    127   position: absolute;
    128   z-index: 1;
    129 }
    130 
    131 .calendar td .hover-day::after {
    132   content: "";
    133   position: absolute;
    134   top: 100%;
    135   left: 50%;
    136   margin-left: -5px;
    137   border-width: 5px;
    138   border-style: solid;
    139   border-color: #444 transparent transparent transparent;
    140 }
    141 
    142 
    143 .calendar td:hover .hover-day {
    144   visibility: visible;
    145 }