Mobile layout fixes
* load screenshots when the modal is openend, not before * Abbreviate some strings
This commit is contained in:
Henne Vogelsang
parent
087803ed20
commit
8877fd1259
6 changed files with 40 additions and 225 deletions
|
|
@ -13,9 +13,8 @@
|
|||
collaborate as a team to distribute, study, change and improve OSEMs source code.
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/openSUSE/osem" class="btn btn-xl">
|
||||
Why don't you join us?
|
||||
</a>
|
||||
<a href="https://github.com/openSUSE/osem" class="btn btn-xl hidden-xs">Why don't you join us?</a>
|
||||
<a href="https://github.com/openSUSE/osem" class="btn btn-xl visible-xs">Join us!</a>
|
||||
</p>
|
||||
<div class="btn-group" role="group" aria-label="contact">
|
||||
<a href="mailto:info@osem.io" class="btn btn-link">
|
||||
|
|
|
|||
|
|
@ -16,17 +16,17 @@
|
|||
|
||||
<!-- Custom Fonts -->
|
||||
<link rel="stylesheet" href="{{ "/css/font-awesome/css/font-awesome.min.css" | prepend: site.baseurl }}">
|
||||
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
|
||||
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
|
||||
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=Lora:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
|
||||
<link href='//fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
|
||||
<link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href='//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
<link href='//fonts.googleapis.com/css?family=Lora:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -15,4 +15,11 @@
|
|||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
$('.portfolio-modal').on('show.bs.modal', function (e) {
|
||||
var imgtarget = $( '#' + $( this ).data( 'imgtarget' ));
|
||||
var imgsrc = imgtarget.data('imgsrc');
|
||||
imgtarget.attr("src", imgsrc);
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="portfolio-modal modal fade" id="splashModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="portfolio-modal modal fade" id="splashModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='splashImage'>
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal">
|
||||
<div class="lr">
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
Build a splash page for your event. Let visitors know what will happen when, how and where!
|
||||
</p>
|
||||
<hr class="star-primary">
|
||||
<img src="img/portfolio/splash.jpg" class="img-responsive img-centered" alt="An event splash page">
|
||||
<img id='splashImage' class="img-responsive img-centered" alt="An event splash page" data-imgsrc="img/portfolio/splash.jpg">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-modal modal fade" id="scheduleModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="portfolio-modal modal fade" id="scheduleModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='scheduleImage'>
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal">
|
||||
<div class="lr">
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
Provide an event schedule with detailed information about your program.
|
||||
</p>
|
||||
<hr class="star-primary">
|
||||
<img src="img/portfolio/schedule.jpg" class="img-responsive img-centered" alt="Schedule of a typical event in OSEM">
|
||||
<img id="scheduleImage" data-imgsrc="img/portfolio/schedule.jpg" class="img-responsive img-centered" alt="Schedule of a typical event in OSEM">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-modal modal fade" id="sessionModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="portfolio-modal modal fade" id="sessionModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='sessionImage'>
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal">
|
||||
<div class="lr">
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<h2>Sesssion Pages</h2>
|
||||
<p>Show visitors all the details of your sessions.</p>
|
||||
<hr class="star-primary">
|
||||
<img src="img/portfolio/events.jpg" class="img-responsive img-centered" alt="A detailed session page">
|
||||
<img id='sessionImage' data-imgsrc="img/portfolio/events.jpg" class="img-responsive img-centered" alt="A detailed session page">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-modal modal fade" id="cfpModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="portfolio-modal modal fade" id="cfpModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='cfpImage'>
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal">
|
||||
<div class="lr">
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
<h2>Paper Submission</h2>
|
||||
<p>Lorem ipsum dolor sit amet, usu cu alterum nominavi lobortis. At duo novum diceret.</p>
|
||||
<hr class="star-primary">
|
||||
<img src="img/portfolio/cfp.jpg" class="img-responsive img-centered" alt="Screenshots of the paper submission workflow">
|
||||
<img id='cfpImage' data-imgsrc="img/portfolio/cfp.jpg" class="img-responsive img-centered" alt="Screenshots of the paper submission workflow">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-modal modal fade" id="registrationModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="portfolio-modal modal fade" id="registrationModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='registrationImage'>
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal">
|
||||
<div class="lr">
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
<h2>Visitor Registration</h2>
|
||||
<p>Lorem ipsum dolor sit amet, usu cu alterum nominavi lobortis. At duo novum diceret.</p>
|
||||
<hr class="star-primary">
|
||||
<img src="img/portfolio/registration.jpg" class="img-responsive img-centered" alt="Screenshots of the registration workflow">
|
||||
<img id='registrationImage' data-imgsrc="img/portfolio/registration.jpg" class="img-responsive img-centered" alt="Screenshots of the registration workflow">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-modal modal fade" id="adminModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="portfolio-modal modal fade" id="adminModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='adminImage'>
|
||||
<div class="modal-content">
|
||||
<div class="close-modal" data-dismiss="modal">
|
||||
<div class="lr">
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
<h2>Administration</h2>
|
||||
<p>Lorem ipsum dolor sit amet, usu cu alterum nominavi lobortis. At duo novum diceret.</p>
|
||||
<hr class="star-primary">
|
||||
<img src="img/portfolio/dashboard.png" class="img-responsive img-centered" alt="An administration dashboard">
|
||||
<img id='adminImage' data-imgsrc="img/portfolio/dashboard.png" class="img-responsive img-centered" alt="An administration dashboard">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand page-scroll" href="#page-top">{{site.title}}</a>
|
||||
<a class="navbar-brand page-scroll hidden-xs hidden-sm" href="#page-top">{{site.title}}</a>
|
||||
<a class="navbar-brand page-scroll visible-xs visible-sm" href="#page-top">OSEM</a>
|
||||
</div>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
|
|
|
|||
210
css/agency.css
210
css/agency.css
|
|
@ -291,9 +291,9 @@ header .intro-text .intro-heading {
|
|||
margin-bottom: 25px;
|
||||
text-transform: uppercase;
|
||||
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size: 50px;
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
line-height: 50px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
|
|
@ -330,6 +330,12 @@ section h3.section-heading {
|
|||
font-size: 40px;
|
||||
}
|
||||
|
||||
@media(max-width:767px) {
|
||||
#about h3.section-heading {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
section h3.section-subheading {
|
||||
margin-bottom: 75px;
|
||||
text-transform: none;
|
||||
|
|
@ -339,6 +345,7 @@ section h3.section-subheading {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
@media(min-width:768px) {
|
||||
section {
|
||||
padding: 150px 0;
|
||||
|
|
@ -432,205 +439,6 @@ section h3.section-subheading {
|
|||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.timeline:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 40px;
|
||||
width: 2px;
|
||||
margin-left: -1.5px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.timeline>li {
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.timeline>li:before,
|
||||
.timeline>li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.timeline>li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-panel {
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0 20px 0 100px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-panel:before {
|
||||
right: auto;
|
||||
left: -15px;
|
||||
border-right-width: 15px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-panel:after {
|
||||
right: auto;
|
||||
left: -14px;
|
||||
border-right-width: 14px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-image {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-left: 0;
|
||||
border: 7px solid #f1f1f1;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: #00A388;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-image h4 {
|
||||
margin-top: 12px;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.timeline>li.timeline-inverted>.timeline-panel {
|
||||
float: right;
|
||||
padding: 0 20px 0 100px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.timeline>li.timeline-inverted>.timeline-panel:before {
|
||||
right: auto;
|
||||
left: -15px;
|
||||
border-right-width: 15px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.timeline>li.timeline-inverted>.timeline-panel:after {
|
||||
right: auto;
|
||||
left: -14px;
|
||||
border-right-width: 14px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.timeline>li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline .timeline-heading h4 {
|
||||
margin-top: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.timeline .timeline-heading h4.subheading {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.timeline .timeline-body>p,
|
||||
.timeline .timeline-body>ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.timeline:before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.timeline>li {
|
||||
margin-bottom: 100px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-panel {
|
||||
float: left;
|
||||
width: 41%;
|
||||
padding: 0 20px 20px 30px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-image {
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-image h4 {
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.timeline>li.timeline-inverted>.timeline-panel {
|
||||
float: right;
|
||||
padding: 0 30px 20px 20px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:992px) {
|
||||
.timeline>li {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-panel {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-left: -75px;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-image h4 {
|
||||
margin-top: 30px;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.timeline>li.timeline-inverted>.timeline-panel {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:1200px) {
|
||||
.timeline>li {
|
||||
min-height: 170px;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-panel {
|
||||
padding: 0 20px 20px 100px;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-image {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
margin-left: -85px;
|
||||
}
|
||||
|
||||
.timeline>li .timeline-image h4 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.timeline>li.timeline-inverted>.timeline-panel {
|
||||
padding: 0 100px 20px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.team-member {
|
||||
margin-bottom: 50px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue