From 5045a7124a040b45af1df63d7c161c15eb5c9ae2 Mon Sep 17 00:00:00 2001 From: supisara Date: Thu, 26 May 2022 19:04:10 +0200 Subject: [PATCH] workbook Co-authored-by: FL --- assets/css/global.css | 0 {css => assets/css}/instruments.css | 0 {css => assets/css}/main.css | 0 assets/css/workbook.css | 164 ++++++++++++++++++++++++++++ assets/icons/add.svg | 4 + assets/icons/search.svg | 4 + assets/icons/skew-add.svg | 4 + instruments.html | 26 ----- workbook.html | 56 ++++++++++ 9 files changed, 232 insertions(+), 26 deletions(-) create mode 100644 assets/css/global.css rename {css => assets/css}/instruments.css (100%) rename {css => assets/css}/main.css (100%) create mode 100644 assets/css/workbook.css create mode 100644 assets/icons/add.svg create mode 100644 assets/icons/search.svg create mode 100644 assets/icons/skew-add.svg delete mode 100644 instruments.html create mode 100644 workbook.html diff --git a/assets/css/global.css b/assets/css/global.css new file mode 100644 index 0000000..e69de29 diff --git a/css/instruments.css b/assets/css/instruments.css similarity index 100% rename from css/instruments.css rename to assets/css/instruments.css diff --git a/css/main.css b/assets/css/main.css similarity index 100% rename from css/main.css rename to assets/css/main.css diff --git a/assets/css/workbook.css b/assets/css/workbook.css new file mode 100644 index 0000000..fe99984 --- /dev/null +++ b/assets/css/workbook.css @@ -0,0 +1,164 @@ +* { + box-sizing: border-box; +} + +html, body { + font-family: sans-serif; + +} + + +a { + color: currentColor; + text-decoration: none; +} + +a:hover { + opacity: 0.5; +} + +header { + width: 100%; + display: flex; + justify-content: space-between; + padding: 8px; + font-size: 32px; + +} + +header > * { + flex-shrink: 0; +} + + + +header .title { + margin: 0; + margin-right: 32px; + font-size: 32px; + font-weight: normal; + +} + +.path-slash { + margin: 0 4px; +} + +.parent { + /* color: rgb(147, 149, 161); */ +} + + +.search { + position: relative; + + display: inline-block; + height: 32px; + margin-left: auto; + overflow: hidden; + flex: 0 0 32px; + transition: flex 0.3s ease-in; +} + +.search:hover{ + transition: flex 0.6s ease-out; + flex: 1 0 auto; +} + +.search svg { + width: 32px; + height: 32px; + padding: 4px; + margin: 0; +} + +.search input { + border: none; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 32px; + outline: none; + border-bottom: 1px solid currentColor; + + font-size: 32px; + + padding: 0; + padding-left: 4px; + + background: none; +} + + + +main { + padding: 0 8px; +} + + +.list { + padding: 0; + display: grid; + + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + + + gap: 16px; +} + +.card { + /* transform: skew(14deg); */ + aspect-ratio: 1; + border: 1px solid currentColor; + padding: 32px; + + + + display: flex; + justify-content: center; + align-items: center; + + + + font-size: 32px; + text-align: center; +} + + + +.card > * { + /* transform: skew(-28deg); */ +} + +.card svg { + width: 32px; + height: 32px; +} + + + + +@media (max-width: 767px){ + + + +header { + display: block; + font-size: 28px; +} + +header .title { + display: inline; + font-size: 28px; +} + + .search { + margin-top: 16px; + display: block; + } + + .search input { + font-size: 28px; + } +} \ No newline at end of file diff --git a/assets/icons/add.svg b/assets/icons/add.svg new file mode 100644 index 0000000..e10f63b --- /dev/null +++ b/assets/icons/add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/search.svg b/assets/icons/search.svg new file mode 100644 index 0000000..c053644 --- /dev/null +++ b/assets/icons/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/skew-add.svg b/assets/icons/skew-add.svg new file mode 100644 index 0000000..41eca2a --- /dev/null +++ b/assets/icons/skew-add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/instruments.html b/instruments.html deleted file mode 100644 index eddf4c1..0000000 --- a/instruments.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - workbook - instruments - - - -
- - Home - Sessions - About -
-

Instruments

- - - - - - - diff --git a/workbook.html b/workbook.html new file mode 100644 index 0000000..f6004f6 --- /dev/null +++ b/workbook.html @@ -0,0 +1,56 @@ + + + + + workbook + + + + + +
+ Home + + / + +

Workbook

+
+ + + + + +
+
+ +
+ +
+ + + + + + +