xarxaprod
/
xarxaprod-wp-theme
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styled socialmedia menu as icons

This commit is contained in:
jorge 2024-03-13 21:27:01 +01:00
parent b7cd4bdf8c
commit 2f84acda90
7 changed files with 202 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
adminstyles.css
View File

@ -1052,6 +1052,73 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-ajut article:not(.type-post) .item-xxp_fund_apply_text {
font-size: 1.1rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-footer"] {
column-count: 3;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-footer"] a {
text-decoration: underline;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-legal"] li {
float: left;
padding-left: 0.8em;
font-size: 0.8em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] {
display: flex;
flex-flow: row;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li {
height: 1.5em;
width: 1.5em;
background-color: #fff;
border-radius: 5em;
margin-right: 0.3em;
position: relative;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li a {
margin-left: -10000em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li a::before {
content: "";
display: inline-flex;
align-content: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: #000;
font-size: 1em;
font-weight: 900;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li a[href*="instagram.com"]::before {
content: "in";
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li a[href*="youtube.com"]::before {
content: "yt";
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li a[href*="facebook.com"]::before {
content: "fb";
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li a[href*="twitter.com"]::before {
content: "tw";
}
.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li a[href*="mastodon"]::before {
content: "mt";
}
}
.edit-post-visual-editor__content-area .editor-styles-wrapper embed,
@ -1347,39 +1414,6 @@ Add your custom styles in this file so it is easier to update the theme.
text-decoration: underline;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer ul[id*="menu-legal"] li {
float: left;
padding-left: 0.8em;
font-size: 0.8em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer ul[id*="menu-social-media"] {
display: flex;
flex-flow: row;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer ul[id*="menu-social-media"] li {
height: 1.5em;
width: 1.5em;
background-color: #fff;
border-radius: 5em;
margin-right: 0.3em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer ul[id*="menu-social-media"] li::before {
content: "A";
display: block;
color: #000;
font-size: 1em;
width: 2em;
height: 2em;
text-align: center;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-footer ul[id*="menu-social-media"] li a {
font-size: 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper :where(.wp-block-columns.is-layout-flex) {
gap: 2rem;
}

2
adminstyles.css.map
View File

File diff suppressed because one or more lines are too long

2
assets/css/adminstyles.css
View File

File diff suppressed because one or more lines are too long

64
sass/base/elements/_lists.scss
View File

@ -89,4 +89,68 @@ dd {
}
}
}
ul[id*="menu-footer"] {
column-count: 3;
a {
text-decoration: underline;
}
}
ul[id*="menu-legal"] li {
float: left;
padding-left: 0.8em;
font-size: 0.8em;
}
ul[id*="menu-social-media"] {
display:flex;
flex-flow: row;
li {
height: 1.5em;
width: 1.5em;
background-color: $color__white;
border-radius: 5em;
margin-right: 0.3em;
position: relative;
//&:before {
// content:"";
// display: block;
// color: $color__black;
// font-size: 1em;
// width: 2em;
// height: 2em;
// text-align:center;
//}
a {
margin-left: -10000em;
&:before {
content:"";
display: inline-flex;
align-content: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: $color__black;
font-size: 1em;
font-weight: 900;
}
&[href*="instagram.com"]:before{
content: "in";
}
&[href*="youtube.com"]:before{
content: "yt";
}
&[href*="facebook.com"]:before{
content: "fb";
}
&[href*="twitter.com"]:before{
content: "tw";
}
&[href*="mastodon"]:before{
content: "mt";
}
}
}
}
}

33
sass/layouts/_no-sidebar.scss
View File

@ -76,9 +76,6 @@
margin-top: 4em;
:where(.wp-block-columns.is-layout-flex) {
gap: $grid__gap * 5; //8em;
}
.wp-block-column:last-of-type {
//padding-left: 4em;
}
.site-info {
&> section {
@ -98,35 +95,6 @@
a {
text-decoration: underline;
}
}
ul[id*="menu-legal"] li {
float: left;
padding-left: 0.8em;
font-size: 0.8em;
}
ul[id*="menu-social-media"] {
display:flex;
flex-flow: row;
li {
height: 1.5em;
width: 1.5em;
background-color: $color__white;
border-radius: 5em;
margin-right: 0.3em;
&:before {
content:"A";
display: block;
color: $color__black;
font-size: 1em;
width: 2em;
height: 2em;
text-align:center;
}
a {
font-size: 0px;
}
}
}
}//end .site-footer
:where(.wp-block-columns.is-layout-flex) {
@ -256,3 +224,4 @@
padding: 0;
}
}

100
style.css
View File

@ -903,6 +903,73 @@ dd {
.single-xarxaprod-ajut article:not(.type-post) .item-xxp_fund_apply_text {
font-size: 1.1rem;
}
ul[id*="menu-footer"] {
column-count: 3;
}
ul[id*="menu-footer"] a {
text-decoration: underline;
}
ul[id*="menu-legal"] li {
float: left;
padding-left: 0.8em;
font-size: 0.8em;
}
ul[id*="menu-social-media"] {
display: flex;
flex-flow: row;
}
ul[id*="menu-social-media"] li {
height: 1.5em;
width: 1.5em;
background-color: #fff;
border-radius: 5em;
margin-right: 0.3em;
position: relative;
}
ul[id*="menu-social-media"] li a {
margin-left: -10000em;
}
ul[id*="menu-social-media"] li a::before {
content: "";
display: inline-flex;
align-content: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
color: #000;
font-size: 1em;
font-weight: 900;
}
ul[id*="menu-social-media"] li a[href*="instagram.com"]::before {
content: "in";
}
ul[id*="menu-social-media"] li a[href*="youtube.com"]::before {
content: "yt";
}
ul[id*="menu-social-media"] li a[href*="facebook.com"]::before {
content: "fb";
}
ul[id*="menu-social-media"] li a[href*="twitter.com"]::before {
content: "tw";
}
ul[id*="menu-social-media"] li a[href*="mastodon"]::before {
content: "mt";
}
}
/* Make sure embeds and iframes fit their containers. */
@ -1206,39 +1273,6 @@ textarea {
text-decoration: underline;
}
.site-footer ul[id*="menu-legal"] li {
float: left;
padding-left: 0.8em;
font-size: 0.8em;
}
.site-footer ul[id*="menu-social-media"] {
display: flex;
flex-flow: row;
}
.site-footer ul[id*="menu-social-media"] li {
height: 1.5em;
width: 1.5em;
background-color: #fff;
border-radius: 5em;
margin-right: 0.3em;
}
.site-footer ul[id*="menu-social-media"] li::before {
content: "A";
display: block;
color: #000;
font-size: 1em;
width: 2em;
height: 2em;
text-align: center;
}
.site-footer ul[id*="menu-social-media"] li a {
font-size: 0;
}
:where(.wp-block-columns.is-layout-flex) {
gap: 2rem;
}

2
style.css.map
View File

File diff suppressed because one or more lines are too long