txtodo.app

[DORMANT] the official website of txtodo
git clone git://git.figbert.com/txtodo.app.git
Log | Files | Refs | README | LICENSE

main.css (2421B)

      1 :root {
      2     --text-color: #1C1C1E;
      3     --subtext-color: #8E8E93;
      4     --link-color: #007AFF;
      5     --bg-color-main: #F2F2F7;
      6     --border-color: #CBD5E0;
      7 }
      8 
      9 body, html {
     10     overflow-x: hidden;
     11 }
     12 
     13 body {
     14     color: var(--text-color);
     15     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     16     font-weight: 100;
     17     letter-spacing: 0.05em;
     18     background-color: var(--bg-color-main);
     19     min-height: 100vh;
     20     width: 100vw;
     21 }
     22 
     23 a {
     24     color: var(--link-color);
     25     text-decoration: none;
     26 }
     27 
     28 h1 {
     29     font-size: 4rem;
     30     font-weight: 100;
     31 }
     32 
     33 h2 {
     34     font-weight: 100;
     35 }
     36 
     37 h3 {
     38     color: var(--subtext-color);
     39     font-weight: 100;
     40 }
     41 
     42 img {
     43     width: 100%;
     44     height: auto;
     45 }
     46 
     47 main {
     48     display: grid;
     49     gap: 6rem;
     50     grid-template-columns: repeat(2, minmax(0, 1fr));
     51 }
     52 
     53 main > * {
     54     place-self: center;
     55     padding: 0 4rem;
     56 }
     57 
     58 #download-container {
     59     width: 100%;
     60     display: flex;
     61     justify-content: space-around;
     62     align-content: center;
     63 }
     64 
     65 .download {
     66     width: 8rem;
     67     height: 2rem;
     68     border-radius: 0.5rem;
     69     border: var(--text-color);
     70     border-width: 2px;
     71     border-style: solid;
     72     display: flex;
     73     align-items: center;
     74     color: var(--text-color);
     75     font-size: 0.75rem;
     76     line-height: 1.375;
     77     padding: 0.5rem 0.5rem 0.5rem 0.5rem;
     78     font-weight: bold;
     79 }
     80 
     81 .download > img {
     82     width: 1.25rem;
     83     height: auto;
     84     margin: 0.25rem 0.5rem 0.25rem 0.5rem;
     85 }
     86 
     87 #one-img {
     88     width: 75%;
     89 }
     90 
     91 #note {
     92     text-align: left;
     93     margin: 4rem auto 3rem auto;
     94     max-width: 28rem;
     95     padding: 1.25rem;
     96     border-style: solid;
     97     border-width: 2px;
     98     border-color: var(--border-color);
     99     border-radius: 0.25rem;
    100     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    101     transform: rotate(-2deg);
    102 }
    103 
    104 #note p {
    105     margin-bottom: 0.5rem;
    106 }
    107 
    108 #privacy {
    109     color: var(--subtext-color);
    110     font-size: .5rem;
    111     text-align: center;
    112 }
    113 
    114 @media (prefers-color-scheme: dark) {
    115     :root {
    116         --text-color: #F2F2F7;
    117         --link-color: #0A84FF;
    118         --bg-color-main: #1C1C1E;
    119         --border-color: #2D3748;
    120     }
    121 }
    122 
    123 @media (max-width: 1024px) {
    124     #two-img {
    125         grid-row-start: 4;
    126     }
    127     #two-text {
    128         grid-row-start: 3;
    129     }
    130     main {
    131         grid-template-columns: repeat(1, minmax(0, 1fr));
    132     }
    133 }