nirm.al

My Website
Log | Files | Refs | README | LICENSE

style.css (2654B)

      1 :root {
      2   --font-weight-normal: 500;
      3   --font-weight-medium: 600;
      4   --font-weight-bold: 800;
      5 }
      6 
      7 * {
      8   box-sizing: border-box;
      9 }
     10 
     11 html,
     12 body {
     13   margin: 0;
     14   padding: 0;
     15 }
     16 
     17 body {
     18   font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
     19   font-feature-settings: "tnum";
     20   font-variant-numeric: tabular-nums;
     21   font-size: 16px;
     22   font-weight: var(--font-weight-normal);
     23   line-height: 1.5;
     24   text-decoration: none;
     25   color: #333;
     26   width: 60ch;
     27   margin: 1em auto;
     28   padding: 0 2em;
     29 }
     30 
     31 a {
     32   display: inline-block;
     33   color: #000;
     34   text-decoration: underline;
     35   text-decoration-thickness: 2px;
     36 }
     37 
     38 p {
     39   word-break: break-word;
     40   word-wrap: break-word;
     41   hyphens: auto;
     42 }
     43 
     44 span.pre {
     45   background: #DDD;
     46   padding: 0.2em 0.4em;
     47 }
     48 
     49 pre {
     50   margin: 1em 0;
     51   padding: 0.2em 0.4em;
     52   background: #ddd;
     53   white-space: nowrap;
     54   display: block;
     55   overflow-x: auto;
     56   overflow-y: hidden;
     57 }
     58 
     59 .header {
     60   display: flex;
     61   flex-direction: column;
     62   align-items: center;
     63   text-decoration: none;
     64   border: none;
     65 }
     66 
     67 .header:hover {
     68   border-bottom: none;
     69 }
     70 
     71 .header p {
     72   font-size: 20px;
     73   font-family: "Neue Haas Grotesk Display Pro", serif;
     74   color: #333;
     75 }
     76 
     77 .logo {
     78   border-radius: 50%;
     79   height: 75px;
     80   width: 75px;
     81 }
     82 
     83 .logo>img {
     84   border-radius: 50%;
     85 }
     86 
     87 nav {
     88   display: block;
     89   margin: 1em 0;
     90 }
     91 
     92 nav a {
     93   margin-right: 1em;
     94   font-size: 14px;
     95   font-weight: var(--font-weight-medium);
     96   color: #333;
     97   text-transform: uppercase;
     98 }
     99 
    100 nav a:last-child {
    101   margin-right: 0;
    102 }
    103 
    104 .home img {
    105   width: 100%;
    106 }
    107 
    108 ul {
    109   margin: 0;
    110   padding: 0;
    111 }
    112 
    113 ul li {
    114   list-style: none;
    115   text-transform: uppercase;
    116   margin-bottom: 1em;
    117 }
    118 
    119 .content-wrapper .title {
    120   font-size: 1rem;
    121   font-weight: var(--font-weight-bold);
    122   text-transform: uppercase;
    123 }
    124 
    125 ul li a {
    126   font-size: 14px;
    127   font-weight: var(--font-weight-bold);
    128   color: #333;
    129 }
    130 
    131 ul li span {
    132   display: block;
    133 }
    134 
    135 .content-wrapper .title span,
    136 main ul li span {
    137   font-size: 14px;
    138   color: #555;
    139   font-weight: var(--font-weight-bold);
    140 }
    141 
    142 .content-wrapper .title span {
    143   display: block;
    144 }
    145 
    146 hr {
    147   position: relative;
    148   display: block;
    149   height: 1.20rem;
    150   margin: 1em 0;
    151   border: none;
    152   color: #000;
    153 }
    154 
    155 hr::after {
    156   display: block;
    157   content: "";
    158   position: absolute;
    159   top: calc(1.20rem / 2 - 2px);
    160   left: 0;
    161   width: 100%;
    162   border-top: calc(2px * 3) double #000;
    163   height: 0;
    164 }
    165 
    166 footer {
    167   font-size: 12px;
    168   color: #666;
    169   margin-bottom: 3em;
    170 }
    171 
    172 footer a {
    173   color: #666;
    174 }
    175 
    176 @media only screen and (max-width: 700px) {
    177   body {
    178     width: 100%;
    179     margin: 0;
    180     padding: 1em;
    181   }
    182 }
    183 
    184 @media only screen and (max-width: 540px) {
    185   .header p img {
    186     width: 100%;
    187     height: auto;
    188   }
    189 }