Skip to content

Commit

Permalink
0.6
Browse files Browse the repository at this point in the history
  • Loading branch information
tzwel committed May 22, 2022
1 parent 785c51e commit 8f09edc
Show file tree
Hide file tree
Showing 7 changed files with 317 additions and 36 deletions.
8 changes: 4 additions & 4 deletions huy/config.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion huy/huy.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
7 changes: 6 additions & 1 deletion huy/modules/attributes.css
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@
pointer-events: none;
}

[center-self] {
margin-left: auto;
margin-right: auto;
}

[overflow] {
overflow: visible;
overflow: auto;
}
12 changes: 7 additions & 5 deletions huy/modules/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 */
Expand Down
2 changes: 2 additions & 0 deletions huy/modules/responsive-type.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


html {
font-size: calc(.4rem + 0.2vw);
}
Expand Down
51 changes: 47 additions & 4 deletions huy/modules/tags.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
}

Expand All @@ -68,6 +68,7 @@ a {
}

input {
font-size: inherit;
max-width: 100%;
outline: 0;
border: 0;
Expand All @@ -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)
}
Expand All @@ -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 {
Expand Down Expand Up @@ -128,6 +140,7 @@ input[type="checkbox"]:focus {
}

input[type="radio"] {
padding: 0;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
Expand All @@ -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%;
}
Loading

0 comments on commit 8f09edc

Please sign in to comment.