limestone

No description
git clone git://niliara.net/limestone
Log | Files | Refs

style.css (2163B)

      1 body {
      2     font-family: sans-serif;
      3     font-size: 1.6em;
      4     margin: 0;
      5 
      6     width: 1200px;
      7     max-width: 90%;
      8     margin: 0 auto;
      9 }
     10 
     11 * {
     12     font-weight: normal;
     13 }
     14 
     15 header {
     16     height: 4em;
     17 
     18     display: flex;
     19     justify-content: space-between;
     20     align-content: center;
     21     align-items: center;
     22 }
     23 
     24 
     25 form {
     26     height: 2em;
     27 
     28     align-content: center;
     29     display: grid;
     30     grid-template-columns: auto 2.4em;
     31 
     32     width: 20em;
     33 }
     34 
     35 form input, form button {
     36     border: none;
     37     background-color: #eee;
     38     box-sizing: border-box;
     39 
     40     border-radius: 0.2em;
     41     padding: 0.4em
     42 }
     43 
     44 form input[type=text] {
     45     font-size: 0.8em;
     46     padding-left: 1em;
     47     height: 100%;
     48 
     49     border-top-right-radius: 0;
     50     border-bottom-right-radius: 0;
     51     outline: none !important;
     52 }
     53 
     54 form button {
     55     font-size: 1em;
     56     height: 2em;
     57 
     58     border-top-left-radius: 0;
     59     border-bottom-left-radius: 0;
     60     aspect-ratio: 1;
     61 }
     62 
     63 form button svg {
     64     height: 100%;
     65 }
     66 
     67 
     68 
     69 .about {
     70     display: flex;
     71     flex-wrap: nowrap;
     72     justify-content: center;
     73 }
     74 
     75 .about .text {
     76     margin: 0 2em;
     77     align-content: center;
     78 }
     79 
     80 .about .text span {
     81     display: block;
     82     width: 80%;
     83     font-size: 1.4em;
     84     margin: 1em 0;
     85 }
     86 
     87 .about .image {
     88     transition: 0.3s;
     89 
     90     width: 10em;
     91     box-shadow: -1.4em -1.4em #ccc;
     92     margin-top: 1.4em;
     93     margin-left: 1.4em;
     94 }
     95 
     96 .about .image img {
     97     transition: 0.3s;
     98 
     99     width: 10em;
    100     box-shadow: -0.7em -0.7em #aaa;
    101     position: relative;
    102     top: 0;
    103     left: 0;
    104 }
    105 
    106 .about div:hover .image {
    107     box-shadow: -2em -2em #ccc;
    108 }
    109 
    110 .about div:hover .image img {
    111     width: 10em;
    112     box-shadow: -1.3em -1.3em #aaa;
    113 
    114     position: relative;
    115     top: 0.6em;
    116     left: 0.6em;
    117 }
    118 
    119 .about p {
    120     margin-bottom: 0.4em;
    121 }
    122 
    123 .about .buttons {
    124     display: flex;
    125     gap: 1em;
    126 }
    127 
    128 button.normal {
    129     transition: 0.1s;
    130     font-size: 0.7em;
    131 
    132     line-height: 2em;
    133     padding: 0.1em 1em;
    134 
    135     background-color: white;
    136     border: 2px solid #888;
    137 
    138     position: relative;
    139     top: -0.2em;
    140     left: -0.2em;
    141 
    142     box-shadow: 0.3em 0.3em #888;
    143 }
    144 
    145 button.normal:hover {
    146     position: relative;
    147     top: 0;
    148     left: 0;
    149 
    150     box-shadow: 0.1em 0.1em #888;
    151 }