Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS version with var #72

Open
cekvenich2 opened this issue Oct 11, 2021 · 2 comments
Open

CSS version with var #72

cekvenich2 opened this issue Oct 11, 2021 · 2 comments

Comments

@cekvenich2
Copy link

Is there a fork of CSS w/ var and no SCSS?

@cekvenich2
Copy link
Author

Just made one: root{
--color-blossom: #1d7484;
--color-fade: #982c61;

--color-bg: #f9f9f9;
--color-bg-alt: #f1f1f1;

--color-text: #4a4a4a;
--font-size-base: 1.8rem;

--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-family-heading: --font-family-base;
}

/* Body /
html {
font-size: 62.5%; /
So that root size becomes 10px*/
font-family: var(--font-family-base);
}

body {
/* var(--font-size-base must be a rem value */
font-size: var(--font-size-base);
line-height: 1.618;
max-width: 38em;
margin: auto;
color: var(--color-text);
background-color: var(--color-bg);
padding: 13px;
}

@media (max-width: 684px) {
body {
font-size: var(--font-size-base * 0.85);
}
}

@media (max-width: 382px) {
body {
font-size: var(--font-size-base * 0.75);
}
}

/* added Nav */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666;
position: fixed;
top: 0;
width: 100%;
}

nav ul li {
float: left;
border-right: 1px solid #bbb;
}

nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
nav ul li a:hover {
background-color: #111;
}

:root {
--word-wrap: {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
}
}

h1, h2, h3, h4, h5, h6 {
line-height: 1.1;
font-family: var(--font-family-heading);
font-weight: 700;
margin-top: 3rem;
margin-bottom: 1.5rem;
@apply --word-wrap;
}

h1 { font-size: 2.35em }
h2 { font-size: 2.00em }
h3 { font-size: 1.75em }
h4 { font-size: 1.5em }
h5 { font-size: 1.25em }
h6 { font-size: 1em }

p {
margin-top: 0px;
margin-bottom: 2.5rem;
}

small, sub, sup {
font-size: 75%;
}

hr {
border-color: var(--color-blossom);
}

a {
text-decoration: none;
color: var(--color-blossom);

& hover {
    color: var(--color-fade);
    border-bottom: 2px solid var(--color-text);
}

& visited {
    color: darken(var(--color-blossom, 10%));
}

}

ul {
padding-left: 1.4em;
margin-top: 0px;
margin-bottom: 2.5rem;
}

li {
margin-bottom: 0.4em;
}

blockquote {
margin-left: 0px;
margin-right: 0px;
padding-left: 1em;
padding-top: 0.8em;
padding-bottom: 0.8em;
padding-right: 0.8em;
border-left: 5px solid var(--color-blossom);
margin-bottom: 2.5rem;
background-color: var(--color-bg-alt);
}

blockquote p {
margin-bottom: 0;
}

img, video {
height: auto;
max-width: 100%;
margin-top: 0px;
margin-bottom: 2.5rem;
}

/* Pre and Code */
pre {
background-color: var(--color-bg-alt);
display: block;
padding: 1em;
overflow-x: auto;
margin-top: 0px;
margin-bottom: 2.5rem;
}

code {
font-size: 0.9em;
padding: 0 0.5em;
background-color: var(--color-bg-alt);
white-space: pre-wrap;
}

pre > code {
padding: 0;
background-color: transparent;
white-space: pre;
}

/* Tables */
table {
text-align: justify;
width: 100%;
border-collapse: collapse;
}

td, th {
padding: 0.5em;
border-bottom: 1px solid var(--color-bg-alt);
}

/* Buttons, forms and input */
input, textarea {
border: 1px solid var(--color-text);

& focus {
    border: 1px solid var(--color-blossom);
}

}

textarea {
width: 100%;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
display: inline-block;
padding: 5px 10px;
text-align: center;
text-decoration: none;
white-space: nowrap;

background-color: var(--color-blossom);
color: var(--color-bg;
border-radius: 1px;
border: 1px solid var(--color-blossom);
cursor: pointer;http://155.138.194.207:8080/sty/
box-sizing: border-box;

&[disabled] {
    cursor: default;
    opacity: .5;
}

& focus:enabled, & hover:enabled {
    background-color: var(--color-fade);
    border-color: var(--color-fade);
    color: var(--color-bg);
    outline: 0;
}

}

textarea, select, input {
color: var(--color-text);
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
margin-bottom: 10px;
background-color: var(--color-bg-alt);
border: 1px solid var(--color-bg-alt);
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;

& focus {
    border: 1px solid var(--color-blossom);
    outline: 0;
}

}

input[type="checkbox"]:focus {
outline: 1px dotted var(--color-blossom);
}

label, legend, fieldset {
display: block;
margin-bottom: .5rem;
font-weight: 600;
}

@oxalorg
Copy link
Owner

oxalorg commented Dec 15, 2021

Thanks for doing this. Super appreciate it.

I've been considering doing this, but it makes styling different themes a bit difficult. Also although support for css vars has gotten quite good, for something so simple we might as well support IE and other older browsers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants