nirm.al

my website
git clone git://git.nirm.al/nirm.al.git
Log | Files | Refs | README | LICENSE

style.css (2881B)

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