{"id":18597864,"url":"https://github.com/liascript/custom-style","last_synced_at":"2025-05-16T14:10:17.256Z","repository":{"id":114116202,"uuid":"234409659","full_name":"LiaScript/custom-style","owner":"LiaScript","description":"A simple demo that shows, how a custom css can be used to style a LiaScript course","archived":false,"fork":false,"pushed_at":"2025-03-13T14:20:23.000Z","size":31,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T15:27:02.641Z","etag":null,"topics":["css","liascript","liascript-course","stylie"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/custom-style/master/README.md","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaScript.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-16T20:52:41.000Z","updated_at":"2025-03-13T14:20:26.000Z","dependencies_parsed_at":"2023-06-25T22:59:16.756Z","dependency_job_id":null,"html_url":"https://github.com/LiaScript/custom-style","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fcustom-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fcustom-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fcustom-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fcustom-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaScript","download_url":"https://codeload.github.com/LiaScript/custom-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544159,"owners_count":22088808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","liascript","liascript-course","stylie"],"created_at":"2024-11-07T01:29:41.041Z","updated_at":"2025-05-16T14:10:17.250Z","avatar_url":"https://github.com/LiaScript.png","language":"CSS","readme":"\u003c!--\nauthor:   André Dietrich\n\nemail:    LiaScript@web.de\n\nversion:  1.0.3\n\nlanguage: en\n\nnarrator: US English Male\n\ncomment:  A simple demo that shows, how custom styles can be applied to a\n          LiaScript document...\n\nicon:     TUBAF_Logo.svg.png\n\nlink:     https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\n\nscript:   https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\n\nlink:     https://cdn.jsdelivr.net/gh/liascript/custom-style/custom.min.css\n          https://fonts.googleapis.com/css?family=Abril Fatface\n--\u003e\n\n[![LiaScript](https://raw.githubusercontent.com/LiaScript/LiaScript/master/badges/course.svg)](https://LiaScript.github.io/course/?https://github.com/LiaScript/custom-style) [![Gitter](https://badges.gitter.im/LiaScript/community.svg)](https://gitter.im/LiaScript/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\n# Custom-Style demo\n\n\nThis is a simple demo, that shows how LiaScript courses can be customized.\n\nPlease see the [Lia-Script-Version](https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/custom-style/master/README.md)\nto see how this document gets rendered in [LiaScript](https://liascript.github.io).\n\n## How does it work?\n\nYou can load any css file that you want, simply place the URL of your style\ninto the main header of your document via `link: url.css`. Unfortunately loading\n`custom.css` directly does work only for local development, using it on github\nyou will need a CDN, such as https://www.jsdelivr.com/?docs=gh ... simply refer\nto your style in your github repository.\n\n\n\n``` markdown README.md\n\u003c!--\nauthor:   André Dietrich\nemail:    LiaScript@web.de\nversion:  0.0.1\nlanguage: en\nnarrator: US English Male\nlink:     https://cdn.jsdelivr.net/gh/liascript/custom-style/custom.css\n          https://fonts.googleapis.com/css?family=Abril Fatface\n```\n\nActually you can overwrite every peace of LiaScript style, simply by changing\none of the `lia-` classes... Unfortunately, you will have to put an `!important`\nto every css attribute in order to force its usage. Thus, if you do not change\nthe color, you can still switch between the LiaScript color schemes, otherwise\nthere will only one color config available...\n\n``` css  custom.css\n:root {\n  --main-bg-color: #FF0000;\n}\n\nbody {\n  font-family: 'Abril Fatface', sans-serif !important;\n}\n\nh1.lia-h1 {\n  font-size:5vw !important;\n  margin-left:auto !important;\n  margin-right:auto !important;\n}\n\n.lia-slide .lia-toolbar {\n  background: var(--main-bg-color) !important;\n  background-image: url(\"https://liascript.github.io/course/logo_192.c4a21617.png\") !important;\n  background-size: contain !important;\n  background-repeat: no-repeat !important;\n  background-position: center !important;\n}\n\n.lia-toc .lia-toolbar {\n  background: var(--main-bg-color) !important;\n}\n\n.lia-btn {\n  background: var(--main-bg-color) !important;\n}\n\n.lia-input {\n  background: var(--main-bg-color) !important;\n}\n\n.lia-active {\n  background: var(--main-bg-color) !important;\n}\n\n.lia-quote {\n  background: var(--main-bg-color) !important;\n  border-left-color: #990000 !important;\n  color: #FFFFFF !important\n}\n\n.lia-accordion {\n  background: var(--main-bg-color) !important;\n  font-size: 12px !important;\n}\n\n.lia-accordion-dummy {\n  background: var(--main-bg-color) !important;\n  font-size: 12px !important;\n}\n\n.lia-quiz {\n  border-color: var(--main-bg-color) !important;\n}\n\n.lia-link {\n  color: #00FF00 !important\n}\n```\n\n# Some Demo Stuff\n\n\n## Markdown\n\nYou can use common [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) syntax to create your course, such as:\n\n1. Lists\n2. ordered or\n\n   * unordered\n   * ones ...\n\n\n| Header 1   | Header 2   |\n| :--------- | :--------- |\n| Item 1     | Item 2     |\n\n\nImages:\n\n![images](https://farm2.static.flickr.com/1618/26701766821_7bea494826.jpg)\n\n\u003e some simple notes\n\n### Extensions\n\n     --{{0}}--\nBut you can also include other features such as spoken text.\n\n      --{{1}}--\nInsert any kind of audio file:\n\n       {{1}}\n?[audio](https://bigsoundbank.com/UPLOAD/mp3/1068.mp3)\n\n\n     --{{2}}--\nEven videos or change the language completely.\n\n       {{2-3}}\n!?[video](https://www.youtube.com/watch?v=bICfKRyKTwE)\n\n\n      --{{3 Russian Female}}--\nПервоначально создан в 2004 году Джоном Грубером (англ. John Gruber) и Аароном\nШварцем. Многие идеи языка были позаимствованы из существующих соглашений по\nразметке текста в электронных письмах...\n\n\n    {{3}}\nType \"voice\" to see a list of all available languages.\n\n\n### Styling\n\n\u003c!-- class = \"animated rollIn\" style = \"animation-delay: 2s; color: purple\" --\u003e\nThe whole text-block should appear in purple color and with a wobbling effect.\nWhich is a **bad** example, please use it with caution ...\n~~ only this is red ;-) ~~ \u003c!-- class = \"animated infinite bounce\" style = \"color: red;\" --\u003e\n\n## Charts\n\nUse ASCII-Art to draw diagrams:\n\n                                    Multiline\n    1.9 |    DOTS\n        |                 ***\n      y |               *     *\n      - | r r r r r r r*r r r r*r r r r r r r\n      a |             *         *\n      x |            *           *\n      i | B B B B B * B B B B B B * B B B B B\n      s |         *                 *\n        | *  * *                       * *  *\n     -1 +------------------------------------\n        0              x-axis               1\n\n## Quizzes\n\n### A Textquiz\n\nWhat did the **fish** say when he hit a **concrete wall**?\n\n    [[dam]]\n\n### Multiple Choice\n\nJust add as many points as you wish:\n\n    [[X]] Only the **X** marks the correct point.\n    [[ ]] Empty ones are wrong.\n    [[X]] ...\n\n### Single Choice\n\nJust add as many points as you wish:\n\n    [( )] ...\n    [(X)] \u003c-- Only the **X** is allowed.\n    [( )] ...\n\n## Executable Code\n\nA drawing example, for demonstrating that any JavaScript library can be used, also for drawing.\n\n```javascript\n// Initialize a Line chart in the container with the ID chart1\nnew Chartist.Line('#chart1', {\n  labels: [1, 2, 3, 4],\n  series: [[100, 120, 180, 200]]\n});\n\n// Initialize a Line chart in the container with the ID chart2\nnew Chartist.Bar('#chart2', {\n  labels: [1, 2, 3, 4],\n  series: [[5, 2, 8, 3]]\n});\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart1\"\u003e\u003c/div\u003e\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart2\"\u003e\u003c/div\u003e\n\n\n### Projects\n\nYou can make your code executable and define projects:\n\n``` js     -EvalScript.js\nlet who = data.first_name + \" \" + data.last_name;\n\nif(data.online) {\n  who + \" is online\"; }\nelse {\n  who + \" is NOT online\"; }\n```\n``` json    +Data.json\n{\n  \"first_name\" :  \"Sammy\",\n  \"last_name\"  :  \"Shark\",\n  \"online\"     :  true\n}\n```\n\u003cscript\u003e\n  // insert the JSON dataset into the local variable data\n  let data = @input(1);\n\n  // eval the script that uses this dataset\n  eval(`@input(0)`);\n\u003c/script\u003e\n\n## More\n\nFind out what you can even do more with quizzes:\n\nhttps://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliascript%2Fcustom-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliascript%2Fcustom-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliascript%2Fcustom-style/lists"}