Skip to content

Commit

Permalink
fix: brand-bullets on <li> elements alignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@xxiicode
xxiicode committed Apr 2, 2024
1 parent 688b899 commit 05a24c9
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 92 deletions.
120 changes: 40 additions & 80 deletions app/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -727,7 +727,7 @@ div.color-swatch {
}


/* data icons => data-icon | data-emoji<⚓> | data-marker | data-before<span>
/* data icons => data-icon | data-emoji<⚓> | data-marker | data-before<span||a> */

/* li icons for team-wiki */
[data-icon="clockify"] {
Expand Down Expand Up @@ -791,13 +791,12 @@ div.color-swatch {
}


/* bullets icons for 4.2 channels on teamwiki */
/* bullets markers for -"4.2 channels" on /teamwiki */

/* li{list-style-type:"🌴" == li:market{content:"🌴" */

/*general*/
.wiki-team_messaging-general li:nth-of-type(1)::marker {
/*data-marker="megaphone"*/
content: "📣";
}

Expand Down Expand Up @@ -827,7 +826,7 @@ div.color-swatch {

/* DATA-BEFORE*/
/* data-types para poner .SVG::before a elementos (<span> || <a>) */
[data-before="plfn"]::before {
[data-before]::before {
content: "";
display: inline-block;
position: relative;
Expand All @@ -836,127 +835,87 @@ div.color-swatch {
height: 25px;
width: 27px;
background-size: contain;
background-image: url(../imgs/icons/brand-icons/polyfen-icon.svg);
background-repeat: no-repeat;
}

[data-before="plfn"]::before {
background-image: url(../imgs/icons/brand-icons/polyfen-icon.svg);
}

[data-before="plkt"]::before {
content: "";
display: inline-block;
position: relative;
text-decoration: none;
height: 25px;
width: 27px;
background-size: contain;
background-image: url(../imgs/icons/brand-icons/polykit-icon.svg);
background-repeat: no-repeat;
}

[data-before="plqr"]::before {
content: "";
display: inline-block;
position: relative;
text-decoration: none;
height: 25px;
width: 27px;
background-size: contain;
background-image: url(../imgs/icons/brand-icons/polyqwerty-icon.svg);
background-repeat: no-repeat;
}

[data-before="plat"]::before {
content: "";
display: inline-block;
position: relative;
text-decoration: none;
height: 25px;
width: 27px;
background-size: contain;
background-image: url(../imgs/icons/brand-icons/polyatlas-icon.svg);
background-repeat: no-repeat;
}

[data-before="plck"]::before {
content: "";
display: inline-block;
position: relative;
text-decoration: none;
height: 25px;
width: 27px;
background-size: contain;
background-image: url(../imgs/icons/brand-icons/polycookies-icon.svg);
background-repeat: no-repeat;
}
/* others */
[data-before="github"]::before {
content: "";
display: inline-block;
position: relative;
text-decoration: none;
height: 25px;
width: 27px;
background-size: contain;
background-image: url(../imgs/icons/bullets/github.svg);
background-repeat: no-repeat;
}
[data-before="slack"]::before {
content: "";
display: inline-block;
position: relative;
text-decoration: none;
height: 25px;
width: 27px;
background-size: contain;
background-image: url(../imgs/icons/bullets/slack.svg);
background-repeat: no-repeat;
}
[data-before="wise"]::before {
content: "";
display: inline-block;
position: relative;
text-decoration: none;
height: 25px;
width: 27px;
background-size: contain;
background-image: url(../imgs/icons/bullets/wise.svg);
background-repeat: no-repeat;
}
[data-before="drive"]::before {
content: "";
display: inline-block;
background-image: url(../imgs/icons/bullets/drive.svg);
}


/* data-types para poner .SVG 'as a ::marker' en los <li> */
/* requerimientos: class="marker-before" al <ul>*/

ul.marker-before {
list-style: none;
}
ul.marker-before li {
position: relative;
text-decoration: none;
}

[data-marker]::before {
content: "";
position: absolute;
top: 7px;
left: -30px;
height: 25px;
width: 27px;
text-decoration: none;
background-size: contain;
background-image: url(../imgs/icons/bullets/drive.svg);
background-repeat: no-repeat;
}


/* data-types para poner .SVG::marker en los <li> */
[data-marker="plfn"] {
list-style-image: url(../imgs/icons/brand-icons/polyfen-icon.svg);
[data-marker="plfn"]::before {
background-image: url(../imgs/icons/brand-icons/polyfen-icon.svg);
}

[data-marker="plat"] {
list-style-image: url(../imgs/icons/brand-icons/polyatlas-icon.svg);
[data-marker="plat"]::before {
background-image: url(../imgs/icons/brand-icons/polyatlas-icon.svg);
}

[data-marker="plqr"] {
list-style-image: url(../imgs/icons/brand-icons/polyqwerty-icon.svg);
[data-marker="plqr"]::before {
background-image: url(../imgs/icons/brand-icons/polyqwerty-icon.svg);
}

[data-marker="plck"] {
list-style-image: url(../imgs/icons/brand-icons/polycookies-icon.svg);
[data-marker="plck"]::before {
background-image: url(../imgs/icons/brand-icons/polycookies-icon.svg);
}

[data-marker="plkt"] {
list-style-image: url(../imgs/icons/brand-icons/polykit-icon.svg);
[data-marker="plkt"]::before {
background-image: url(../imgs/icons/brand-icons/polykit-icon.svg);
}

[data-marker="plpr"] {
list-style-image: url(../imgs/icons/brand-icons/polypress-icon.svg);
[data-marker="plpr"]::before {
background-image: url(../imgs/icons/brand-icons/polypress-icon.svg);
}


Expand Down Expand Up @@ -1074,7 +1033,8 @@ div.acc-button img {
/* Alambre */
@media (min-width: 1200px) {
li a {
font-size: 22px;
font-size: 25px;
font-family: 'freight-text-pro', serif;
}
}

22 changes: 13 additions & 9 deletions business/content/brands.php
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
<section id="family-of-brands">
<h2 class="heading-1">4. Family of Brands</h2>
<p>Our Family of Brands answers to the "What?" in Simon Sinek's equation. An array of products, services, and other ventures all leveraging the marketing synergy and resources of The Polyfen Group as a parent brand.</p>
<p>Our Family of Brands answers to the "What?" in Simon Sinek's equation. An array of products, services, and other
ventures all leveraging the marketing synergy and resources of The Polyfen Group as a parent brand.</p>
<div class="preview">
<figure>
<img src="../brand/imgs/logo-family.png" style="height:160px; width:auto;">
<img src="../brand/imgs/logo-family.png" style="max-height:160px; width:auto;">
</figure>
</div>
<p>What sets our business model a part is the possibility to explore and pivot into new technologies and niches as the market demands, as well as fostering an innovative and passion-driven culture within our company.</p>
<p>What sets our business model a part is the possibility to explore and pivot into new technologies and niches as
the market demands, as well as fostering an innovative and passion-driven culture within our company.</p>
<div class="preview">
<blockquote><p class="align-left" style="font-style: italic;">A good start-up should have the potential for great scale built into its first design.<br>
Peter Thiel — Zero to One</p></blockquote>
<blockquote>
<p class="align-left" style="font-style: italic;">A good start-up should have the potential for great scale
built into its first design.<br>
Peter Thiel — Zero to One</p>
</blockquote>
</div>
<hr>
<?php include '../includes/family-of-brands.php'; ?>
</section>

<hr>
<?php include '../includes/family-of-brands.php'; ?>
</section>
6 changes: 3 additions & 3 deletions wiki/content/team-messaging.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</ol>
<h3 class="heading-2">4.2. Channels</h3>
<h4 class="heading-3">General</h4>
<ul class="wiki-team_messaging-general hanging-list arrow-bullet">
<ul class="wiki-team_messaging-general hanging-list">
<li><strong>#announcements</strong><br>
Company highlights and workspace-wide updates.</li>
<li><strong>#help</strong><br>
Expand Down Expand Up @@ -42,7 +42,7 @@
-->
<h4 class="heading-3">Brands</h4>
<ul class="hanging-list arrow-bullet">
<ul class="marker-before hanging-list">
<li data-marker="plfn"><strong>#polyfen</strong><br>
All about <a href="https://polyfen.com" target="_blank">polyfen.com</a> | Creative &amp; Software Development Agency.</li>
<li data-marker="plat"><strong>#poly-atlas</strong><br>
Expand All @@ -56,7 +56,7 @@
</ul>
<h4 class="heading-3">Education</h4>
<ul class="wiki-team_messaging-education hanging-list arrow-bullet">
<ul class="wiki-team_messaging-education hanging-list">
<li><strong>#design-education</strong><br>
Typography, UX, UI, Motion, Branding.</li>
<li><strong>#engineering-education</strong><br>
Expand Down

0 comments on commit 05a24c9

Please sign in to comment.