Initial commit
This commit is contained in:
commit
94a7c34aa8
|
|
@ -0,0 +1,4 @@
|
|||
{ pkgs ? import <nixpkgs> {} }:
|
||||
{
|
||||
reveal-md = pkgs.callPackage ./reveal-md { pkgs = pkgs; };
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{ pkgs ? import <nixpkgs> {} }:
|
||||
pkgs.mkYarnPackage rec {
|
||||
name = "reveal-md";
|
||||
src = pkgs.fetchFromGitHub {
|
||||
owner = "webpro";
|
||||
repo = "reveal-md";
|
||||
rev = "5.2.0";
|
||||
sha256 = "QaDTVBaEK3WvhHK0gkZLaDGLk8o5V9X8RbiGtRVVgQE=";
|
||||
};
|
||||
|
||||
packageJSON = "${src}/package.json";
|
||||
yarnLock = ./yarn.lock;
|
||||
yarnNix = ./yarn.nix;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,321 @@
|
|||
<link rel="stylesheet" href="./static/main.css"/>
|
||||
|
||||
<!-- .slide: data-background-color="#283681" -->
|
||||
|
||||
# ITGK Teori-kurs
|
||||
|
||||
<img src="./static/graphics/PVV-logo-blue.svg" width=40%/>
|
||||
|
||||
Note: Introduksjon
|
||||
|
||||
---
|
||||
|
||||
## <span class="red">⏺ **OBS:** Opptak</span>
|
||||
|
||||
Note:
|
||||
PVV sin youtube-kanal
|
||||
|
||||
selv-introduksjon
|
||||
|
||||
Angående forelesningen
|
||||
|
||||
---
|
||||
|
||||
## Generelt
|
||||
|
||||
Hva er IT
|
||||
|
||||
Kort Historie
|
||||
|
||||
---
|
||||
|
||||
Folk som er viktige
|
||||
|
||||
Von Neumann
|
||||
|
||||
---
|
||||
|
||||
<!-- .slide: data-auto-animate -->
|
||||
|
||||
### Begreper:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
- Transistorer
|
||||
- IC
|
||||
- PC
|
||||
- Hardware
|
||||
- Software
|
||||
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
- Operativsystem
|
||||
- Kernel
|
||||
- WWW/Internet
|
||||
- High level/Low level
|
||||
- Abstraksjon
|
||||
- bit <!-- .element: data-id="2" -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Note:
|
||||
Operativsystem -> Ressursallokering -> Kernel -> Grafisk brukergrensesnitt
|
||||
|
||||
----
|
||||
|
||||
<!-- .slide: data-auto-animate -->
|
||||
|
||||
- bit <!-- .element: data-id="2" -->
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
| Enhet | Størrelse |
|
||||
|------------|-------------------|
|
||||
| byte | 8 bits |
|
||||
| kilobyte | \\(1000\\) bytes |
|
||||
| megabyte | \\(10^6\\) bytes |
|
||||
| gigabyte | \\(10^9\\) bytes |
|
||||
| terabyte | \\(10^{12}\\) |
|
||||
| petabyte | \\(10^{15}\\) |
|
||||
| exabye | \\(10^{18}\\) |
|
||||
|
||||
</div>
|
||||
<div class="column"> <!-- .element: class="fragment" data-fragment-index="1" -->
|
||||
|
||||
| Enhet | Størrelse |
|
||||
|------------|-------------------|
|
||||
| byte | 8 bits |
|
||||
| kilobyte | \\(1000\\) bytes |
|
||||
| megabyte | \\(10^6\\) bytes |
|
||||
| gigabyte | \\(10^9\\) bytes |
|
||||
| terabyte | \\(10^{12}\\) |
|
||||
| petabyte | \\(10^{15}\\) |
|
||||
| exabye | \\(10^{18}\\) |
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
### Datatyper
|
||||
|
||||
- Integer
|
||||
- Character
|
||||
- Float
|
||||
- Array
|
||||
- String
|
||||
|
||||
Note:
|
||||
|
||||
char -> ASCII 7b, Extended ASCII 8b, UTF-8
|
||||
|
||||
Finnes flere, men disse
|
||||
|
||||
Objekter
|
||||
|
||||
---
|
||||
|
||||
Tallsystemer
|
||||
|
||||
Forventet å kunne octal, binær, heksadesimal
|
||||
|
||||
går tom for siffer
|
||||
|
||||
delbarhet
|
||||
|
||||
hexadesimal i 4 binær chunks om gangen
|
||||
octal i 3 binær chunks om gangen
|
||||
revers
|
||||
|
||||
Note:
|
||||
lurt å trene på
|
||||
|
||||
brukt ca. 20 min
|
||||
|
||||
---
|
||||
|
||||
*Slide med konversjon fra binær til octal og heksadesimal*
|
||||
|
||||
---
|
||||
|
||||
Negative tall
|
||||
|
||||
Signed magnitude
|
||||
|
||||
bruker første biten
|
||||
|
||||
0000 = 1000
|
||||
kaster bort en plass
|
||||
|
||||
Løsning: Twos complement:
|
||||
|
||||
0001 = 1
|
||||
0000 = 0
|
||||
1111 = -1
|
||||
|
||||
1000 = MIN_INT
|
||||
|
||||
Algoritme:
|
||||
- finn ut hva minste negative tall er
|
||||
- ta resten av bitsene, og konverter til desimal
|
||||
- regn ut offsett
|
||||
|
||||
---
|
||||
|
||||
Flyttall
|
||||
|
||||
Matematisk tilnærming
|
||||
|
||||
Signed bit, exponent - 2^?, signifikant?
|
||||
|
||||
består av 3 biter, kan gi rare utregninger iblant
|
||||
|
||||
---
|
||||
|
||||
# Hardware
|
||||
|
||||
# Datamaskin
|
||||
|
||||
Består av mange forskjellige biter.
|
||||
datamaskin er bare et begrep vi bruker.
|
||||
Kan gå galt på veldig mange lag i prosessen.
|
||||
Moores law, antall transistorer i en IC dobles hver 2. år.
|
||||
|
||||
---
|
||||
|
||||
## Hovedkort (Motherboard)
|
||||
Limet som fester alle de andre bitene sammen.
|
||||
Inneholder litt logikk for konfigurasjon av alle bitene, men lite ellers.
|
||||
|
||||
<img src="./static/graphics/motherboard2.png" width="50%"/>
|
||||
|
||||
https://toppng.com/show_download/226517/motherboard-png-photos-intel-server-board-s7200a/large
|
||||
|
||||
---
|
||||
|
||||
## CPU
|
||||
Viktigste biten. Gjør alle beregningene.
|
||||
Består av 3 biter, kontrollenhet, minneenhet, ALU
|
||||
Kjører raskt, gHz
|
||||
Har et visst sett med ting den kan gjøre, kalt et instruksjonssett.
|
||||
Setter du disse på rad, så har du et program.
|
||||
|
||||
---
|
||||
|
||||
# Fetch Decode Execute Cycle (De 5 stegene)
|
||||
|
||||
*5 steg* hver gang den skal kjøre en instruksjon
|
||||
|
||||
PC - program counter
|
||||
Branching - hopp til andre steder/loop
|
||||
Kjører en instruksjon for hver klokkesykel, men gjør flere steg samtidig. Verdt å merke seg.
|
||||
|
||||
---
|
||||
|
||||
## Minne
|
||||
|
||||
Primær, sekundær-minne
|
||||
|
||||
Primær - RAM
|
||||
tilfeldig access - kan nå hvor som helst øyeblikkelig
|
||||
volatilt - uten strøm så forsvinner dataen.
|
||||
|
||||
Sekundær - Harddisk
|
||||
Tregt - cd som spinner
|
||||
Sekvensiell aksess - Må lete for å lese på riktig sted.
|
||||
ikke volatilt - holder på data uten strøm
|
||||
SSD - Nesten random access, ligner på ram, men er ikke volatil
|
||||
CD, DVD, Ekstern harddisk, USB, osv.
|
||||
|
||||
> https://www.pngall.com/ram-png/download/48267
|
||||
|
||||
> https://pixabay.com/vectors/hdd-hard-disk-drive-disk-hard-disk-154463/
|
||||
> https://pixabay.com/vectors/dvd-cd-rom-compact-disc-cd-digital-152917/
|
||||
> https://pixabay.com/vectors/usb-disk-disc-storage-technology-47552/
|
||||
|
||||
---
|
||||
|
||||
# Digital Representasjon
|
||||
|
||||
Analog vs Digital
|
||||
|
||||
Analog kan du måle bortimot så nøyaktig du vil
|
||||
Digital har et visst sett med 0 og 1
|
||||
|
||||
(bilde av lydbølge)
|
||||
|
||||
ADC - inn på computeren
|
||||
DAC - ut fra computeren
|
||||
|
||||
Note: Skal gå inn på diverse måter å representere ting digitalt på
|
||||
|
||||
---
|
||||
|
||||
# Piksler
|
||||
|
||||
Piksler er en måte å representere bilder
|
||||
En piksel er en liten bit av bildet, med en farge.
|
||||
Ofte tilsvarer 1 piksel 1 LED på skjermen
|
||||
Den fargen er representert som en sammensetning av 3 farger
|
||||
Pleier ofte å være RGB
|
||||
|
||||
----
|
||||
|
||||
## RGB
|
||||
|
||||
Hver verdi er mellom 0 og 255
|
||||
|
||||
Kan derfor representeres som et hexadecimal med 6 tegn
|
||||
|
||||
<style>
|
||||
.rgb-pvv {color: #283681;}
|
||||
.rgb-red {color: #FF0000;}
|
||||
.rgb-cof {color: #C0FFEE;}
|
||||
.rgb-whi {color: #FFFFFF;}
|
||||
.rgb-bla {color: #000000;}
|
||||
</style>
|
||||
|
||||
<div class="replacable-fragment">
|
||||
<div style="font-size: 0.8em;">
|
||||
|
||||
| Farge | Rød | Grønn | Blå |
|
||||
|--------------------------------------|---------------|---------------|---------------|
|
||||
| <span class="rgb-pvv">#283681</span> | 28\\(_{16}\\) | 36\\(_{16}\\) | 81\\(_{16}\\) |
|
||||
| <span class="rgb-red">#FF0000</span> | FF\\(_{16}\\) | 00\\(_{16}\\) | 00\\(_{16}\\) |
|
||||
| <span class="rgb-cof">#C0FFEE</span> | C0\\(_{16}\\) | FF\\(_{16}\\) | EE\\(_{16}\\) |
|
||||
| <span class="rgb-whi">#FFFFFF</span> | FF\\(_{16}\\) | FF\\(_{16}\\) | FF\\(_{16}\\) |
|
||||
| <span class="rgb-bla">#000000</span> | 00\\(_{16}\\) | 00\\(_{16}\\) | 00\\(_{16}\\) |
|
||||
|
||||
</div> <!-- .element: class="fragment fade-out" data-fragment-index="1" -->
|
||||
|
||||
<div style="font-size: 0.8em;">
|
||||
|
||||
| Farge | Rød | Grønn | Blå |
|
||||
|--------------------------------------|----------------|----------------|----------------|
|
||||
| <span class="rgb-pvv">#283681</span> | \\(40_{10}\\) | \\(54_{10}\\) | \\(129_{10}\\) |
|
||||
| <span class="rgb-red">#FF0000</span> | \\(255_{10}\\) | \\(0_{10}\\) | \\(0_{10}\\) |
|
||||
| <span class="rgb-cof">#C0FFEE</span> | \\(192_{10}\\) | \\(255_{10}\\) | \\(238_{10}\\) |
|
||||
| <span class="rgb-whi">#FFFFFF</span> | \\(255_{10}\\) | \\(255_{10}\\) | \\(255_{10}\\) |
|
||||
| <span class="rgb-bla">#000000</span> | \\(0 _{10}\\) | \\(0_{10}\\) | \\(0_{10}\\) |
|
||||
|
||||
</div> <!-- .element: class="fragment fade-in" data-fragment-index="1" -->
|
||||
</div>
|
||||
|
||||
Note:
|
||||
|
||||
Regn ut 1920x1080 x 24 bits
|
||||
|
||||
---
|
||||
|
||||
# PAUSE
|
||||
|
||||
---
|
||||
|
||||
|
||||
# Algoritmer
|
||||
# Nettverk
|
||||
# Programvareutvikling
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"highlightTheme": "monokai-sublime",
|
||||
"theme": "black"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"theme": "black",
|
||||
"transition": "slide",
|
||||
"controls": true,
|
||||
"progress": true,
|
||||
"keyboard": {"81": "toggleOverview"}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{ pkgs ? import <nixpkgs> {} }:
|
||||
with pkgs;
|
||||
mkShell {
|
||||
buildInputs = [
|
||||
(callPackage ./.nix { pkgs = pkgs; }).reveal-md
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="200mm"
|
||||
height="200mm"
|
||||
viewBox="0 0 200 200"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
sodipodi:docname="PVV-logo-blue.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#ffffff"
|
||||
borderopacity="1"
|
||||
inkscape:pageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.1588533"
|
||||
inkscape:cx="303.31707"
|
||||
inkscape:cy="345.16879"
|
||||
inkscape:window-width="2160"
|
||||
inkscape:window-height="1256"
|
||||
inkscape:window-x="2869"
|
||||
inkscape:window-y="-11"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
width="200mm" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
id="g98"
|
||||
transform="scale(0.25)">
|
||||
<g
|
||||
id="Layer_2"
|
||||
style="fill:#283681;fill-opacity:1">
|
||||
<rect
|
||||
y="0"
|
||||
class="st0"
|
||||
width="800"
|
||||
height="800"
|
||||
id="rect4"
|
||||
x="0"
|
||||
style="fill:#283681;fill-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="Layer_4">
|
||||
<path
|
||||
class="st1"
|
||||
d="M 294.6,720.3"
|
||||
id="path7" />
|
||||
<line
|
||||
class="st1"
|
||||
x1="478.39999"
|
||||
y1="720.29999"
|
||||
x2="313.20001"
|
||||
y2="720.29999"
|
||||
id="line9" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M 478.4,720.3"
|
||||
id="path11" />
|
||||
<polyline
|
||||
class="st2"
|
||||
points="717.1,223.3 717.1,720.3 497.3,720.3 "
|
||||
id="polyline13"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
<path
|
||||
class="st2"
|
||||
d="m 498.3,720.3 c 0,-5.6 -4.5,-10.1 -10.1,-10.1 -5.6,0 -10.1,4.5 -10.1,10.1 H 314.3 c 0,-5.6 -4.5,-10.1 -10.1,-10.1 -5.6,0 -10.1,4.5 -10.1,10.1 H 294.7 76.5 V 79.7 H 717 v 120.8 -0.8 h -17.3 v 24.8 H 717"
|
||||
id="path15"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="Layer_3">
|
||||
<circle
|
||||
class="st2"
|
||||
cx="396.79999"
|
||||
cy="400"
|
||||
r="320.29999"
|
||||
id="circle18"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="Layer_1">
|
||||
<polyline
|
||||
class="st2"
|
||||
points="514.5,173.5 170.2,173.5 170.3,626.6 623.3,626.5 623.3,215.7 584.4,173.4 557,173.4 548,180.6 526.5,180.7 "
|
||||
id="polyline21"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M 396.8,173.5"
|
||||
id="path23" />
|
||||
<path
|
||||
class="st1"
|
||||
d="M 396.8,173.3"
|
||||
id="path25" />
|
||||
<path
|
||||
class="st2"
|
||||
d="m 526.5,331.8 c 0,7.6 -5.4,13.7 -12,13.7 H 227.7 c -6.6,0 -12,-6.1 -12,-13.7 V 187.2 c 0,-7.6 5.4,-13.7 12,-13.7 h 286.8 c 6.6,0 12,6.1 12,13.7 z"
|
||||
id="path27"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
<path
|
||||
class="st2"
|
||||
d="m 526.7,333.6 c 0,6.6 -5.4,12 -12,12 H 296.8 c -6.6,0 -12,-5.4 -12,-12 V 185.5 c 0,-6.6 5.4,-12 12,-12 h 217.9 c 6.6,0 12,5.4 12,12 z"
|
||||
id="path29"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
<path
|
||||
class="st2"
|
||||
d="m 577.9,613.7 c 0,6.6 -5.4,12 -12,12 H 227.7 c -6.6,0 -12,-5.4 -12,-12 V 381.1 c 0,-6.6 5.4,-12 12,-12 h 338.2 c 6.6,0 12,5.4 12,12 z"
|
||||
id="path31"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
<rect
|
||||
x="179.89999"
|
||||
y="590.20001"
|
||||
class="st2"
|
||||
width="25.700001"
|
||||
height="23"
|
||||
id="rect33"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
<rect
|
||||
x="587.59998"
|
||||
y="590.20001"
|
||||
class="st2"
|
||||
width="25.700001"
|
||||
height="23"
|
||||
id="rect35"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
<rect
|
||||
x="433.60001"
|
||||
y="193.5"
|
||||
class="st2"
|
||||
width="64.900002"
|
||||
height="137.8"
|
||||
id="rect37"
|
||||
style="stroke:#ffffff;stroke-opacity:1" />
|
||||
</g>
|
||||
<g
|
||||
id="Layer_5">
|
||||
<rect
|
||||
x="258"
|
||||
y="442.5"
|
||||
class="st3"
|
||||
width="277.5"
|
||||
height="109.7"
|
||||
id="rect40" />
|
||||
<g
|
||||
aria-label="PVV"
|
||||
transform="translate(260.7021,547.998)"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:126px;font-family:OCRA;-inkscape-font-specification:OCRA;fill:#ffffff;stroke:#000000;stroke-miterlimit:10"
|
||||
id="text42">
|
||||
<path
|
||||
d="m 14.238,-6.426 c 0,3.528 2.772,6.426 6.3,6.426 3.528,0 6.426,-2.898 6.426,-6.426 v -30.996 h 30.87 c 10.458,0 19.152,-8.694 19.152,-19.152 v -22.68 c 0,-10.332 -8.694,-19.026 -19.152,-19.026 H 14.238 Z m 12.726,-43.722 v -35.406 h 30.87 c 3.276,0 6.426,2.898 6.426,6.3 v 22.68 c 0,3.528 -3.024,6.426 -6.426,6.426 z"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:126px;font-family:OCRA;-inkscape-font-specification:OCRA;fill:#ffffff;stroke:#000000;stroke-miterlimit:10"
|
||||
id="path55" />
|
||||
<path
|
||||
d="m 105.29269,-69.174 25.326,65.142 c 1.008,2.394 3.276,4.032 6.048,4.032 2.646,0 4.914,-1.638 5.922,-4.032 l 25.452,-65.268 v -22.68 c 0,-3.402 -2.898,-6.3 -6.426,-6.3 -3.528,0 -6.3,2.898 -6.3,6.3 v 20.286 l -18.648,47.628 -18.648,-47.628 V -91.98 c 0,-3.402 -2.898,-6.3 -6.426,-6.3 -3.528,0 -6.3,2.898 -6.3,6.3 z"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:126px;font-family:OCRA;-inkscape-font-specification:OCRA;fill:#ffffff;stroke:#000000;stroke-miterlimit:10"
|
||||
id="path57" />
|
||||
<path
|
||||
d="m 196.34737,-69.174 25.326,65.142 c 1.008,2.394 3.276,4.032 6.048,4.032 2.646,0 4.914,-1.638 5.922,-4.032 l 25.452,-65.268 v -22.68 c 0,-3.402 -2.898,-6.3 -6.426,-6.3 -3.528,0 -6.3,2.898 -6.3,6.3 v 20.286 l -18.648,47.628 -18.648,-47.628 V -91.98 c 0,-3.402 -2.898,-6.3 -6.426,-6.3 -3.528,0 -6.3,2.898 -6.3,6.3 z"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:126px;font-family:OCRA;-inkscape-font-specification:OCRA;fill:#ffffff;stroke:#000000;stroke-miterlimit:10"
|
||||
id="path59" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<style
|
||||
type="text/css"
|
||||
id="style2">
|
||||
.st0{fill:#ffffff;}
|
||||
.st1{fill:none;stroke:#ffffff;stroke-width:2;stroke-miterlimit:10;}
|
||||
.st2{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
|
||||
.st3{fill:none;}
|
||||
.st4{stroke:#000000;stroke-miterlimit:10;}
|
||||
.st5{font-family:'OCRAStd';}
|
||||
.st6{font-size:126px;}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.columns > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.replacable-fragment {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.replacable-fragment > div {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
Loading…
Reference in New Issue