diff --git a/huy/config.css b/huy/config.css index 9b4e1a5..19a6777 100644 --- a/huy/config.css +++ b/huy/config.css @@ -2,8 +2,8 @@ /* Global colors used through the whole project */ --accent: rgb(243, 91, 192); --accent-transparent: rgba(243, 91, 192, 0.5); - --color: rgba(219, 219, 219, 0.88); - --background: #1f1f22; + --color: rgb(219, 219, 219); + --background: #1d1d1d; /* Rounded edges for common elements */ --border-radius: 4px; @@ -12,11 +12,11 @@ --focus: rgb(73, 251, 73); /* Global padding */ - --padding: 1rem; + --padding: 2rem; /* Lobotomized owl selector for margins between elements, defaults to 0 since it creates problems with flexbox-based responsive desings */ - --owl: 1rem; + --owl: 2.5rem; /* Addition (or substraction) to the global font size. Can be assigned negative values, although it's not recommended since diff --git a/huy/huy.css b/huy/huy.css index 822de5e..16c0be0 100644 --- a/huy/huy.css +++ b/huy/huy.css @@ -18,6 +18,6 @@ @import url(config.css); /* Configure your project here */ @import url(./modules/base.css); /* Base styles, basically the skeleton of your project */ @import url(./modules/responsive-type.css); /* An optional module that scales the font according to the current screen size */ -@import url(./modules/webapp.css); /* An optional module recommended to use when building apps that need that native feel */ +/*@import url(./modules/webapp.css);*/ /* An optional module recommended to use when building apps that need that native feel, disabled on default. */ @import url(./modules/tags.css); /* An important module styling most of your project. This makes huy.css look the way it looks */ @import url(./modules/attributes.css); /* An optional utility module letting you use attributes in your html code that will style an element they are used on */ diff --git a/huy/modules/attributes.css b/huy/modules/attributes.css index c99f477..29bc3af 100644 --- a/huy/modules/attributes.css +++ b/huy/modules/attributes.css @@ -64,6 +64,11 @@ pointer-events: none; } +[center-self] { + margin-left: auto; + margin-right: auto; +} + [overflow] { - overflow: visible; + overflow: auto; } \ No newline at end of file diff --git a/huy/modules/base.css b/huy/modules/base.css index 163347d..2435c63 100644 --- a/huy/modules/base.css +++ b/huy/modules/base.css @@ -2,10 +2,11 @@ margin: 0; padding: 0; position: relative; - -webkit-box-sizing: inherit; + -webkit-box-sizing: inherit; box-sizing: inherit; max-width: 100%; - line-height: 1.3; + line-height: 1.5; + word-wrap: break-word; } *:focus-visible { @@ -27,11 +28,12 @@ html, body { text-rendering: optimizeLegibility; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; overflow-y: auto; - font-size: calc(1em + var(--font-scaling)); - display: flex; - flex-direction: column; + font-size: calc(1.2rem + var(--font-scaling)); + display: block; width: 100%; height: 100%; + -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + text-rendering: geometricPrecision; } /* A fix for Electron */ diff --git a/huy/modules/responsive-type.css b/huy/modules/responsive-type.css index e30c0d3..7975bbd 100644 --- a/huy/modules/responsive-type.css +++ b/huy/modules/responsive-type.css @@ -1,3 +1,5 @@ + + html { font-size: calc(.4rem + 0.2vw); } diff --git a/huy/modules/tags.css b/huy/modules/tags.css index 09f4f5a..03a6254 100644 --- a/huy/modules/tags.css +++ b/huy/modules/tags.css @@ -22,7 +22,7 @@ h6 { font-size: calc(1em + var(--font-scaling)) } -button, a[role="button"] { +button, a[role="button"], input[type="button"], input[type="reset"], input[type="submit"] { text-decoration: none; color: var(--accent); background-color: var(--background); @@ -39,18 +39,18 @@ button, a[role="button"] { border-radius: var(--border-radius); transition: background-color .2s, color .15s, box-shadow .15s; padding: .8rem 2.2rem; - font-size: 1.8rem; + font-size: inherit; border: 1px solid var(--accent); box-shadow: 0px 0px 0px 0px transparent; font-family: inherit; } -button:hover, a[role="button"]:hover { +button:hover, a[role="button"]:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { color: var(--background); background-color: var(--accent); } -button:focus, a[role="button"]:focus { +button:focus, a[role="button"]:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus { box-shadow: 0px 0px 0px 4px var(--accent-transparent); } @@ -68,6 +68,7 @@ a { } input { + font-size: inherit; max-width: 100%; outline: 0; border: 0; @@ -80,6 +81,15 @@ input { box-shadow: 0px 0px 0px 0px transparent; } +input { + border-radius: var(--border-radius); + border: 1px solid var(--accent); + background: transparent; + min-width: 40px; + min-height: 30px; + padding: .8rem 1.2rem; +} + input:focus:not([type="checkbox"]) { box-shadow: 0px 0px 0px 4px var(--accent-transparent) } @@ -100,6 +110,8 @@ input[type="checkbox"] { border-radius: var(--border-radius); transition: box-shadow .15s; cursor: pointer; + min-width: 0; + min-height: 0; } input[type="checkbox"]::after { @@ -128,6 +140,7 @@ input[type="checkbox"]:focus { } input[type="radio"] { + padding: 0; -webkit-appearance: none; appearance: none; background-color: #fff; @@ -140,12 +153,42 @@ input[type="radio"] { background: transparent; transition: background .2s, box-shadow .15s; cursor: pointer; + min-width: 0; + min-height: 0; + max-height: 1em; + max-width: 1em; } input[type="radio"]:checked { background: var(--accent); } +label { + display: block; +} + +form, fieldset { + border: 0; +} + +mark { + background-color: var(--accent-transparent); + color: var(--color); +} + +pre { + max-width: 100%; + word-wrap:normal; + white-space: pre-wrap; +} + +hr { + border-color: rgba(130, 130, 130, 0.2); + outline: 0; + border-style: solid; + border-width: 2px; +} + footer { width: 100%; } \ No newline at end of file diff --git a/index.html b/index.html index 2362613..b35010d 100644 --- a/index.html +++ b/index.html @@ -6,30 +6,259 @@
huy.css is a barebones css boilerplate letting you quickly jumpstart your projects
- -Some cool text
- - - - - - - +Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman's call?
+Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.
+Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?
+Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.
+Delay freezes Gollum. Let the Ring-bearer decide. Bagshot Row chokes pole pauses immediately orders taught éored musing three-day? Disease rune repel source fire Goblinses already?
++ | Dangers | +Playing | +Window | +Meaning | +Pace | +
---|---|---|---|---|---|
Current | +living | +odds | +charged | +heads | +felt | +
Inn | +climbing | +destroying | +overhead | +roll | +mud | +
Breath | +relevant | +éored | +hinges | +year | +signed | +
Accept | +threads | +name | +fitted | +precious | +attacked | +
Chief | +sails | +first-born | +pottery | +lever | +antagonize | +
Unoccupied | +victorious | +means | +lovely | +humble | +force | +
kinsmen | +give | +walking | +thousand | +manners | +burning | +
What about second breakfast? Nags runt near Lindir lock discover level? Andûril breathe waited flatten union.
+++You shall be the Fellowship of the Ring.
+ +
I think we should get off the road. Penalty sight splintered Misty Mountain mithril? Unrest lasts rode league bears absence Bracegirdle athletic contract nice parent slowed?
+Pardon Concerning Hobbits rune goblins? Twitching figure including rightful Thorin's level! Worth tubers threats Hornburg deadliest? Unfold thumping shh wants Homely!+
J.R.R. Tolkien 3000 uttered veins roaring winds moaning flaming
. Meddle measure pure Samwise Gamgee business! Lied mistake Proudfoots pon. Instance 80 morbid ceremonial plunge Anor mad. Questions shells hangs noble Proudfoots throws. Rampart damage questions Chubbs 3000 conjurer? Single tempt peasants Bolg Athelas Mordor Wraiths Azog Undómiel mangler? Nori Giants Undómiel Rivendell spike posts took. Fool's Underhill boarded vanishing twilight unheard-of. Presence Dunland lamb lair. Barricade didn't feelings purring vine Morgoth. Distract Giants nearing champion T. Clothing titles quick bother Arod Gloin Beren troop? Balls crashing bastards arrives precisely rascal stubbornness Snowbourn. Hobbitses rose barren strengths tested mirrors moonlight password center? Remade Elessar Wolves posts remain doorway said! fight Merry hungers locked yelp.