squircle

Make all the squircles you need, in the browser. https://github.com/georgedoescode/squircle https://squircley.app/
git clone http://git.hanabi.in/repos/squircle.git
Log | Files | Refs | LICENSE

app.css (3945B)

      1 /* Reset / Normalize */
      2 
      3 @import 'normalize.css';
      4 
      5 html {
      6     box-sizing: border-box;
      7 }
      8 
      9 *,
     10 *::before,
     11 *::after {
     12     box-sizing: inherit;
     13 }
     14 
     15 body,
     16 h1,
     17 h2,
     18 h3,
     19 h4,
     20 h5,
     21 h6,
     22 ul,
     23 ol,
     24 li,
     25 p,
     26 pre,
     27 blockquote,
     28 figure,
     29 hr {
     30     margin: 0;
     31     padding: 0;
     32 }
     33 
     34 ul {
     35     list-style: none;
     36 }
     37 
     38 input,
     39 textarea,
     40 select,
     41 button {
     42     color: inherit;
     43     font: inherit;
     44 }
     45 
     46 input,
     47 textarea,
     48 button {
     49     border: 1px solid grey;
     50 }
     51 
     52 button {
     53     padding: 0.25em 1em;
     54     border-radius: 0;
     55     background-color: transparent;
     56 }
     57 
     58 button > * {
     59     pointer-events: none;
     60 }
     61 
     62 embed,
     63 iframe,
     64 img,
     65 object,
     66 video {
     67     display: block;
     68     max-width: 100%;
     69 }
     70 
     71 table {
     72     table-layout: fixed;
     73     width: 100%;
     74 }
     75 
     76 /* Variables */
     77 
     78 :root {
     79     /* Font family */
     80     --font-family: 'Nunito', system-ui;
     81 
     82     /* Type scale */
     83     --font-size-0: 0.75rem;
     84     --font-size-1: 0.875rem;
     85     --font-size-2: 1rem;
     86     --font-size-3: 1.125rem;
     87     --font-size-4: 1.25rem;
     88     --font-size-5: 1.5rem;
     89     --font-size-6: 1.875rem;
     90     --font-size-7: 2.25rem;
     91     --font-size-8: 3rem;
     92     --font-size-9: 3.75rem;
     93     --font-size-10: 4.5rem;
     94 
     95     /* Spacing */
     96     --spacing-0: 0.25rem;
     97     --spacing-1: 0.5rem;
     98     --spacing-2: 0.75rem;
     99     --spacing-3: 1rem;
    100     --spacing-4: 1.5rem;
    101     --spacing-5: 2rem;
    102     --spacing-6: 3rem;
    103     --spacing-7: 4rem;
    104     --spacing-8: 6rem;
    105     --spacing-9: 8rem;
    106     --spacing-10: 12rem;
    107     --spacing-11: 16rem;
    108     --spacing-12: 24rem;
    109     --spacing-13: 32rem;
    110     --spacing-14: 40rem;
    111     --spacing-15: 48rem;
    112 
    113     /* Colors - Grey */
    114     --grey-900: #102a43;
    115     --grey-800: #243b53;
    116     --grey-700: #334e68;
    117     --grey-600: #486581;
    118     --grey-500: #627d98;
    119     --grey-400: #829ab1;
    120     --grey-300: #9fb3c8;
    121     --grey-200: #bcccdc;
    122     --grey-100: #d9e2ec;
    123     --grey-000: #f0f4f8;
    124 }
    125 
    126 body:not(.user-is-tabbing) button:focus,
    127 body:not(.user-is-tabbing) input:focus,
    128 body:not(.user-is-tabbing) select:focus,
    129 body:not(.user-is-tabbing) textarea:focus {
    130     outline: none;
    131 }
    132 
    133 /* Global Styles */
    134 
    135 body {
    136     font-family: var(--font-family);
    137     line-height: 1;
    138     color: #0c008c;
    139     -webkit-font-smoothing: antialiased;
    140     -moz-osx-font-smoothing: grayscale;
    141     background: var(--grey-000);
    142     overflow-x: hidden;
    143 }
    144 
    145 .app {
    146     /* position: relative; */
    147 }
    148 
    149 /* Ads Stuff */
    150 .carbon-wrapper {
    151     min-height: 125px;
    152     margin-top: var(--spacing-3);
    153     margin-bottom: var(--spacing-3);
    154 }
    155 
    156 #carbonads {
    157     margin-left: auto;
    158     margin-right: auto;
    159     display: flex;
    160     max-width: 330px;
    161     background-color: hsl(0, 0%, 98%);
    162     box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
    163     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    164         Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
    165         sans-serif;
    166 }
    167 
    168 #carbonads a {
    169     color: inherit;
    170     text-decoration: none;
    171 }
    172 
    173 #carbonads a:hover {
    174     color: inherit;
    175 }
    176 
    177 #carbonads span {
    178     position: relative;
    179     display: block;
    180     overflow: hidden;
    181 }
    182 
    183 #carbonads .carbon-wrap {
    184     display: flex;
    185 }
    186 
    187 .carbon-img {
    188     display: block;
    189     margin: 0;
    190     line-height: 1;
    191 }
    192 
    193 .carbon-img img {
    194     display: block;
    195 }
    196 
    197 .carbon-text {
    198     font-size: 13px;
    199     padding: 10px;
    200     line-height: 1.5;
    201     text-align: left;
    202 }
    203 
    204 .carbon-poweredby {
    205     display: block;
    206     padding: 8px 10px;
    207     background: repeating-linear-gradient(
    208             -45deg,
    209             transparent,
    210             transparent 5px,
    211             hsla(0, 0%, 0%, 0.025) 5px,
    212             hsla(0, 0%, 0%, 0.025) 10px
    213         )
    214         hsla(203, 11%, 95%, 0.4);
    215     text-align: center;
    216     text-transform: uppercase;
    217     letter-spacing: 0.5px;
    218     font-weight: 600;
    219     font-size: 9px;
    220     line-height: 1;
    221 }
    222 
    223 @media only screen and (min-width: 62rem) {
    224     .carbon-wrapper {
    225         min-height: 0;
    226         margin-top: 0;
    227         margin-bottom: 0;
    228     }
    229 
    230     #carbonads {
    231         position: fixed;
    232         bottom: var(--spacing-3);
    233         right: var(--spacing-3);
    234         z-index: 100;
    235     }
    236 }