site_vineetk

Source for vineetk.net website
Log | Files | Refs | LICENSE

main.css (3786B)

      1 /* fonts */
      2 @font-face {
      3     font-family: "Comic Mono";
      4     font-weight: normal;
      5     font-style: normal;
      6     font-display: swap;
      7     src: url('/static/ComicMono.ttf');
      8 }
      9 
     10 @font-face {
     11     font-family: "Comic Mono";
     12     font-weight: bold;
     13     font-style: normal;
     14     font-display: swap;
     15     src: url('/static/ComicMono-Bold.ttf');
     16 }
     17 
     18 @font-face {
     19     font-family: 'Comic Neue';
     20     src: local('Comic Neue Italic'), local('ComicNeue-Italic'),
     21          url('/static/ComicNeue-Italic.woff2') format('woff2');
     22     font-weight: normal;
     23     font-style: italic;
     24     font-display: swap;
     25 }
     26 
     27 @font-face {
     28     font-family: 'Comic Neue';
     29     src: local('Comic Neue Bold'), local('ComicNeue-Bold'),
     30          url('/static/ComicNeue-Bold.woff2') format('woff2');
     31     font-weight: bold;
     32     font-style: normal;
     33     font-display: swap;
     34 }
     35 
     36 @font-face {
     37     font-family: 'Comic Neue';
     38     src: local('Comic Neue Bold Italic'), local('ComicNeue-BoldItalic'),
     39          url('/static/ComicNeue-BoldItalic.woff2') format('woff2');
     40     font-weight: bold;
     41     font-style: italic;
     42     font-display: swap;
     43 }
     44 
     45 @font-face {
     46     font-family: 'Comic Neue';
     47     src: local('Comic Neue Regular'), local('ComicNeue-Regular'),
     48          url('/static/ComicNeue-Regular.woff2') format('woff2');
     49     font-weight: normal;
     50     font-style: normal;
     51     font-display: swap;
     52 }
     53 
     54 /* main */
     55 
     56 :root {
     57     /* kaolin valley light */
     58     --background: #faf2e9;
     59     --brbackground: #ebd7be;
     60     --foreground: #5e5854;
     61     --brforeground: #6b6560;
     62     --border: #f0dfca;
     63 
     64     --black: #5e5854;
     65     --brblack: #544b44;
     66     --red: #d42215;
     67     --green: #0d7a75;
     68     --yellow: #d1832e;
     69     --blue: #526af3;
     70     --magenta: #cf44ac;
     71     --cyan: #0bc9cf;
     72     --white: #ebd7be;
     73 }
     74 
     75 @media (prefers-color-scheme: dark) {
     76     :root {
     77 	/* kaolin valley dark */
     78 	--background: #1c1616;
     79 	--brbackground: #5e5854;
     80 	--foreground: #eee6d3;
     81 	--brforeground: #c7c2af;
     82 	--border: #2e2a29;
     83 
     84 	--black: #28211e;
     85 	--brblack: #544b44;
     86 	--red: #e84c58;
     87 	--green: #91f368;
     88 	--yellow: #eed891;
     89 	--blue: #41b0f3;
     90 	--magenta: #cea2ca;
     91 	--cyan: #6bd9db;
     92 	--white: #eee6d3;
     93     }
     94 }
     95 
     96 html {
     97     color: var(--foreground);
     98     background-color: var(--background);
     99 }
    100 
    101 nav {
    102     display: flex;
    103     justify-content: space-between;
    104     align-items: center;
    105     margin-bottom: 1rem;
    106 }
    107 
    108 nav ul {
    109     display: flex;
    110     list-style: none;
    111     margin: 0;
    112     padding: 0;
    113     gap: 1rem;
    114 }
    115 
    116 body {
    117     max-width: 720px;
    118     margin: 0 auto;
    119     padding: 1rem;
    120     font-family: "Comic Neue", "Comic Sans MS", sans-serif;
    121 }
    122 
    123 h2 {
    124     margin-bottom: 0;
    125 }
    126 
    127 a {
    128     color: var(--yellow);
    129     text-decoration: none;
    130 }
    131 
    132 a:hover {
    133     text-decoration: underline;
    134 }
    135 
    136 a:visited {
    137     color: var(--green);
    138 }
    139 
    140 article {
    141     margin: 0 auto;
    142     line-height: 1.3;
    143 }
    144 
    145 article img {
    146     display: block !important;
    147     margin: 0 auto !important;
    148     max-width: 90%;
    149 }
    150 
    151 @media (max-width: 640px) {
    152     article img {
    153 	max-width: calc(100% - 2rem);
    154     }
    155 }
    156 
    157 footer {
    158     margin-top: 2rem;
    159     text-align: center;
    160     font-size: 0.8rem;
    161     color: var(--brblack);
    162 }
    163 
    164 pre {
    165     background-color: var(--brbackground);
    166     padding: 0.25rem 1rem;
    167     margin: 0 -1rem;
    168     max-width: 100%;
    169     overflow-x: auto;
    170 }
    171 
    172 pre, code {
    173     font-family: "Comic Code", "Comic Mono", monospace;
    174 }
    175 
    176 summary {
    177     cursor: pointer;
    178     background-color: var(--brbackground);
    179     padding: 0.25rem 1rem;
    180     margin: 0 -1rem;
    181 }
    182 
    183 details[open] {
    184     border-bottom: 1rem solid var(--border);
    185     margin: 0 -1rem 1rem;
    186     padding: 0 1rem;
    187 }
    188 
    189 blockquote {
    190     border-left: 5px solid var(--border);
    191     background-color: var(--brbackground);
    192     padding: 0 1rem;
    193     margin-left: calc(-1rem - 5px);
    194     margin-right: -1rem;
    195 }
    196 
    197 .text-center {
    198     text-align: center;
    199 }
    200 
    201 .date {
    202     font-family: "Comic Code", "Comic Mono", monospace;
    203 }