Commit cc6cc8fb authored by garciadeblas's avatar garciadeblas
Browse files

Add OSM common topbar to template layout 



Signed-off-by: default avatargarciadeblas <gerardo.garciadeblas@telefonica.com>
parent 8b697b4d

_static/images/OSM-logo.png

0 → 100755
+22.2 KiB
Loading image diff...

_static/style.css

+249 −1
Original line number Diff line number Diff line 
/* --- GLOBAL TOPBAR (BLACK) --- */

.global-topbar {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;



    height: 46px;

    background: #000;

    z-index: 1100;



    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;           /* tamaño texto links */

    font-weight: 400;           /* peso normal */

    letter-spacing: 0.03em;    /* ligero tracking */

}



/* Contenedor flex */

.global-topbar-inner {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;



    height: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-end;

}



/* Lista */

.global-topbar-list {

    list-style: none;

    margin: 0;

    padding: 0;



    display: flex;

    align-items: center;

    gap: 1.2rem;

}



.global-topbar-list li {

    display: flex;

    align-items: center;

}



/* Links */

.global-topbar a {

    color: #fff;

    font-family: inherit;       /* hereda Arial, Helvetica */

    font-size: 12px;

    font-weight: 400;

    text-decoration: none;



    display: flex;

    align-items: center;

    gap: 0.4rem;

}



.global-topbar a:hover {

    text-decoration: underline;

}



/* Iconos Font Awesome */

.global-topbar i {

    font-size: 1.4em;

}



/* Icon-only items */

.global-topbar-list li.icon a {

    padding: 0;

}



/* Añadir separadores entre los links de texto (no iconos) */

.global-topbar-list li:not(.icon):not(:last-child)::after {

    content: "|";           /* el separador */

    color: #fff;            /* mismo color que el texto */

    margin: 0 0.6rem;       /* espacio antes y después del "|" */

    font-weight: 400;       /* mismo peso que los links */

}



/* --- TOPBAR BASE --- */

.project-topbar {

    display: flex;

    justify-content: space-between;

    align-items: center;



    background-color: #ffffff;

    border-bottom: 1px solid #e5e5e5;

    padding: 0 2rem;

    height: 100px;



    position: fixed;

    top: 46px; /* height of global topbar */

    left: 0;

    right: 0;

    z-index: 1000;

}



.project-topbar > div {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1200px;

    width: 100%;

    margin: 0 auto;

    padding: 0 18rem;

}



/* --- LEFT / RIGHT --- */

.project-topbar .topbar-left,

.project-topbar .topbar-right {

    display: flex;

    align-items: center;

    gap: 1rem;

}

/* .project-topbar .topbar-left {

    padding-left: 5rem;

}

.project-topbar .topbar-right {

    padding-right: 5rem;

} */

.project-topbar .topbar-right a,

.project-topbar .topbar-right button {

    white-space: nowrap;

}



/* --- LINKS --- */

.project-topbar a,

.project-topbar button {

    color: #333;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    background: none;

    border: none;

    cursor: pointer;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}



.project-topbar a:hover,

.project-topbar button:hover {

    color: #0072ce;

}



/* --- LOGO --- */

.project-topbar .logo img {

    height: 60px;

    max-width: 200px;

    display: block;

}



/* --- DROPDOWNS --- */

.project-topbar .dropdown {

    position: relative;

}



.project-topbar .dropdown-content {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;



    background-color: white;

    min-width: 180px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.08);

    border: 1px solid #e5e5e5;

    z-index: 2000;

}



/* Mostrar dropdown en hover o focus */

.project-topbar .dropdown:hover .dropdown-content,

.project-topbar .dropdown:focus-within .dropdown-content {

    display: block;

}



.project-topbar .dropdown-content a {

    color: #333;

    padding: 8px 12px;

    display: block;

    margin: 0;

    text-transform: none;

    letter-spacing: normal;

    font-weight: 400;

    font-size: 14px;

}



.project-topbar .dropdown > button::after {

    content: "▾";

    margin-left: 0.4rem;

    font-size: 0.8em;

}



/* Debugging outlines */

/* .project-topbar > div {

    border: 2px solid red !important;

} */



/* Setting padding of nav side */

.wy-nav-side {

    padding-top: 146px;

    scroll-padding-top: 146px;

    box-sizing: border-box;

}





/* Setting padding of main content */

.wy-nav-content {

    max-width: 1200px !important;

    padding-top: 146px;

    scroll-padding-top: 146px;

    max-width: none !important;

}



/* Adjust scroll for anchors with fixed topbar */

.wy-nav-content h1,

.wy-nav-content h2,

.wy-nav-content h3,

.wy-nav-content h4 {

    scroll-margin-top: 166px;

}



/* --- MOBILE --- */

@media (max-width: 768px) {

    .project-topbar {

        height: 56px;

        padding: 0 1rem;

    }



    .project-topbar .topbar-right {

        gap: 1rem;

        flex-wrap: wrap;

    }



    .project-topbar .dropdown-content {

        position: static;

        box-shadow: none;

        border: none;

    }

    .wy-nav-content,

    .wy-nav-side {

        padding-top: 102px;

    }

    .wy-nav-content h1,

    .wy-nav-content h2,

    .wy-nav-content h3,

    .wy-nav-content h4,

    .wy-nav-content h5,

    .wy-nav-content h6 {

        scroll-margin-top: 116px;

    }

}

_templates/layout.html

+6 −0
Original line number Diff line number Diff line 
{% extends "!layout.html" %}



{% block content %}

  {% include "topbar.html" %}

  {{ super() }}

{% endblock %}



{% block extrahead %}

    <link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">

{% endblock %}

_templates/topbar.html

0 → 100644
+70 −0
Original line number Diff line number Diff line 
<!-- Global topbar (black) -->

<div class="global-topbar">

    <div class="global-topbar-inner">

        <ul class="global-topbar-list">

            <li>

                <a href="https://osm.etsi.org/news-events/newsletter">

                    <i class="fa fa-envelope" aria-hidden="true"></i>

                    <span>NEWSLETTER</span>

                </a>

            </li>

            <li>

                <a href="https://osm.etsi.org/register">REGISTER</a>

            </li>

            <li>

                <a href="https://osm.etsi.org/login">LOGIN</a>

            </li>

            <li class="icon">

                <a href="https://twitter.com/opensourcemano" title="Twitter">

                    <i class="fa fa-twitter" aria-hidden="true"></i>

                </a>

            </li>

            <li class="icon">

                <a href="https://www.youtube.com/c/OpenSourceMANO" title="YouTube">

                    <i class="fa fa-youtube-play" aria-hidden="true"></i>

                </a>

            </li>

            <li class="icon">

                <a href="https://www.linkedin.com/company/open-source-mano" title="LinkedIn">

                    <i class="fa fa-linkedin" aria-hidden="true"></i>

                </a>

            </li>

        </ul>

    </div>

</div>



<nav class="project-topbar">

    <div class="topbar-left">

        <a href="https://osm.etsi.org" class="logo">

            <img src="{{ pathto('_static/images/OSM-logo.png', 1) }}" alt="OSM Logo">

        </a>

    </div>

    <div class="topbar-right">

        <a href="https://osm.etsi.org/docs/user-guide/latest/">Docs</a>

        <a href="https://osm.etsi.org/docs/user-guide/latest/03-installing-osm.html">Install</a>

        <a href="https://osm.etsi.org/news-events/news">News & Events</a>

        <div class="dropdown">

            <button>Community</button>

            <div class="dropdown-content">

                <a href="https://opensourcemano.slack.com/">Slack</a>

                <a href="https://osm.etsi.org/wikipub/index.php/OSM_Ecosystem">Ecosystem</a>

            </div>

        </div>

        <div class="dropdown">

            <button>Contribute</button>

            <div class="dropdown-content">

                <a href="https://osm.etsi.org/gitlab/osm">Code</a>

                <a href="https://osm.etsi.org/docs/developer-guide">Developer guide</a>

            </div>

        </div>

        <div class="dropdown">

            <button>About</button>

            <div class="dropdown-content">

                <a href="https://osm.etsi.org/about/osm-leaders">OSM Leaders</a>

                <a href="https://portal.etsi.org/TB-SiteMap/OSM/List-of-OSM-Members">OSM Members</a>

                <a href="https://osm.etsi.org/about/how-to-join">Legal</a>

                <a href="mailto:OSMSupport@etsi.org">Contact</a>

            </div>

        </div>

    </div>

</nav>
 
 No newline at end of file

conf.py

+1 −1
Original line number Diff line number Diff line
@@ -92,7 +92,7 @@ html_theme_options = { 
}



#html_logo = 'assets/osm_logo.png'

html_logo = 'assets/osm_logo.svg'

#html_logo = 'assets/osm_logo.svg'



smv_current_version = 'latest'

#smv_tag_whitelist = None