colmar's People
colmar's Issues
typo here
use media-container div on images and video
in panel 2 and panel 4, the right sides are a little too large and the images inside them are also too large
the left hand div doesn't need to be a flex container
the right hand div does need to be a flex column as you have it
the info-box divs within them are flex container rows, as you have them
if you put their images inside a media-container div, they will resize well and look more precisely like the wireframes
.media-container {
overflow: hidden;
}
.media-container img,
.media-container video {
display: block;
width: 100%;
}
sample code for the 35-65 split of the info-box class
/* Universal Component - Content Image Box */
.info-box {
display: flex;
padding: 1rem 0 1rem 1rem;
border-bottom: 1px solid rgb(245, 245, 245);
}
.info-box .media-container {
width: 35%;
}
.info-box .text-content {
display: flex;
flex-direction: column;
justify-content: center;
width: 65%;
padding: 0 0.75rem 0 1rem;
}
https://github.com/drum-IT/colmar/blob/master/index.html#L44
and
https://github.com/drum-IT/colmar/blob/master/resources/css/style.css#L124
#thesis doesn't need to be a flex-container
the flexbox can start on the div after the headline. h1s and h2 are block elements and will be on a newline
<div id="thesis">
<h1>Thesis exhibits</h2>
<div class="flex-content"> <-- the flexbox class I used in earlier issue
<div class="main-content">
etc-
learning is similar ... can be regular div and then flexbox starts on div under headline. flex-wrap as you have it
<div id="learning">
<h2>Start learning</h2>
<div class="courses">
https://github.com/drum-IT/colmar/blob/master/resources/css/style.css#L242
add a favicon
in head, so that it shows up in browser tab
there are instructions in week 7 article on managing assets
this image in banner is a little too wide in desktop
panels 1, 2, and 4 (banner, info and thesis) all have same structure: parent is a row. inside parent, left side is 60% of parent div, right side is 40%. all 3 have specific padding settings. so try making all 3 using these 3 classes. will reduce repetition and add consistency
/* Universal Component - Flex Content Container */
.flex-content {
display: flex;
padding: 0 1.5rem;
}
.flex-content .main-content {
width: 60%;
padding: 2rem 1.5rem 2rem 0;
border-right: 1px solid rgb(245, 245, 245);
}
.flex-content .supporting-content {
display: flex;
flex-direction: column;
width: 40%;
padding: 2rem 0;
}
https://github.com/drum-IT/colmar/blob/master/index.html#L28
keep the banner img visible in the mobile version
there is actually an error in the wireframes here. keep the image from banner where, in the wireframes, there is a grey rectangle
https://github.com/drum-IT/colmar/blob/master/resources/css/style.css#L338
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.