summaryrefslogtreecommitdiff
path: root/examples/snowpack/public/css/components/_button.scss
diff options
context:
space:
mode:
authorGravatar Matthew Phillips <matthew@matthewphillips.info> 2021-03-19 17:17:38 -0400
committerGravatar GitHub <noreply@github.com> 2021-03-19 17:17:38 -0400
commit2082001ff8702ec48072b59caafe85573a3b2891 (patch)
treed160341cc51dd39e562a209cad6db168f768a259 /examples/snowpack/public/css/components/_button.scss
parent17c3c98f07628b43b941b84831e8e1f9bcd7ca46 (diff)
downloadastro-2082001ff8702ec48072b59caafe85573a3b2891.tar.gz
astro-2082001ff8702ec48072b59caafe85573a3b2891.tar.zst
astro-2082001ff8702ec48072b59caafe85573a3b2891.zip
Add snowpack as an example project. (#11)
* Initial tests set up This adds tests using uvu (we can switch if people want) and restructures things a bit so that it's easier to test. Like in snowpack you set up a little project. In our tests you can say: ```js const result = await runtime.load('/blog/hello-world') ``` And analyze the result. I included a `test-helpers.js` which has a function that will turn HTML into a cheerio instance, for inspecting the result HTML. * Bring snowpack example in * Formatting
Diffstat (limited to 'examples/snowpack/public/css/components/_button.scss')
-rw-r--r--examples/snowpack/public/css/components/_button.scss42
1 files changed, 42 insertions, 0 deletions
diff --git a/examples/snowpack/public/css/components/_button.scss b/examples/snowpack/public/css/components/_button.scss
new file mode 100644
index 000000000..8c865d0dd
--- /dev/null
+++ b/examples/snowpack/public/css/components/_button.scss
@@ -0,0 +1,42 @@
+@use '../var' as *;
+@use '../animations' as *;
+
+.button {
+ box-sizing: border-box;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ padding: 0.3em 1.5em;
+ font-weight: bold;
+ font-size: 100%;
+ font-size: 22px;
+ font-family: inherit;
+ font-family: 'Overpass', sans-serif;
+ white-space: nowrap;
+ text-align: center;
+ text-decoration: none;
+ vertical-align: middle;
+ background-color: #fefefe;
+ border: 1px solid #666;
+ border-radius: 4px;
+ cursor: pointer;
+ text-decoration: none !important;
+ user-select: none;
+ @include animation-hover-pop;
+
+ &-primary {
+ color: #fff;
+ background: linear-gradient(45deg, #24bf62, #267dd6, #b224d0);
+ }
+}
+
+a.button {
+ text-decoration: none !important;
+ &-primary {
+ color: #fff;
+ }
+}
+
+.button-container {
+ display: flex;
+ flex-wrap: wrap;
+}