mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 15:26:15 +08:00
impr(quotes): add css quotes (ruanbuhr) (#5022)
* CSS Quotes id Issue Fixed * prettier --------- Co-authored-by: Ruan Buhr <26440873@sun.ac.za> Co-authored-by: Jack <jack@monkeytype.com>
This commit is contained in:
Ruan Buhr
GitHub
parent
20f09958a2
commit
c110c80772
131
frontend/static/quotes/code_css.json
Normal file
131
frontend/static/quotes/code_css.json
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
{
|
||||
"language": "code_css",
|
||||
"groups": [
|
||||
[0, 100],
|
||||
[101, 300],
|
||||
[301, 600],
|
||||
[601, 9999]
|
||||
],
|
||||
"quotes": [
|
||||
{
|
||||
"text": ".shadow {\n\tbox-shadow:\n\t2px 2px 4px #888888;\n}",
|
||||
"source": "Basic CSS Example",
|
||||
"id": 1,
|
||||
"length": 46
|
||||
},
|
||||
{
|
||||
"text": ".container{\n\tmax-width:960px;\n\tmargin:0 auto;\n\tpadding:0 15px;\n}",
|
||||
"source": "Basic CSS Example",
|
||||
"id": 2,
|
||||
"length": 64
|
||||
},
|
||||
{
|
||||
"text": "p.center {\n\ttext-align: center;\n\tcolor: red;\n}\n\np.large {\n\tfont-size: 300%\n;}",
|
||||
"source": "W3Schools CSS Class Selector",
|
||||
"id": 3,
|
||||
"length": 77
|
||||
},
|
||||
{
|
||||
"text": ".box {\n\tborder: 5px solid darkblue;\n\theight: 150px;\n\twidth: 200px;\n}",
|
||||
"source": "MDN Web Docs Sizing Items in CSS",
|
||||
"id": 4,
|
||||
"length": 68
|
||||
},
|
||||
{
|
||||
"text": "* [lang^=\"en\"] {\n\tcolor: green;\n}\n\n*.warning {\n\tcolor: red;\n}\n\n*#maincontent {\n\tborder: 1px solid blue;\n}\n\n.floating {\n\tfloat: left;\n}\n\n/* automatically clear the next sibling after a floating element */\n.floating + * {\n\tclear: left;\n}",
|
||||
"source": "MDN Web Docs Universal Selectors",
|
||||
"id": 5,
|
||||
"length": 235
|
||||
},
|
||||
{
|
||||
"text": "img.one {\n\theight: auto;\n}\n\nimg.two {\n\theight: 200px;\n\twidth: 200px;\n}\n\ndiv.three {\n\theight: 300px;\n\twidth: 300px;\n\tbackground-color: powderblue;\n}",
|
||||
"source": "W3Schools CSS Set the Height and Width of Different Elements",
|
||||
"id": 6,
|
||||
"length": 147
|
||||
},
|
||||
{
|
||||
"text": ".form {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\tmargin: 80px auto;\n\tfont-size: 20px;\n\twidth: 75%;\n\tborder-radius: 10px;\n\tbox-shadow: 0 4px 8px rgb(0, 0, 0, 0.4);\n\tbox-sizing: border-box;\n}",
|
||||
"source": "Ruan Buhr - stelfix sourcecode",
|
||||
"id": 7,
|
||||
"length": 220
|
||||
},
|
||||
{
|
||||
"text": ".button {\n\tbackground-color: #007bff;\n\tcolor: #ffffff;\n\tpadding: 10px 20px;\n\tborder: none;\n\tborder-radius: 5px;\n\tcursor: pointer;\n\ttransition: background-color 0.3s, color 0.3s;\n}\n\n.button:hover {\n\tbackground-color: #0056b3;\n\tcolor: #ffffff;\n}",
|
||||
"source": "Basic CSS Button Hover Example",
|
||||
"id": 8,
|
||||
"length": 243
|
||||
},
|
||||
{
|
||||
"text": "body {\n\tbackground-color: #f0f0f0;\n}\n\n@media (max-width: 600px) {\n\tbody {\n\t\tbackground-color: #e6f7ff;\n\t}\n}\n\n@media (min-width: 601px) and (max-width: 992px) {\n\tbody {\n\t\tbackground-color: #f9f6ff;\n\t}\n}\n\n@media (min-width: 993px) {\n\tbody {\n\t\tbackground-color: #f2f2f2;\n\t}\n}",
|
||||
"source": "Basic Media Query Example",
|
||||
"id": 9,
|
||||
"length": 272
|
||||
},
|
||||
{
|
||||
"text": ".container {\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100vh;\n}\n\n.header {\n\tbackground-color: #333;\n\tcolor: #fff;\n\tpadding: 10px;\n}\n\n.main-container {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.sidebar {\n\tbackground-color: #f0f0f0;\n\tpadding: 10px;\n\twidth: 250px;\n}\n\n.content {\n\tflex: 1;\n\tpadding: 10px;\n}\n\n.footer {\n\tbackground-color: #333;\n\tcolor: #fff;\n\tpadding: 10px;\n}",
|
||||
"source": "CSS Flexbox Example",
|
||||
"id": 10,
|
||||
"length": 367
|
||||
},
|
||||
{
|
||||
"text": ".grid-container {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1fr 1fr;\n\tgrid-gap: 10px;\n}\n\n.grid-item {\n\tbackground-color: #f0f0f0;\n\tpadding: 20px;\n\ttext-align: center;\t}",
|
||||
"source": "CSS Grid Example",
|
||||
"id": 11,
|
||||
"length": 170
|
||||
},
|
||||
{
|
||||
"text": ".wrapper {\n\tborder: 2px dotted rgb(96, 139, 168);\n\twidth: 500px;\n}\n\n.box {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 10px;\n}\n\n.box>* {\n\tflex: 1 1 160px;\n}",
|
||||
"source": "MDN Web Docs CSS Mastering Wrapping of Flex Items",
|
||||
"id": 12,
|
||||
"length": 152
|
||||
},
|
||||
{
|
||||
"text": ".center {\n\theight: 200px;\n\tposition: relative;\n\tborder: 3px solid green;\n}\n\n.center p {\n\tmargin: 0;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\t-ms-transform: translate(-50%, -50%);\n\ttransform: translate(-50%, -50%);\n}",
|
||||
"source": "W3Schools CSS Center Items Vertically and Horizontally",
|
||||
"id": 13,
|
||||
"length": 219
|
||||
},
|
||||
{
|
||||
"text": "body {\n\tfont-size: 28px;\n}\n\nul {\n\tlist-style-type: none;\n\tmargin: 0;\n\tpadding: 0;\n\toverflow: hidden;\n\tbackground-color: #333;\n\tposition: -webkit-sticky; /* Safari */\n\tposition: sticky;\n\ttop: 0;\n}\n\nli {\n\tfloat: left;\n}li a {\n\tdisplay: block;\n\tcolor: white;\n\ttext-align: center;\n\tpadding: 14px 16px;\n\ttext-decoration: none;\n}\n\nli a:hover {\n\tbackground-color: #111;\n}\n\n.active {\n\tbackground-color: #4CAF50;\n}",
|
||||
"source": "W3Schools CSS Sticky Navigation Bar Example",
|
||||
"id": 14,
|
||||
"length": 405
|
||||
},
|
||||
{
|
||||
"text": ".dropbtn {background-color: #4CAF50;\n\tcolor: white;\n\tpadding: 16px;\n\tfont-size: 16px;\n\tborder: none;\n\tcursor: pointer;\n}\n\n.dropdown {\n\tposition: relative;\n\tdisplay: inline-block;\n}\n\n.dropdown-content {\n\tdisplay: none;\n\tposition: absolute;\n\tright: 0;\n\tbackground-color: #f9f9f9;\n\tmin-width: 160px;\n\tbox-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n\tz-index: 1;\n}\n\n.dropdown-content a {\n\tcolor: black;\n\tpadding: 12px 16px;\n\ttext-decoration: none;\n\tdisplay: block;\n}\n\n.dropdown-content a:hover {background-color: #f1f1f1;}\n\n.dropdown:hover .dropdown-content {\n\tdisplay: block;\n}\n\n.dropdown:hover .dropbtn {\n\tbackground-color: #3e8e41;\n}",
|
||||
"source": "W3Schools CSS Right-Aligned Dropdown Menu",
|
||||
"id": 15,
|
||||
"length": 630
|
||||
},
|
||||
{
|
||||
"text": "input[type=button], input[type=submit], input[type=reset] {\n\tbackground-color: #04AA6D;\n\tborder: none;\n\tcolor: white;\n\tpadding: 16px 32px;\n\ttext-decoration: none;\n\tmargin: 4px 2px;\n\tcursor: pointer;\n}",
|
||||
"source": "W3Schools CSS Styling Input Buttons",
|
||||
"id": 16,
|
||||
"length": 200
|
||||
},
|
||||
{
|
||||
"text": "#rcorners1 {\n\tborder-radius: 15px 50px 30px 5px;\n\tbackground: #73AD21;\n\tpadding: 20px;\n\twidth: 200px;\n\theight: 150px;\n}\n\n#rcorners2 {\n\tborder-radius: 15px 50px 30px;\n\tbackground: #73AD21;\n\tpadding: 20px;\n\twidth: 200px;\n\theight: 150px;\n}\n\n#rcorners3 {\n\tborder-radius: 15px 50px;\n\tbackground: #73AD21;\n\tpadding: 20px;\n\twidth: 200px;\n\theight: 150px;\n}\n\n#rcorners4 {\n\tborder-radius: 15px;\n\tbackground: #73AD21;\n\tpadding: 20px;\n\twidth: 200px;\n\theight: 150px;\n}",
|
||||
"source": "W3Schools CSS Round Each Corner Separately",
|
||||
"id": 17,
|
||||
"length": 455
|
||||
},
|
||||
{
|
||||
"text": "@media (max-width: 950px) {\n\tnav .menu {\n\t\tdisplay: flex;\n\t}\n\nnav {\n\t\tflex-direction: column;\n\t\talign-items: start;\n\t}\n\n\tnav ul {\n\t\tdisplay: none;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tmargin-bottom: 0.25rem;\n\t}\n\n\tnav ul.open {\n\t\tdisplay: flex;\n\t}\n\n\tnav ul li {\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t}\n}",
|
||||
"source": "Ruan Buhr - stelfix sourcecode",
|
||||
"id": 18,
|
||||
"length": 308
|
||||
},
|
||||
{
|
||||
"text": "@keyframes slide {\n\t0% { margin-left: 0; }\n\t50% { margin-left: 200px; }\n\t100% { margin-left: 0; }\n}\n\n.slide-div {\n\twidth: 200px;\n\theight: 100px;\n\tbackground-color: lightgreen;\n\tanimation: slide 3s infinite;\n}",
|
||||
"source": "Basic CSS Animation",
|
||||
"id": 19,
|
||||
"length": 208
|
||||
},
|
||||
{
|
||||
"text": "#grad1 {\n\theight: 200px;\n\tbackground-color: red;\n\tbackground-image: linear-gradient(red, yellow, green);\n}\n\n#grad2 {\n\theight: 200px;\n\tbackground-color: red;\n\tbackground-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);\n}\n\n#grad3 {\n\theight: 200px;\n\tbackground-color: red;\n\tbackground-image: linear-gradient(red 10%, green 85%, blue 90%);\n}",
|
||||
"source": "W3Schools CSS Linear Gradient with Multiple Color Stops",
|
||||
"id": 20,
|
||||
"length": 362
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue