Node.js - Twitter Clone Coding // Creating the site's mainlayout

Express.js

Node.js - Twitter Clone Coding // Creating the site's mainlayout

selene park 2021. 3. 30. 23:39

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

getbootstrap.com

fontawesome.com/

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

<script src="https://kit.fontawesome.com/49111f24b5.js" crossorigin="anonymous"></script>

script(src='https://kit.fontawesome.com/49111f24b5.js' crossorigin='anonymous')

main-layout.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title #{pageTitle}
        link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', integrity='sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh', crossorigin='anonymous')
        link(rel="stylesheet", href="/css/main.css")
        


    body 
        .wrapper
            .row 
                nav.col-2
                    a.blue(href="/")
                        i.fas.fa-dove 
                    a(href="/")
                        i.fas.fa-home 
                    a(href="/search")
                        i.fas.fa-search 
                    a(href="/notifications")
                        i.fas.fa-bell 
                    a(href="/messages")
                        i.fas.fa-envelope 
                    a(href="/profile")
                        i.fas.fa-user 
                    a(href="/logout")
                        i.fas.fa-sign-out-alt 

                .mainSectionContainer.col-10.col-md-8.col-lg-6
                    .titleContainer 
                        h1 #{pageTitle}
                    block content 

                .d-none.d-md-block.col-md-2.col-lg-4
                    span third column






        
        script(src='https://kit.fontawesome.com/49111f24b5.js' crossorigin='anonymous')
        script(src='https://code.jquery.com/jquery-3.6.0.min.js', integrity='sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=', crossorigin='anonymous')
        script(src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', integrity='sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo', crossorigin='anonymous')
        script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', integrity='sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6', crossorigin='anonymous')

main.css

:root{
    --blue: #1FA2F1;
    --buttonHoverBg:#d4edff;
    --lightGrey:rgb(230, 236, 240);
    --spacing:15px;
}

a{
    color: inherit;   
}

a:hover{
    color:inherit;
    text-decoration: none;
}

h1{
    font-size: 19px;
    font-weight: 800;
    margin: 0;
}




nav a:hover{
    background-color: var(--buttonHoverBg);
    color: var(--blue);
    border-radius: 50%;
}


nav{
    display:flex;
    flex-direction:column;
    align-items : flex-end;
    height:100%
    
}

nav a{
    padding: 10px;
    font-size: 30px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav a.blue{
    color: var(--blue);
}

.mainSectionContainer{
    padding: 0;
    border-left: 1px solid var(--lightGrey);
    border-right: 1px solid var(--lightGrey);
    display : flex;
    flex-direction: column;
}

.titleContainer {
    height : 53px;
    padding : 0 var(--spacing);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--lightGrey);
    flex-shrink: 0;
}

.titleContainer h1{
    flex:1;
}

저작자표시 비영리 변경금지