spanish-quizzer

An app to quiz you on Spanish vocabulary and verb conjugations
git clone https://git.ashermorgan.net/spanish-quizzer/
Log | Files | Refs | README

app.css (1479B)

      1 /******** home-page component ********/
      2 .home {
      3     min-height: 100vh;
      4     display: flex;
      5     flex-direction: column;
      6 }
      7 
      8 /* resume session banner */
      9 .home #resumeBanner {
     10     text-align: center;
     11     padding: 10px;
     12     background-color: #cccccc;
     13 }
     14 .home #resumeBanner a {
     15     color: var(--foreground-color);
     16     text-decoration: none;
     17 }
     18 .home #resumeBanner button {
     19     position: absolute;
     20     right: 10px;
     21 }
     22 .home #resumeBanner button img {
     23     height: 24px;
     24     width: 24px;
     25 }
     26 .dark .home #resumeBanner {
     27     background-color: #333333;
     28 }
     29 .dark .home #resumeBanner button {
     30     filter: invert(90%);
     31 }
     32 
     33 /* main content */
     34 .home main {
     35     flex-grow: 1;
     36     margin: 10px;
     37     display: flex;
     38     flex-direction: column;
     39     justify-content: center;
     40     align-items: center;
     41 }
     42 .home h1 {
     43     font-size: 40px;
     44     max-width: 500px;
     45 }
     46 .home main div {
     47     margin: 10px 0px;
     48     width: 510px;
     49     display: flex;
     50     flex-direction: row;
     51 }
     52 .home main div button {
     53     flex-grow: 1;
     54     height: 50px;
     55     line-height: 50px;
     56     margin: 0px 5px;
     57 }
     58 
     59 /* mobile styles */
     60 @media only screen and (max-width: 550px) {
     61     .home main {
     62         justify-content: flex-start;
     63     }
     64     .home h1 {
     65         width: 100%;
     66         font-size: 30px;
     67         text-align: center;
     68     }
     69     .home main div {
     70         flex-direction: column;
     71         align-items: stretch;
     72         width: 100%;
     73     }
     74     .home main div button {
     75         height: 60px;
     76         line-height: 60px;
     77         margin: 10px 0px;
     78     }
     79 }