Verified Commit 0cdff31c authored by Jakob Moser's avatar Jakob Moser
Browse files

Re-structure CSSs

parent fe5d8fc3

css/main.css

+60 −48
Changes for css/main.css: 60 added lines, 48 removed lines.
Original line number Diff line number Diff line 
@import url("/lib/fontawesome-free-6.5.2-web/css/all.min.css");



/* ----------------------- Variables ----------------------- */



:root {

    --shadow-width: 2px;

}



.blue {

    --primary: #144a8b;

    --primary-light: #387bd0;
@@ -10,14 +16,7 @@ 
    --primary-light: #2aac6d;

}



:root {

    --shadow-width: 2px;

}



::selection {

    background-color: var(--primary-light);

    color: white;

}

/* ---------------------- Scaffolding ---------------------- */



body {

    margin: 0;
@@ -58,10 +57,61 @@ main { 
    justify-items: center;

}



/* -------------------------- Text ------------------------- */



::selection {

    background-color: var(--primary-light);

    color: white;

}



code {

    font-family: "Inconsolata", monospace;

}



a {

    color: var(--primary);

}



/* ----------------------- Components ---------------------- */



.box {

    border-radius: 1em;

    box-shadow: var(--shadow-width) var(--shadow-width) 5px rgba(0, 0, 0, 0.5);

    background: radial-gradient(

        circle,

        rgba(255, 255, 255, 1) 0%,

        rgba(255, 255, 255, 0.85) 100%

    );

}



a.btn {

    height: 10em;

    width: 10em;



    margin-bottom: var(--shadow-width);

    margin-right: var(--shadow-width);



    display: grid;



    align-content: center;

    justify-items: center;



    row-gap: 1em;



    text-decoration: none;

}



a.btn > i {

    font-size: 200%;

}



a.btn:active {

    margin: var(--shadow-width) 0 0 var(--shadow-width);

    box-shadow: none;

}



/* ---------------------- Navigation ----------------------- */



nav {

    display: grid;

    grid-template-columns: 1fr max-content;
@@ -105,6 +155,8 @@ nav ul li:hover a { 
    border-color: var(--primary-light);

}



/* ------------------------- Stuff ------------------------- */



.services {

    display: grid;
@@ -122,16 +174,6 @@ nav ul li:hover a { 
    justify-items: center;

}



.box {

    border-radius: 1em;

    box-shadow: var(--shadow-width) var(--shadow-width) 5px rgba(0, 0, 0, 0.5);

    background: radial-gradient(

        circle,

        rgba(255, 255, 255, 1) 0%,

        rgba(255, 255, 255, 0.85) 100%

    );

}



article:not(.services) {

    padding: 3em 4em;

}
@@ -140,36 +182,6 @@ article h1 { 
    font-size: 200%;

}



a {

    color: var(--primary);

}



a.btn {

    height: 10em;

    width: 10em;



    margin-bottom: var(--shadow-width);

    margin-right: var(--shadow-width);



    display: grid;



    align-content: center;

    justify-items: center;



    row-gap: 1em;



    text-decoration: none;

}



a.btn > i {

    font-size: 200%;

}



a.btn:active {

    margin: var(--shadow-width) 0 0 var(--shadow-width);

    box-shadow: none;

}



.detail {

    display: block;

    color: rgba(255, 255, 255, 0.7);