'itinerario.html' - First draft
This commit is contained in:
@@ -56,6 +56,18 @@
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_regular';
|
||||
src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_medium';
|
||||
src: url('../fonts/Roboto-Medium-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Open Sans Regular */
|
||||
@font-face {
|
||||
font-family: 'open_sansregular';
|
||||
|
||||
119
css/main.css
119
css/main.css
@@ -5,6 +5,10 @@
|
||||
--ochre: #ccac68;
|
||||
--ochre-light : #f7f4ee;
|
||||
--ochre-dark: rgba(116,102,77,1);
|
||||
--light-dark: #333;
|
||||
--dark: rgb(26, 21, 21);
|
||||
--lilac: #c852ff;
|
||||
--emerald: #067d08;
|
||||
}
|
||||
/** General utils **/
|
||||
.of-hidden {
|
||||
@@ -13,12 +17,27 @@
|
||||
.pl-lg {
|
||||
padding-left: 1rem !important;
|
||||
}
|
||||
.pl-xl {
|
||||
padding-left: 4rem !important;
|
||||
}
|
||||
.pr-lg {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.mt-lg {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.short-hr {
|
||||
width: 3.5rem;
|
||||
margin-left: 0;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.note {
|
||||
font-size: 10pt;
|
||||
}
|
||||
.text-14pt {
|
||||
font-size: 14pt;
|
||||
}
|
||||
/** Font classes **/
|
||||
.arvo {
|
||||
font-family: 'arvoregular'/*Fallback??*/;
|
||||
@@ -26,12 +45,21 @@
|
||||
.roboto {
|
||||
font-family: 'roboto_condensedregular';
|
||||
}
|
||||
.roboto-reg {
|
||||
font-family: 'roboto_regular';
|
||||
}
|
||||
.roboto-med {
|
||||
font-family: 'roboto_medium';
|
||||
}
|
||||
.robot-slab-b {
|
||||
font-family: 'roboto_slabbold';
|
||||
}
|
||||
.roboto-slab {
|
||||
font-family: 'roboto_slabregular';
|
||||
}
|
||||
.roboto-slab-l {
|
||||
font-family: 'roboto_slablight';
|
||||
}
|
||||
.opensans {
|
||||
font-family: 'open_sansregular';
|
||||
}
|
||||
@@ -79,9 +107,19 @@ header {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.main-header.itin {
|
||||
background: none;
|
||||
min-height: 25vh;
|
||||
}
|
||||
.main-header.itin #nav {
|
||||
color: var(--dark);
|
||||
}
|
||||
.main-header h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.main-header.itin h1 {
|
||||
font-size: 36pt;
|
||||
}
|
||||
.main-header h1::after {
|
||||
max-width: 5rem;
|
||||
margin: 10px auto 0 auto;
|
||||
@@ -109,22 +147,33 @@ header {
|
||||
background-color: rgba(254, 254, 254, 0.25);
|
||||
}
|
||||
/* ---- Navbar ----- */
|
||||
.h-nav {
|
||||
min-width: 280px;
|
||||
padding-left: 10px;
|
||||
.side-nav {
|
||||
width: 280px;
|
||||
opacity: 1;
|
||||
padding-left: 5px;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
animation-name: slidein;
|
||||
animation-duration: 1s;
|
||||
transition: slidein 0.5s ease-in;
|
||||
}
|
||||
.h-nav a {
|
||||
@keyframes slidein {
|
||||
from {
|
||||
width: 0px;
|
||||
}
|
||||
to {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
.side-nav a {
|
||||
display: block;
|
||||
color: #333;
|
||||
color: var(--light-dark);
|
||||
text-decoration: none;
|
||||
margin-left: 30px;
|
||||
padding: 10px 0;
|
||||
transition: ease-in 1s;
|
||||
}
|
||||
.nav-menu {
|
||||
text-align: right;
|
||||
@@ -152,19 +201,45 @@ header {
|
||||
line-height: 2.3rem;
|
||||
}
|
||||
#nav i {
|
||||
padding-top: 1.5rem;
|
||||
padding-top: 2rem;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
#close-nav {
|
||||
padding: 0px;
|
||||
margin: 0px 0 20px 0;
|
||||
font-size: 1.2rem;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
padding-top: 0.7rem;
|
||||
padding-left: 0;
|
||||
margin: 0px 0 15px 0;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
/** From css.gg **/
|
||||
.icon-close {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 40px
|
||||
}
|
||||
.icon-close::after,
|
||||
.icon-close::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 5px;
|
||||
top: 8px;
|
||||
left: 1px
|
||||
}
|
||||
.icon-close::after {
|
||||
transform: rotate(-45deg)
|
||||
}
|
||||
#nav.border {
|
||||
border-bottom: 1px solid rgba(204,204,204,1);
|
||||
}
|
||||
@@ -183,7 +258,7 @@ body.opaque::after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(26, 21, 21);
|
||||
background-color: var(--dark);
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
}
|
||||
@@ -243,10 +318,30 @@ section.prj-logos img {
|
||||
max-height: 110px;
|
||||
max-width: 410px;
|
||||
}
|
||||
section.poi .container {
|
||||
max-width: 1180px;
|
||||
}
|
||||
#itin-c {
|
||||
padding-right: 12%;
|
||||
font-size: 14pt;
|
||||
}
|
||||
#vagg {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
#potlach {
|
||||
max-width: 110px;
|
||||
margin: 0 25%;
|
||||
}
|
||||
/** Text colors **/
|
||||
.ochre-dark {
|
||||
color: var(--ochre-dark);
|
||||
}
|
||||
.ochre {
|
||||
color: var(--ochre) !important;
|
||||
}
|
||||
.green {
|
||||
color: var(--emerald);
|
||||
}
|
||||
.lilac {
|
||||
color: var(--lilac);
|
||||
}
|
||||
Reference in New Issue
Block a user