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.

Sign up for GitHub

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

Modernize and simplify CSS #74

Draft
wants to merge 12 commits into
base: next
Choose a base branch
from
Draft

Modernize and simplify CSS #74

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d69f8c1
Bump dependencies
kytta Jul 18, 2023
5a1b94b
Set server.host to 127.0.0.1
kytta Jul 18, 2023
cd27311
Rename main variables
kytta Jul 18, 2023
d13b124
Disable compilation of variables and calc
kytta Jul 18, 2023
a3d7fcc
Use flexbox and better box-sizing
kytta Jul 18, 2023
d552332
Use more CSS variables
kytta Jul 18, 2023
ec7053f
Replace most PostCSS plugins with Lightning CSS
kytta Jul 18, 2023
9e77d44
Use masks to be able to change colour
kytta Jul 18, 2023
35fb9a2
Update browserslist
kytta Jul 18, 2023
9792194
Remove fill from icons
kytta Jul 18, 2023
fb93598
Rename an scope variables for SVG and color
kytta Jul 18, 2023
83433f0
Allow customizing foreground and background colour
kytta Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Rename main variables
  • Loading branch information
@kytta
kytta committed Jul 18, 2023
commit cd27311715c7b6b583208b294959a30db2324684
26 changes: 13 additions & 13 deletions src/shareon.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
:root {
--button-size: 36px;
--icon-size: 20px;
--shareon-size: 36px;
--shareon-icon-size: 20px;

--padding-ver: calc(0.3 * var(--icon-size));
--padding-hor: calc(var(--icon-size) / 2);
--padding-icon: calc((var(--button-size) - var(--icon-size)) / 2);
--padding-ver: calc(0.3 * var(--shareon-icon-size));
--padding-hor: calc(var(--shareon-icon-size) / 2);
--padding-icon: calc((var(--shareon-size) - var(--shareon-icon-size)) / 2);

--height: calc(var(--button-size) - 2 * var(--padding-ver));
--width: calc(var(--button-size) - 2 * var(--padding-hor));
--height: calc(var(--shareon-size) - 2 * var(--padding-ver));
--width: calc(var(--shareon-size) - 2 * var(--padding-hor));
}

.shareon {
Expand All @@ -25,7 +25,7 @@
padding: var(--padding-ver) var(--padding-hor);

background-color: #333;
border-radius: calc(var(--icon-size) / 6);
border-radius: calc(var(--shareon-icon-size) / 6);
border: none;
box-sizing: content-box;
color: white;
Expand All @@ -41,15 +41,15 @@
}

.shareon > *:not(:empty) {
font-size: calc(0.8 * var(--icon-size));
font-size: calc(0.8 * var(--shareon-icon-size));
text-decoration: none;
}

.shareon > *:not(:empty)::before {
position: relative;

height: 100%;
width: calc(var(--icon-size) + var(--padding-icon));
width: calc(var(--shareon-icon-size) + var(--padding-icon));

top: 0;
left: 0;
Expand All @@ -61,14 +61,14 @@
display: inline-block;
position: absolute;

height: var(--icon-size);
width: var(--icon-size);
height: var(--shareon-icon-size);
width: var(--shareon-icon-size);

top: var(--padding-icon);
left: var(--padding-icon);

background-repeat: no-repeat;
background-size: var(--icon-size) var(--icon-size);
background-size: var(--shareon-icon-size) var(--shareon-icon-size);
content: "";
vertical-align: bottom;
}
Expand Down