~/Projects/ui
git clone https://code.lsong.org/ui
Commit
- Commit
- c75c4935d4f0742dcc201f08b7e8f030e50b2475
- Author
- David Mraz <[email protected]>
- Date
- 2023-08-21 11:17:55 +0200 +0200
- Diffstat
socials-03/icons/instagram.svg | 1
socials-03/icons/linkedin.svg | 1
socials-03/icons/twitter.svg | 1
socials-03/icons/youtube.svg | 1
socials-03/index.html | 101 +++++++++++++++++++++++++----------
socials-03/style.css | 65 +++++++++++-----------
feat: socials 03
diff --git a/socials-03/icons/instagram.svg b/socials-03/icons/instagram.svg
deleted file mode 100644
index 5e684bf39b85071203fcfa618a9690cc78b40eb6..0000000000000000000000000000000000000000
--- a/socials-03/icons/instagram.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
\ No newline at end of file
diff --git a/socials-03/icons/linkedin.svg b/socials-03/icons/linkedin.svg
deleted file mode 100644
index 7068d826cb2485f11cc797471946952bbb7fe321..0000000000000000000000000000000000000000
--- a/socials-03/icons/linkedin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
\ No newline at end of file
diff --git a/socials-03/icons/twitter.svg b/socials-03/icons/twitter.svg
deleted file mode 100644
index b36d412fbd4b9719bd3e5a81207589aef16810f6..0000000000000000000000000000000000000000
--- a/socials-03/icons/twitter.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
\ No newline at end of file
diff --git a/socials-03/icons/youtube.svg b/socials-03/icons/youtube.svg
deleted file mode 100644
index 23554f08b84effab546401b67ce80716db0b6c0c..0000000000000000000000000000000000000000
--- a/socials-03/icons/youtube.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-youtube"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
\ No newline at end of file
diff --git a/socials-03/index.html b/socials-03/index.html
index ab6f301dd8cecb3156520b20a4a3dfee9556d4a2..195844568889fdc5dbb74c50ca06f1692da6b1f9 100644
--- a/socials-03/index.html
+++ b/socials-03/index.html
@@ -1,69 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Social Buttons</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+
<!DOCTYPE html>
+
<html lang="en">
+ <div class="background">
+<html lang="en">
<head>
+<html lang="en">
<meta charset="UTF-8">
+<html lang="en">
<title>Social Buttons</title>
+<html lang="en">
<meta
+<html lang="en">
name="viewport"
+<html lang="en">
content="width=device-width, initial-scale=1.0"
-
+ <head>
-
+ <head>
-
+ <head>
<!DOCTYPE html>
-
+ <head>
<html lang="en">
-
+ <head>
<head>
-
+ <head>
<meta charset="UTF-8">
-
+ <head>
<title>Social Buttons</title>
-
+ <head>
<meta
-
+ <li>
+ <head>
name="viewport"
-
+ <svg
+ xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+<html lang="en">
content="width=device-width, initial-scale=1.0"
-<!DOCTYPE html>
+ <meta charset="UTF-8">
-<!DOCTYPE html>
+ <head>
+ <meta charset="UTF-8">
+ 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5
+ 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+ >
+ </path>
+ </svg>
+ <head>
<title>Social Buttons</title>
-
+ <head>
<meta
- alt="Twitter"
+ <li>
+ <a href="#threads" title="Threads">
+ <svg
-<!DOCTYPE html>
<html lang="en">
+ name="viewport"
- />
+ viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+ fill="none" stroke-linecap="round" stroke-linejoin="round"
-<!DOCTYPE html>
+ <head>
-
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<title>Social Buttons</title>
+ <title>Social Buttons</title>
- <meta
+ <title>Social Buttons</title>
<!DOCTYPE html>
+ <meta charset="UTF-8">
<head>
-<!DOCTYPE html>
+ <meta charset="UTF-8">
<meta charset="UTF-8">
- />
+ </svg>
- </span>
-
+ <head>
<title>Social Buttons</title>
-
+ <head>
<meta
-<!DOCTYPE html>
+ <li>
<title>Social Buttons</title>
+<html lang="en">
-<!DOCTYPE html>
+<html lang="en">
<meta
-<!DOCTYPE html>
+ xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+ viewBox="0 0 24 24" fill="none" stroke="currentColor"
+ <meta charset="UTF-8">
-<!DOCTYPE html>
+ <head>
-<!DOCTYPE html>
+ <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2
+ 2v7h-4v-7a6 6 0 0 1 6-6z"
+ />
+ <title>Social Buttons</title>
name="viewport"
-<!DOCTYPE html>
+ <title>Social Buttons</title>
content="width=device-width, initial-scale=1.0"
+ </svg>
+ </a>
+ </li>
+ </ul>
+ </div>
</body>
</html>
diff --git a/socials-03/style.css b/socials-03/style.css
index 3929ce588234f5d0bf15bedf9a77c7e212f0509d..af4bb3ccf1610aa88e7b940ef249d44fab7e1863 100644
--- a/socials-03/style.css
+++ b/socials-03/style.css
@@ -1,10 +1,11 @@
:root {
--background: #2C2C2C;
- --linkedin: #0A66C2;
+ --primary-color: white;
--youtube: #e52d27;
- --twitter: #1D9BF0;
+* {
}
+/* CSS reset */
* {
margin: 0;
padding: 0;
@@ -22,68 +23,68 @@ .social-media-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
- --background: #2C2C2C;
+ gap: 16px;
+ --twitter: #1D9BF0;
:root {
}
- --background: #2C2C2C;
+ --twitter: #1D9BF0;
--background: #2C2C2C;
- --background: #2C2C2C;
+ --twitter: #1D9BF0;
--linkedin: #0A66C2;
- --background: #2C2C2C;
+ --twitter: #1D9BF0;
--youtube: #e52d27;
- --background: #2C2C2C;
+ --twitter: #1D9BF0;
--twitter: #1D9BF0;
--background: #2C2C2C;
+
+ display: grid;
+ --twitter: #1D9BF0;
}
+ place-items: center;
--background: #2C2C2C;
+* {
+ border: 1px solid var(--primary-color);
+}
- --background: #2C2C2C;
+ --twitter: #1D9BF0;
* {
display: grid;
place-items: center;
-}
-
- --background: #2C2C2C;
+ --twitter: #1D9BF0;
margin: 0;
- --linkedin: #0A66C2;
+}
- transition: all 0.3s;
+ color: var(--secondary-color);
}
-.social-media-button img {
+}
--background: #2C2C2C;
-* {
}
+ --linkedin: #0A66C2;
+ --twitter: #1D9BF0;
-.social-media-button:hover img {
- transform: scale(1.15);
+ border-radius: 8px;
}
- --linkedin: #0A66C2;
+}
--youtube: #e52d27;
- --linkedin: #0A66C2;
+}
--twitter: #1D9BF0;
- --linkedin: #0A66C2;
+}
}
- --linkedin: #0A66C2;
+}
- --linkedin: #0A66C2;
+}
* {
- --linkedin: #0A66C2;
+}
margin: 0;
}
- --youtube: #e52d27;
+
- --youtube: #e52d27;
+
:root {
-}
- --youtube: #e52d27;
--background: #2C2C2C;
- background-color: var(--youtube);
}
-
-.social-media-button:hover:nth-child(4) {
- background-color: var(--linkedin);
+* {
- --youtube: #e52d27;
}
