main-site

Main site for niliara.net
git clone git://niliara.net/main-site
Log | Files | Refs

style.css (3033B)

      1 :root {
      2     --bg-dark: #131313;
      3     --bg: #282828;
      4     --bg-base: #32302f;
      5     --fg: #fbf1c7;
      6     --link: #ffc107;
      7     --border: #908a67;
      8     --comment: #999;
      9     --ascii-b: #444;
     10 
     11     scrollbar-color: var(--link) var(--bg-dark);
     12     height: 100%;
     13 }
     14 
     15 .index {
     16     align-content: center;
     17 }
     18 
     19 body {
     20     margin: 0;
     21     background-color: var(--bg);
     22     color: var(--fg);
     23     font-family: Iosevka;
     24     line-height: 1.4;
     25     font-size: 1.4em;
     26     padding: 1em;
     27     margin-bottom: 8em;
     28 }
     29 
     30 main {
     31     margin: 0 auto;
     32     padding: 2em 0em;
     33     max-width: 1000px;
     34 }
     35 
     36 
     37 main h1 {
     38     text-align: center;
     39 }
     40 
     41 a {
     42     color: var(--link);
     43 }
     44 
     45 pre a {
     46     color: inherit;
     47 }
     48 
     49 a:not(:hover) {
     50     text-decoration: none;
     51 }
     52 
     53 .links {
     54     margin: 0 auto;
     55 }
     56 
     57 .links ul {
     58     list-style: none;
     59     padding: 0em;
     60     margin: 0 auto;
     61 }
     62 
     63 .links li {
     64     display: flex;
     65     justify-content: center;
     66 }
     67 
     68 a.alt {
     69     text-decoration: none;
     70     text-align: center;
     71 
     72     justify-content: space-between;
     73 }
     74 
     75 a.alt h3 {
     76     font-size: 1em;
     77     color: var(--fg);
     78     font-weight: normal;
     79     text-align: left;
     80     margin: 0;
     81     display: inline;
     82 }
     83 
     84 a.alt:hover h3 {
     85     color: var(--link);
     86     text-decoration: underline;
     87 }
     88 
     89 a.alt:focus h3 {
     90     color: var(--link);
     91 }
     92 
     93 a.alt span {
     94     color: var(--comment);
     95 }
     96 
     97 span.ascii-border {
     98     color: var(--ascii-b);
     99     -webkit-user-select: none; /* Safari */
    100     -ms-user-select: none; /* IE 10 and IE 11 */
    101     user-select: none; /* Standard syntax */
    102 }
    103 
    104 .about {
    105     border: 1px var(--border) dashed;
    106     padding: 1em;
    107     margin: 1em 0;
    108 }
    109 
    110 pre:not(.nocode) {
    111     margin: 1em 0;
    112     padding: 0.8em;
    113     margin-bottom: 2em;
    114     border: 1px var(--border) solid;
    115 
    116     overflow: scroll;
    117 }
    118 
    119 pre, code {
    120     font-family: Iosevka !important;
    121 }
    122 
    123 div.ascii {
    124     width: 7em;
    125     margin: 0 auto;
    126 }
    127 
    128 div.ascii pre {
    129     width: 5.4em;
    130     margin: 0 auto;
    131 }
    132 
    133 div.ascii a {
    134     display: block;
    135     margin: 0 auto;
    136     text-align: center;
    137     margin-left:3.2em;
    138 }
    139 
    140 nav {
    141     display: flex;
    142     flex-wrap: wrap;
    143 
    144     gap: 1.2em;
    145 }
    146 
    147 nav.center {
    148     justify-content: center;
    149 }
    150 
    151 nav.center a {
    152     align-content: center;
    153 }
    154 
    155 div {
    156     margin: 0;
    157 }
    158 
    159 div.index{
    160     display: flex;
    161     flex-wrap: wrap;
    162     justify-content: space-around;
    163 }
    164 
    165 div.index div {
    166     display: inline-block;
    167     margin-bottom: 1em;
    168 }
    169 
    170 td {
    171     padding-right: 1em;
    172 }
    173 
    174 @font-face {
    175     font-family: Hasklig;
    176     src: url(Hasklig-Regular.ttf);
    177 }
    178 
    179 @font-face {
    180     font-family: Iosevka;
    181     src: url(/Iosevka-Regular.woff2);
    182 }
    183 
    184 
    185 .presentation {
    186     display: grid;
    187     grid-template-columns: 25% 75%;
    188     width: 100%;
    189     margin-bottom: 2em;
    190 }
    191 
    192 .presentation .ascii {
    193     width: 80%;
    194 }
    195 
    196 .presentation .ascii pre {
    197     display: block;
    198     float: right;
    199 }
    200 
    201 .projects {
    202     display: flex;
    203     flex-wrap: wrap;
    204     justify-content: space-between;
    205     gap: 1em;
    206 }
    207 
    208 .projects div {
    209     width: calc(50% - 3em);
    210     padding: 0 1em;
    211     background-color: var(--bg-dark);
    212 }
    213 
    214 .projects div h4 {
    215     margin-bottom: 0;
    216 }
    217 
    218 .projects div p {
    219     margin-top: 0.4em;
    220     margin-bottom: 1em;
    221 }