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

Compare commits

base: xarxaprod:b40bb55e740805d4bd4c4172980b2decfed4dc45
Branches Tags
xarxaprod:main
xarxaprod:dev
xarxaprod:db-fields-migration
xarxaprod:ofsupimport
...
compare: xarxaprod:7d25caa7f53b7c9985416f0bac76b81d6271df07
Branches Tags
xarxaprod:dev
xarxaprod:main
xarxaprod:db-fields-migration
xarxaprod:ofsupimport

3 Commits
b40bb55e74 ... 7d25caa7f5

Author SHA1 Message Date
jorge 7d25caa7f5 modified header and menus on big and small screens 2024-03-14 18:55:12 +01:00
jorge e120687f58 darkened placeholder and ordered view in small screens 2024-03-14 18:54:24 +01:00
jorge 84f6205721 styled header and widths with better solution for scroll and possitions 2024-03-14 17:21:02 +01:00
9 changed files with 257 additions and 127 deletions
Show Stats Expand all files Collapse all files

116
adminstyles.css
View File

@ -1165,6 +1165,14 @@ Add your custom styles in this file so it is easier to update the theme.
outline: 0;
}
@media screen and (max-width: 48em) {
.edit-post-visual-editor__content-area .editor-styles-wrapper a {
overflow-wrap: anywhere;
word-break: normal;
}
}
.edit-post-visual-editor__content-area .editor-styles-wrapper button,
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="button"],
.edit-post-visual-editor__content-area .editor-styles-wrapper input[type="reset"],
@ -1308,11 +1316,23 @@ Add your custom styles in this file so it is easier to update the theme.
@media screen {
.edit-post-visual-editor__content-area .editor-styles-wrapper html:not([data-scroll="0"]) .site-header {
.edit-post-visual-editor__content-area .editor-styles-wrapper html:not([data-scroll="0"]) .site-header::before {
content: "";
display: inline-block;
position: absolute;
width: 100vw;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
height: 100%;
z-index: -1;
background-color: #fff;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site {
position: relative;
display: grid;
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-auto-rows: min-content auto min-content min-content;
@ -1343,12 +1363,8 @@ Add your custom styles in this file so it is easier to update the theme.
position: sticky;
top: 0;
z-index: 500;
display: grid;
grid-template-areas: "main" "secondary ";
grid-row: auto;
align-items: center;
width: 100%;
padding: 0.5rem 0;
width: 100vw;
background-color: transparent;
}
@ -1443,8 +1459,23 @@ Add your custom styles in this file so it is easier to update the theme.
@media screen and (min-width: 48em) {
.edit-post-visual-editor__content-area .editor-styles-wrapper html:not([data-scroll="0"]) .site-header::before {
content: "";
display: inline-block;
position: absolute;
width: 100vw;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
height: 100%;
z-index: -1;
background-color: #fff;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site > header {
grid-column: 1 / -1;
grid-column: 2 / 4;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site > main {
@ -1460,9 +1491,6 @@ Add your custom styles in this file so it is easier to update the theme.
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-header {
display: grid;
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-template-areas: "main " "secondary ";
margin: auto;
margin-bottom: 2rem;
padding: 0;
@ -1480,7 +1508,7 @@ Add your custom styles in this file so it is easier to update the theme.
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main {
padding: 0 2rem;
padding: 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > section {
@ -1568,8 +1596,8 @@ Add your custom styles in this file so it is easier to update the theme.
padding-left: 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul ul.sub-menu,
.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul ul.sub-menu {
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .sub-menu,
.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul .sub-menu {
padding-top: 0.5rem;
padding-left: 1rem;
}
@ -1581,15 +1609,28 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation a,
.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation a {
display: flex;
align-items: center;
min-height: 100%;
text-decoration: none;
font-size: 1rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled ul {
display: block;
margin: 0;
padding: 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled ul .sub-menu {
padding: 0.5em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled li {
padding: 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled a {
margin: 0;
padding: 0.5em;
display: block;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled .main-navigation-content {
@ -1693,17 +1734,6 @@ Add your custom styles in this file so it is easier to update the theme.
}
}
@media screen and (max-width: 47.99em) {
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation-content li {
padding: 0.5rem 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation-content {
padding: 4rem 2rem;
}
}
@media screen and (min-width: 48em) {
.edit-post-visual-editor__content-area .editor-styles-wrapper {
@ -1734,6 +1764,8 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .menu-item-has-children > ul,
.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul .menu-item-has-children > ul {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: -4px 4px 15px #999;
border-radius: 0.2em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .sub-menu,
@ -1743,6 +1775,8 @@ Add your custom styles in this file so it is easier to update the theme.
top: 100%;
left: -999em;
z-index: 99999;
padding-top: 0.5rem;
padding-left: 1rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .sub-menu ul,
@ -1757,17 +1791,20 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul .sub-menu li.focus > ul {
display: block;
left: 4em;
top: 1em;
top: 3em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .sub-menu a,
.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul .sub-menu a {
display: flex;
align-items: center;
min-height: 100%;
width: 200px;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul li,
.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul li {
padding: 0 1em;
padding: 1em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul li:hover > ul,
@ -1787,11 +1824,6 @@ Add your custom styles in this file so it is easier to update the theme.
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul ul.sub-menu {
flex-direction: column;
padding: 0.5rem;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul ul.sub-menu li {
margin: 0.5rem 0;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation .current-menu-ancestor > a::after,
@ -1800,8 +1832,7 @@ Add your custom styles in this file so it is easier to update the theme.
content: "";
position: absolute;
left: 1em;
bottom: -0.5em;
min-height: 2px;
bottom: 0.5em;
height: 2px;
width: calc(100% - 2em);
background-color: #000;
@ -2151,6 +2182,7 @@ 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-associat .xarxaprod-associat .xarxaprod-associat-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr;
gap: 2rem;
}
@ -2179,7 +2211,7 @@ 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-associat .xarxaprod-associat .xarxaprod-associat-location .xarxaprod-associat-osm-link {
display: grid;
grid-template-columns: min-content auto;
grid-template-columns: auto;
align-items: center;
}
@ -2285,7 +2317,7 @@ Add your custom styles in this file so it is easier to update the theme.
height: auto;
aspect-ratio: 1/1;
margin-bottom: 2em;
background-color: rgba(240, 240, 240, 0.2);
background-color: rgba(240, 240, 240, 0.4);
border-radius: 0.3em;
}
@ -2404,6 +2436,14 @@ Add your custom styles in this file so it is easier to update the theme.
font-size: 1.5em;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-info {
grid-template-columns: 1fr 1fr 1fr;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-location .xarxaprod-associat-osm-link {
grid-template-columns: min-content auto;
}
.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each {
flex-direction: row-reverse;
}

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

16
sass/base/elements/_links.scss
View File

@ -21,3 +21,19 @@ a {
outline: 0;
}
}
@media screen {
}
@media screen and (max-width: 48em) {
//only smaller than 48em
a {
overflow-wrap: anywhere;
word-break: normal;
}
}
@media screen and (min-width: 48em) {
//only bigger than 48em
}
@media screen and (min-width: 80em) {
//only bigger than 80rem
}

17
sass/components/content/_posts-and-pages.scss
View File

@ -201,6 +201,7 @@
.xarxaprod-associat-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr;
gap: $grid__gap * 2;
.xarxaprod-associat-contact,
.xarxaprod-associat-services {
@ -233,7 +234,7 @@
}
.xarxaprod-associat-osm-link {
display: grid;
grid-template-columns: min-content auto;
grid-template-columns: auto;
align-items: center;
h6,p,a {
margin: 0.5em ;
@ -336,7 +337,7 @@
height: auto;
aspect-ratio: 1/1;
margin-bottom: 2em;
background-color: rgba(240,240,240,0.2);
background-color: rgba(240,240,240,0.4);
border-radius: 0.3em;
}
}
@ -452,6 +453,18 @@
}
}
.single-xarxaprod-associat {
.xarxaprod-associat {
.xarxaprod-associat-info {
grid-template-columns: 1fr 1fr 1fr;
}
.xarxaprod-associat-location {
.xarxaprod-associat-osm-link {
grid-template-columns: min-content auto;
}
}
}
}
.xarxaprod-agenda {
.xarxaprod-card-each {
flex-direction: row-reverse;

65
sass/components/navigation/_navigation.scss
View File

@ -17,22 +17,15 @@
list-style: none;
margin: 0;
padding-left: 0;
ul.sub-menu {
.sub-menu {
padding-top: 0.5rem;
padding-left: 1rem;
}
}
li {
position: relative;
&:hover > a,
&.focus > a {
}
}
a {
display: flex;
align-items: center;
min-height: 100%;
text-decoration: none;
font-size: 1rem;
}
@ -42,7 +35,23 @@
&.toggled {
ul {
display: block;
margin:0;
padding:0;
.sub-menu {
padding: 0.5em;
a {
}
}
}
li {
padding: 0;
}
a {
margin:0;
padding: 0.5em;
display: block;
}
.main-navigation-content {
display: inline-block;
position: absolute;
@ -137,16 +146,16 @@
/* end of menu hidden*/
}
@media screen and (max-width: 47.99em) {
@media screen and (max-width: 48em) {
.site-branding {
}
.main-navigation-content {
li {
padding: 0.5rem 0;
//padding: 0.5rem 0;
}
}
.secondary-navigation-content {
padding: 4rem 2rem;
//padding: 4rem 2rem;
}
}
@media screen and (min-width: 48em) {
@ -166,6 +175,8 @@
flex-flow: row;
.menu-item-has-children > ul {
background-color: rgba(255,255,255,0.95);
box-shadow: -4px 4px 15px #999;
border-radius: 0.2em;
}
.sub-menu {
float: left;
@ -173,43 +184,35 @@
top: 100%;
left: -999em;
z-index: 99999;
padding-top: 0.5rem;
padding-left: 1rem;
ul {
left: -999em;
top: 0;
}
li {
&:hover > ul,
&.focus > ul {
display: block;
left: 4em;
top: 1em;
top: 3em;
}
}
a {
a {
display: flex;
align-items: center;
min-height: 100%;
width: 200px;
}
:hover > a,
.focus > a {
}
a:hover,
a.focus {
}
}
li {
padding: 0 1em;
//order: 2;
padding: 1em;
&:hover > ul,
&.focus > ul {
left: auto;
}
&.lang-item {
//order: 1;
}
}
}
@ -221,9 +224,9 @@
justify-content: end;
ul.sub-menu {
flex-direction: column;
padding: 0.5rem;
//padding: 0.5rem;
li {
margin: 0.5rem 0;
//padding: 0.5rem;
}
}
}
@ -233,8 +236,8 @@
content: "";
position: absolute;
left: 1em;
bottom: -0.5em;
min-height: 2px;
bottom: 0.5em;
//min-height: 0.2em;
height: 2px;
width: calc(100% - 2em);
background-color: $color__black;

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

@ -1,12 +1,24 @@
@media screen {
html:not([data-scroll='0']) {
.site-header {
.site-header:before {
content: "";
display:inline-block;
position: absolute;
width: 100vw;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right:-50vw;
height: 100%;
z-index: -1;
background-color: $color__white;
}
}
.no-sidebar {
}
.site {
position: relative;
display: grid;
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-auto-rows: min-content auto min-content min-content;
@ -36,14 +48,8 @@
position: sticky;
top: 0;
z-index: 500;
display: grid;
grid-template-areas:
"main"
"secondary ";
grid-row: auto;
align-items: center;
width: 100%;
padding: 0.5rem 0;
width: 100vw;
background-color: transparent;
.main {
@ -124,10 +130,27 @@
}
@media screen and (min-width: 48em) {
//only bigger than 48em
html:not([data-scroll='0']) {
.site-header:before {
content: "";
display:inline-block;
position: absolute;
width: 100vw;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right:-50vw;
height: 100%;
z-index: -1;
background-color: $color__white;
}
}
.site {
//grid-template-columns: 1fr 2fr 2fr 1fr;
> header {
grid-column: 1 / -1;
//grid-column: 1 / -1;
grid-column: 2 / 4;
}
> main {
grid-column: 2 / 4;
@ -140,11 +163,6 @@
}
}
.site-header {
display: grid;
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-template-areas:
"main "
"secondary ";
margin: auto;
margin-bottom: 2rem;
padding: 0;
@ -160,7 +178,7 @@
}
}
.site-main {
padding: 0 2rem;
padding: 0;
> section {
padding: 4em 0;
}

116
style.css
View File

@ -1019,6 +1019,14 @@ a:active {
outline: 0;
}
@media screen and (max-width: 48em) {
a {
overflow-wrap: anywhere;
word-break: normal;
}
}
/* Forms
--------------------------------------------- */
button,
@ -1167,11 +1175,23 @@ textarea {
--------------------------------------------------------------*/
@media screen {
html:not([data-scroll="0"]) .site-header {
html:not([data-scroll="0"]) .site-header::before {
content: "";
display: inline-block;
position: absolute;
width: 100vw;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
height: 100%;
z-index: -1;
background-color: #fff;
}
.site {
position: relative;
display: grid;
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-auto-rows: min-content auto min-content min-content;
@ -1202,12 +1222,8 @@ textarea {
position: sticky;
top: 0;
z-index: 500;
display: grid;
grid-template-areas: "main" "secondary ";
grid-row: auto;
align-items: center;
width: 100%;
padding: 0.5rem 0;
width: 100vw;
background-color: transparent;
}
@ -1302,8 +1318,23 @@ textarea {
@media screen and (min-width: 48em) {
html:not([data-scroll="0"]) .site-header::before {
content: "";
display: inline-block;
position: absolute;
width: 100vw;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
height: 100%;
z-index: -1;
background-color: #fff;
}
.site > header {
grid-column: 1 / -1;
grid-column: 2 / 4;
}
.site > main {
@ -1319,9 +1350,6 @@ textarea {
}
.site-header {
display: grid;
grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
grid-template-areas: "main " "secondary ";
margin: auto;
margin-bottom: 2rem;
padding: 0;
@ -1339,7 +1367,7 @@ textarea {
}
.site-main {
padding: 0 2rem;
padding: 0;
}
.site-main > section {
@ -1426,8 +1454,8 @@ textarea {
padding-left: 0;
}
.main-navigation ul ul.sub-menu,
.secondary-navigation ul ul.sub-menu {
.main-navigation ul .sub-menu,
.secondary-navigation ul .sub-menu {
padding-top: 0.5rem;
padding-left: 1rem;
}
@ -1439,15 +1467,28 @@ textarea {
.main-navigation a,
.secondary-navigation a {
display: flex;
align-items: center;
min-height: 100%;
text-decoration: none;
font-size: 1rem;
}
.main-navigation.toggled ul {
display: block;
margin: 0;
padding: 0;
}
.main-navigation.toggled ul .sub-menu {
padding: 0.5em;
}
.main-navigation.toggled li {
padding: 0;
}
.main-navigation.toggled a {
margin: 0;
padding: 0.5em;
display: block;
}
.main-navigation.toggled .main-navigation-content {
@ -1554,17 +1595,6 @@ textarea {
/* end of menu hidden*/
}
@media screen and (max-width: 47.99em) {
.main-navigation-content li {
padding: 0.5rem 0;
}
.secondary-navigation-content {
padding: 4rem 2rem;
}
}
@media screen and (min-width: 48em) {
.custom-logo {
@ -1585,6 +1615,8 @@ textarea {
.main-navigation ul .menu-item-has-children > ul,
.secondary-navigation ul .menu-item-has-children > ul {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: -4px 4px 15px #999;
border-radius: 0.2em;
}
.main-navigation ul .sub-menu,
@ -1594,6 +1626,8 @@ textarea {
top: 100%;
left: -999em;
z-index: 99999;
padding-top: 0.5rem;
padding-left: 1rem;
}
.main-navigation ul .sub-menu ul,
@ -1608,17 +1642,20 @@ textarea {
.secondary-navigation ul .sub-menu li.focus > ul {
display: block;
left: 4em;
top: 1em;
top: 3em;
}
.main-navigation ul .sub-menu a,
.secondary-navigation ul .sub-menu a {
display: flex;
align-items: center;
min-height: 100%;
width: 200px;
}
.main-navigation ul li,
.secondary-navigation ul li {
padding: 0 1em;
padding: 1em;
}
.main-navigation ul li:hover > ul,
@ -1638,11 +1675,6 @@ textarea {
.main-navigation ul ul.sub-menu {
flex-direction: column;
padding: 0.5rem;
}
.main-navigation ul ul.sub-menu li {
margin: 0.5rem 0;
}
.main-navigation .current-menu-ancestor > a::after,
@ -1651,8 +1683,7 @@ textarea {
content: "";
position: absolute;
left: 1em;
bottom: -0.5em;
min-height: 2px;
bottom: 0.5em;
height: 2px;
width: calc(100% - 2em);
background-color: #000;
@ -1980,6 +2011,7 @@ textarea {
.single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr;
gap: 2rem;
}
@ -2008,7 +2040,7 @@ textarea {
.single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-location .xarxaprod-associat-osm-link {
display: grid;
grid-template-columns: min-content auto;
grid-template-columns: auto;
align-items: center;
}
@ -2130,7 +2162,7 @@ textarea {
height: auto;
aspect-ratio: 1/1;
margin-bottom: 2em;
background-color: rgba(240, 240, 240, 0.2);
background-color: rgba(240, 240, 240, 0.4);
border-radius: 0.3em;
}
@ -2251,6 +2283,14 @@ textarea {
font-size: 1.5em;
}
.single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-info {
grid-template-columns: 1fr 1fr 1fr;
}
.single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-location .xarxaprod-associat-osm-link {
grid-template-columns: min-content auto;
}
.xarxaprod-agenda .xarxaprod-card-each {
flex-direction: row-reverse;
}

2
style.css.map
View File

File diff suppressed because one or more lines are too long