diff options
41 files changed, 429 insertions, 467 deletions
diff --git a/site/layouts/about/single.html b/site/layouts/about/single.html index ddcdd5f..daa30a3 100644 --- a/site/layouts/about/single.html +++ b/site/layouts/about/single.html @@ -1,6 +1,6 @@ {{ partial "header" . }} {{ partial "nav" . }} -{{ partial "jumbotron" (dict "imageUrl" "/img/about/jumbotron.jpg" "title" "About us" "subtitle" "Our values") }} +{{ partial "jumbotron" (dict "imageUrl" "/img/about/jumbotron.jpg" "title" "Values") }} <div class="mw7 center ph3 pt4"> diff --git a/site/layouts/contact/single.html b/site/layouts/contact/single.html index e98f8d1..1e36be3 100644 --- a/site/layouts/contact/single.html +++ b/site/layouts/contact/single.html @@ -2,7 +2,7 @@ {{ partial "nav" . }} -<div class="bg-black white ph3"> +<div class="ph3 bg-off-white"> <div class="center mw6 pv3"> <img src="/img/logo.svg" alt="" class="db w4 center pv4"> <p>We’d love to get in touch with you and hear your ideas and questions. We strive to grow and improve constantly and your feedback is valuable for us.</p> diff --git a/site/layouts/index.html b/site/layouts/index.html index fa1b5cb..eec5318 100644 --- a/site/layouts/index.html +++ b/site/layouts/index.html @@ -6,10 +6,10 @@ {{ partial "short-text" (dict "heading" "Why Kaldi?" "text" "Kaldi is the coffee store for everyone who believes that great coffee shouldn't just taste good, it should do good too. We source all of our beans directly from small scale sustainable farmers and make sure part of the profits are reinvested in their communities.")}} -{{ partial "2-up" (dict "heading" "What we offer" "description" "Kaldi is the ultimate spot for coffee lovers who want to learn about their java’s origin and support the farmers that grew it. We take coffee production, roasting and brewing seriously and we’re glad to pass that knowledge to anyone." "svg1" "img/illustrations/coffee.svg" "text1" "We sell green and roasted coffee beans that are sourced directly from independent farmers and farm cooperatives. We’re proud to offer a variety of coffee beans grown with great care for the environment and local communities. Check our post or contact us directly for current availability." "svg2" "/img/illustrations/coffee-gear.svg" "text2" "We offer a small, but carefully curated selection of brewing gear and tools for every taste and experience level. No matter if you roast your own beans or just bought your first french press, you’ll find a gadget to fall in love with in our shop." "buttonText" "See all products" ) }} +{{ partial "2-up" (dict "heading" "What we offer" "description" "Kaldi is the ultimate spot for coffee lovers who want to learn about their java’s origin and support the farmers that grew it. We take coffee production, roasting and brewing seriously and we’re glad to pass that knowledge to anyone." "svg1" "img/illustrations/coffee.svg" "text1" "We sell green and roasted coffee beans that are sourced directly from independent farmers and farm cooperatives. We’re proud to offer a variety of coffee beans grown with great care for the environment and local communities. Check our post or contact us directly for current availability." "svg2" "/img/illustrations/coffee-gear.svg" "text2" "We offer a small, but carefully curated selection of brewing gear and tools for every taste and experience level. No matter if you roast your own beans or just bought your first french press, you’ll find a gadget to fall in love with in our shop." "buttonText" "See all products" "buttonLink" "/products" ) }} -{{ partial "about" (dict "heading" "Our values" "text" "Coffee is an amazing part of human culture but it has a dark side too – one of colonialism and mindless abuse of natural resources and human lives. We want to turn this around and return the coffee trade to the drink’s exhilarating, empowering and unifying nature." "buttonText" "Read more") }} +{{ partial "about" (dict "heading" "Our values" "text" "Coffee is an amazing part of human culture but it has a dark side too – one of colonialism and mindless abuse of natural resources and human lives. We want to turn this around and return the coffee trade to the drink’s exhilarating, empowering and unifying nature." "buttonText" "Read more" "buttonLink" "/about") }} -{{ partial "post" . }} +{{ partial "blog" . }} {{ partial "footer" . }} diff --git a/site/layouts/indexes/post.html b/site/layouts/indexes/post.html index a60f513..84b9279 100644 --- a/site/layouts/indexes/post.html +++ b/site/layouts/indexes/post.html @@ -1,7 +1,7 @@ {{ partial "header" . }} {{ partial "nav" . }} -{{ partial "jumbotron" (dict "imageUrl" "/img/post-index.jpg" "title" "post") }} +{{ partial "jumbotron" (dict "imageUrl" "/img/post-index.jpg" "title" "Latests stories") }} <div class="mw7 center"> <ul class="flex-ns flex-wrap mhn1-ns pa3"> diff --git a/site/layouts/partials/2-up.html b/site/layouts/partials/2-up.html index d4f30fe..06849f0 100644 --- a/site/layouts/partials/2-up.html +++ b/site/layouts/partials/2-up.html @@ -17,7 +17,7 @@ {{ if .buttonText }} <div class="tc"> - <a href="#" class="btn raise">{{.buttonText}}</a> + <a href="{{.buttonLink}}" class="btn raise">{{.buttonText}}</a> </div> {{ end }} </div> diff --git a/site/layouts/partials/4-up.html b/site/layouts/partials/4-up.html index dff48b4..dcfbbbf 100644 --- a/site/layouts/partials/4-up.html +++ b/site/layouts/partials/4-up.html @@ -29,7 +29,7 @@ {{ if .buttonText }} <div class="tc"> - <a href="#" class="btn raise">{{.buttonText}}</a> + <a href="{{.buttonLink}}" class="btn raise">{{.buttonText}}</a> </div> {{ end }} </div> diff --git a/site/layouts/partials/about.html b/site/layouts/partials/about.html index 657aead..ff3bd7c 100644 --- a/site/layouts/partials/about.html +++ b/site/layouts/partials/about.html @@ -14,7 +14,7 @@ </div> <div class="tc"> - <a href="#" class="btn raise">{{.buttonText}}</a> + <a href="{{.buttonLink}}" class="btn raise">{{.buttonText}}</a> </div> </div> diff --git a/site/layouts/partials/blog.html b/site/layouts/partials/blog.html new file mode 100644 index 0000000..dd34f7d --- /dev/null +++ b/site/layouts/partials/blog.html @@ -0,0 +1,22 @@ +<div class="bg-off-white pv4"> + <div class="ph3 mw7 center"> + + <h2 class="f2 b lh-title mb3">Latests stories</h1> + + + <div class="w-100 flex-ns mhn1-ns flex-wrap mb3"> + + {{ range where .Data.Pages "Type" "post" }} + <div class="ph1-ns w-50-ns flex"> + {{ .Render "li" }} + </div> + {{ end }} + + </div> + + <div class="tc"> + <a href="/post" class="btn raise">Read more</a> + </div> + + </div> +</div> diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html index 629e288..8c67d06 100644 --- a/site/layouts/partials/footer.html +++ b/site/layouts/partials/footer.html @@ -1,21 +1,19 @@ <footer class="bg-black ph3 pv4 white"> <div class="mw7 center pt3"> + <div class="measure-narrow center mb4"> + <img src="/img/logo.svg" alt="" class="db w4 center mb4"> <p class="f3 lh-title light-gray b tc mb2">Newsletter subscribe</p> <p>Get awesome news from us in your inbox every two weeks. Be the first to learn about new products.</p> - <form action="" class="flex-ns mb3"> - <fieldset class="flex-auto mb2 mb0-ns mr2-ns"> - <input type="text" id="email" placeholder="Your email" class="w-100"> - <label for="email">Your email</label> - </fieldset> - <button class="btn mb3 w-100 w-auto-ns mb0-ns raise" type="submit">Submit</button> - </form> + {{ partial "newsletter-form" . }} + </div> <div class="flex-ns justify-between"> + <div> <h3 class="f4 b lh-title mb1 primary">List of links</h3> <ul class="mb3"> @@ -45,6 +43,7 @@ {{ partial "social-icon" (dict "link" "facebook.com" "svg" "Amazon") }} </ul> </div> + </div> </div> diff --git a/site/layouts/partials/media-block-reverse.html b/site/layouts/partials/media-block-reverse.html index a7b8c18..9cd463d 100644 --- a/site/layouts/partials/media-block-reverse.html +++ b/site/layouts/partials/media-block-reverse.html @@ -1,10 +1,10 @@ -<div class="flex-ns mhn3-ns mb4"> +<div class="flex-m mhn3-m mb4"> - <div class="ph3-ns w-50-ns order-last-ns"> + <div class="ph3-m w-50-m order-last-m"> <img src="{{.imageUrl}}" alt="" class="db mb2"> </div> - <div class="ph3-ns w-50-ns"> + <div class="ph3-m w-50-m"> <h3 class="f3 b lh-title mb1">{{.heading}}</h3> <p>{{.text}}</p> </div> diff --git a/site/layouts/partials/media-block.html b/site/layouts/partials/media-block.html index db5f619..d00b1ee 100644 --- a/site/layouts/partials/media-block.html +++ b/site/layouts/partials/media-block.html @@ -1,10 +1,10 @@ -<div class="flex-ns mhn3-ns mb4"> +<div class="flex-m mhn3-m mb4"> - <div class="ph3-ns w-50-ns"> + <div class="ph3-m w-50-m"> <img src="{{.imageUrl}}" alt="" class="db mb2"> </div> - <div class="ph3-ns w-50-ns"> + <div class="ph3-m w-50-m"> <h3 class="f3 b lh-title mb1">{{.heading}}</h3> <p>{{.text}}</p> </div> diff --git a/site/layouts/partials/nav.html b/site/layouts/partials/nav.html index 8225a10..58c56de 100644 --- a/site/layouts/partials/nav.html +++ b/site/layouts/partials/nav.html @@ -1,12 +1,12 @@ <nav class="overflow-x-scroll flex justify-between center bg-white divider"> - <a href="/" class="pa3 dib mr4 flex-none"> - <img src="/img/logo.svg" alt="" width="80px"> - </a> + <a href="/" class="pa3 dib mr4 flex-none"> + <img src="/img/logo.svg" width="80px" alt="Kaldi logo" class="br0"/> + </a> - <ul class="flex b grey-3"> - <li><a href="/products" class="pa3 link db">Products</a></li> - <li><a href="/about" class="pa3 link db">About</a></li> - <li><a href="/post" class="pa3 link db">post</a></li> - <li><a href="/contact" class="pa3 link db">Contact</a></li> - </ul> + <ul class="flex b grey-3"> + <li><a href="/products" class="pa3 link db">Products</a></li> + <li><a href="/about" class="pa3 link db">Values</a></li> + <li><a href="/post" class="pa3 link db">Blog</a></li> + <li><a href="/contact" class="pa3 link db">Contact</a></li> + </ul> </nav> diff --git a/site/layouts/partials/newsletter-form.html b/site/layouts/partials/newsletter-form.html new file mode 100644 index 0000000..990d74c --- /dev/null +++ b/site/layouts/partials/newsletter-form.html @@ -0,0 +1,10 @@ +<form action="" class="flex-ns mb3"> + + <fieldset class="flex-auto mb2 mb0-ns mr2-ns" name="newsletter" action="newsletter-subscribe"> + <input type="text" id="email" placeholder="Your email" class="w-100"> + <label for="email">Your email</label> + </fieldset> + + <button class="btn mb3 w-100 w-auto-ns mb0-ns raise" type="submit">Submit</button> + +</form> diff --git a/site/layouts/partials/post.html b/site/layouts/partials/post.html deleted file mode 100644 index c8f5ff1..0000000 --- a/site/layouts/partials/post.html +++ /dev/null @@ -1,22 +0,0 @@ -<div class="bg-off-white"> - <div class="ph3 mw7 center mb4"> - - <h2 class="f2 b lh-title mb2">post section</h1> - - - <div class="flex-l mhn1-l flex-wrap mb3"> - - {{ range where .Data.Pages "Type" "post" }} - <div class="ph1-l w-50-l flex"> - {{ .Render "li" }} - </div> - {{ end }} - - </div> - - <div class="tc"> - <a href="/post" class="btn mb3 raise">Read more</a> - </div> - - </div> -</div> diff --git a/site/layouts/partials/social-icon.html b/site/layouts/partials/social-icon.html index 6d616be..a08ecd9 100644 --- a/site/layouts/partials/social-icon.html +++ b/site/layouts/partials/social-icon.html @@ -1,5 +1,5 @@ -<li class="dib ph2"> - <a href="{{.link}}" class="link bg-white black db relative br-100 pa2 raise"> +<li class="dib ph2 raise"> + <a href="{{.link}}" class="link bg-white black db relative br-100 pa2"> <svg width="16px" height="16px" class="db"> <use xlink:href="#{{.svg}}"></use> </svg> diff --git a/site/layouts/products/single.html b/site/layouts/products/single.html index 0124e39..921763d 100644 --- a/site/layouts/products/single.html +++ b/site/layouts/products/single.html @@ -22,7 +22,7 @@ {{ partial "blockquote" (dict "quote" "“Kaldi is the place to go if you want the best quality coffee. I love their stance on empowering farmers and transparency.”" "author" "Philipp Trommler") }} <!-- Full-width image --> -<img src="/img/products/products-full-width.jpg" alt="" class="db"> +<img src="/img/products/products-full-width.jpg" alt="" class="db w-100"> {{ partial "table" (dict "heading" "Monthly subscriptions" "text" "We make it easy to make great coffee a part of your life. Choose one of our monthly subscription plans to receive great coffee at your doorstep each month. Contact us about more details and payment info.") }} diff --git a/site/static/admin/config.yml b/site/static/admin/config.yml index 657ec6d..0cff9c1 100644 --- a/site/static/admin/config.yml +++ b/site/static/admin/config.yml @@ -1,9 +1,9 @@ backend: name: github - repo: owner/repo # Path to your Github repository + repo: darindimitroff/netlify-cms-template # Path to your Github repository branch: master # Branch to update (master by default) -media_folder: "img/uploads" # Folder where user uploaded files should go +media_folder: "/img/uploads" # Folder where user uploaded files should go collections: # A list of collections the CMS should be able to edit - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit diff --git a/site/static/admin/index.html b/site/static/admin/index.html index 69d8a76..c085727 100644 --- a/site/static/admin/index.html +++ b/site/static/admin/index.html @@ -1,19 +1,16 @@ <!doctype html> <html> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - - <title>Content Manager</title> - <!-- Include the stylesheets from your site here --> - <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.1/dist/cms.css" /> - <!-- Include a CMS specific stylesheet here --> - - </head> - - <body> - <script src="https://unpkg.com/netlify-cms@^0.1/dist/cms.js"></script> - </body> + <title>Content Manager</title> + <!-- Include the stylesheets from your site here --> + <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^0.1/dist/cms.css" /> + <!-- Include a CMS specific stylesheet here --> +</head> +<body> + <script src="https://unpkg.com/netlify-cms@^0.1/dist/cms.js"></script> +</body> </html> diff --git a/src/css/imports/_border-radius.css b/src/css/imports/_border-radius.css index 2422bd2..8cde05d 100755 --- a/src/css/imports/_border-radius.css +++ b/src/css/imports/_border-radius.css @@ -1,119 +1,89 @@ -/* - - BORDER RADIUS - Docs: http://tachyons.io/docs/themes/border-radius/ - - Base: - br = border-radius - - Modifiers: - 0 = 0/none - 1 = 1st step in scale - 2 = 2nd step in scale - 3 = 3rd step in scale - 4 = 4th step in scale - - Literal values: - -100 = 100% - -pill = 9999px - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - - :root { - --border-radius: .25rem; - } - - .br0 { border-radius: 0; } - .br1 { border-radius: var(--border-radius); } - .br-100 { border-radius: 100%; } - .br-pill { border-radius: 9999px; } - .br--bottom { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .br--top { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .br--right { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .br--left { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } +.br0 { border-radius: 0!important; } +.br1 { border-radius: var(--border-radius); } +.br-100 { border-radius: 100%; } +.br-pill { border-radius: 9999px; } +.br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} @media (--breakpoint-not-small) { - .br0-ns { border-radius: 0; } - .br1-ns { border-radius: var(--border-radius); } - .br-100-ns { border-radius: 100%; } - .br-pill-ns { border-radius: 9999px; } - .br--bottom-ns { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .br--top-ns { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .br--right-ns { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .br--left-ns { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } +.br0-ns { border-radius: 0; } +.br1-ns { border-radius: var(--border-radius); } +.br-100-ns { border-radius: 100%; } +.br-pill-ns { border-radius: 9999px; } +.br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} } @media (--breakpoint-medium) { - .br0-m { border-radius: 0; } - .br1-m { border-radius: var(--border-radius); } - .br-100-m { border-radius: 100%; } - .br-pill-m { border-radius: 9999px; } - .br--bottom-m { - border-top-left-radius: 0; - border-top-right-radius: 0; - } - .br--top-m { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .br--right-m { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .br--left-m { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } +.br0-m { border-radius: 0; } +.br1-m { border-radius: var(--border-radius); } +.br-100-m { border-radius: 100%; } +.br-pill-m { border-radius: 9999px; } +.br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} } @media (--breakpoint-large) { - .br0-l { border-radius: 0; } - .br1-l { border-radius: var(--border-radius); } - .br-100-l { border-radius: 100%; } - .br-pill-l { border-radius: 9999px; } - .br--bottom-l { - border-radius-top-left: 0; - border-radius-top-right: 0; - } - .br--top-l { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .br--right-l { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .br--left-l { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } +.br0-l { border-radius: 0; } +.br1-l { border-radius: var(--border-radius); } +.br-100-l { border-radius: 100%; } +.br-pill-l { border-radius: 9999px; } +.br--bottom-l { + border-radius-top-left: 0; + border-radius-top-right: 0; +} +.br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} } diff --git a/src/css/imports/_border-widths.css b/src/css/imports/_border-widths.css index e3b6885..2af7d7e 100755 --- a/src/css/imports/_border-widths.css +++ b/src/css/imports/_border-widths.css @@ -23,9 +23,9 @@ .bw0 { border-width: 0; } .bw1 { border-width: .125rem; } -.bw2 { border-width: .25rem; } -.bw3 { border-width: .5rem; } -.bw4 { border-width: 1rem; } +.bw2 { border-width: var(--spacing-extra-small); } +.bw3 { border-width: var(--spacing-small); } +.bw4 { border-width: var(--spacing-medium); } .bw5 { border-width: 2rem; } /* Resets */ @@ -37,9 +37,9 @@ @media (--breakpoint-not-small) { .bw0-ns { border-width: 0; } .bw1-ns { border-width: .125rem; } - .bw2-ns { border-width: .25rem; } - .bw3-ns { border-width: .5rem; } - .bw4-ns { border-width: 1rem; } + .bw2-ns { border-width: var(--spacing-extra-small); } + .bw3-ns { border-width: var(--spacing-small); } + .bw4-ns { border-width: var(--spacing-medium); } .bw5-ns { border-width: 2rem; } .bt-0-ns { border-top-width: 0; } .br-0-ns { border-right-width: 0; } @@ -50,9 +50,9 @@ @media (--breakpoint-medium) { .bw0-m { border-width: 0; } .bw1-m { border-width: .125rem; } - .bw2-m { border-width: .25rem; } - .bw3-m { border-width: .5rem; } - .bw4-m { border-width: 1rem; } + .bw2-m { border-width: var(--spacing-extra-small); } + .bw3-m { border-width: var(--spacing-small); } + .bw4-m { border-width: var(--spacing-medium); } .bw5-m { border-width: 2rem; } .bt-0-m { border-top-width: 0; } .br-0-m { border-right-width: 0; } @@ -63,9 +63,9 @@ @media (--breakpoint-large) { .bw0-l { border-width: 0; } .bw1-l { border-width: .125rem; } - .bw2-l { border-width: .25rem; } - .bw3-l { border-width: .5rem; } - .bw4-l { border-width: 1rem; } + .bw2-l { border-width: var(--spacing-extra-small); } + .bw3-l { border-width: var(--spacing-small); } + .bw4-l { border-width: var(--spacing-medium); } .bw5-l { border-width: 2rem; } .bt-0-l { border-top-width: 0; } .br-0-l { border-right-width: 0; } diff --git a/src/css/imports/_buttons.css b/src/css/imports/_buttons.css index 57cb4ff..effdd3b 100644 --- a/src/css/imports/_buttons.css +++ b/src/css/imports/_buttons.css @@ -1,7 +1,7 @@ .btn { display: inline-block; padding: 12px 16px 10px; - font-size: 1rem; + font-size: var(--spacing-medium); line-height: 1.25; background-color: var(--white); border-radius: var(--border-radius); @@ -10,4 +10,5 @@ color: var(--primary); text-align: center; box-shadow: inset 0 0 0 2px var(--primary); + transition: var(--hover-transition); } diff --git a/src/css/imports/_cms.css b/src/css/imports/_cms.css index e82565e..a259cd2 100644 --- a/src/css/imports/_cms.css +++ b/src/css/imports/_cms.css @@ -1,13 +1,92 @@ .cms { - & h1, h2, h3, h4, h5, h6 { - font-weight: bold; + + /* Headings */ + & h1, & h2, & h3, & h4, & h5, & h6 { + font-weight: bold; + line-height: 1.25; + margin-bottom: var(--spacing-small); } - & a { + + & h1 { + font-size: 2.25rem; + } + + & h2 { + font-size: 1.5rem; + } + + & h3 { + font-size: 1.25rem; + } + + & h4 { + font-size: 1rem;; + } + + & h5 { + font-size: .875rem; + } + + /* Links */ + & a { + color: var(--primary); + transition: var(--hover-transition); + &:hover { + background-color: var(--highlight); + color: var(--black); + } + } + + /* Lists */ + & ul, & ol, & li { + position: relative; + } + + & ul, & ol { + margin-bottom: var(--spacing-medium); + } + + & ul ul, & ol ol { + padding-left: var(--spacing-small); + } + + & ul { + margin-left: 1.33rem; + & >li:before { + content: '★'; + left: -1.33rem; + position: absolute; + color: var(--primary); + } + } + + & ol { + list-style: none; + margin-left: var(--spacing-medium); + counter-reset: i 0; + & >li:before { + font-weight: 800; + left: -var(--spacing-medium); + position: absolute; + height: 100%; + content: counter(i); + counter-increment: i; + color: var(--primary); + } + } + + /* Blockquotes */ + & blockquote { + background-color: var(--grey-1); + display: block; + border-radius: var(--border-radius); + padding: var(--spacing-medium); color: var(--primary); - transition: var(--hover-transition); - &:hover { - background-color: var(--highlight); - color: var(--black); + font-weight: 700; + font-size: 1.25rem;; + margin-bottom: var(--spacing-medium); + & p { + margin: 0; } } } diff --git a/src/css/imports/_code.css b/src/css/imports/_code.css index ac691f3..0c7c820 100755 --- a/src/css/imports/_code.css +++ b/src/css/imports/_code.css @@ -1,11 +1,8 @@ -/* - - CODE - -*/ - -.pre { +pre { overflow-x: auto; overflow-y: hidden; - overflow: scroll; + overflow: scroll; + margin-bottom: var(--spacing-medium); + background-color: var(--grey-1); + padding: var(--spacing-small); } diff --git a/src/css/imports/_colors.css b/src/css/imports/_colors.css index 9d09e73..7449191 100755 --- a/src/css/imports/_colors.css +++ b/src/css/imports/_colors.css @@ -87,8 +87,8 @@ } .bg-fix-primary { - padding: 0 .5rem; + padding: 0 var(--spacing-small); & :first-child { - box-shadow: .5rem 0 0 var(--primary), -.5rem 0 0 var(--primary); + box-shadow: var(--spacing-small) 0 0 var(--primary), -var(--spacing-small) 0 0 var(--primary); } } diff --git a/src/css/imports/_coordinates.css b/src/css/imports/_coordinates.css index bf8e6d7..53e43de 100755 --- a/src/css/imports/_coordinates.css +++ b/src/css/imports/_coordinates.css @@ -30,20 +30,20 @@ .bottom-0 { bottom: 0; } .left-0 { left: 0; } -.top-1 { top: 1rem; } -.right-1 { right: 1rem; } -.bottom-1 { bottom: 1rem; } -.left-1 { left: 1rem; } +.top-1 { top: var(--spacing-medium); } +.right-1 { right: var(--spacing-medium); } +.bottom-1 { bottom: var(--spacing-medium); } +.left-1 { left: var(--spacing-medium); } .top-2 { top: 2rem; } .right-2 { right: 2rem; } .bottom-2 { bottom: 2rem; } .left-2 { left: 2rem; } -.top--1 { top: -1rem; } -.right--1 { right: -1rem; } -.bottom--1 { bottom: -1rem; } -.left--1 { left: -1rem; } +.top--1 { top: -var(--spacing-medium); } +.right--1 { right: -var(--spacing-medium); } +.bottom--1 { bottom: -var(--spacing-medium); } +.left--1 { left: -var(--spacing-medium); } .top--2 { top: -2rem; } .right--2 { right: -2rem; } @@ -63,18 +63,18 @@ .left-0-ns { left: 0; } .right-0-ns { right: 0; } .bottom-0-ns { bottom: 0; } - .top-1-ns { top: 1rem; } - .left-1-ns { left: 1rem; } - .right-1-ns { right: 1rem; } - .bottom-1-ns { bottom: 1rem; } + .top-1-ns { top: var(--spacing-medium); } + .left-1-ns { left: var(--spacing-medium); } + .right-1-ns { right: var(--spacing-medium); } + .bottom-1-ns { bottom: var(--spacing-medium); } .top-2-ns { top: 2rem; } .left-2-ns { left: 2rem; } .right-2-ns { right: 2rem; } .bottom-2-ns { bottom: 2rem; } - .top--1-ns { top: -1rem; } - .right--1-ns { right: -1rem; } - .bottom--1-ns { bottom: -1rem; } - .left--1-ns { left: -1rem; } + .top--1-ns { top: -var(--spacing-medium); } + .right--1-ns { right: -var(--spacing-medium); } + .bottom--1-ns { bottom: -var(--spacing-medium); } + .left--1-ns { left: -var(--spacing-medium); } .top--2-ns { top: -2rem; } .right--2-ns { right: -2rem; } .bottom--2-ns { bottom: -2rem; } @@ -92,18 +92,18 @@ .left-0-m { left: 0; } .right-0-m { right: 0; } .bottom-0-m { bottom: 0; } - .top-1-m { top: 1rem; } - .left-1-m { left: 1rem; } - .right-1-m { right: 1rem; } - .bottom-1-m { bottom: 1rem; } + .top-1-m { top: var(--spacing-medium); } + .left-1-m { left: var(--spacing-medium); } + .right-1-m { right: var(--spacing-medium); } + .bottom-1-m { bottom: var(--spacing-medium); } .top-2-m { top: 2rem; } .left-2-m { left: 2rem; } .right-2-m { right: 2rem; } .bottom-2-m { bottom: 2rem; } - .top--1-m { top: -1rem; } - .right--1-m { right: -1rem; } - .bottom--1-m { bottom: -1rem; } - .left--1-m { left: -1rem; } + .top--1-m { top: -var(--spacing-medium); } + .right--1-m { right: -var(--spacing-medium); } + .bottom--1-m { bottom: -var(--spacing-medium); } + .left--1-m { left: -var(--spacing-medium); } .top--2-m { top: -2rem; } .right--2-m { right: -2rem; } .bottom--2-m { bottom: -2rem; } @@ -121,18 +121,18 @@ .left-0-l { left: 0; } .right-0-l { right: 0; } .bottom-0-l { bottom: 0; } - .top-1-l { top: 1rem; } - .left-1-l { left: 1rem; } - .right-1-l { right: 1rem; } - .bottom-1-l { bottom: 1rem; } + .top-1-l { top: var(--spacing-medium); } + .left-1-l { left: var(--spacing-medium); } + .right-1-l { right: var(--spacing-medium); } + .bottom-1-l { bottom: var(--spacing-medium); } .top-2-l { top: 2rem; } .left-2-l { left: 2rem; } .right-2-l { right: 2rem; } .bottom-2-l { bottom: 2rem; } - .top--1-l { top: -1rem; } - .right--1-l { right: -1rem; } - .bottom--1-l { bottom: -1rem; } - .left--1-l { left: -1rem; } + .top--1-l { top: -var(--spacing-medium); } + .right--1-l { right: -var(--spacing-medium); } + .bottom--1-l { bottom: -var(--spacing-medium); } + .left--1-l { left: -var(--spacing-medium); } .top--2-l { top: -2rem; } .right--2-l { right: -2rem; } .bottom--2-l { bottom: -2rem; } diff --git a/src/css/imports/_forms.css b/src/css/imports/_forms.css index 12ee7c6..3d7cab3 100755 --- a/src/css/imports/_forms.css +++ b/src/css/imports/_forms.css @@ -1,9 +1,3 @@ -/* - - FORMS - -*/ - fieldset { position: relative; @@ -24,9 +18,10 @@ input, textarea { background-color: var(--grey-2); border-radius: var(--border-radius); padding: 12px 16px 10px; - font-size: 1rem; + font-size: var(--spacing-medium); line-height: 1.25; position: relative; + transition: var(--hover-transition); z-index: 2; &:focus { background-color: var(--white); @@ -40,25 +35,25 @@ input, textarea { ::-webkit-input-placeholder { color: var(--black); - font-size: 1rem; + font-size: var(--spacing-medium); line-height: normal; } :-moz-placeholder { color: var(--black); - font-size: 1rem; + font-size: var(--spacing-medium); line-height: normal; } ::-moz-placeholder { color: var(--black); - font-size: 1rem; + font-size: var(--spacing-medium); line-height: normal; } :-ms-input-placeholder { color: var(--black); - font-size: 1rem; + font-size: var(--spacing-medium); line-height: normal; } @@ -68,10 +63,11 @@ label font-weight: 800; color: var(--primary); background-color: var(--grey-2); - border-radius: .25rem; - padding: .25rem .5rem; + border-radius: var(--border-radius); + padding: var(--spacing-extra-small) var(--spacing-small); position: absolute; left: 0; + top: 0; pointer-events: none; opacity: 0; line-height: 1; diff --git a/src/css/imports/_heights.css b/src/css/imports/_heights.css index 44108db..6ada204 100755 --- a/src/css/imports/_heights.css +++ b/src/css/imports/_heights.css @@ -33,7 +33,7 @@ /* Height Scale */ -.h1 { height: 1rem; } +.h1 { height: var(--spacing-medium); } .h2 { height: 2rem; } .h3 { height: 4rem; } .h4 { height: 8rem; } @@ -64,7 +64,7 @@ .h-inherit { height: inherit; } @media (--breakpoint-not-small) { - .h1-ns { height: 1rem; } + .h1-ns { height: var(--spacing-medium); } .h2-ns { height: 2rem; } .h3-ns { height: 4rem; } .h4-ns { height: 8rem; } @@ -84,7 +84,7 @@ } @media (--breakpoint-medium) { - .h1-m { height: 1rem; } + .h1-m { height: var(--spacing-medium); } .h2-m { height: 2rem; } .h3-m { height: 4rem; } .h4-m { height: 8rem; } @@ -104,7 +104,7 @@ } @media (--breakpoint-large) { - .h1-l { height: 1rem; } + .h1-l { height: var(--spacing-medium); } .h2-l { height: 2rem; } .h3-l { height: 4rem; } .h4-l { height: 8rem; } diff --git a/src/css/imports/_images.css b/src/css/imports/_images.css index 0298cea..4cc50a4 100755 --- a/src/css/imports/_images.css +++ b/src/css/imports/_images.css @@ -1,11 +1,7 @@ -/* - - IMAGES - Docs: http://tachyons.io/docs/elements/images/ - -*/ - -/* Responsive images! */ - -img { max-width: 100%; } +img { + max-width: 100%; +} +img:not(.w-100) { + border-radius: var(--border-radius); +} diff --git a/src/css/imports/_max-widths.css b/src/css/imports/_max-widths.css index e4175fa..516a31a 100755 --- a/src/css/imports/_max-widths.css +++ b/src/css/imports/_max-widths.css @@ -35,7 +35,7 @@ /* Max Width Scale */ -.mw1 { max-width: 1rem; } +.mw1 { max-width: var(--spacing-medium); } .mw2 { max-width: 2rem; } .mw3 { max-width: 4rem; } .mw4 { max-width: 8rem; } @@ -52,7 +52,7 @@ @media (--breakpoint-not-small) { .mw-100-ns { max-width: 100%; } - .mw1-ns { max-width: 1rem; } + .mw1-ns { max-width: var(--spacing-medium); } .mw2-ns { max-width: 2rem; } .mw3-ns { max-width: 4rem; } .mw4-ns { max-width: 8rem; } @@ -68,7 +68,7 @@ @media (--breakpoint-medium) { .mw-100-m { max-width: 100%; } - .mw1-m { max-width: 1rem; } + .mw1-m { max-width: var(--spacing-medium); } .mw2-m { max-width: 2rem; } .mw3-m { max-width: 4rem; } .mw4-m { max-width: 8rem; } @@ -84,7 +84,7 @@ @media (--breakpoint-large) { .mw-100-l { max-width: 100%; } - .mw1-l { max-width: 1rem; } + .mw1-l { max-width: var(--spacing-medium); } .mw2-l { max-width: 2rem; } .mw3-l { max-width: 4rem; } .mw4-l { max-width: 8rem; } diff --git a/src/css/imports/_media-queries.css b/src/css/imports/_media-queries.css index d3be559..872aef2 100755 --- a/src/css/imports/_media-queries.css +++ b/src/css/imports/_media-queries.css @@ -1,5 +1,5 @@ @custom-media --breakpoint-not-small screen and (min-width: 40em); -@custom-media --breakpoint-medium screen and (min-width: 40em) and (max-width: 60em); +@custom-media --breakpoint-medium screen and (min-width: 50em); @custom-media --breakpoint-large screen and (min-width: 60em); diff --git a/src/css/imports/_outlines.css b/src/css/imports/_outlines.css index 9a292fd..2026e99 100755 --- a/src/css/imports/_outlines.css +++ b/src/css/imports/_outlines.css @@ -1,14 +1,3 @@ -/* - - OUTLINES - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .outline { outline: 1px solid; } .outline-transparent { outline: 1px solid transparent; } .outline-0 { outline: 0; } diff --git a/src/css/imports/_reset.css b/src/css/imports/_reset.css index d0a1f31..48eeccc 100755 --- a/src/css/imports/_reset.css +++ b/src/css/imports/_reset.css @@ -48,7 +48,7 @@ table { } input, textarea { - font-size: 1rem; + font-size: var(--spacing-medium); border: none; font-family: inherit; border: 0; diff --git a/src/css/imports/_spacing.css b/src/css/imports/_spacing.css index 41d4118..46ffdaa 100755 --- a/src/css/imports/_spacing.css +++ b/src/css/imports/_spacing.css @@ -1,51 +1,3 @@ -/* Variables */ - -:root { - --spacing-none: 0; - --spacing-extra-small: .25rem; - --spacing-small: .5rem; - --spacing-medium: 1rem; - --spacing-large: 2rem; - --spacing-extra-large: 4rem; - --spacing-extra-extra-large: 8rem; - --spacing-extra-extra-extra-large: 16rem; -} - -/* - SPACING - Docs: http://tachyons.io/docs/layout/spacing/ - - An eight step powers of two scale ranging from 0 to 16rem. - - Base: - p = padding - m = margin - - Modifiers: - a = all - h = horizontal - v = vertical - t = top - r = right - b = bottom - l = left - - 0 = none - 1 = 1st step in spacing scale - 2 = 2nd step in spacing scale - 3 = 3rd step in spacing scale - 4 = 4th step in spacing scale - 5 = 5th step in spacing scale - 6 = 6th step in spacing scale - 7 = 7th step in spacing scale - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large - -*/ - .pa0 { padding: var(--spacing-none); } .pa1 { padding: var(--spacing-extra-small); } .pa2 { padding: var(--spacing-small); } @@ -276,9 +228,9 @@ margin-right: var(--spacing-extra-extra-extra-large); } -.mhn1 { margin-left: -.25rem; margin-right: -.25rem; } -.mhn2 { margin-left: -.5rem; margin-right: -.5rem; } -.mhn3 { margin-left: -1rem; margin-right: -1rem; } +.mhn1 { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); } +.mhn2 { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); } +.mhn3 { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); } @media (--breakpoint-not-small) { .pa0-ns { padding: var(--spacing-none); } @@ -502,9 +454,9 @@ margin-right: var(--spacing-extra-extra-extra-large); } - .mhn1-ns { margin-left: -.25rem; margin-right: -.25rem; } - .mhn2-ns { margin-left: -.5rem; margin-right: -.5rem; } - .mhn3-ns { margin-left: -1rem; margin-right: -1rem; } + .mhn1-ns { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); } + .mhn2-ns { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); } + .mhn3-ns { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); } } @@ -731,9 +683,9 @@ margin-right: var(--spacing-extra-extra-extra-large); } - .mhn1-m { margin-left: -.25rem; margin-right: -.25rem; } - .mhn2-m { margin-left: -.5rem; margin-right: -.5rem; } - .mhn3-m { margin-left: -1rem; margin-right: -1rem; } + .mhn1-m { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); } + .mhn2-m { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); } + .mhn3-m { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); } } @@ -960,7 +912,7 @@ margin-right: var(--spacing-extra-extra-extra-large); } - .mhn1-l { margin-left: -.25rem; margin-right: -.25rem; } - .mhn2-l { margin-left: -.5rem; margin-right: -.5rem; } - .mhn3-l { margin-left: -1rem; margin-right: -1rem; } + .mhn1-l { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); } + .mhn2-l { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); } + .mhn3-l { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); } } diff --git a/src/css/imports/_hovers.css b/src/css/imports/_states.css index a10c718..f8f22a7 100755 --- a/src/css/imports/_hovers.css +++ b/src/css/imports/_states.css @@ -1,32 +1,29 @@ -@media (--breakpoint-large) { - .raise { - transform: none; - transition: var(--hover-transition); - } - .raise:hover, - .raise:focus { - transform: translateY(-.1rem); - transition: var(--hover-transition); - } - .raise:active { - opacity: .5; transition: var(--hover-transition); - } +/* Focus states */ +input:focus, textarea:focus a:focus { + box-shadow: 0 0 0 2px var(--primary); + outline: 0; } -/* +button:focus { + box-shadow: 0 0 0 4px var(--primary); + outline: 0; +} - Hide child & reveal on hover: +.raise { + transition: var(--hover-transition); + transform: translateY(0) translateZ(0); +} - Put the hide-child class on a parent element and any nested element with the - child class will be hidden and displayed on hover or focus. +.raise:hover, +.raise:focus { + transition: var(--hover-transition); + transform: translateY(-.12rem) translateZ(0); +} - <div class="hide-child"> - <div class="child"> Hidden until hover or focus </div> - <div class="child"> Hidden until hover or focus </div> - <div class="child"> Hidden until hover or focus </div> - <div class="child"> Hidden until hover or focus </div> - </div> -*/ +.raise:active { + transition: var(--hover-transition); + opacity: .5; +} .hide-child .child { opacity: 0; diff --git a/src/css/imports/_tables.css b/src/css/imports/_tables.css index d1f145a..ca6ca41 100755 --- a/src/css/imports/_tables.css +++ b/src/css/imports/_tables.css @@ -1,35 +1,30 @@ -/* - - TABLES - Docs: http://tachyons.io/docs/elements/tables/ - -*/ - -.collapse { - border-collapse: collapse; - border-spacing: 0; -} - -.striped--light-silver:nth-child(odd) { - background-color: var(--light-silver); +table +{ + border-radius: var(--border-radius); + overflow: hidden; } -.striped--moon-gray:nth-child(odd) { - background-color: var(--moon-gray); +td, th { + padding: $spacing-medium; } -.striped--light-gray:nth-child(odd) { - background-color: var(--light-gray); +th:not(:first-child), td:not(:first-child) { + text-align: right; } -.striped--near-white:nth-child(odd) { - background-color: var(--near-white); +th { + color: var(--grey-3); + font-weight: 700; + white-space: nowrap; + { + white-space: wrap; + } } -.stripe-light:nth-child(odd) { - background-color: var(--white-10); +tr th { + text-align: center; } -.stripe-dark:nth-child(odd) { - background-color: var(--black-10); +tbody tr:nth-child(even) { + background-color: var(--grey-1); } diff --git a/src/css/imports/_type-scale.css b/src/css/imports/_type-scale.css index dab4aa6..dd320a5 100755 --- a/src/css/imports/_type-scale.css +++ b/src/css/imports/_type-scale.css @@ -1,51 +1,3 @@ -/* - - TYPE SCALE - Docs: http://tachyons.io/docs/typography/scale/ - - Base: - f = font-size - - Modifiers - 1 = 1st step in size scale - 2 = 2nd step in size scale - 3 = 3rd step in size scale - 4 = 4th step in size scale - 5 = 5th step in size scale - 6 = 6th step in size scale - - Media Query Extensions: - -ns = not-small - -m = medium - -l = large -*/ - -/* - * For Hero/Marketing Titles - * - * These generally are too large for mobile - * so be careful using them on smaller screens. - * */ - -html { - font-size: 18px; - @media (--breakpoint-medium) { - font-size: 20px; - } - @media (--breakpoint-large) { - font-size: 22px; - } -} - - -body { - font-size: 1rem; - line-height: 1.5; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background-color: var(--white); - } - .f-6, .f-headline { font-size: 6rem; @@ -61,8 +13,8 @@ body { .f1 { font-size: 3rem; } .f2 { font-size: 2.25rem; } .f3 { font-size: 1.5rem; } -.f4 { font-size: 1.25rem; } -.f5 { font-size: 1rem; } +.f4 { font-size: 1.25rem;; } +.f5 { font-size: var(--spacing-medium); } .f6 { font-size: .875rem; } @media (--breakpoint-not-small) { @@ -73,8 +25,8 @@ body { .f1-ns { font-size: 3rem; } .f2-ns { font-size: 2.25rem; } .f3-ns { font-size: 1.5rem; } - .f4-ns { font-size: 1.25rem; } - .f5-ns { font-size: 1rem; } + .f4-ns { font-size: 1.25rem;; } + .f5-ns { font-size: var(--spacing-medium); } .f6-ns { font-size: .875rem; } } @@ -86,8 +38,8 @@ body { .f1-m { font-size: 3rem; } .f2-m { font-size: 2.25rem; } .f3-m { font-size: 1.5rem; } - .f4-m { font-size: 1.25rem; } - .f5-m { font-size: 1rem; } + .f4-m { font-size: 1.25rem;; } + .f5-m { font-size: var(--spacing-medium); } .f6-m { font-size: .875rem; } } @@ -103,7 +55,7 @@ body { .f1-l { font-size: 3rem; } .f2-l { font-size: 2.25rem; } .f3-l { font-size: 1.5rem; } - .f4-l { font-size: 1.25rem; } - .f5-l { font-size: 1rem; } + .f4-l { font-size: 1.25rem;; } + .f5-l { font-size: var(--spacing-medium); } .f6-l { font-size: .875rem; } } diff --git a/src/css/imports/_typography.css b/src/css/imports/_typography.css index 4d6fecc..3aba6ea 100755 --- a/src/css/imports/_typography.css +++ b/src/css/imports/_typography.css @@ -1,20 +1,41 @@ -/* - - TYPOGRAPHY - http://tachyons.io/docs/typography/measure/ +html { + font-size: 18px; + @media (--breakpoint-medium) { + font-size: 20px; + } + @media (--breakpoint-large) { + font-size: 22px; + } +} - Media Query Extensions: - -ns = not-small - -m = medium - -l = large -*/ +body { + font-size: var(--spacing-medium); + line-height: 1.5; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: var(--white); + } p { - margin-bottom: 1rem; + margin-bottom: var(--spacing-medium); max-width: 32rem; } +strong { + font-weight: 800; +} + +em { + font-style: italic; +} + +sup { + font-size: .6rem; + font-weight: 700; + vertical-align: super; +} + /* Measure is limited to ~66 characters */ .measure { max-width: 30em; diff --git a/src/css/imports/_variables.css b/src/css/imports/_variables.css index f75395f..177b1c1 100644 --- a/src/css/imports/_variables.css +++ b/src/css/imports/_variables.css @@ -1,3 +1,14 @@ :root { + --border-radius: .25rem; --hover-transition: all 150ms ease; + + /* Sizing */ + --spacing-none: 0; + --spacing-extra-small: .25rem; + --spacing-small: .5rem; + --spacing-medium: 1rem; + --spacing-large: 2rem; + --spacing-extra-large: 4rem; + --spacing-extra-extra-large: 8rem; + --spacing-extra-extra-extra-large: 16rem; } diff --git a/src/css/imports/_widths.css b/src/css/imports/_widths.css index 54c0c7c..d02a240 100755 --- a/src/css/imports/_widths.css +++ b/src/css/imports/_widths.css @@ -38,7 +38,7 @@ /* Width Scale */ -.w1 { width: 1rem; } +.w1 { width: var(--spacing-medium); } .w2 { width: 2rem; } .w3 { width: 4rem; } .w4 { width: 8rem; } @@ -64,7 +64,7 @@ .w-auto { width: auto; } @media (--breakpoint-not-small) { - .w1-ns { width: 1rem; } + .w1-ns { width: var(--spacing-medium); } .w2-ns { width: 2rem; } .w3-ns { width: 4rem; } .w4-ns { width: 8rem; } @@ -89,7 +89,7 @@ } @media (--breakpoint-medium) { - .w1-m { width: 1rem; } + .w1-m { width: var(--spacing-medium); } .w2-m { width: 2rem; } .w3-m { width: 4rem; } .w4-m { width: 8rem; } @@ -114,7 +114,7 @@ } @media (--breakpoint-large) { - .w1-l { width: 1rem; } + .w1-l { width: var(--spacing-medium); } .w2-l { width: 2rem; } .w3-l { width: 4rem; } .w4-l { width: 8rem; } diff --git a/src/css/main.css b/src/css/main.css index c9a363a..f3709f4 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -69,7 +69,7 @@ @import './imports/_visibility'; @import './imports/_white-space'; @import './imports/_vertical-align'; -@import './imports/_hovers'; +@import './imports/_states'; @import './imports/_z-index'; @import './imports/_styles'; @import './imports/_buttons'; diff --git a/src/site/static/img/icons/svg.html b/src/site/static/img/icons/svg.html deleted file mode 100644 index e69de29..0000000 --- a/src/site/static/img/icons/svg.html +++ /dev/null |