Skip to content

N
Nuovo sito
Commit 22c51b7a authored by Riccardo Padovani's avatar Riccardo Padovani
Browse files
Options

Finish writing sass for the page

parent abd1713c
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 96 deletions
assets/sass/scopri-ubuntu.sass deleted 100644 → 0
View file @ abd1713c
.row--intro {
background: #DD4814 none repeat scroll 0% 0%;
color: #FFF;
.ubuntu-intro {
display: flex;
margin-bottom: 10px;
}
}
@media only screen and (min-width : 769px) {
.row--intro {
padding-top:inherit
}
.ubuntu-intro {
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:flex;
margin-bottom:10px
}
}
@media only screen and (min-width:984px) {
.ubuntu-intro__list {
position:relative
}
.ubuntu-intro__list:before {
background-image: url(https://assets.ubuntu.com/v1/bcb69486-image-intro-dots.svg);
background-position: right center;
background-repeat: repeat-x;
background-size: 10px;
content: "";
display:block;
height:20px; position:absolute;
top:65px;
width:20px;
}
}
// @media only screen and (max-width :
// 768px){.ubuntu-intro__list:before{display:none}}@media only screen and
// (min-width :
// 769px){.intro-left,.intro-right{-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1;height:150px}}@media
// only screen and (min-width :
// 984px){.intro-left,.intro-right{background:url(https://assets.ubuntu.com/v1/bcb69486-image-intro-dots.svg)
// repeat-x right
// center;background-size:10px}}.intro-right{background-position:left
// center;margin-left:-20px}.intro-middle
// ul{text-align:center;padding-bottom:40px;float:left;width:100%}@media only
// screen and (min-width : 769px){.intro-middle
// ul{margin:0;padding-bottom:0}}.intro-middle
// li{display:inline-block;float:left;margin-right:0;text-align:center;position:relative;width:50%}@media
// only screen and (max-width : 768px){.intro-middle li{width:32%}}@media only
// screen and (max-width : 667px) and (orientation : landscape){.intro-middle
// li{width:20%}}@media only screen and (min-width : 768px){.intro-middle
// li{text-indent:-999em;width:124px}}@media only screen and (min-width :
// 984px){.intro-middle li{width:164px}}.intro-middle li
// a{background-position:center
// center;background-repeat:no-repeat;background-size:96px;color:#fff;display:block;line-height:1.3;overflow:visible;padding-top:115px;text-align:center;text-decoration:none;position:relative;width:100%}@media
// only screen and (min-width : 984px){.intro-middle li a:after,.intro-middle li
// a:before{display:block;background:url(https://assets.ubuntu.com/v1/bcb69486-image-intro-dots.svg)
// repeat-x right
// center;background-size:10px;content:"";position:absolute;top:60px}}@media only
// screen and (min-width : 984px){.intro-middle li
// a:before{height:30px;left:0;width:60px;background-size:18px;background-repeat:no-repeat}}@media
// only screen and (min-width : 984px){.intro-middle li
// a:after{height:30px;right:0;width:65px}}@media only screen and (min-width :
// 769px){.intro-middle li a{padding-top:130px}}.intro-middle li
// a.intro-cloud{background-image:url(https://assets.ubuntu.com/v1/7153d45d-icon-intro-cloud.svg)}.intro-middle
// li a.intro-cloud:before{width:36px}.intro-middle li
// a.intro-cloud:after{right:-19px;width:45px}.intro-middle li
// a.intro-server{background-image:url(https://assets.ubuntu.com/v1/949bb7ae-icon-intro-server.svg)}.intro-middle
// li a.intro-server:before{width:38px}.intro-middle li
// a.intro-server:after{right:-20px;width:50px}.intro-middle li
// a.intro-desktop{background-image:url(https://assets.ubuntu.com/v1/0a347261-icon-intro-desktop.svg)}.intro-middle
// li a.intro-desktop:before{width:38px}.intro-middle li
// a.intro-desktop:after{right:-36px}.intro-middle li
// a.intro-phone{background-image:url(https://assets.ubuntu.com/v1/1f6d7af8-icon-intro-phone.svg)}.intro-middle
// li a.intro-phone:before{width:54px}.intro-middle li
// a.intro-phone:after{right:-16px}.intro-middle li
// a.intro-tablet{background-image:url(https://assets.ubuntu.com/v1/08d4cf5a-icon-intro-tablet.svg)}.intro-middle
// li a.intro-tablet:before{width:34px}.intro-middle li
// a.intro-tablet:after{right:-20px;width:44px}.intro-middle li
// a.intro-iot{background-image:url(https://assets.ubuntu.com/v1/473ea07f-icon-intro-iot.svg)}.intro-middle
// li a.intro-iot:before{width:39px}.intro-middle li
// a.intro-iot:after{right:20px;width:14px}body.homepage .row--intro .intro-middle
// li a:hover{color:#fff;display:block;text-indent:0
assets/sass/scopri-ubuntu.scss 0 → 100644
View file @ 22c51b7a
.row--intro {
background: #dd4814;
color: #fff;
}
@media only screen and (min-width: 769px) {
.row--intro {
padding-top: inherit;
}
}
@media only screen and (min-width: 769px) {
.ubuntu-intro {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10px;
}
}
@media only screen and (min-width: 984px) {
.ubuntu-intro__list {
position: relative;
}
}
@media only screen and (min-width: 984px) {
.ubuntu-intro__list:before {
background-image: url(https://assets.ubuntu.com/v1/bcb69486-image-intro-dots.svg);
background-position: right center;
background-repeat: repeat-x;
background-size: 10px;
content: "";
display: block;
height: 20px;
position: absolute;
top: 65px;
width: 20px;
}
}
@media only screen and (max-width: 768px) {
.ubuntu-intro__list:before {
display: none;
}
}
@media only screen and (min-width: 769px) {
.intro-left, .intro-right {
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
flex-grow: 1;
height: 150px;
}
}
@media only screen and (min-width: 984px) {
.intro-left, .intro-right {
background: url(https://assets.ubuntu.com/v1/bcb69486-image-intro-dots.svg) repeat-x right center;
background-size: 10px;
}
}
.intro-right {
background-position: left center;
margin-left: -20px;
}
.intro-middle {
ul {
text-align: center;
padding-bottom: 40px;
float: left;
width: 100%;
}
li {
display: inline-block;
float: left;
margin-right: 0;
text-align: center;
position: relative;
width: 50%;
a {
background-position: center center;
background-repeat: no-repeat;
background-size: 90px;
color: #fff;
display: block;
line-height: 1.3;
overflow: visible;
padding-top: 115px;
text-align: center;
text-decoration: none;
position: relative;
width: 100%;
&.intro-cloud {
background-image: url(https://assets.ubuntu.com/v1/7153d45d-icon-intro-cloud.svg);
&:before {
width: 36px;
}
&:after {
right: -19px;
width: 45px;
}
}
&.intro-server {
background-image: url(https://assets.ubuntu.com/v1/949bb7ae-icon-intro-server.svg);
&:before {
width: 38px;
}
&:after {
right: -20px;
width: 50px;
}
}
&.intro-desktop {
background-image: url(https://assets.ubuntu.com/v1/0a347261-icon-intro-desktop.svg);
&:before {
width: 38px;
}
&:after {
right: -36px;
}
}
&.intro-phone {
background-image: url(https://assets.ubuntu.com/v1/1f6d7af8-icon-intro-phone.svg);
&:before {
width: 54px;
}
&:after {
right: -16px;
}
}
&.intro-tablet {
background-image: url(https://assets.ubuntu.com/v1/08d4cf5a-icon-intro-tablet.svg);
&:before {
width: 34px;
}
&:after {
right: -20px;
width: 44px;
}
}
&.intro-iot {
background-image: url(https://assets.ubuntu.com/v1/473ea07f-icon-intro-iot.svg);
&:before {
width: 39px;
}
&:after {
right: 20px;
width: 14px;
}
}
}
}
}
@media only screen and (min-width: 769px) {
.intro-middle ul {
margin: 0;
padding-bottom: 0;
}
}
@media only screen and (max-width: 768px) {
.intro-middle li {
width: 32%;
}
}
@media only screen and (max-width: 667px) and (orientation: landscape) {
.intro-middle li {
width: 20%;
}
}
@media only screen and (min-width: 768px) {
.intro-middle li {
text-indent: -999em;
width: 115px;
}
}
@media only screen and (min-width: 984px) {
.intro-middle li {
width: 150px;
}
}
@media only screen and (min-width: 984px) {
.intro-middle li a {
&:after, &:before {
display: block;
background: url(https://assets.ubuntu.com/v1/bcb69486-image-intro-dots.svg) repeat-x right center;
background-size: 10px;
content: "";
position: absolute;
top: 60px;
}
}
}
@media only screen and (min-width: 984px) {
.intro-middle li a:before {
height: 30px;
left: 0;
width: 60px;
background-size: 18px;
background-repeat: no-repeat;
}
}
@media only screen and (min-width: 984px) {
.intro-middle li a:after {
height: 30px;
right: 0;
width: 65px;
}
}
@media only screen and (min-width: 769px) {
.intro-middle li a {
padding-top: 130px;
}
}
body.homepage .row--intro .intro-middle li a:hover {
color: #fff;
display: block;
text-indent: 0;
}
@media only screen and (min-width: 769px) {
.row--devices__content {
margin-top: 100px;
}
}
@media only screen and (max-width: 768px) {
.row--devices {
min-height: 0;
}
}
.row--ubuntu-news {
background: #fff;
}
@media only screen and (min-width: 768px) {
.row--ubuntu-news .row--ubuntu-news__title {
background: url(https://assets.ubuntu.com/v1/e1bba201-external-link-cool-grey.svg) left center no-repeat;
background-size: 16px;
padding-left: 22px;
font-size: 1em;
text-transform: uppercase;
margin-bottom: 30px;
}
}
@media only screen and (min-width: 768px) {
.row--ubuntu-news .row--ubuntu-news__title a {
color: #333;
}
}
@media only screen and (min-width: 768px) {
.row--ubuntu-news .row--ubuntu-news__title a:hover {
text-decoration: none;
}
}
@media only screen and (min-width: 768px) {
.row--ubuntu-news li.three-col {
width: 22.8938%;
}
}
@media only screen and (min-width: 768px) {
.row--ubuntu-news li:last-child {
margin: 0;
}
}
body.homepage {
.row--iot {
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
background: #fff;
.row--iot__image {
background-size: 700px auto;
background-image: url(https://assets.ubuntu.com/v1/2f56d557-image-iot.jpg?q=80);
background-repeat: no-repeat;
height: 500px;
left: 40px;
position: absolute;
top: -100px;
width: 700px;
}
}
.row--cloud-products {
background-color: #fff;
}
}
@media only screen and (min-width: 768px) {
body.homepage .row--iot {
padding: 150px 0;
}
}
@media only screen and (min-width: 768px) {
body.homepage .row--iot .row--iot__image {
top: -163px;
}
}
@media only screen and (max-width: 767px) {
body.homepage .row--iot .row--iot__image {
background: none;
display: none;
}
}
@media only screen and (min-width: 768px) {
body.homepage .row--cloud-products {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media only screen and (min-width: 984px) {
body.homepage .row--cloud-products {
padding-top: 220px;
padding-bottom: 200px;
background-image: url(https://assets.ubuntu.com/v1/f27582be-image-cloud-static.jpg);
background-repeat: no-repeat;
background-position: 77% center;
background-size: 50%;
}
}
uitwww/templates/pages/scopri-ubuntu/index.html
View file @ 22c51b7a
...@@ -26,12 +26,12 @@ ...@@ -26,12 +26,12 @@
<div class="intro-left"></div> <div class="intro-left"></div>
<div class="intro-middle"> <div class="intro-middle">
<ul class="ubuntu-intro__list no-bullets inline-list"> <ul class="ubuntu-intro__list no-bullets inline-list">
<li><a class="intro-cloud" href="/scopriUbuntu/cloud">Cloud</a></li> <li><a class="intro-cloud" href="/scopri-ubuntu/cloud">Cloud</a></li>
<li><a class="intro-server" href="/scopriUbuntu/server">Server</a></li> <li><a class="intro-server" href="/scopri-ubuntu/server">Server</a></li>
<li><a class="intro-desktop" href="/scopriUbuntu/desktop">Desktop</a></li> <li><a class="intro-desktop" href="/scopri-ubuntu/desktop">Desktop</a></li>
<li><a class="intro-phone" href="/scopriUbuntu/phone">Phone</a></li> <li><a class="intro-phone" href="/scopri-ubuntu/phone">Phone</a></li>
<li><a class="intro-tablet" href="/scopriUbuntu/tablet">Tablet</a></li> <li><a class="intro-tablet" href="/scopri-ubuntu/tablet">Tablet</a></li>
<li><a class="intro-iot" href="/scopriUbuntu/things">Things</a></li> <li><a class="intro-iot" href="/scopri-ubuntu/things">Things</a></li>
</ul> </ul>
</div> </div>
<div class="intro-right"></div> <div class="intro-right"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment